70 lines
2.2 KiB
Svelte
70 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { Link } from "svelte-navigator";
|
|
|
|
import { servers, selectedServer, loadServers } from "~/store";
|
|
import CogIcon from "~/assets/nes.icons/cog.svg";
|
|
import { api } from "~/lib/ipc";
|
|
|
|
let isDevelopment = false;
|
|
|
|
function getServerColor(i: number) {
|
|
const serverColors = [
|
|
"bg-red-400",
|
|
"bg-yellow-500",
|
|
"bg-green-500",
|
|
"bg-blue-500",
|
|
"bg-indigo-500",
|
|
"bg-purple-500",
|
|
];
|
|
|
|
return serverColors[i % serverColors.length];
|
|
}
|
|
|
|
selectedServer.subscribe((e) => {
|
|
console.log("selected server changed", e);
|
|
});
|
|
|
|
onMount(async () => {
|
|
await loadServers();
|
|
isDevelopment = await api.isDevelopment();
|
|
});
|
|
</script>
|
|
|
|
<aside class="flex flex-col bg-gray-700 items-center">
|
|
<div class="flex flex-col mt-4 space-y-4 overflow-y-auto pb-4">
|
|
{#each $servers as server, i}
|
|
<Link to="/server/{server._id}" class="flex flex-col items-center justify-center ">
|
|
<div
|
|
class={`w-16 h-16 p-1 rounded-md flex cursor-pointer text-light-50 border-4 border-transparent text-gray-200 hover:text-gray-500`}
|
|
class:border-gray-400={$selectedServer === server._id}
|
|
>
|
|
<div class={`flex w-full h-full text-center items-center justify-center rounded-md ${getServerColor(i)}`}>
|
|
{server.name.slice(0,2).toLocaleUpperCase()}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
{/each}
|
|
</div>
|
|
<Link
|
|
to="/server/add"
|
|
class="flex justify-center items-center text-4xl no-underline text-gray-200 cursor-pointer hover:text-gray-500"
|
|
>+</Link
|
|
>
|
|
<Link
|
|
to="/settings"
|
|
class="flex mt-auto mb-4 justify-center items-center text-4xl no-underline cursor-pointer"
|
|
>
|
|
<CogIcon width="30" height="30" class="fill-gray-200 hover:fill-gray-500" />
|
|
</Link>
|
|
{#if isDevelopment}
|
|
<button class="text-8px text-red-500 my-4" on:click={() => location.reload()}>Refresh</button>
|
|
{/if}
|
|
</aside>
|
|
|
|
<style>
|
|
aside {
|
|
width: 80px;
|
|
}
|
|
</style>
|