refactor: start adding support for more filtering

This commit is contained in:
Anna 2021-10-05 13:07:59 -04:00
parent e6b9d0bea6
commit 4359190f9e
6 changed files with 3095 additions and 618 deletions

View File

@ -30,16 +30,70 @@ body {
display: flex;
flex-direction: column;
margin: 0;
font-family: sans-serif;
background-color: var(--background);
color: var(--text);
}
.js body {
margin: 1em 0 0;
}
.no-js .requires-js {
display: none;
visibility: hidden;
}
details {
margin-top: .5em;
}
details > summary {
cursor: pointer;
}
#container {
margin: 0 1em;
}
.filter-controls > div {
display: flex;
flex-flow: row wrap;
}
.filter-controls .control {
width: max-content;
flex: 0 1 auto;
margin-left: 1em;
}
.filter-controls .control > label {
display: flex;
flex-direction: column;
}
.filter-controls .control > label > * {
flex: 0 1 auto;
margin-top: .5em;
}
.js #listings {
border-top: 2px dashed var(--text);
margin-top: 1em;
}
#listings > .no-listings {
margin-top: 1em;
}
#listings > .listing {
display: grid;
grid-template-columns: 3fr auto 2fr;
gap: 1em;
margin: 0 -1em;
padding: 1em;
background-color: var(--row-background);

View File

