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

first style changes

Browse Source
This commit is contained in:
Akito123321 2024-09-23 15:27:49 +02:00
parent b57d56c20a
commit 5b0f9ff816
5 changed files with 91 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,22 @@
.layout {
display: grid;
width: 100%;
}
.title {
font-weight: bold;
grid-column: 1;
}
.description {
grid-column: 2;
}
.stratType {
grid-column: 3;
}
.deleteButton {
grid-column: 4;
}

16
src/components/StratItem.tsx
View File

@ -41,16 +41,12 @@ const StratItem: Component<StratItemProps> = (props) => {
};
return (
<div class={styles.member}>
<div class={styles.memberDetails}>
<div class={styles.memberName} onclick={() => navigate('/group/' + props.group.id + '/strat/' + props.strat.id)}>
<span innerText={props.strat.title} />
<span innerText={props.strat.description} />
<span innerText={props.strat.stratType} />
</div>
<div>
<button onClick={deleteMember}><BsTrash /></button>
</div>
<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} />
<div class={styles.deleteButton}>
<button onClick={deleteMember}><BsTrash /></button>
</div>
</div >
)

13
src/pages/GroupPage.module.css
View File

@ -0,0 +1,13 @@
.layout {
display: grid;
column-gap: 50px;
}
.strats {
grid-column-start: 1;
grid-column-end: 3;
}
.members {
grid-column: 4;
}

97
src/pages/GroupPage.tsx
View File

@ -1,18 +1,13 @@
import { useNavigate, useParams } from "@solidjs/router";
import { Component, Show, createEffect, createSignal, onMount } from "solid-js";
import styles from './GroupPage.module.css'
import styles from './GroupPage.module.css';
import { Group, Map, Profile, Strat, User, api } from "../api";
import { showDialog, showInputDialog, showMessageDialog } from "../state";
import { _arrayBufferToBase64, addMap, addMember, addProfile, addStratType, errorToString, normalize } from "../util";
import { _arrayBufferToBase64, addMap, addMember, addStratType, errorToString, normalize } from "../util";
import { BsCheck2, BsPencil, BsTrash } from "solid-icons/bs";
import { Collapse } from "solid-collapse";
import MemberItem from "../components/MemberItem";
import MapItem from "../components/MapItem";
import StratItem from "../components/StratItem";
import StratTypeItem from "../components/StratTypeItem";
import ProfileItem from "../components/ProfileItem";
import { UploadFile, createFileUploader } from "@solid-primitives/upload";
const GroupPage: Component = () => {
const params = useParams();
@ -29,6 +24,12 @@ const GroupPage: Component = () => {
const [profilesIsExpanded, setProfilesIsExpanded] = createSignal(false);
const [stratTypesIsExpanded, setStratTypesIsExpanded] = createSignal(false);
const [filters, setFilters] = createSignal({
name: "",
Map: "All",
stratType: "All"
});
onMount(async () => {
try {
setGroup(await api().getGroup(params.id));
@ -91,8 +92,9 @@ const GroupPage: Component = () => {
name: 'description'
}],
onDismiss: async () => {
const strat = await api().addStrat(group().id, { title: title(), description: description(), stratType: stratType() });
navigate('/group/' + group().id + '/strat/' + strat.id);
const newGroup = await api().addStrat(group().id, { title: title(), description: description(), stratType: stratType() });
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>)}
@ -132,6 +134,21 @@ const GroupPage: Component = () => {
setGroup({ ...group(), profiles: [...group().profiles.filter(p => p.id !== profile.id)] });
};
const handleFilters = (filter: string, val: any) => {
if (val === "Add") {
switch (filter) {
case "Map":
addMap(group(), (g) => setGroup(g));
break;
case "StratType":
addStratType(group(), (g) => setGroup(g));
default:
break;
}
}
setFilters({ ...filters(), [filter]: val });
}
return (
<>
<Show when={!loading()} fallback={<div>Loading...</div>}>
@ -144,46 +161,30 @@ const GroupPage: Component = () => {
<button class={styles.editButton} onClick={toggleEdit}>{editing() ? <BsCheck2 /> : <BsPencil />}</button>
</div>
<hr />
<div>
<button onClick={() => setMembersIsExpanded(!membersIsExpanded())}>Members</button>
<button class={styles.addMemberButton} onClick={async () => addMember(group(), (g) => setGroup(g))}>+</button>
<Collapse value={membersIsExpanded()} class={styles.members}>
<div class={styles.groupMembers}>
{group().members?.map(m => <MemberItem group={group()} member={m} onDelete={onDeleteMember} />)}
<div class={styles.layout}>
<div class={styles.strats}>
<h3>Strats <button class={styles.addStratButton} onClick={() => createStrat()}>Add</button></h3>
<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)}>
<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)}>
<option value={"All"} >Strat Type</option>
{group().stratTypes.map(s => <option value={s}>{s}</option>)}
<option value={"Add"} >Add</option>
</select>
</div>
</Collapse>
<br />
<button onClick={() => setStratsIsExpanded(!stratsIsExpanded())}>strats</button>
<button class={styles.addStratButton} onClick={() => createStrat()}>+</button>
<Collapse value={stratsIsExpanded()} class={styles.strats}>
<div class={styles.strats}>
{group().strats?.map(s => <StratItem group={group()} strat={s} onDelete={onDeleteStrat} />)}
</div>
</Collapse>
<br />
<button onClick={() => setMapsIsExpanded(!mapsIsExpanded())}>maps</button>
<button class={styles.addMapButton} onClick={async () => addMap(group(), (g) => setGroup(g))}>+</button>
<Collapse value={mapsIsExpanded()} class={styles.maps}>
<div class={styles.maps}>
{group().maps?.map(m => <MapItem group={group()} map={m} onDelete={onDeleteMap} />)}
</div>
</Collapse>
<br />
<button onClick={() => setStratTypesIsExpanded(!stratTypesIsExpanded())}>strat types</button>
<button class={styles.addMemberButton} onClick={async () => addStratType(group(), (g) => setGroup(g))}>+</button>
<Collapse value={stratTypesIsExpanded()} class={styles.stratTypes}>
<div class={styles.stratTypes}>
{group().stratTypes?.map(s => <StratTypeItem group={group()} stratType={s} onDelete={onDeleteStratType} />)}
</div>
</Collapse>
<br />
<button onClick={() => setProfilesIsExpanded(!profilesIsExpanded())}>profiles</button>
<button class={styles.addMemberButton} onClick={async () => addProfile(group(), (g) => setGroup(g))}>+</button>
<Collapse value={profilesIsExpanded()} class={styles.profiles}>
<div class={styles.profiles}>
{group().profiles?.map(p => <ProfileItem group={group()} profile={p} onDelete={onDeleteProfile} />)}
</div>
</Collapse>
{group().strats.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>
{group().members.map(m => <MemberItem group={group()} member={m} onDelete={onDeleteMember} />)}
</div>
</div>
</Show>
</>

2
src/pages/Groups.tsx
View File

@ -2,7 +2,7 @@ import { Component, For, Show, createSignal } from "solid-js";
import GroupItem from '../components/GroupItem'
import styles from './Groups.module.css'
import styles from './Groups.module.css';
import { useNavigate } from "@solidjs/router";
import { Group, api } from "../api";
import { localState, showMessageDialog } from "../state";