Nav extra details
This commit is contained in:
parent
c3036ac98a
commit
62223572de
|
@ -11,7 +11,7 @@
|
|||
<div id="list">
|
||||
{#await graphsPromise}
|
||||
<span class="item">
|
||||
<h2>Fetching profiles...</h2>
|
||||
<h2>Fetching graphs...</h2>
|
||||
</span>
|
||||
{:then graphs}
|
||||
{#each graphs as graph}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
export let segment: string | undefined;
|
||||
import { postLogout } from "../lib/api";
|
||||
import { login } from "./stores";
|
||||
import { extraNav, login } from "./stores";
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
|
@ -16,6 +16,23 @@
|
|||
<h3>Graphs</h3>
|
||||
</a>
|
||||
<span class="sep" />
|
||||
{#if $extraNav !== undefined}
|
||||
<span class="extra">
|
||||
<h3>
|
||||
{#each $extraNav.filter(i => i) as item}
|
||||
<span class="spacer" />
|
||||
{#if typeof item === "string"}
|
||||
<span>{item}</span>
|
||||
{:else}
|
||||
<button type="button" on:click={item[1]}>
|
||||
{item[0]}
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</h3>
|
||||
</span>
|
||||
<span class="sep" />
|
||||
{/if}
|
||||
<div class="sep" />
|
||||
<span class="sep" />
|
||||
{#if $login === null || $login === undefined}
|
||||
|
@ -76,4 +93,39 @@
|
|||
div.sep {
|
||||
flex: 1;
|
||||
}
|
||||
.extra {
|
||||
padding-left: 0;
|
||||
@media screen and (max-width: 803px) {
|
||||
display: none;
|
||||
}
|
||||
h3 {
|
||||
span,
|
||||
button {
|
||||
color: hsl(30, 20%, 90%);
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
background: none;
|
||||
border: none;
|
||||
user-select: text;
|
||||
-ms-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
span.spacer::before {
|
||||
text-decoration: none;
|
||||
content: ">";
|
||||
margin-left: 1em;
|
||||
color: hsl(30, 5%, 60%);
|
||||
font-weight: 100;
|
||||
font-size: 0.75em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -27,3 +27,25 @@ function createLogin() {
|
|||
}
|
||||
|
||||
export const login = createLogin();
|
||||
|
||||
function createExtraNav() {
|
||||
const { subscribe, set, update } = writable<
|
||||
(string | [string, () => void])[] | undefined
|
||||
>();
|
||||
|
||||
return {
|
||||
subscribe: (
|
||||
...params: Parameters<typeof subscribe>
|
||||
): ReturnType<typeof subscribe> => {
|
||||
const unsubscribe = subscribe(...params);
|
||||
return () => {
|
||||
set(undefined);
|
||||
unsubscribe();
|
||||
};
|
||||
},
|
||||
set,
|
||||
update
|
||||
};
|
||||
}
|
||||
|
||||
export const extraNav = createExtraNav();
|
||||
|
|
|
@ -1,8 +1,13 @@
|
|||
export enum Permissions {
|
||||
ALL = "*",
|
||||
VIEW = "view",
|
||||
|
||||
ADD_PROFILE = "add_profile",
|
||||
REMOVE_PROFILE = "remove_profile",
|
||||
|
||||
ADD_GRAPH = "add_graph",
|
||||
REMOVE_GRAPH = "remove_graph",
|
||||
|
||||
VIEW_USERS = "view_users",
|
||||
ADD_USER = "add_user",
|
||||
EDIT_USER = "edit_user",
|
||||
|
|
|
@ -40,4 +40,7 @@
|
|||
padding-top: $navbar-padding;
|
||||
min-height: calc(100% - #{$navbar-padding} - 0.75em);
|
||||
}
|
||||
:global(button) {
|
||||
font-family: "Fira Code", monospace;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -34,19 +34,9 @@
|
|||
>
|
||||
<h2>Login</h2>
|
||||
<p id="status">{status}</p>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Username"
|
||||
bind:value={username}
|
||||
/><br />
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
placeholder="Password"
|
||||
bind:value={password}
|
||||
/><br />
|
||||
<input type="submit" id="submit" value="Login" />
|
||||
<input type="text" placeholder="Username" bind:value={username} />
|
||||
<input type="password" placeholder="Password" bind:value={password} />
|
||||
<input type="submit" value="Login" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { goto } from "@sapper/app";
|
||||
import { login } from "../../components/stores";
|
||||
import { login, extraNav } from "../../components/stores";
|
||||
import {
|
||||
getPlayerProfiles,
|
||||
getUUID,
|
||||
|
@ -8,12 +8,25 @@
|
|||
putProfiles
|
||||
} from "../../lib/api";
|
||||
|
||||
$extraNav; // important for subscription to store to be activated
|
||||
|
||||
let username = "";
|
||||
let uuid = "";
|
||||
let status = "";
|
||||
let profilesPromise: ReturnType<typeof getPlayerProfiles> = new Promise(
|
||||
resolve => resolve([])
|
||||
);
|
||||
|
||||
$: if (!uuid) {
|
||||
extraNav.set([
|
||||
["Add", () => ([username, uuid, status] = ["", "", ""])]
|
||||
]);
|
||||
} else {
|
||||
extraNav.set([
|
||||
["Add", () => ([username, uuid, status] = ["", "", ""])],
|
||||
username
|
||||
]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
@ -38,9 +51,8 @@
|
|||
<p id="status">{status}</p>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
bind:value={username}
|
||||
placeholder="Minecraft Username"
|
||||
bind:value={username}
|
||||
/>
|
||||
<input type="submit" value="Search" />
|
||||
</form>
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
background-color: hsl(236, 10%, 20%);
|
||||
p#status {
|
||||
|
@ -6,7 +8,6 @@ form {
|
|||
}
|
||||
}
|
||||
input {
|
||||
width: calc(100% - 1.5em);
|
||||
background: none;
|
||||
padding: 0.75em;
|
||||
margin-bottom: 1em;
|
||||
|
|
Loading…
Reference in New Issue