Removal of LocalStorage from Dropdowns, Dynamic Dropdown population
This commit is contained in:
parent
5632ab72d2
commit
a0ff62377c
GPG key ID:
B6983AAA6B9A7A6C
2 changed files with 111 additions and 114 deletions
|
|
@ -1,99 +1,106 @@
|
|||
<script lang="ts">
|
||||
import DropDown from '$lib/components/DropDown.svelte';
|
||||
import DropDown from '$lib/components/DropDown.svelte';
|
||||
import DropDownElement from '$lib/components/DropDownElement.svelte';
|
||||
import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter';
|
||||
import SelectedGameStore from '$lib/stores/GameFilter';
|
||||
import SelectedGameStore from '$lib/stores/GameFilter';
|
||||
import ChellarisDataStore from '$lib/stores/ChellarisData';
|
||||
import type { ChellarisGame, ChellarisGameGroup, ChellarisInfo } from '$lib/types/chellaris';
|
||||
|
||||
let selectedGame: string = "";
|
||||
let selectedGame: string = '';
|
||||
let selectedGameGroups: Array<string> = [];
|
||||
let selectedGameGroupsMap: Map<string, Array<string>> = new Map();
|
||||
let store: string | null;
|
||||
let selectedGameGroupsMap: Map<string, Array<string>> = new Map();
|
||||
|
||||
SelectedGameStore.subscribe((selection) => {
|
||||
selectedGame = selection;
|
||||
if (selectedGameGroupsMap.size != 0) {
|
||||
const tmp = selectedGameGroupsMap.get(selectedGame);
|
||||
if (typeof tmp !== "undefined") {
|
||||
selectedGameGroups = [...tmp.values()];
|
||||
}
|
||||
let gameGroups: Map<string, ChellarisGameGroup> = new Map();
|
||||
let chellarisData: ChellarisInfo = {
|
||||
games: new Map(),
|
||||
ethics: [],
|
||||
portraits: []
|
||||
};
|
||||
let store: string | null;
|
||||
|
||||
// Chellaris Data Code
|
||||
const updateGameGroups = () => {
|
||||
let tmpData;
|
||||
if (selectedGame == "") {
|
||||
tmpData = chellarisData.games.get(chellarisData.games.keys().next().value);
|
||||
}
|
||||
})
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
store = localStorage.getItem('gameGroupSelection');
|
||||
|
||||
if (typeof store == 'string') {
|
||||
let selectedGameGroupsMap = new Map<string, Array<string>>(JSON.parse(store));
|
||||
const tmp = selectedGameGroupsMap.get(selectedGame);
|
||||
if (typeof tmp !== "undefined") {
|
||||
selectedGameGroups = [...tmp.values()];
|
||||
}
|
||||
SelectedGameGroupsStore.set(selectedGameGroupsMap);
|
||||
else {
|
||||
tmpData = chellarisData.games.get(selectedGame);
|
||||
}
|
||||
|
||||
if (typeof tmpData !== 'undefined') {
|
||||
console.log(tmpData.groups);
|
||||
gameGroups = tmpData.groups;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ChellarisDataStore.subscribe((data) => {
|
||||
chellarisData = data;
|
||||
|
||||
SelectedGameGroupsStore.subscribe((selection) => {
|
||||
selectedGameGroupsMap = selection;
|
||||
const tmp = selection.get(selectedGame);
|
||||
if (typeof tmp !== "undefined") {
|
||||
selectedGameGroups = [...tmp.values()];
|
||||
}
|
||||
updateGameGroups();
|
||||
// TODO Update selection if Groups Differ? Does this value ever even update without a full page reload?
|
||||
});
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('gameGroupSelection', JSON.stringify(Array.from(selection.entries())));
|
||||
// Group Selection Code
|
||||
const updateSelectedGroups = () => {
|
||||
const tmp = selectedGameGroupsMap.get(selectedGame);
|
||||
if (typeof tmp !== 'undefined') {
|
||||
selectedGameGroups = [...tmp.values()];
|
||||
} else {
|
||||
selectedGameGroups = [...gameGroups.keys()];
|
||||
selectedGameGroupsMap.set(selectedGame, selectedGameGroups);
|
||||
SelectedGameGroupsStore.set(selectedGameGroupsMap);
|
||||
}
|
||||
};
|
||||
|
||||
SelectedGameStore.subscribe((selection) => {
|
||||
selectedGame = selection;
|
||||
|
||||
updateGameGroups();
|
||||
|
||||
if (selectedGameGroupsMap.size != 0) {
|
||||
updateSelectedGroups();
|
||||
}
|
||||
});
|
||||
|
||||
SelectedGameGroupsStore.subscribe((selection) => {
|
||||
selectedGameGroupsMap = selection;
|
||||
updateSelectedGroups();
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('gameGroupSelection', JSON.stringify(Array.from(selection.entries())));
|
||||
}
|
||||
});
|
||||
|
||||
const updateGameGroupSelection = () => {
|
||||
SelectedGameGroupsStore.update((selection) => selection.set(selectedGame, selectedGameGroups));
|
||||
};
|
||||
|
||||
const dropdownId = crypto.randomUUID();
|
||||
const dropdownId = crypto.randomUUID();
|
||||
</script>
|
||||
|
||||
<DropDown dropdownId={dropdownId} dropdownTitle="Group Selection">
|
||||
<DropDownElement dropdownId={dropdownId}>
|
||||
<input
|
||||
id="checkboxGameGroupA"
|
||||
data-dropdown={dropdownId}
|
||||
type="checkbox"
|
||||
bind:group={selectedGameGroups}
|
||||
on:change={updateGameGroupSelection}
|
||||
value="A"
|
||||
/>
|
||||
<label for="checkboxGameGroupA" data-dropdown={dropdownId}>Group A</label>
|
||||
</DropDownElement>
|
||||
<DropDownElement dropdownId={dropdownId}>
|
||||
<input
|
||||
id="checkboxGameGroupB"
|
||||
data-dropdown={dropdownId}
|
||||
type="checkbox"
|
||||
bind:group={selectedGameGroups}
|
||||
on:change={updateGameGroupSelection}
|
||||
value="B"
|
||||
/>
|
||||
<label for="checkboxGameGroupB" data-dropdown={dropdownId}>Group B</label>
|
||||
</DropDownElement>
|
||||
<DropDownElement dropdownId={dropdownId}>
|
||||
<input
|
||||
id="checkboxGameGroupNA"
|
||||
data-dropdown={dropdownId}
|
||||
type="checkbox"
|
||||
bind:group={selectedGameGroups}
|
||||
on:change={updateGameGroupSelection}
|
||||
value="N/A"
|
||||
/>
|
||||
<label for="checkboxGameGroupNA" data-dropdown={dropdownId}>Ungrouped</label>
|
||||
</DropDownElement>
|
||||
<DropDown {dropdownId} dropdownTitle="Group Selection">
|
||||
{#each gameGroups as group}
|
||||
<DropDownElement {dropdownId}>
|
||||
<input
|
||||
id={'checkbox' + group[0]}
|
||||
data-dropdown={dropdownId}
|
||||
type="checkbox"
|
||||
bind:group={selectedGameGroups}
|
||||
on:change={updateGameGroupSelection}
|
||||
value={group[0]}
|
||||
/>
|
||||
<label for={'checkbox' + group[0]} data-dropdown={dropdownId}>{group[1].name}</label>
|
||||
</DropDownElement>
|
||||
{/each}
|
||||
</DropDown>
|
||||
|
||||
<style>
|
||||
:checked + label {
|
||||
color: var(--color-active-2);
|
||||
}
|
||||
:checked + label {
|
||||
color: var(--color-active-2);
|
||||
}
|
||||
|
||||
:hover {
|
||||
color: var(--color-active-1) !important;
|
||||
}
|
||||
:hover {
|
||||
color: var(--color-active-1) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
<script lang="ts">
|
||||
import DropDown from '$lib/components/DropDown.svelte';
|
||||
import DropDown from '$lib/components/DropDown.svelte';
|
||||
import DropDownElement from '$lib/components/DropDownElement.svelte';
|
||||
import SelectedGameStore from '$lib/stores/GameFilter';
|
||||
import ChellarisDataStore from '$lib/stores/ChellarisData';
|
||||
import type { ChellarisGame } from '$lib/types/chellaris';
|
||||
|
||||
let selectedGame: string = "";
|
||||
let store: string | null;
|
||||
let selectedGame = '';
|
||||
let gameList: Map<string, ChellarisGame> = new Map();
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
store = localStorage.getItem('gameSelection');
|
||||
|
||||
if (typeof store == 'string') {
|
||||
selectedGame = JSON.parse(store);
|
||||
SelectedGameStore.set(selectedGame);
|
||||
}
|
||||
}
|
||||
// Chellaris Data Code
|
||||
ChellarisDataStore.subscribe((data) => {
|
||||
gameList = data.games;
|
||||
});
|
||||
|
||||
// Game Selection Code
|
||||
SelectedGameStore.subscribe((selection) => {
|
||||
selectedGame = selection;
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('gameSelection', JSON.stringify(selectedGame));
|
||||
}
|
||||
});
|
||||
|
|
@ -27,37 +26,28 @@
|
|||
SelectedGameStore.update(() => selectedGame);
|
||||
};
|
||||
|
||||
const dropdownId = crypto.randomUUID();
|
||||
// Dropdown UUID to make the Click Event work properly
|
||||
const dropdownId = crypto.randomUUID();
|
||||
</script>
|
||||
|
||||
<DropDown dropdownId={dropdownId} dropdownTitle="Game Selection">
|
||||
<DropDownElement dropdownId={dropdownId}>
|
||||
<input
|
||||
id="checkboxGameGroupA"
|
||||
data-dropdown={dropdownId}
|
||||
type="radio"
|
||||
bind:group={selectedGame}
|
||||
on:change={updateGameSelection}
|
||||
value="16"
|
||||
/>
|
||||
<label for="checkboxGameGroupA" data-dropdown={dropdownId}>Game 16</label>
|
||||
</DropDownElement>
|
||||
<DropDownElement dropdownId={dropdownId}>
|
||||
<input
|
||||
id="checkboxGameGroupB"
|
||||
data-dropdown={dropdownId}
|
||||
type="radio"
|
||||
bind:group={selectedGame}
|
||||
on:change={updateGameSelection}
|
||||
value="17"
|
||||
/>
|
||||
<label for="checkboxGameGroupB" data-dropdown={dropdownId}>Game 17</label>
|
||||
</DropDownElement>
|
||||
<DropDown {dropdownId} dropdownTitle="Game Selection">
|
||||
{#each gameList as game}
|
||||
<DropDownElement {dropdownId}>
|
||||
<input
|
||||
id={'checkbox' + game[0]}
|
||||
data-dropdown={dropdownId}
|
||||
type="radio"
|
||||
bind:group={selectedGame}
|
||||
on:change={updateGameSelection}
|
||||
value={game[0]}
|
||||
/>
|
||||
<label for={'checkbox' + game[0]} data-dropdown={dropdownId}>{game[1].name}</label>
|
||||
</DropDownElement>
|
||||
{/each}
|
||||
</DropDown>
|
||||
|
||||
|
||||
<style>
|
||||
label:hover {
|
||||
color: var(--color-active-1);
|
||||
}
|
||||
label:hover {
|
||||
color: var(--color-active-1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Reference in a new issue