akito123321/valoStratsFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fancy progress

Browse Source
This commit is contained in:
Akito123321 2024-09-23 20:13:31 +02:00
parent 5b0f9ff816
commit eb2428eeba
5 changed files with 91 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api.ts
View File

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

12
src/components/StratItem.module.css
View File

@ -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%;
}

4
src/components/StratItem.tsx
View File

@ -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.stratType} innerText={props.strat.stratType} />
<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} onclick={() => navigate('/group/' + props.group.id + '/strat/' + props.strat.id)} />
<div class={styles.deleteButton}>
<button onClick={deleteMember}><BsTrash /></button>
</div>

50
src/pages/GroupPage.tsx
View File

@ -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">
{group().stratTypes.map(p => <option value={p} onclick={() => setStratType(p)}>{p}</option>)}
</select>,
content: <div><select name="stratType" id="stratType" onInput={e => setStratType(e.target.value)}>
<option value={""}>Strat Type</option>
{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>

51
src/pages/StratPage.tsx
View File

@ -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))} />
{editing() && <span class={styles.editCount}>{title().length}/50</span>}</h1>
<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>}
<br />
<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>
</>
}