Chellaris/chellaris-sign-up-site
Chellaris/chellaris-sign-up-site
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

Removal of LocalStorage from Dropdowns, Dynamic Dropdown population

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

155
src/routes/graphs/GameGroupSelection.svelte
View file

@ -1,99 +1,106 @@
<script lang="ts"> <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 DropDownElement from '$lib/components/DropDownElement.svelte';
import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter'; 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 selectedGameGroups: Array<string> = [];
let selectedGameGroupsMap: Map<string, Array<string>> = new Map(); let selectedGameGroupsMap: Map<string, Array<string>> = new Map();
let store: string | null;
SelectedGameStore.subscribe((selection) => { let gameGroups: Map<string, ChellarisGameGroup> = new Map();
selectedGame = selection; let chellarisData: ChellarisInfo = {
if (selectedGameGroupsMap.size != 0) { games: new Map(),
const tmp = selectedGameGroupsMap.get(selectedGame); ethics: [],
if (typeof tmp !== "undefined") { portraits: []
selectedGameGroups = [...tmp.values()]; };
} let store: string | null;
// Chellaris Data Code
const updateGameGroups = () => {
let tmpData;
if (selectedGame == "") {
tmpData = chellarisData.games.get(chellarisData.games.keys().next().value);
} }
}) else {
tmpData = chellarisData.games.get(selectedGame);
if (typeof localStorage !== 'undefined') { }
store = localStorage.getItem('gameGroupSelection');
if (typeof tmpData !== 'undefined') {
if (typeof store == 'string') { console.log(tmpData.groups);
let selectedGameGroupsMap = new Map<string, Array<string>>(JSON.parse(store)); gameGroups = tmpData.groups;
const tmp = selectedGameGroupsMap.get(selectedGame);
if (typeof tmp !== "undefined") {
selectedGameGroups = [...tmp.values()];
}
SelectedGameGroupsStore.set(selectedGameGroupsMap);
} }
} }
ChellarisDataStore.subscribe((data) => {
chellarisData = data;
SelectedGameGroupsStore.subscribe((selection) => { updateGameGroups();
selectedGameGroupsMap = selection; // TODO Update selection if Groups Differ? Does this value ever even update without a full page reload?
const tmp = selection.get(selectedGame); });
if (typeof tmp !== "undefined") {
selectedGameGroups = [...tmp.values()];
}
if (typeof localStorage !== 'undefined') { // Group Selection Code
localStorage.setItem('gameGroupSelection', JSON.stringify(Array.from(selection.entries()))); 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 = () => { const updateGameGroupSelection = () => {
SelectedGameGroupsStore.update((selection) => selection.set(selectedGame, selectedGameGroups)); SelectedGameGroupsStore.update((selection) => selection.set(selectedGame, selectedGameGroups));
}; };
const dropdownId = crypto.randomUUID(); const dropdownId = crypto.randomUUID();
</script> </script>
<DropDown dropdownId={dropdownId} dropdownTitle="Group Selection"> <DropDown {dropdownId} dropdownTitle="Group Selection">
<DropDownElement dropdownId={dropdownId}> {#each gameGroups as group}
<input <DropDownElement {dropdownId}>
id="checkboxGameGroupA" <input
data-dropdown={dropdownId} id={'checkbox' + group[0]}
type="checkbox" data-dropdown={dropdownId}
bind:group={selectedGameGroups} type="checkbox"
on:change={updateGameGroupSelection} bind:group={selectedGameGroups}
value="A" on:change={updateGameGroupSelection}
/> value={group[0]}
<label for="checkboxGameGroupA" data-dropdown={dropdownId}>Group A</label> />
</DropDownElement> <label for={'checkbox' + group[0]} data-dropdown={dropdownId}>{group[1].name}</label>
<DropDownElement dropdownId={dropdownId}> </DropDownElement>
<input {/each}
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> </DropDown>
<style> <style>
:checked + label { :checked + label {
color: var(--color-active-2); color: var(--color-active-2);
} }
:hover { :hover {
color: var(--color-active-1) !important; color: var(--color-active-1) !important;
} }
</style> </style>

70
src/routes/graphs/GameSelection.svelte
View file

@ -1,24 +1,23 @@
<script lang="ts"> <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 DropDownElement from '$lib/components/DropDownElement.svelte';
import SelectedGameStore from '$lib/stores/GameFilter'; import SelectedGameStore from '$lib/stores/GameFilter';
import ChellarisDataStore from '$lib/stores/ChellarisData';
import type { ChellarisGame } from '$lib/types/chellaris';
let selectedGame: string = ""; let selectedGame = '';
let store: string | null; let gameList: Map<string, ChellarisGame> = new Map();
if (typeof localStorage !== 'undefined') { // Chellaris Data Code
store = localStorage.getItem('gameSelection'); ChellarisDataStore.subscribe((data) => {
gameList = data.games;
if (typeof store == 'string') { });
selectedGame = JSON.parse(store);
SelectedGameStore.set(selectedGame);
}
}
// Game Selection Code
SelectedGameStore.subscribe((selection) => { SelectedGameStore.subscribe((selection) => {
selectedGame = selection; selectedGame = selection;
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
localStorage.setItem('gameSelection', JSON.stringify(selectedGame)); localStorage.setItem('gameSelection', JSON.stringify(selectedGame));
} }
}); });
@ -27,37 +26,28 @@
SelectedGameStore.update(() => selectedGame); SelectedGameStore.update(() => selectedGame);
}; };
const dropdownId = crypto.randomUUID(); // Dropdown UUID to make the Click Event work properly
const dropdownId = crypto.randomUUID();
</script> </script>
<DropDown dropdownId={dropdownId} dropdownTitle="Game Selection"> <DropDown {dropdownId} dropdownTitle="Game Selection">
<DropDownElement dropdownId={dropdownId}> {#each gameList as game}
<input <DropDownElement {dropdownId}>
id="checkboxGameGroupA" <input
data-dropdown={dropdownId} id={'checkbox' + game[0]}
type="radio" data-dropdown={dropdownId}
bind:group={selectedGame} type="radio"
on:change={updateGameSelection} bind:group={selectedGame}
value="16" on:change={updateGameSelection}
/> value={game[0]}
<label for="checkboxGameGroupA" data-dropdown={dropdownId}>Game 16</label> />
</DropDownElement> <label for={'checkbox' + game[0]} data-dropdown={dropdownId}>{game[1].name}</label>
<DropDownElement dropdownId={dropdownId}> </DropDownElement>
<input {/each}
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> </DropDown>
<style> <style>
label:hover { label:hover {
color: var(--color-active-1); color: var(--color-active-1);
} }
</style> </style>