@ -1,45 +1,78 @@
(function () {
let select = document.getElementById('data-centre-filter');
let data_centres = [];
for (let elem of document.querySelectorAll('#listings > .listing')) {
let centre = elem.dataset['centre'];
if (data_centres.indexOf(centre) === -1) {
data_centres.push(centre);
}
function addJsClass() {
document.children[0].className = 'js';
}
data_centres.sort();
for (let centre of data_centres) {
let opt = document.createElement('option');
opt.innerText = centre;
select.appendChild(opt);
function setUpList() {
let options = {
valueNames: [
'duty',
'creator',
'description',
{data: ['centre']},
],
};
return new List('container', options);
}
let options = {
valueNames: [
'duty',
'creator',
'description',
{data: ['centre']},
],
};
let list = new List('container', options);
function setUpDataCentreFilter(list) {
let select = document.getElementById('data-centre-filter');
select.addEventListener('change', () => {
let centre = select.value;
if (centre === 'All') {
list.filter();
return;
let data_centres = [];
for (let elem of document.querySelectorAll('#listings > .listing')) {
let centre = elem.dataset['centre'];
if (!data_centres.includes(centre)) {
data_centres.push(centre);
}
}
console.log(`looking for ${centre}`);
data_centres.sort();
for (let centre of data_centres) {
let opt = document.createElement('option');
opt.innerText = centre;
select.appendChild(opt);
}
list.filter(item => {
console.log(item.values().centre === centre)
return item.values().centre === centre;
// console.log(item.elm.dataset['centre']);
// return item.elm.dataset['centre'] === centre;
select.addEventListener('change', () => {
let centre = select.value;
if (centre === 'All') {
list.filter();
return;
}
list.filter(item => item.values().centre === centre);
});
});
}
function setUpCategoryFilter(list) {
let select = document.getElementById('category-filter');
select.addEventListener('change', () => {
let allowed = [];
for (let option of select.options) {
if (!option.selected) {
continue;
}
let type = option.dataset.type;
let category = option.dataset.category;
allowed.push(`${type}/${category}`);
}
list.filter(item => {
let data = item.elm.dataset;
let type = data.type;
let category = data.category;
return allowed.includes(`${type}/${category}`);
});
});
}
addJsClass();
let list = setUpList();
setUpDataCentreFilter(list);
setUpCategoryFilter(list);
})();

File diff suppressed because it is too large Load Diff

View File

@ -55,8 +55,8 @@ impl PartyFinderListing {
(DutyType::Other, DutyCategory::TheHunt) => return Cow::from("The Hunt"),
(DutyType::Other, DutyCategory::Duty) if self.duty == 0 => return Cow::from("None"),
(DutyType::Normal, _) => {
if let Some(&name) = crate::ffxiv::DUTIES.get(&u32::from(self.duty)) {
return Cow::from(name);
if let Some(info) = crate::ffxiv::DUTIES.get(&u32::from(self.duty)) {
return Cow::from(info.name);
}
}
(DutyType::Roulette, _) => {
@ -188,7 +188,7 @@ impl PartyFinderSlot {
}
}
#[derive(Debug, Deserialize_repr, Serialize_repr, PartialEq)]
#[derive(Debug, Clone, Copy, Deserialize_repr, Serialize_repr, PartialEq)]
#[repr(u32)]
pub enum DutyCategory {
Duty = 0,
@ -201,7 +201,13 @@ pub enum DutyCategory {
AdventuringForays = 1 << 6,
}
#[derive(Debug, Deserialize_repr, Serialize_repr, PartialEq)]
impl DutyCategory {
pub fn as_u32(self) -> u32 {
unsafe { std::mem::transmute(self) }
}
}
#[derive(Debug, Clone, Copy, Deserialize_repr, Serialize_repr, PartialEq)]
#[repr(u8)]
pub enum DutyType {
Other = 0,
@ -209,6 +215,12 @@ pub enum DutyType {
Normal = 1 << 1,
}
impl DutyType {
pub fn as_u8(self) -> u8 {
unsafe { std::mem::transmute(self) }
}
}
bitflags! {
#[derive(Deserialize, Serialize)]
#[serde(transparent)]

View File

@ -1,11 +1,11 @@
<!doctype html>
<html lang="en">
<html lang="en" class="no-js">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/assets/minireset.css"/>
{%- block head %}{% endblock %}
{%- block head %}{% endblock -%}
</head>
<body>{% block body %}{% endblock %}</body>
</html>

View File

@ -8,25 +8,66 @@ Remote Party Finder
<link rel="stylesheet" href="/assets/listings.css"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
<script defer src="/assets/listings.js"></script>
{%- endblock %}
{% endblock %}
{% block body %}
<div id="container">
<input type="search" class="search" placeholder="Search"/>
<select id="data-centre-filter">
<option>All</option>
</select>
{%- if containers.is_empty() %}
<br/>
<em>No listings - download the plugin to help contribute!</em>
{%- endif %}
<div class="requires-js">
<input type="search" class="search" placeholder="Search"/>
<select id="data-centre-filter">
<option>All</option>
</select>
<details class="filter-controls">
<summary>Advanced</summary>
<div>
<div class="control">
<label>
Categories
<select multiple id="category-filter">
<option data-type="0" data-category="0">None</option>
<option data-type="1" data-category="0">Duty Roulette</option>
<option data-type="" data-category="">Dungeons</option>
<option data-type="" data-category="">Guildhests</option>
<option data-type="" data-category="">Trials</option>
<option data-type="" data-category="">Raids</option>
<option data-type="" data-category="">High-end Duty</option>
<option data-type="" data-category="">PvP</option>
<option data-type="0" data-category="1">Quest Battles</option>
<option data-type="0" data-category="2">FATEs</option>
<option data-type="0" data-category="4">Treasure Hunt</option>
<option data-type="0" data-category="8">The Hunt</option>
<option data-type="0" data-category="16">Gathering Forays</option>
<option data-type="0" data-category="32">Deep Dungeons</option>
<option data-type="0" data-category="64">Adventuring Forays</option>
</select>
</label>
</div>
<div class="control">
<label>
Categories
<select multiple>
<option>Lul</option>
<option>Wut</option>
<option>Uwu</option>
<option>Owo</option>
</select>
</label>
</div>
</div>
</details>
</div>
<div id="listings" class="list">
{%- if containers.is_empty() %}
<em class="no-listings">No listings - download the plugin to help contribute!</em>
{%- endif %}
{%- for container in containers %}
{%- let listing = container.listing.borrow() %}
<div
class="listing"
data-id="{{ listing.id }}"
data-centre="{{ listing.data_centre_name().unwrap_or_default() }}">
data-centre="{{ listing.data_centre_name().unwrap_or_default() }}"
data-type="{{ listing.duty_type.as_u8() }}"
data-category="{{ listing.category.as_u32() }}">
<div class="left">
{%- let duty_class %}
{%- if listing.is_cross_world() %}