Updating Offline Mode

.env.production

@@ -3,4 +3,6 @@
 NEXT_PUBLIC_API_URL=/api/
 NEXT_PUBLIC_SLACK_CLIENT_ID=10831824934.7404945710466
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-1BFJYBDC76
-NEXT_PUBLIC_RECAPTCHA_KEY=6Le63OUqAAAAABxxDrbaU9OywDLLHqutVwbw7a9d
+NEXT_PUBLIC_RECAPTCHA_KEY=6Le63OUqAAAAABxxDrbaU9OywDLLHqutVwbw7a9d
+
+ENV_FILE=.env.production

.env.test

@@ -1,9 +1,20 @@
-NEXT_PUBLIC_API_URL=http://localhost:3000/api
+NEXTAUTH_URL=http://localhost:3000/
+NEXTAUTH_SECRET=testsecret
+
+NEXT_PUBLIC_API_URL=/api/
 
 DEVELOPER_EMAILS=["test@gmail.com"]
 
 TOA_URL=https://example.com
 TOA_APP_ID=123
 TOA_KEY=456
 
-DEFAULT_IMAGE=https://example.com/default.jpg
+DEFAULT_IMAGE=https://example.com/default.jpg
+
+BASE_URL_FOR_PLAYWRIGHT=http://localhost:3000/
+ENABLE_TEST_SIGNIN_ROUTE=true
+FALLBACK_MONGODB_URI=mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000
+
+ENV_FILE=.env.test
+
+DB=playwright_tests

.github/workflows/ci.yml

@@ -66,3 +66,9 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+  e2e_test:
+    uses: ./.github/workflows/e2e_test.yml
+    permissions:
+      contents: read
+      pull-requests: write

.github/workflows/e2e_test.yml

@@ -0,0 +1,71 @@
+name: Playwright Tests
+on: [workflow_dispatch, workflow_call]
+jobs:
+  e2e_tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        # Make sure to require each shard in GitHub!
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Start MongoDB
+        uses: supercharge/mongodb-github-action@1.12.0
+        with:
+          mongodb-version: "8.0"
+
+      - name: Run Playwright tests
+        run: npx cross-env NODE_ENV=test playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
+
+  merge_reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [e2e_tests]
+
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14

.gitignore

@@ -41,4 +41,11 @@ next-env.d.ts
 
 # PWA
 public/sw.js
-public/swe-worker*
+public/swe-worker*
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -8,6 +8,7 @@
 		"pmneo.tsimporter",
 		"austenc.tailwind-docs",
 		"bradlc.vscode-tailwindcss",
-		"Orta.vscode-jest"
+		"Orta.vscode-jest",
+		"ms-playwright.playwright"
 	]
 }

components/Avatar.tsx

