feat: finish category filtering
This commit is contained in:
parent
51f80101bf
commit
de3718be31
|
@ -1,8 +1,87 @@
|
|||
(function () {
|
||||
let stateWasNull = false;
|
||||
|
||||
const state = {
|
||||
allowed: {},
|
||||
centre: "All",
|
||||
list: null,
|
||||
};
|
||||
|
||||
const categoryDefaults = {
|
||||
type: 0,
|
||||
category: 0,
|
||||
highEnd: false,
|
||||
contentKind: -1,
|
||||
};
|
||||
|
||||
function addJsClass() {
|
||||
document.children[0].className = 'js';
|
||||
}
|
||||
|
||||
function saveLoadState() {
|
||||
let saved = localStorage.getItem('state');
|
||||
if (saved !== null) {
|
||||
try {
|
||||
saved = JSON.parse(saved);
|
||||
} catch (e) {
|
||||
saved = {}
|
||||
stateWasNull = true;
|
||||
}
|
||||
|
||||
for (let key in saved) {
|
||||
state[key] = saved[key];
|
||||
}
|
||||
} else {
|
||||
stateWasNull = true;
|
||||
}
|
||||
|
||||
window.addEventListener('pagehide', () => {
|
||||
let copy = {};
|
||||
for (let key in state) {
|
||||
if (key === 'list') {
|
||||
continue;
|
||||
}
|
||||
|
||||
copy[key] = state[key];
|
||||
}
|
||||
|
||||
localStorage.setItem('state', JSON.stringify(copy));
|
||||
});
|
||||
}
|
||||
|
||||
function getOptionValues(option) {
|
||||
return {
|
||||
type: option.dataset.type || categoryDefaults.type,
|
||||
category: option.dataset.category || categoryDefaults.category,
|
||||
highEnd: option.dataset.highEnd || categoryDefaults.highEnd,
|
||||
contentKind: option.dataset.contentKind || categoryDefaults.contentKind,
|
||||
};
|
||||
}
|
||||
|
||||
function reflectState() {
|
||||
let category = document.getElementById('category-filter');
|
||||
for (let option of category.options) {
|
||||
let values = getOptionValues(option);
|
||||
let key = `${values.type}/${values.category}/${values.highEnd}`;
|
||||
if (state.allowed[key] === undefined) {
|
||||
if (stateWasNull) {
|
||||
state.allowed[key] = [];
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (stateWasNull) {
|
||||
state.allowed[key].push(values.contentKind);
|
||||
}
|
||||
|
||||
option.selected = state.allowed[key].includes(-1) || state.allowed[key].includes(values.contentKind);
|
||||
}
|
||||
|
||||
let dataCentre = document.getElementById('data-centre-filter');
|
||||
dataCentre.value = state.centre;
|
||||
}
|
||||
|
||||
function setUpList() {
|
||||
let options = {
|
||||
valueNames: [
|
||||
|
@ -15,7 +94,30 @@
|
|||
return new List('container', options);
|
||||
}
|
||||
|
||||
function setUpDataCentreFilter(list) {
|
||||
function refilter() {
|
||||
function categoryFilter(item) {
|
||||
let data = item.elm.dataset;
|
||||
let type = data.type;
|
||||
let category = data.category;
|
||||
let highEnd = data.highEnd;
|
||||
let contentKind = data.contentKind;
|
||||
|
||||
let allowedContentKind = state.allowed[`${type}/${category}/${highEnd}`];
|
||||
if (allowedContentKind === undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return allowedContentKind.includes(-1) || allowedContentKind.includes(contentKind);
|
||||
}
|
||||
|
||||
function dataCentreFilter(item) {
|
||||
return state.centre === "All" || state.centre === item.values().centre;
|
||||
}
|
||||
|
||||
state.list.filter(item => dataCentreFilter(item) && categoryFilter(item));
|
||||
}
|
||||
|
||||
function setUpDataCentreFilter() {
|
||||
let select = document.getElementById('data-centre-filter');
|
||||
|
||||
let data_centres = [];
|
||||
|
@ -34,45 +136,44 @@
|
|||
}
|
||||
|
||||
select.addEventListener('change', () => {
|
||||
let centre = select.value;
|
||||
if (centre === 'All') {
|
||||
list.filter();
|
||||
return;
|
||||
}
|
||||
|
||||
list.filter(item => item.values().centre === centre);
|
||||
state.centre = select.value;
|
||||
refilter();
|
||||
});
|
||||
}
|
||||
|
||||
function setUpCategoryFilter(list) {
|
||||
function setUpCategoryFilter() {
|
||||
let select = document.getElementById('category-filter');
|
||||
|
||||
select.addEventListener('change', () => {
|
||||
let allowed = [];
|
||||
let allowed = new Map();
|
||||
|
||||
for (let option of select.options) {
|
||||
if (!option.selected) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let type = option.dataset.type;
|
||||
let category = option.dataset.category;
|
||||
let values = getOptionValues(option);
|
||||
|
||||
allowed.push(`${type}/${category}`);
|
||||
let key = `${values.type}/${values.category}/${values.highEnd}`;
|
||||
if (allowed[key] === undefined) {
|
||||
allowed[key] = [];
|
||||
}
|
||||
|
||||
if (!allowed[key].includes(values.contentKind)) {
|
||||
allowed[key].push(values.contentKind);
|
||||
}
|
||||
}
|
||||
|
||||
list.filter(item => {
|
||||
let data = item.elm.dataset;
|
||||
let type = data.type;
|
||||
let category = data.category;
|
||||
|
||||
return allowed.includes(`${type}/${category}`);
|
||||
});
|
||||
state.allowed = allowed;
|
||||
refilter();
|
||||
});
|
||||
}
|
||||
|
||||
addJsClass();
|
||||
let list = setUpList();
|
||||
setUpDataCentreFilter(list);
|
||||
setUpCategoryFilter(list);
|
||||
saveLoadState();
|
||||
reflectState();
|
||||
state.list = setUpList();
|
||||
setUpDataCentreFilter();
|
||||
setUpCategoryFilter();
|
||||
refilter();
|
||||
})();
|
||||
|
|
|
@ -67,6 +67,36 @@ impl ContentKind {
|
|||
x => Self::Other(x),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn as_u32(self) -> u32 {
|
||||
match self {
|
||||
Self::DutyRoulette => 1,
|
||||
Self::Dungeons => 2,
|
||||
Self::Guildhests => 3,
|
||||
Self::Trials => 4,
|
||||
Self::Raids => 5,
|
||||
Self::PvP => 6,
|
||||
Self::QuestBattles => 7,
|
||||
Self::FATEs => 8,
|
||||
Self::TreasureHunt => 9,
|
||||
Self::Levequests => 10,
|
||||
Self::GrandCompany => 11,
|
||||
Self::Companions => 12,
|
||||
Self::BeastTribeQuests => 13,
|
||||
Self::OverallCompletion => 14,
|
||||
Self::PlayerCommendation => 15,
|
||||
Self::DisciplesoftheLand => 16,
|
||||
Self::DisciplesoftheHand => 17,
|
||||
Self::RetainerVentures => 18,
|
||||
Self::GoldSaucer => 19,
|
||||
Self::DeepDungeons => 21,
|
||||
Self::WondrousTails => 24,
|
||||
Self::CustomDeliveries => 25,
|
||||
Self::Eureka => 26,
|
||||
Self::UltimateRaids => 28,
|
||||
Self::Other(x) => x,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lazy_static::lazy_static! {
|
||||
|
|
|
@ -24,32 +24,21 @@ Remote Party Finder
|
|||
<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>
|
||||
<option>None</option>
|
||||
<option data-type="1">Duty Roulette</option>
|
||||
<option data-type="2" data-content-kind="2">Dungeons</option>
|
||||
<option data-type="2" data-content-kind="3">Guildhests</option>
|
||||
<option data-type="2" data-content-kind="4">Trials</option>
|
||||
<option data-type="2" data-content-kind="5">Raids</option>
|
||||
<option data-type="2" data-high-end="true">High-end Duty</option>
|
||||
<option data-type="2" data-content-kind="6">PvP</option>
|
||||
<option data-category="1">Quest Battles</option>
|
||||
<option data-category="2">FATEs</option>
|
||||
<option data-category="4">Treasure Hunt</option>
|
||||
<option data-category="8">The Hunt</option>
|
||||
<option data-type="2" data-category="16">Gathering Forays</option>
|
||||
<option data-type="2" data-category="32">Deep Dungeons</option>
|
||||
<option data-type="2" data-category="64">Adventuring Forays</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue