Skip to content

Commit

Permalink
ui updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sha-dos
Sha-dos committed Mar 7, 2024
1 parent f44aaf5 commit c31e810
Show file tree
Hide file tree
Showing 10 changed files with 184 additions and 93 deletions.
1 change: 0 additions & 1 deletion app/data/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default function DataPage() {
microphone: team.microphone,
number: team.teamNumber,
park: team.park,
pickupLocation: team.pickupLocation,
notesAttempted: team.notesAttempted,
trap: team.trap
});
Expand Down
14 changes: 3 additions & 11 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ export default function Home() {

// Post Match
const [defense, setDefense] = useState(false);
const [pickupLocation, setPickupLocation] = useState(PickupLocation.None);
const [defenseScale, setDefenseScale] = useState<DefenseRange | null>(null);
const [comments, setComments] = useState("");

Expand All @@ -61,8 +60,8 @@ export default function Home() {
setAutoNotesAttempted(prevState => [...prevState, thisAutoNotesAttempted]);
}

const updateAutoNotesCollected = (thisNotesAttempted: NoteShot) => {
setAutoNotesAttempted(prevState => [...prevState, thisNotesAttempted])
const updateAutoNotesCollected = (thisNotesCollected: AutoNoteCollected) => {
setAutoNotesCollected(prevState => [...prevState, thisNotesCollected])
}

const updateAutoPark = (thisAutoPark: boolean) => {
Expand Down Expand Up @@ -105,10 +104,6 @@ export default function Home() {
setDefense(thisDefense);
}

const updatePickupLocation = (thisPickupLocation: PickupLocation) => {
setPickupLocation(thisPickupLocation);
}

const updateComments = (thisComments: string) => {
setComments(thisComments);
}
Expand Down Expand Up @@ -160,7 +155,6 @@ export default function Home() {
microphone: microphone,
number: teamNumber,
park: park,
pickupLocation: pickupLocation,
notesAttempted: notesAttempted,
trap: trap
});
Expand All @@ -185,7 +179,6 @@ export default function Home() {
microphone: microphone,
number: teamNumber,
park: park,
pickupLocation: pickupLocation,
notesAttempted: notesAttempted,
trap: trap
}]}
Expand Down Expand Up @@ -221,7 +214,6 @@ export default function Home() {
setDefense(false);
setDefenseScale(null);
setComments("");
setPickupLocation(PickupLocation.None);
}

switch (state) {
Expand Down Expand Up @@ -272,7 +264,7 @@ export default function Home() {
clear();
}}>Next Match</Button>
</div>
<PostGame updateDefense={updateDefense} updatePickupLocation={updatePickupLocation} updateDefenseScale={updateDefenseScale}
<PostGame updateDefense={updateDefense} updateDefenseScale={updateDefenseScale}
updateComments={updateComments} />
</section>
)
Expand Down
30 changes: 1 addition & 29 deletions app/postgame.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,11 @@ import {PickupLocation} from "@/components/data";
import {Textarea} from "@nextui-org/input";

