597 lines
15 KiB
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>
|