feat: system editing!

package.json

@@ -24,6 +24,7 @@
     "discord-markdown": "^2.5.1",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.34",
+    "svelte-autosize": "^1.0.1",
     "svelte-icons": "^2.1.0",
     "svelte-navigator": "^3.1.5",
     "sveltestrap": "^5.6.3"

src/lib/CardsHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Modal, CardHeader, CardTitle, Image } from 'sveltestrap';
+    import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
     import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
     import default_avatar from '../assets/default_avatar.png';
 
@@ -7,6 +7,8 @@
 
     let avatarOpen = false;
     const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
+    
+    export let loading: boolean;
 </script>
 
 <CardHeader>
@@ -17,11 +19,16 @@
             </div>
             <span style="vertical-align: middle;">{item.name} ({item.id})</span>
         </div>
+        <div>
+        {#if loading}
+        <div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
+        {/if}
         {#if item && item.avatar_url}
         <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={item.avatar_url} alt="Your system avatar" />
         {:else}
         <img class="rounded-circle avatar" src={default_avatar} alt="your system avatar (default)" />
         {/if}
+        </div>
         <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
             <div slot="external" on:click={toggleAvatarModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
                 <Image style="display: block; margin: auto;" src={item.avatar_url} thumbnail alt="Your system avatar" />

src/lib/system/Edit.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
+    import Sys from '../../api/system';
+    import PKAPI from '../../api';
+    import autosize from 'svelte-autosize';
+    import moment from 'moment-timezone';
+    import { currentUser } from '../../stores';
+
+    export let editMode: boolean;
+    export let user: Sys;
+    export let loading: boolean;
+
+    let current: Sys;
+
+    currentUser.subscribe((value) => {
+        current = value;
+    })
+
+    let err: string[] = [];
+
+    let input = new Sys(user);
+    
+    async function submit() {
+        let data = input;
+        err = [];
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        if (data.timezone && !moment.tz.zone(data.timezone)) {
+            err.push(`"${data.timezone}" is not a valid timezone, check out <a target="_blank" style="color: var(--bs-body-color);" href="https://xske.github.io/tz/">this site</a> to see your current timezone!`);
+        }
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        const api = new PKAPI();
+        try {
+            let res = await api.patchSystem({token: localStorage.getItem("pk-token"), data: data});
+            user = res;
+            currentUser.update(() => res);
+            err = [];
+            editMode = false;
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+            loading = false;
+        }
+    }
+</script>
+
+{#each err as error}
+    <Alert color="danger">{@html error}</Alert>
+{/each}
+<Row>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Name:</Label>
+        <Input bind:value={input.name} maxlength={100} type="text" placeholder={user.name} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Tag:</Label>
+        <Input bind:value={input.tag} maxlength={100} type="text" placeholder={user.tag} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Timezone:</Label>
+        <Input bind:value={input.timezone} type="text" placeholder={user.timezone} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Color:</Label>
+        <Input bind:value={input.color} type="text" placeholder={user.color}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Avatar url:</Label>
+        <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={user.avatar_url}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Banner url:</Label>
+        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={user.banner}/>
+    </Col>
+</Row>
+<div class="my-2">
+    <b>Description:</b><br />
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}/>
+</div>
+<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false}>Back</Button>

src/lib/system/Main.svelte

@@ -3,21 +3,23 @@
     import CardsHeader from '../CardsHeader.svelte';
     import SystemBody from './Body.svelte';
     import SystemPrivacy from './Privacy.svelte';
+    import Edit from './Edit.svelte';
     import type Sys from '../../api/system';
 
     export let user: Sys;
     export let isPublic = true;
+    let loading: boolean;
 
     let editMode = false;
 </script>
 
 <Card class="mb-4">
-    <CardsHeader bind:item={user}/>
+    <CardsHeader bind:item={user} bind:loading/>
     <CardBody style="border-left: 4px solid #{user.color}">
         {#if !editMode}
-        <SystemBody bind:user={user} bind:editMode={editMode}/>
+        <Body bind:user bind:editMode/>
         {:else}
-        hehe
+        <Edit bind:user bind:editMode bind:loading />
         {/if}
     </CardBody>
 </Card>

yarn.lock

@@ -104,6 +104,11 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+autosize@*:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/autosize/-/autosize-5.0.1.tgz#ed269b0fa9b7eb47627048a1bb3299e99e003a0f"
+  integrity sha512-UIWUlE4TOVPNNj2jjrU39wI4hEYbneUypEqcyRmRFIx5CC2gNdg3rQr+Zh7/3h6egbBvm33TDQjNQKtj9Tk1HA==
+
 axios@^0.24.0:
   version "0.24.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
@@ -738,6 +743,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-autosize@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/svelte-autosize/-/svelte-autosize-1.0.1.tgz#2121b2373ab89191a58aaa9a3aec957ca475e812"
+  integrity sha512-HBk7Xrt5bS0rpp5zSUZvuXNKc0UhAxvJGLNy1eTHMDK/KkHb0UsgWpbyn60jW3tE2ZfuXfLttnHvvb1H4zZZ0Q==
+  dependencies:
+    autosize "*"
+
 svelte-check@^2.2.7:
   version "2.2.10"
   resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.2.10.tgz#ca2e4fde2d077e703792d8301a643c36375f646c"