This repository has been archived on 2024-08-06. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
chellaris-sign-up-site/src/routes/admin/+page.svelte

597 lines
15 KiB
Svelte

<script lang="ts">
import { browser } from '$app/environment';
import LoadingSpinnerLocal from '$lib/components/LoadingSpinnerLocal.svelte';
import { apiBaseUrl } from '$lib/components/consts';
import AuthTokenStore from '$lib/stores/AuthTokenStore';
import AdminSelectedEmpireStore from '$lib/stores/admin-page/EmpireStore';
import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
import AdminSelectedGroupStore from '$lib/stores/admin-page/GroupStore';
import { createBlankEmpire, type ChellarisEmpire, type ChellarisGame, type ChellarisGameGroup } from '$lib/types/chellaris';
import EmpireDetails from './EmpireDetails.svelte';
import List from './List.svelte';
function delay(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export let data;
let auth = $AuthTokenStore;
// Game Variables
let newGameForm = false;
let addingNewGame = false;
let newGameName = '';
$: gameList = data.games;
let loadingGameData = false;
// Group Variables
let newGroupForm = false;
let addingNewGroup = false;
let newGroupName = '';
let groupList: { [key: number]: ChellarisGameGroup };
$: groupList = {};
// Empire Variables
let empireList: { [key: number]: ChellarisEmpire } = {};
let empireData: ChellarisEmpire;
let addingNewEmpire = false;
let loadingEmpireData = true;
const updateGameData = () => {
if (auth != '') {
fetch(apiBaseUrl + '/v3/game?game_id=' + $AdminSelectedGameStore, {
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
}
}).then((res) => {
res.json().then((data: { groups: { [key: number]: ChellarisGameGroup }; empires: { [key: number]: ChellarisEmpire } }) => {
groupList = data.groups;
empireList = {};
Object.values(data.empires).forEach((empire: ChellarisEmpire) => {
if (typeof $AdminSelectedGroupStore[$AdminSelectedGameStore] === 'undefined') {
$AdminSelectedGroupStore[$AdminSelectedGameStore] = {};
}
if (typeof $AdminSelectedGroupStore[$AdminSelectedGameStore][empire.group] !== 'undefined') {
empireList[empire.id] = empire;
}
});
delay(200).then(() => (loadingGameData = false));
delay(200).then(() => (loaded = true));
if (typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] !== 'undefined') {
loadEmpireData();
}
});
});
}
};
const loadEmpireData = () => {
fetch(apiBaseUrl + '/v3/empire?game_id=' + $AdminSelectedGameStore + '&empire_id=' + $AdminSelectedEmpireStore[$AdminSelectedGameStore], {
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
}
}).then((res) => {
res.json().then((data: ChellarisEmpire) => {
empireData = data;
delay(200).then(() => {
loadingEmpireData = false;
addingNewEmpire = false;
});
});
});
};
$: {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('adminGameSelection', JSON.stringify($AdminSelectedGameStore));
}
}
AdminSelectedGameStore.subscribe((game) => {
if (typeof game === 'undefined') {
game = Object.values(gameList)[0].id;
}
updateGameData();
loadingGameData = true;
});
$: {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('adminGroupSelection', JSON.stringify($AdminSelectedGroupStore));
}
}
$: {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('adminEmpireSelection', JSON.stringify($AdminSelectedEmpireStore));
}
}
// Game Functions
const getGameList = () => {
fetch(apiBaseUrl + '/v3/games').then((response) => response.json().then((result) => (gameList = result)));
};
const setActiveGame = (game: number) => {
$AdminSelectedGameStore = game;
};
const addGame = () => {
let newGame = {
game_name: newGameName
};
addingNewGame = true;
newGameForm = false;
fetch(apiBaseUrl + '/v3/game', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
},
body: JSON.stringify(newGame)
}).then((response) => {
getGameList();
addingNewGame = false;
newGameName = '';
response.json().then((result) => ($AdminSelectedGameStore = result.id));
});
};
const deleteGame = (game_id: number) => {
fetch(apiBaseUrl + '/v3/game?game_id=' + game_id, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
}
}).then(() => {
getGameList();
if ($AdminSelectedGameStore == game_id) {
$AdminSelectedGameStore = Object.values(gameList)[0].id;
}
});
delete gameList[game_id];
gameList = gameList;
};
// Group Functions
const toggleActiveGroup = (group: number) => {
if ($AdminSelectedGroupStore[$AdminSelectedGameStore] === undefined) {
$AdminSelectedGroupStore[$AdminSelectedGameStore] = {};
}
$AdminSelectedGroupStore[$AdminSelectedGameStore][group] = !$AdminSelectedGroupStore[$AdminSelectedGameStore][group];
updateGameData();
};
const addGroup = () => {
let newGroup = {
game_id: $AdminSelectedGameStore,
group_name: newGroupName
};
addingNewGroup = true;
newGroupForm = false;
fetch(apiBaseUrl + '/v3/group', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
},
body: JSON.stringify(newGroup)
}).then((response) => {
updateGameData();
addingNewGroup = false;
newGroupName = '';
response.json().then((result) => ($AdminSelectedGroupStore[$AdminSelectedGameStore][result.id] = true));
});
};
const deleteGroup = (group_id: number) => {
fetch(apiBaseUrl + '/v3/group?group_id=' + group_id + '&game_id=' + $AdminSelectedGameStore, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
}
}).then(() => {
updateGameData();
if ($AdminSelectedGroupStore[$AdminSelectedGameStore][group_id]) {
$AdminSelectedGroupStore[$AdminSelectedGameStore][group_id] = false;
}
});
delete groupList[group_id];
groupList = groupList;
};
// Empire Functions
const setActiveEmpire = (empireId: number) => {
loadingEmpireData = true;
$AdminSelectedEmpireStore[$AdminSelectedGameStore] = empireId;
if (typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] !== 'undefined') {
loadEmpireData();
}
};
const addEmpire = () => {
addingNewEmpire = true;
$AdminSelectedEmpireStore[$AdminSelectedGameStore] = 1000;
empireData = createBlankEmpire($AdminSelectedGameStore);
/* $AdminSelectedEmpireStore[$AdminSelectedGameStore] = list2.length;
list2.push(list2.length); */
};
const finishAddNewEmpire = (event: { detail: { new_id: number } }) => {
$AdminSelectedEmpireStore[$AdminSelectedGameStore] = event.detail.new_id;
updateGameData();
};
const deleteEmpire = (empire: ChellarisEmpire) => {
fetch(apiBaseUrl + '/v3/empire?game_id=' + empire.game + '&empire_id=' + empire.id, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
}
}).then(() => {
updateGameData();
if ($AdminSelectedEmpireStore[$AdminSelectedGameStore] == empire.id) {
$AdminSelectedEmpireStore[$AdminSelectedGameStore] = Object.values(empireList)[0].id;
}
});
delete empireList[empire.id];
empireList = empireList;
};
let loaded = false;
</script>
<svelte:head>
<title>Admin Menu</title>
<meta name="description" content="Admin Menu for managing Chellaris Sign-Ups" />
</svelte:head>
<div class="frame">
{#if loaded}
<List area="games" listTitle="Games">
{#each Object.values(gameList) as game}
<button class="list-card" class:active={game.id == $AdminSelectedGameStore ? 'active' : ''} on:click={() => setActiveGame(game.id)}>
<div class="card-content">{game.name}</div>
<button class="delete-box" on:click={() => deleteGame(game.id)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0 24 24 M24 0 0 24" />
</svg>
</button>
</button>
{/each}
{#if newGameForm}
<div class="list-card active">
<form on:submit={addGame}>
<input bind:value={newGameName} />
<input type="submit" value="Add Game" />
</form>
</div>
{:else if addingNewGame}
<div class="list-card loading">
<div class="card-content">{newGameName}</div>
</div>
{:else}
<button
class="list-card"
on:click={() => {
newGameForm = true;
}}
>
<div class="card-content button">+</div>
</button>
{/if}
</List>
<List area="groups" listTitle="Groups">
{#if loadingGameData}
<LoadingSpinnerLocal />
{:else}
{#each Object.values(groupList) as group}
<button
class="list-card"
class:active={$AdminSelectedGroupStore[$AdminSelectedGameStore]
? $AdminSelectedGroupStore[$AdminSelectedGameStore][group.id]
? 'active'
: ''
: ''}
on:click={() => toggleActiveGroup(group.id)}
>
<div class="card-content">{group.name}</div>
{#if group.name !== 'N/A'}
<button class="delete-box" on:click={() => deleteGroup(group.id)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0 24 24 M24 0 0 24" />
</svg>
</button>
{/if}
</button>
{/each}
{#if newGroupForm}
<div class="list-card active">
<form on:submit={addGroup}>
<input bind:value={newGroupName} />
<input type="submit" value="Add Group" />
</form>
</div>
{:else if addingNewGroup}
<div class="list-card loading">
<div class="card-content">{newGroupName}</div>
</div>
{:else}
<button
class="list-card"
on:click={() => {
newGroupForm = true;
}}
>
<div class="card-content button">+</div>
</button>
{/if}
{/if}
</List>
<List area="empires" listTitle="Empires">
<div class="empires-table">
<div class="table-headers">
<div class="table-header">Empire Name</div>
<div class="table-header">Discord User</div>
</div>
<div class="table-content">
{#if loadingGameData}
<LoadingSpinnerLocal />
{:else}
{#each Object.values(empireList) as empire}
<button
class="list-card"
class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}
on:click={() => setActiveEmpire(empire.id)}
>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{empire.name}</div>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>
{empire.discord_user || 'N/A'}
</div>
<button class="delete-box" on:click={() => deleteEmpire(empire)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0 24 24 M24 0 0 24" />
</svg>
</button>
</button>
{:else}
<div class="list-card">
<div class="card-content">No Empires Present</div>
</div>
{/each}
{#if addingNewEmpire}
<div class="list-card loading">
<div class="card-content active">{empireData.name}</div>
<div class="card-content active">
{empireData.discord_user || 'N/A'}
</div>
</div>
{:else}
<button class="list-card" on:click={addEmpire}>
<div class="card-content button">+</div>
</button>
{/if}
{/if}
</div>
</div>
</List>
<List area="details" listTitle="Empire Details">
{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
<div>
Select Empire
</div>
{:else if loadingEmpireData || loadingGameData}
<LoadingSpinnerLocal />
{:else if addingNewEmpire || typeof empireData.group !== 'undefined'}
<EmpireDetails
bind:empire={empireData}
groups={groupList}
{auth}
bind:newEmpire={addingNewEmpire}
on:updated={updateGameData}
on:created={finishAddNewEmpire}
/>
{/if}
</List>
{:else}
<List area="games" listTitle="Games">
<LoadingSpinnerLocal />
</List>
<List area="groups" listTitle="Groups">
<LoadingSpinnerLocal />
</List>
<List area="empires" listTitle="Empires">
<div class="empires-table">
<div class="table-headers">
<div class="table-header">Empire Name</div>
<div class="table-header">Discord User</div>
</div>
<div class="table-content">
<LoadingSpinnerLocal />
</div>
</div>
</List>
<List area="details" listTitle="Empire Details">
<LoadingSpinnerLocal />
</List>
{/if}
</div>
<style>
.frame {
display: grid;
grid-template-areas:
'games empires details'
'groups empires details';
grid-template-columns: 20% 40% 40%;
grid-template-rows: 50% 50%;
max-height: calc(100%);
overflow: hidden;
margin: 3rem;
box-sizing: border-box;
border: 1px solid white;
}
/* General Classes */
.active {
border-color: darkorange !important;
}
.loading {
cursor: default !important;
border-color: grey !important;
color: grey !important;
}
.list-card {
display: flex;
margin: 0.5rem;
padding: 1px;
border: 1px solid darkcyan;
cursor: pointer;
background-color: var(--color-bg);
color: var(--color-text);
width: calc(100% - 1rem);
box-sizing: border-box;
text-align: left;
}
.list-card:hover {
border: 1px solid darkorange;
}
.list-card form {
padding: 5px 12px;
}
.list-card input {
background-color: var(--color-bg);
color: var(--color-text);
border: 1px solid darkcyan;
font-size: 1rem;
padding: 3px 7px;
}
.list-card input:focus {
border: 1px solid darkorange;
outline: none !important;
}
.list-card input[type='submit']:hover {
border: 1px solid darkorange;
cursor: pointer;
}
.card-content {
flex-grow: 1;
padding: 0.5rem 1rem;
box-sizing: border-box;
border-left: 1px solid darkcyan;
width: 50%;
}
.button {
text-align: center;
}
.delete-box {
background-color: var(--color-bg);
width: 1.5rem;
height: 1.5rem;
justify-self: center;
align-self: center;
margin-right: 0.2rem;
border: 1px solid darkcyan;
color: darkcyan;
cursor: pointer;
text-align: center;
}
.checkmark {
display: block;
stroke-width: 2;
stroke: darkcyan;
stroke-miterlimit: 10;
}
.delete-box:hover .checkmark {
stroke: darkorange;
}
.delete-box:hover {
color: darkorange;
border-color: darkorange;
}
/* Empire Classes */
.empires-table {
margin: 0.5rem;
height: calc(100% - 1rem);
overflow: hidden;
border: 2px solid blueviolet;
box-sizing: border-box;
}
.table-headers {
grid-area: empires-header;
display: flex;
height: 2.3rem;
width: calc(100%);
padding-right: 12px;
box-sizing: border-box;
border-bottom: 1px solid orange;
justify-items: center;
align-items: center;
}
.table-header {
flex-grow: 1;
text-align: center;
width: 50%;
background-color: var(--color-bg);
padding: 0.5rem 1.5rem;
border-left: 1px solid orange;
}
.table-header:first-child {
border-left: none;
}
.table-content {
grid-area: empires-list;
height: calc(100% - 2.3rem);
overflow-y: scroll;
}
.list-card:hover .card-content {
border-left: 1px solid darkorange;
}
.list-card:hover .card-content:first-child {
border-left: none;
}
.card-content:first-child {
border-left: none;
min-width: 50%;
}
</style>