@@ -3,7 +3,7 @@
 import { BsGearFill } from "react-icons/bs";
 
 export default function Avatar(props: {
-	user?: { image: string | undefined; level: number; admin?: boolean };
+	user?: { image: string | undefined; level?: number; admin?: boolean };
 	scale?: string | undefined; // Use "scale-75" for 75% scale, etc.
 	imgHeightOverride?: string | undefined;
 	showLevel?: boolean | undefined;
@@ -13,6 +13,7 @@
 	className?: string | undefined;
 	online?: boolean;
 	gearSize?: number;
+	altText?: string;
 }) {
 	const { session, status } = useCurrentSession();
 	const user = props.user ?? session?.user;
@@ -24,8 +25,8 @@
 		<div
 			className={`avatar ${props.online && "online"} ${props.scale} ${props.className} ${props.animation}`}
 		>
-			{(props.showLevel ?? true) && (
-				<div className="absolute z-10 bg-base-100 rounded-tl-xl rounded-br-xl h-6 w-14 text-center text-sm font-semibold">
+			{props.showLevel && (
+				<div className="absolute bg-base-100 rounded-tl-xl rounded-br-xl h-6 w-14 text-center text-sm font-semibold">
 					LVL: {user?.level}
 				</div>
 			)}
@@ -33,13 +34,13 @@
 				className={`w-28 ${props.imgHeightOverride ?? "h-28"} rounded-xl border-${props.borderThickness ?? 4} ${levelClass}`}
 			>
 				<img
 					src={image}
-					alt={"Avatar"}
+					alt={props.altText ?? "Avatar"}
 					onClick={props.onClick}
 				></img>
 			</div>
 			{admin ? (
-				<div className="absolute z-10 -bottom-2 -left-2 text-slate-300 animate-spin-slow">
+				<div className="absolute -bottom-2 -left-2 text-slate-300 animate-spin-slow">
 					<BsGearFill size={props.gearSize ?? 36}></BsGearFill>
 				</div>
 			) : (

components/Card.tsx

@@ -14,6 +14,7 @@ export default function Card(props: CardProps) {
 
 	return (
 		<div
+			title={title}
 			className={`card bg-base-200 shadow-xl w-2/3 max-sm:w-full ${className}`}
 		>
 			{color ? (

components/EditAvatarModal.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import Card from "./Card";
+import ClientApi from "@/lib/api/ClientApi";
+import Avatar from "./Avatar";
+import Image from "next/image";
+import { Session } from "inspector/promises";
+import toast from "react-hot-toast";
+
+const api = new ClientApi();
+export default function EditAvatarModal(props: {
+	currentImg: string;
+	close: () => void;
+}) {
+	const [newAvatar, setNewAvatar] = useState<string>(props.currentImg);
+
+	async function updateAvatar() {
+		toast.promise(
+			api.changePFP(newAvatar).then(() => location.reload()),
+			{
+				loading: "Updating profile picture...",
+				success: "Successfully updated profile picture!",
+				error: "Failed to update profile picture!",
+			},
+		);
+	}
+
+	return (
+		<dialog
+			open={true}
+			className="modal"
+		>
+			<Card
+				title="Edit Avatar"
+				coloredTop="bg-secondary"
+			>
+				<div className="my-9 flex justify-center w-full">
+					<Avatar
+						user={{ image: newAvatar }}
+						scale="scale-150"
+						altText="New Avatar"
+						showLevel={false}
+					/>
+				</div>
+
+				<input
+					defaultValue={props.currentImg}
+					className="input"
+					onChange={(e) => setNewAvatar(e.target.value)}
+					placeholder="Enter new avatar url"
+				/>
+				<div className="flex gap-2 justify-start w-full">
+					<button
+						className="btn btn-primary mt-2"
+						onClick={updateAvatar}
+					>
+						Save
+					</button>
+					<button
+						className="btn btn-accent mt-2"
+						onClick={props.close}
+					>
+						Cancel
+					</button>
+				</div>
+			</Card>
+		</dialog>
+	);
+}

components/SignInMenu.tsx

@@ -59,7 +59,13 @@ function SignInCard() {
 			<div className="card-body">
 				<h1 className="card-title">Sign In</h1>
 				{error && <p className="text-error">{error}</p>}
-				<p>Choose a login provider</p>
+				<p className="italic">Choose a login provider</p>
+				<span>
+					You currently <span className="text-red-500">have</span> to sign-in
+					using either your{" "}
+					<span className="text-green-400">original sign-in method</span> or
+					your <span className="text-green-400">email.</span>
+				</span>
 				<div className="divider" />
 
 				<button

components/ViewMatchesModal.tsx

@@ -0,0 +1,114 @@
+import { Match, Report } from "@/lib/Types";
+import Card from "./Card";
+import { User } from "../lib/Types";
+import { match } from "assert";
+import { report } from "process";
+import Checkbox from "./forms/Checkboxes";
+import { CheckmarkIcon } from "react-hot-toast";
+import { useState } from "react";
+import { toDict } from "@/lib/client/ClientUtils";
+
+type MatchData = {
+	number: number;
+	url: string;
+	message: string;
+	completed: boolean;
+	subjective: boolean;
+};
+
+function ViewMatchCard(props: MatchData) {
+	return (
+		<Card
+			title={"Match " + props.number}
+			className="w-full"
+		>
+			{props.message}
+			<a
+				href={props.url}
+				className={`btn btn-sm ${props.completed ? `btn-ghost` : props.subjective ? `btn-secondary` : `btn-primary`}`}
+			>
+				{props.completed ? "Submitted" : "Click to scout"}
+			</a>
+		</Card>
+	);
+}
+export default function ViewMatchesModal(props: {
+	close: () => void;
+	matches: Match[];
+	reports: Report[];
+	user: User;
+	matchPathway: string;
+}) {
+	const reportsById = toDict(props.reports);
+	const myMatches: MatchData[] = [];
+	const [showSubmittedReports, setShowSubmittedReports] = useState(false);
+
+	async function toggleShowSubmittedReports() {
+		setShowSubmittedReports(!showSubmittedReports);
+	}
+
+	for (const match of props.matches) {
+		if (match.subjectiveScouter == props.user._id?.toString()) {
+			myMatches.push({
+				number: match.number,
+				url: props.matchPathway + `/${match._id}/subjective`,
+				message: "You are subjective scouting match " + match.number + ".",
+				completed: match.assignedSubjectiveScouterHasSubmitted,
+				subjective: true,
+			});
+		}
+
+		for (const report of match.reports) {
+			if (reportsById[report]?.user == props.user._id?.toString()) {
+				myMatches.push({
+					number: match.number,
+					url: props.matchPathway + `/${report.toString()}`,
+					message:
+						"You are scouting team " +
+						reportsById[report].robotNumber +
+						" in match " +
+						match.number +
+						".",
+					completed: reportsById[report].submitted,
+					subjective: false,
+				});
+			}
+		}
+	}
+
+	return (
+		<dialog
+			open={true}
+			className="modal"
+		>
+			<Card title="My Matches">
+				<div className="absolute right-2 top-2 flex gap-4 items-center">
+					<div className="flex gap-2">
+						<div>Show Submitted Reports</div>
+						<input
+							type="checkbox"
+							onChange={toggleShowSubmittedReports}
+							className="checkbox checkbox-primary"
+						/>
+					</div>
+					<button
+						className="btn btn-sm btn-circle btn-ghost "
+						onClick={props.close}
+					>
+						✕
+					</button>
+				</div>
+				<div className="overflow-y-scroll h-[650px]">
+					{myMatches
+						.filter((matchData) => showSubmittedReports || !matchData.completed)
+						.map((matchData, index) => (
+							<ViewMatchCard
+								{...matchData}
+								key={index}
+							/>
+						))}
+				</div>
+			</Card>
+		</dialog>
+	);
+}