Removal of LocalStorage from Dropdowns, Dynamic Dropdown population

This commit is contained in:
Neshura 2023-08-13 03:25:16 +02:00
parent 5632ab72d2
commit a0ff62377c
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 111 additions and 114 deletions

View file

@ -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>

View file

@ -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>