// @ts-ignore
export const PostGame = ({updateDefense, updatePickupLocation, updateDefenseScale, updateComments}) => {
export const PostGame = ({updateDefense, updateDefenseScale, updateComments}) => {
const [defense, setDefense] = useState(false);
const [pickupLocation, setPickupLocation] = useState(PickupLocation.None);
const [defenseScale, setDefenseScale] = useState<number | number[]>(2);
const [comments, setComments] = useState("");

// @ts-ignore
const handlePickupChange = (e) => {
setPickupLocation(e.target.value)
}

const pickupLocationList = [
PickupLocation.None,
PickupLocation.Floor,
PickupLocation.HumanPlayer,
PickupLocation.Both,
]

return (
<>
<Checkbox color="primary" isSelected={defense} onValueChange={(value) => {setDefense(value); updateDefense(value)}}>
Expand Down Expand Up @@ -66,21 +53,6 @@ export const PostGame = ({updateDefense, updatePickupLocation, updateDefenseScal
className="max-w-md"
/>

<Select
label="Pickup"
variant="bordered"
placeholder="Select"
selectedKeys={[pickupLocation]}
className="max-w-xs"
onChange={handlePickupChange}
>
{pickupLocationList.map((loc) => (
<SelectItem key={loc} value={loc}>
{loc}
</SelectItem>
))}
</Select>

<Textarea
variant="underlined"
label="Comments"
Expand Down
2 changes: 1 addition & 1 deletion app/teleop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const Teleop = ({alliance, updateNotesAttempted, updatePark, humanPlayerA
const [x, setX] = useState(0);
const [y, setY] = useState(0);

const handleClick = (e: React.MouseEvent<HTMLImageElement>) => {
const handleClick = (e: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
setX(e.pageX - offsetX);
setY(e.pageY - offsetY);
}
Expand Down
35 changes: 8 additions & 27 deletions app/viewer/match.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {useEffect, useRef, useState} from "react";

const DOWNSCALE = 0.77777777778;

export const MatchListView = ({matchData, updateSelectedMatch}: {matchData: Data | undefined, updateSelectedMatch: (arg0: number | null) => void}) => {
export const MatchListView = ({matchData, updateSelectedMatch, updateSelectedTeam}: {matchData: Data | undefined, updateSelectedMatch: (arg0: number | null) => void, updateSelectedTeam: (arg0: number | null) => void}) => {
return (
<div className="flex flex-col min-w-[100%]">
<div className="flex min-w-[85%]">
Expand Down Expand Up @@ -68,18 +68,16 @@ export const MatchListView = ({matchData, updateSelectedMatch}: {matchData: Data
return (
<div key={match.matchNumber} className="min-w-[100%]">
<Divider/>
<MatchView key={match.matchNumber} matchNumber={match.matchNumber} teams={match.teams} updateSelectedMatch={updateSelectedMatch}/>
<MatchView key={match.matchNumber} matchNumber={match.matchNumber} teams={match.teams} updateSelectedMatch={updateSelectedMatch} updateSelectedTeam={updateSelectedTeam}/>
</div>
)
})}
</div>
)
}

const MatchView = ({matchNumber, teams, updateSelectedMatch}:
{ matchNumber: number, teams: TeamMatchData[], updateSelectedMatch: (arg0: number | null) => void }) => {

const {isOpen, onOpen, onOpenChange} = useDisclosure();
const MatchView = ({matchNumber, teams, updateSelectedMatch, updateSelectedTeam}:
{ matchNumber: number, teams: TeamMatchData[], updateSelectedMatch: (arg0: number | null) => void, updateSelectedTeam: (arg0: number | null) => void}) => {

return (
<div className="flex content-evenly min-w-full">
Expand All @@ -91,7 +89,7 @@ const MatchView = ({matchNumber, teams, updateSelectedMatch}:
<div className="flex flex-col gap-4 min-w-full">
{teams.map((team, idx) => (
<div className="flex min-w-[85%]" key={team.teamNumber}>
<Button onPress={onOpen} variant="light" key={idx} className="justify-start flex gap-4">{
<Button onPress={() => updateSelectedTeam(team.teamNumber)} variant="light" key={idx} className="justify-start flex gap-4">{
<>
{/* Maybe move color back to the button */}
<a className={team.alliance == Alliance.Red ? "w-16 text-red-600" : "w-16 text-blue-600"}>{team.teamNumber}</a>
Expand Down Expand Up @@ -122,23 +120,6 @@ const MatchView = ({matchNumber, teams, updateSelectedMatch}:
<Divider orientation="vertical"/>
</>
}</Button>

<Modal isOpen={isOpen} onOpenChange={onOpenChange} size="5xl">
<ModalContent>
{(onClose) => (
<>
<ModalHeader className="flex flex-col gap-1">{team.teamNumber}</ModalHeader>
<ModalBody>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onPress={onClose}>
Close
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
</div>
))}
</div>
Expand Down Expand Up @@ -239,7 +220,7 @@ const AutoView = ({team}: {team: TeamMatchData}) => {
<Divider/>

<div className="flex flex-col gap-1">
<a>{"Park: " + team.park}</a>
<a>{"Park: " + team.autoPark}</a>
<a>{"Amp in auto (flex): " + team.autoNotesAttempted.filter(note => note.locationScored == ScoreLocation.Amp).length}</a>
<a>Collected: {team.autoNotesCollected.map(note => (
<a key={note.time}>{note.location + " @ " + note.time + " "}</a>
Expand Down Expand Up @@ -309,12 +290,12 @@ const TeleopView = ({team}: { team: TeamMatchData }) => {

<a>{"Comments: " + team.comments}</a>

{ team.humanPlayerAmp ?
{team.humanPlayerAmp ?
<>
<a>{"Amp Played: " + team.ampPlayed}</a>
<a>{"Amplify: " + team.amplify}</a>
<a>{"Microphone: " + team.microphone}</a>
</> : <></> }
</> : <></>}

<Image ref={imageRef} src={team.alliance === Alliance.Red ? "/Red.png" : "/Blue.png"} width={350}
alt="Field"/>
Expand Down
17 changes: 14 additions & 3 deletions app/viewer/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ import {useEffect, useState} from "react";
import {Alliance, Data, parseFirebaseData, TeamMatchData} from "@/components/data";
import {get, getDatabase, ref} from "@firebase/database";
import {Button, ButtonGroup} from "@nextui-org/button";
import {ModalFooter} from "@nextui-org/modal";
import {MatchDetailView, MatchListView} from "@/app/viewer/match";
import {TeamListView} from "@/app/viewer/team";
import {TeamDetailView, TeamListView} from "@/app/viewer/team";

enum View {
Matches,
Expand All @@ -17,6 +16,7 @@ export default function ViewerPage() {
const [data, setData] = useState<TeamMatchData[] | null>(null);
const [matchData, setMatchData] = useState<Data>();
const [selectedMatch, setSelectedMatch] = useState<number | null>(null);
const [selectedTeam, setSelectedTeam] = useState<number | null>(null);

const [view, setView] = useState(View.Matches);

Expand Down Expand Up @@ -59,6 +59,10 @@ export default function ViewerPage() {
setSelectedMatch(match)
}

function updateSelectedTeam(team: number | null) {
setSelectedTeam(team)
}

useEffect(() => {
//@ts-ignore
fetchAllMatches().then(value => convertMatches(value).then(value1 => setMatchData(value1)));
Expand All @@ -71,6 +75,13 @@ export default function ViewerPage() {
updateSelectedMatch={updateSelectedMatch}
/>
)
} else if (selectedTeam) {
return (
<TeamDetailView data={matchData?.matches.flatMap(
match => match.teams.filter(
team => team.teamNumber == selectedTeam
))} updateSelectedTeam={updateSelectedTeam} />
)
} else {
return (
<>
Expand All @@ -79,7 +90,7 @@ export default function ViewerPage() {
<Button variant="bordered" onPress={() => setView(View.Teams)}>Teams</Button>
</ButtonGroup>

{view == View.Matches ? <MatchListView matchData={matchData} updateSelectedMatch={updateSelectedMatch}/> : <TeamListView />}
{view == View.Matches ? <MatchListView matchData={matchData} updateSelectedMatch={updateSelectedMatch} updateSelectedTeam={updateSelectedTeam}/> : <TeamListView />}
</>
)
}
Expand Down
Loading

0 comments on commit c31e810

Please sign in to comment.