Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.0 kB · 140 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141import { q } from "@thorium/context/AppContext";import { useStation } from "@thorium/routes/station/useStation";import Button from "@thorium/ui/Button";import Checkbox from "@thorium/ui/Checkbox";import { Icon } from "@thorium/ui/Icon";import Input from "@thorium/ui/Input";import Select from "@thorium/ui/Select";import { useState } from "react";
export function ObjectivesCore() { const { shipId } = useStation();
const [objectives] = q.objectives.get.useNetRequest({ shipId }); const [adding, setAdding] = useState(false); return ( <div className="flex h-full flex-col gap-1"> <div className="flex-1 overflow-y-auto"> {objectives.map((objective) => ( <div key={objective.id} className="flex items-center gap-1 border-b border-b-white/50 py-1 last-of-type:border-transparent" > <div className="flex-1"> <div className="font-bold">{objective.title}</div> <div className="text-sm">{objective.description}</div> </div> <div> <div className="flex gap-0.5"> <Select label="State" labelHidden size="xs" items={[ { id: "active", label: "Active" }, { id: "complete", label: "Complete" }, { id: "cancelled", label: "Cancelled" }, ]} selected={objective.state} setSelected={async (state) => { if (Array.isArray(state) || !state) return; await q.objectives.setState.netSend({ objectiveId: objective.id, state, }); }} /> <Button className="btn-success btn-xs" aria-label="Complete" onClick={() => q.objectives.setState.netSend({ objectiveId: objective.id, state: "complete", }) } > <Icon name="check" /> </Button> <Button className="btn-error btn-xs" aria-label="Cancel" onClick={() => q.objectives.setState.netSend({ objectiveId: objective.id, state: "cancelled", }) } > <Icon name="x" /> </Button> </div> <Checkbox label="Crew Complete" checked={objective.crewComplete} onChange={(e) => q.objectives.setCrewComplete.netSend({ objectiveId: objective.id, crewComplete: e.target.checked, }) } /> </div> </div> ))} </div> {adding ? ( <form onSubmit={(e) => { e.preventDefault(); const form = e.currentTarget; const title = form.objective.value; const description = form.description.value; const priority = Number(form.priority.value) || 1;
q.objectives.add.netSend({ shipId, title, description, priority }); e.currentTarget.reset(); setAdding(false); }} > <div className="flex w-full flex-col flex-wrap items-start gap-1"> <div className="w-full flex-1"> <Input label="Title" name="objective" required className="input-xs" /> </div> <div className="w-full flex-1"> <Input as="textarea" name="description" label="Description" className="textarea-sm" /> </div> <div className="w-full flex-1"> <Input label="Priority" className="input-xs" name="priority" type="number" defaultValue={1} /> <p className="text-sm">Higher number = higher priority</p> </div> </div> <div className="flex flex-wrap gap-1"> <Button type="reset" className="btn-xs btn-error flex-1" onClick={() => setAdding(false)} > Cancel </Button> <Button type="submit" className="btn-xs btn-success flex-1"> Add Objective </Button> </div> </form> ) : ( <div> <Button className="btn-xs btn-success" onClick={() => setAdding(true)}> Add Objective </Button> </div> )} </div> );}