Components & styles

src/components/Graphs.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { login } from "./stores";
+	import { getGraphs } from "../lib/api";
+
+	let graphsPromise: ReturnType<typeof getGraphs> = new Promise(() => {});
+	$: if ($login !== undefined) {
+		graphsPromise = getGraphs($login?.token);
+	}
+</script>
+
+<div id="list">
+	{#await graphsPromise}
+		<span class="item">
+			<h2>Fetching profiles...</h2>
+		</span>
+	{:then graphs}
+		{#each graphs as graph}
+			<a class="item" href="./graph/{graph.graph}">
+				<h2>{graph.data.name} <span>#{graph.graph}</span></h2>
+				<h3>
+					Value:
+					{#each graph.data.value as key}
+						<span>{key}</span>
+					{/each}
+				</h3>
+			</a>
+		{/each}
+		<!-- svelte-ignore a11y-missing-content -->
+		<a class="item add" href="google.com" />
+	{:catch error}
+		<span class="item">
+			<h2 style="color: red">{error.message}</h2>
+		</span>
+	{/await}
+</div>
+
+<style lang="scss">
+	@use "../styles/GridList";
+	a.item {
+		text-decoration: none;
+		color: hsl(30, 20%, 90%);
+		font-size: 1.17em;
+		&:hover {
+			h2 {
+				text-decoration: underline;
+			}
+		}
+	}
+	h2 span {
+		color: hsl(30, 5%, 60%);
+		font-weight: 100;
+		font-size: 0.75em;
+	}
+	h3 span {
+		font-weight: 400;
+	}
+	h3 span::after {
+		content: " > ";
+		font-size: 0.6em;
+		color: hsl(30, 5%, 60%);
+		vertical-align: middle;
+	}
+	h3 span:nth-last-child(1)::after {
+		content: "";
+	}
+</style>

src/components/Navbar.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	export let segment: string | undefined;
+	import { postLogout } from "../lib/api";
+	import { login } from "./stores";
+</script>
+
+<nav>
+	<a href="/" class:active={segment === undefined || segment === "profile"}>
+		<h3>Profiles</h3>
+	</a>
+	<span class="sep" />
+	<a
+		href="/graphs"
+		class:active={segment === "graphs" || segment === "graph"}
+	>
+		<h3>Graphs</h3>
+	</a>
+	<span class="sep" />
+	<div class="sep" />
+	<span class="sep" />
+	{#if $login === null || $login === undefined}
+		<a href="/login" class:active={segment === "login"}>
+			<h3>Login</h3>
+		</a>
+	{:else}
+		<span>
+			<h3>@{$login.username}</h3>
+		</span>
+		<span class="sep" />
+		<a
+			href="."
+			on:click={async () => {
+				await postLogout($login?.token || ""); // ! wasn't working for some reason
+				login.set(null);
+			}}
+		>
+			<h3>Logout</h3>
+		</a>
+	{/if}
+</nav>
+
+<style lang="scss">
+	nav {
+		z-index: 1000;
+		position: fixed;
+		width: calc(100% - 1.5em);
+		background-color: hsl(236, 10%, 20%);
+		display: flex;
+		border: 0.75em solid black;
+	}
+
+	h3 {
+		display: inline;
+		text-decoration: inherit;
+	}
+	span,
+	a {
+		display: inline-block;
+		text-decoration: none;
+		color: inherit;
+		padding: 1em;
+	}
+	a.active {
+		color: hsl(111, 100%, 50%);
+	}
+	a:hover {
+		text-decoration: solid underline;
+	}
+	.sep {
+		padding: 0;
+		background-color: black;
+	}
+	span.sep {
+		width: 0.75em;
+	}
+	div.sep {
+		flex: 1;
+	}
+</style>

src/components/stores.ts

@@ -0,0 +1,29 @@
+import { writable } from "svelte/store";
+
+function createLogin() {
+	const { subscribe, set, update } = writable<
+		| {
+				username: string;
+				token: string;
+		  }
+		| undefined
+		| null
+	>(undefined);
+
+	return {
+		subscribe,
+		set,
+		update,
+		getValue: () =>
+			new Promise(resolve => {
+				const unsubscribe = subscribe(value => {
+					if (value !== undefined) {
+						unsubscribe();
+						resolve(value);
+					}
+				});
+			})
+	};
+}
+
+export const login = createLogin();