litle progress

src/pages/StratPage.tsx

@@ -1,7 +1,110 @@
-import { Component } from "solid-js";
+import styles from './StratPage.module.css'
+import { useNavigate, useParams } from "@solidjs/router";
+import { Component, createSignal, onMount, Show } from "solid-js";
+import { api, Group, Map, PlayerType, Strat } from "../api";
+import { showDialog, showMessageDialog } from "../state";
+import { errorToString, normalize } from "../util";
+import { BsCheck2, BsPencil } from 'solid-icons/bs';
 
 const StratPage: Component = () => {
-    return <>strat page</>
+    const navigate = useNavigate();
+    const params = useParams();
+
+    const [loading, setLoading] = createSignal(true);
+    const [group, setGroup] = createSignal({} as Group);
+    const [strat, setStrat] = createSignal({} as Strat);
+    const [editing, setEditing] = createSignal(false);
+    const [attempts, setAttempts] = createSignal(0);
+    const [success, setSuccess] = createSignal(0);
+    const [description, setDescription] = createSignal('');
+    const [map, setMap] = createSignal({} as Map);
+    const [title, setTitle] = createSignal('');
+    const [playerTypes, setPlayerTypes] = createSignal([] as PlayerType[]);
+    const [stratType, setStratType] = createSignal('');
+
+    onMount(async () => {
+        try {
+            setGroup(await api().getGroup(params.groupId));
+            const strat = group().strats.find((s) => s.id === params.stratId);
+            if (!strat) throw Error('strat not found');
+            setStrat(strat);
+            setAttempts(strat.attempts);
+            setSuccess(strat.success);
+            setDescription(strat.description);
+            setMap(strat.map);
+            setTitle(strat.title);
+            setPlayerTypes(strat.playerTypes);
+            setStratType(strat.stratType)
+            setLoading(false);
+        } catch (e) {
+            showMessageDialog('Failed to load group', errorToString(e));
+        }
+    });
+
+    const updateStrat = async (newValue: Strat) => {
+        try {
+            await api().updateStrat(group().id, strat().id, newValue);
+            setStrat(newValue);
+        } catch (e) {
+            showMessageDialog('Failed to update strat', errorToString(e));
+        }
+    };
+
+    const toggleEdit = async () => {
+        if (!editing()) {
+            setEditing(true);
+        } else {
+            updateStrat({
+                ...strat(),
+                attempts: attempts(),
+                success: success(),
+                description: description(),
+                map: map(),
+                title: title(),
+                playerTypes: playerTypes(),
+                stratType: stratType()
+            });
+            setEditing(false);
+        }
+    };
+
+    const deleteStrat = async () => {
+        showDialog({
+            title: 'Delete strat',
+            text: 'Do you want to delete this strat?',
+            buttons: [
+                {
+                    name: 'Delete',
+                    type: 'danger',
+                    action: async () => {
+                        try {
+                            await api().removeStrat(group().id, strat().id);
+                            navigate('/groups');
+                        } catch (e) {
+                            showMessageDialog('Failed to delete group', errorToString(e));
+                        }
+                    }
+                },
+                {
+                    name: 'Cancel',
+                    action: () => { }
+                }
+            ]
+        });
+    };
+
+    return <>
+        <Show when={!loading()} fallback={<div>Loading...</div>}>
+            <h1><span contentEditable={editing()} innerText={strat().title} onInput={e => setTitle(normalize(e.currentTarget.innerText, 50, true))} />
+                {editing() && <span class={styles.editCount}>{title().length}/50</span>}</h1>
+            <span contentEditable={editing()} innerText={strat().description} onInput={e => setDescription(normalize(e.currentTarget.innerText, 512, false))} />
+            {editing() && <span class={styles.editCount}>{description().length}/512</span>}
+            <div class={styles.groupButtons}>
+                <button class={styles.deleteButton} onClick={deleteStrat}>Delete strat</button>
+                <button class={styles.editButton} onClick={toggleEdit}>{editing() ? <BsCheck2 /> : <BsPencil />}</button>
+            </div>
+        </Show>
+    </>
 }
 
 export default StratPage