fancy progress

src/api.ts

@@ -81,6 +81,7 @@ export interface StratRequest {
     title: string,
     description: string,
     stratType: string,
+    mapId: string,
 }
 
 export interface MapRequest {

src/components/StratItem.module.css

@@ -1,22 +1,22 @@
 .layout {
-    display: grid;
+    display: flex;
     width: 100%;
-
+    margin-bottom: 0.5em;
 }
 
 .title {
     font-weight: bold;
-    grid-column: 1;
+    width: 20%;
 }
 
 .description {
-    grid-column: 2;
+    width: 55%;
 }
 
 .stratType {
-    grid-column: 3;
+    width: 20%;
 }
 
 .deleteButton {
-    grid-column: 4;
+    width: 5%;
 }

src/components/StratItem.tsx

@@ -43,8 +43,8 @@ const StratItem: Component<StratItemProps> = (props) => {
 	return (
 		<div class={styles.layout}>
 			<span class={styles.title} innerText={props.strat.title} onclick={() => navigate('/group/' + props.group.id + '/strat/' + props.strat.id)} />
-			<span class={styles.description} innerText={props.strat.description} />
+			<span class={styles.description} innerText={props.strat.description} onclick={() => navigate('/group/' + props.group.id + '/strat/' + props.strat.id)} />
-			<span class={styles.stratType} innerText={props.strat.stratType} />
+			<span class={styles.stratType} innerText={props.strat.stratType} onclick={() => navigate('/group/' + props.group.id + '/strat/' + props.strat.id)} />
 			<div class={styles.deleteButton}>
 				<button onClick={deleteMember}><BsTrash /></button>
 			</div>

src/pages/GroupPage.tsx

@@ -18,15 +18,9 @@ const GroupPage: Component = () => {
 	const [editing, setEditing] = createSignal(false);
 	const [name, setName] = createSignal('');
 
-	const [membersIsExpanded, setMembersIsExpanded] = createSignal(false);
-	const [mapsIsExpanded, setMapsIsExpanded] = createSignal(false);
-	const [stratsIsExpanded, setStratsIsExpanded] = createSignal(false);
-	const [profilesIsExpanded, setProfilesIsExpanded] = createSignal(false);
-	const [stratTypesIsExpanded, setStratTypesIsExpanded] = createSignal(false);
-
 	const [filters, setFilters] = createSignal({
 		name: "",
-		Map: "All",
+		map: "All",
 		stratType: "All"
 	});
 
@@ -74,10 +68,28 @@ const GroupPage: Component = () => {
 		});
 	};
 
+	function filterStrats(): Strat[] {
+		console.log("sus")
+		let filter = filters();
+		let s = group().strats.filter(s => s.title.includes(filter.name));
+		if (filter.map !== "All") {
+			s = s.filter(s => s.map?.id === filter.map);
+			console.log(s);
+		}
+		if (filter.stratType != "All") {
+			s = s.filter(s => s.stratType === filter.stratType);
+		}
+		console.log(s)
+		console.log(filter)
+		return s;
+	}
+
+
 	const createStrat = async () => {
 		const [title, setTitle] = createSignal('');
 		const [description, setDescription] = createSignal('');
 		const [stratType, setStratType] = createSignal('');
+		const [map, setMap] = createSignal({} as Map)
 
 		showDialog({
 			title: 'Add a strat to Group',
@@ -92,13 +104,19 @@ const GroupPage: Component = () => {
 				name: 'description'
 			}],
 			onDismiss: async () => {
-				const newGroup = await api().addStrat(group().id, { title: title(), description: description(), stratType: stratType() });
+				const newGroup = await api().addStrat(group().id, { title: title(), description: description(), stratType: stratType(), mapId: map().id });
 				const strat = newGroup.strats.find(s => s.description === description() && s.title === title() && s.stratType === stratType());
 				navigate('/group/' + group().id + '/strat/' + strat!.id);
 			},
-			content: <select name="stratType" id="stratType">
+			content: <div><select name="stratType" id="stratType" onInput={e => setStratType(e.target.value)}>
-				{group().stratTypes.map(p => <option value={p} onclick={() => setStratType(p)}>{p}</option>)}
+				<option value={""}>Strat Type</option>
-			</select>,
+				{group().stratTypes.map(p => <option value={p}>{p}</option>)}
+			</select>
+				<select name="map" id="map" onInput={e => setMap(group().maps.find(m => m.id === e.target.value)!)}>
+					<option value={""}>Map</option>
+					{group().maps.map(m => <option value={m.id}>{m.name}</option>)}
+				</select>
+			</div>,
 			buttons: ['confirm'],
 
 		});
@@ -137,10 +155,10 @@ const GroupPage: Component = () => {
 	const handleFilters = (filter: string, val: any) => {
 		if (val === "Add") {
 			switch (filter) {
-				case "Map":
+				case "map":
 					addMap(group(), (g) => setGroup(g));
 					break;
-				case "StratType":
+				case "stratType":
 					addStratType(group(), (g) => setGroup(g));
 				default:
 					break;
@@ -167,19 +185,19 @@ const GroupPage: Component = () => {
 						<div class={styles.filter}>
 							Filter <br />
 							<input name="name" type="text" placeholder="Strat Name"></input>
-							<select name="Map" onInput={e => handleFilters(e.target.name, e.target.value)}>
+							<select name="map" onInput={e => handleFilters(e.target.name, e.target.value)}>
 								<option value={"All"} >Map</option>
 								{group().maps.map(m => <option value={m.id}>{m.name}</option>)}
 								<option value={"Add"} >Add</option>
 							</select>
-							<select name="StratType" onInput={e => handleFilters(e.target.name, e.target.value)}>
+							<select name="stratType" onInput={e => handleFilters(e.target.name, e.target.value)}>
 								<option value={"All"} >Strat Type</option>
 								{group().stratTypes.map(s => <option value={s}>{s}</option>)}
 								<option value={"Add"} >Add</option>
 							</select>
 
 						</div>
-						{group().strats.map(s => <StratItem group={group()} onDelete={onDeleteStrat} strat={s} />)}
+						{filterStrats().map(s => <StratItem group={group()} onDelete={onDeleteStrat} strat={s} />)}
 					</div>
 					<div class={styles.members}>
 						<h3>Member <button class={styles.addMemberButton} onClick={async () => addMember(group(), (g) => setGroup(g))}>Add</button></h3>

src/pages/StratPage.tsx

@@ -1,9 +1,9 @@
 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 { api, Group, Map, PlayerType, Strat, StratRequest } from "../api";
 import { showDialog, showMessageDialog } from "../state";
-import { errorToString, normalize } from "../util";
+import { addMap, addStratType, errorToString, normalize } from "../util";
 import { BsCheck2, BsPencil } from 'solid-icons/bs';
 
 const StratPage: Component = () => {
@@ -26,6 +26,7 @@ const StratPage: Component = () => {
         try {
             setGroup(await api().getGroup(params.groupId));
             const strat = group().strats.find((s) => s.id === params.stratId);
+            console.log(strat)
             if (!strat) throw Error('strat not found');
             setStrat(strat);
             setAttempts(strat.attempts);
@@ -43,7 +44,13 @@ const StratPage: Component = () => {
 
     const updateStrat = async (newValue: Strat) => {
         try {
-            await api().updateStrat(group().id, strat().id, newValue);
+            var newV: StratRequest = {
+                description: newValue.description,
+                mapId: newValue.map.id,
+                stratType: newValue.stratType,
+                title: newValue.title
+            }
+            await api().updateStrat(group().id, strat().id, newV);
             setStrat(newValue);
         } catch (e) {
             showMessageDialog('Failed to update strat', errorToString(e));
@@ -93,16 +100,50 @@ const StratPage: Component = () => {
         });
     };
 
+    const handleStratType = (value: any) => {
+        if (value === "Add") {
+            addStratType(group(), (g) => setGroup(g));
+        } else {
+            setStratType(value);
+        }
+    }
+
+    const handleMap = (value: any) => {
+        if (value === "Add") {
+            addMap(group(), (g) => setGroup(g));
+        } else {
+            setMap(group().maps.find(m => m.id === value)!);
+        }
+    }
+
     return <>
         <Show when={!loading()} fallback={<div>Loading...</div>}>
-            <h1><span contentEditable={editing()} innerText={strat().title} onInput={e => setTitle(normalize(e.currentTarget.innerText, 50, true))} />
+            <div><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>
+                {editing() && <span class={styles.editCount}>{title().length}/50</span>}
-            <span contentEditable={editing()} innerText={strat().description} onInput={e => setDescription(normalize(e.currentTarget.innerText, 512, false))} />
+                <br />
-            {editing() && <span class={styles.editCount}>{description().length}/512</span>}
+                <span contentEditable={editing()} innerText={strat().description} onInput={e => setDescription(normalize(e.currentTarget.innerText, 512, false))} />
+                {editing() && <span class={styles.editCount}>{description().length}/512</span>}
+                <br />
+                {editing() ?
+                    <select name="stratType" onInput={e => handleStratType(e.target.value)}>
+                        <option value={stratType()} >{stratType()}</option>
+                        {group().stratTypes.filter(s => s !== stratType()).map(s => <option value={s}>{s}</option>)}
+                        <option value={"Add"} >Add</option>
+                    </select> : <span>{strat().stratType}</span>}
+                <br />
+                {editing() ?
+                    <select name="map" onInput={e => handleMap(e.target.value)}>
+                        <option selected value={map().id} >{map().name}</option>
+                        {group().maps.filter(m => m.id !== map().id).map(m => <option value={m.id}>{m.name}</option>)}
+                        <option value={"Add"} >Add</option>
+                    </select> : <span>{strat().map?.name}</span>}
+            </div>
             <div class={styles.groupButtons}>
                 <button class={styles.deleteButton} onClick={deleteStrat}>Delete strat</button>
                 <button class={styles.editButton} onClick={toggleEdit}>{editing() ? <BsCheck2 /> : <BsPencil />}</button>
             </div>
+            <hr />
+
         </Show>
     </>
 }