add beginnings of individual member pages

src/App.svelte

@@ -8,6 +8,7 @@
   import Public from "./pages/Public.svelte";
   import Main from "./pages/profiles/Main.svelte";
   import Status from './pages/status.svelte';
+  import Member from './pages/Member.svelte';
   
   // theme cdns (I might make some myself too)
   let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
@@ -37,6 +38,8 @@
       localStorage.setItem("pk-style", "dark");
     };
   };
+
+  let falseBool = false;
 </script>
 
 <svelte:head>
@@ -47,15 +50,14 @@
   <Navigation bind:style={style}/>
     <Route path="/"><Home /></Route>
     <Route path="dash"><Dash /></Route>
+    <Route path="dash/m/:id"><Member isPublic={falseBool}/></Route>
     <Route path="settings"><Settings /></Route>
     <Route path="profile"><Public /></Route>
     <Route path = "profile/s/:id"><Main /></Route>
     <Route path = "s">
       hey please provide a system
     </Route>
-    <Route path = "profile/m/:id">
-      member
-    </Route>
+    <Route path = "profile/m/:id"><Member/></Route>
     <Route path = "profile/m">
       hey please provide a member
     </Route>

src/lib/member/Body.svelte

@@ -14,6 +14,7 @@
     export let groups: Group[] = [];
     export let member: Member;
     export let isPublic: boolean = false;
+    export let isPage: boolean = false;
 
     let editMode: boolean = false;
     let groupMode: boolean = false;
@@ -145,6 +146,11 @@
     {#if !isPublic}
     <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => groupMode = true}>Groups</Button>
     {/if}
+    {#if !isPage}
+    <Button style="flex: 0; float: right;" color="primary">View page</Button>
+    {:else}
+    <Button style="flex: 0; float: right;" color="primary">View system</Button>
+    {/if}
     {:else if editMode}
         <Edit on:deletion on:update bind:member bind:editMode />
     {:else if groupMode}

src/pages/Member.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody } from "sveltestrap";
+    import Body from '../lib/member/Body.svelte';
+    import { useParams } from 'svelte-navigator';
+    import { onMount } from 'svelte';
+    import api from "../api";
+    import { Member, Group } from "../api/types";
+    import CardsHeader from "../lib/CardsHeader.svelte";
+    import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
+
+    let loading = true;
+    let groupLoading = false;
+    let params = useParams();
+    let err = "";
+    let groupErr = "";
+    let member: Member;
+    let groups: Group[];
+    let systemGroups: Group[];
+    const isPage = true;
+    export let isPublic = true;
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    onMount(() => {
+        fetchMember();
+    });
+
+    async function fetchMember() {
+        try {
+            member = await api().members($params.id).get({auth: !isPublic});
+            if (!isPublic && !member.privacy) throw new Error("This member does not belong to your system, did you mean to look up their public page?")
+            err = "";
+            loading = false;
+            groupLoading = true;
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            fetchGroups();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+    async function fetchGroups() {
+        try {
+            groups = await api().members($params.id).groups().get({auth: !isPublic});
+            if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemGroups = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
+            }
+            groupErr = "";
+            groupLoading = false;
+        } catch (error) {
+            console.log(error);
+            groupErr = error.message;
+            groupLoading = false;
+        }
+    }
+
+    async function updateGroups() {
+      groupLoading = true;
+      await new Promise(resolve => setTimeout(resolve, 500));
+      fetchGroups();
+    }
+</script>
+
+{#if settings && settings.appearance.color_background}
+    <div class="background" style="background-color: {member && `#${member.color}`}"></div>
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            {#if err}
+                <Alert color="danger">{err}</Alert>
+            {:else if loading}
+                <Spinner/>
+            {:else if member && member.id}
+                <Card>
+                    <CardHeader>
+                        <CardsHeader bind:item={member}>
+                            <FaAddressCard slot="icon" />
+                        </CardsHeader>
+                    </CardHeader>
+                    <CardBody>
+                        <Body on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+            {/if}
+            {#if groupLoading}
+                fetching groups...
+            {:else if groupErr}
+                <Alert color="danger">{groupErr}</Alert>
+            {:else if groups && groups.length > 0}
+                {#each groups as group}
+                    {group.name} ({group.id})<br/>
+                {/each}
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<style>
+    .background {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        z-index: -30;
+    }
+</style>