Pages
This commit is contained in:
parent
ac8b5a911e
commit
88fab84501
|
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
import Graphs from "../components/Graphs.svelte";
|
||||
</script>
|
||||
|
||||
<Graphs />
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<script lang="ts">
|
||||
import { login } from "../components/stores";
|
||||
import { getProfiles, getUsername } from "../lib/api";
|
||||
|
||||
let profilesPromise: ReturnType<typeof getProfiles> = new Promise(() => {});
|
||||
$: if ($login !== undefined) {
|
||||
profilesPromise = getProfiles($login?.token);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Skyblock Data Tracker</title>
|
||||
</svelte:head>
|
||||
|
||||
<div id="list">
|
||||
{#await profilesPromise}
|
||||
<div class="item">
|
||||
<h2>Fetching profiles...</h2>
|
||||
</div>
|
||||
{:then profiles}
|
||||
{#each profiles as profile}
|
||||
<button type="button" class="item">
|
||||
{#each profile.data.members as member, idx}
|
||||
{#await getUsername(member)}
|
||||
<a href="/profile/{profile.profile}/member/{member}"
|
||||
>...</a
|
||||
>
|
||||
{:then username}
|
||||
<a href="/profile/{profile.profile}/member/{member}">
|
||||
{username}
|
||||
{#if idx === 0 && profile.data.name}
|
||||
@ {profile.data.name}
|
||||
{/if}
|
||||
</a>
|
||||
{:catch error}
|
||||
<p style="color: red">{error.message}</p>
|
||||
{/await}
|
||||
{/each}
|
||||
</button>
|
||||
{/each}
|
||||
<!-- svelte-ignore a11y-missing-content -->
|
||||
<a class="item add" href="/profile/new" />
|
||||
{:catch error}
|
||||
<div class="item">
|
||||
<h2 style="color: red">{error.message}</h2>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../styles/GridList";
|
||||
.item {
|
||||
border: none;
|
||||
font-size: 1.17em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
color: hsl(30, 20%, 90%);
|
||||
text-decoration: none;
|
||||
font-family: "Minecraft";
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
a:nth-child(1) {
|
||||
color: hsl(60, 100%, 50%);
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<script lang="ts">
|
||||
import { goto } from "@sapper/app";
|
||||
import { login } from "../components/stores";
|
||||
import { postLogin } from "../lib/api";
|
||||
|
||||
$: if ($login) {
|
||||
goto("/");
|
||||
}
|
||||
let username = "";
|
||||
let password = "";
|
||||
let status = "";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Login - Skyblock Data Tracker</title>
|
||||
</svelte:head>
|
||||
|
||||
<div id="content">
|
||||
<form
|
||||
on:submit={async event => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
login.set(await postLogin({ username, password }));
|
||||
} catch (e) {
|
||||
username = "";
|
||||
password = "";
|
||||
try {
|
||||
status = (await e.response.json()).message;
|
||||
} catch (e2) {
|
||||
status = "Unknown error";
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../styles/Form";
|
||||
div#content {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<script context="module" lang="ts">
|
||||
import type common from "@sapper/common";
|
||||
|
||||
export async function preload(page: common.Page) {
|
||||
return {
|
||||
profile: page.params.profile,
|
||||
member: page.params.member
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let profile: string;
|
||||
export let member: string;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<script lang="ts">
|
||||
import { goto } from "@sapper/app";
|
||||
import { login } from "../../components/stores";
|
||||
import {
|
||||
getPlayerProfiles,
|
||||
getUUID,
|
||||
getUsername,
|
||||
putProfiles
|
||||
} from "../../lib/api";
|
||||
|
||||
let username = "";
|
||||
let uuid = "";
|
||||
let status = "";
|
||||
let profilesPromise: ReturnType<typeof getPlayerProfiles> = new Promise(
|
||||
resolve => resolve([])
|
||||
);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Add Profile - Skyblock Data Tracker</title>
|
||||
</svelte:head>
|
||||
|
||||
<div id="list">
|
||||
<form
|
||||
class="item"
|
||||
on:submit={async event => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
profilesPromise = getPlayerProfiles(
|
||||
(uuid = await getUUID(username))
|
||||
);
|
||||
} catch (error) {
|
||||
status = "Not found";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<h2>Add profile</h2>
|
||||
<p id="status">{status}</p>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
bind:value={username}
|
||||
placeholder="Minecraft Username"
|
||||
/>
|
||||
<input type="submit" value="Search" />
|
||||
</form>
|
||||
{#if uuid !== ""}
|
||||
{#await profilesPromise}
|
||||
<div class="item">
|
||||
<h2>Fetching profiles...</h2>
|
||||
</div>
|
||||
{:then profiles}
|
||||
{#each profiles as profile}
|
||||
<button
|
||||
type="button"
|
||||
class="item profile"
|
||||
on:click={async () => {
|
||||
try {
|
||||
await putProfiles(
|
||||
$login?.token,
|
||||
profile.profile_id,
|
||||
uuid
|
||||
);
|
||||
} catch (e) {
|
||||
if (
|
||||
e.response?.status === 401 ||
|
||||
e.response?.status === 403
|
||||
) {
|
||||
alert("Unauthorised");
|
||||
} else {
|
||||
alert(
|
||||
"An error occured while adding the profile"
|
||||
);
|
||||
}
|
||||
}
|
||||
goto("/#");
|
||||
}}
|
||||
>
|
||||
{#await getUsername(uuid)}
|
||||
<p>...</p>
|
||||
{:then properUsername}
|
||||
<p>{properUsername} @ {profile.cute_name}</p>
|
||||
{/await}
|
||||
{#each Object.keys(profile.members).filter(m => m !== uuid) as member}
|
||||
{#await getUsername(member)}
|
||||
<p>...</p>
|
||||
{:then memberUsername}
|
||||
<p>{memberUsername}</p>
|
||||
{:catch error}
|
||||
<p style="color: red">{error.message}</p>
|
||||
{/await}
|
||||
{/each}
|
||||
</button>
|
||||
{/each}
|
||||
{:catch error}
|
||||
<div class="item">
|
||||
<h2 style="color: red">{error.message}</h2>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../styles/GridList";
|
||||
@use "../../styles/Form";
|
||||
|
||||
.item {
|
||||
color: hsl(30, 20%, 90%);
|
||||
}
|
||||
button.profile {
|
||||
border: none;
|
||||
font-size: 1.17em;
|
||||
font-family: "Minecraft";
|
||||
p:nth-child(1) {
|
||||
color: hsl(60, 100%, 50%);
|
||||
font-size: 2em;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue