Offline Mode

components/Container.tsx

@@ -3,15 +3,19 @@ import { useCurrentSession } from "@/lib/client/useCurrentSession";
 import Link from "next/link";
 import { ReactNode, useEffect, useState } from "react";
 import { BiMenu, BiPlus, BiHome, BiSolidPhone } from "react-icons/bi";
-import { IoSunny, IoMoon } from "react-icons/io5";
+import { IoSunny, IoMoon, IoCloudOffline } from "react-icons/io5";
 import { BsGearFill } from "react-icons/bs";
 import ClientAPI from "@/lib/client/ClientAPI";
 import Footer from "./Footer";
 import { FaDiscord, FaSearch } from "react-icons/fa";
 import useCheckMobile from "@/lib/client/useCheckMobile";
-import { MdInfo, MdWarning } from "react-icons/md";
+import { MdInfo, MdOfflineBolt, MdOfflinePin, MdOfflineShare, MdWarning } from "react-icons/md";
+import { RiWifiOffLine } from "react-icons/ri";
 import Avatar from "./Avatar";
 import Banner, { DiscordBanner } from "./Banner";
+import { stat } from "fs";
+import useIsOnline from "@/lib/client/useIsOnline";
+import { forceOfflineMode } from "@/lib/client/ClientUtils";
 import Head from "next/head";
 
 const api = new ClientAPI("gearboxiscool");
@@ -30,7 +34,8 @@ type ContainerProps = {
 export default function Container(props: ContainerProps) {
   const { session, status } = useCurrentSession();
   const user = session?.user;
-  const authenticated = status === "authenticated";
+  const isOnline = useIsOnline();
+  const authenticated = !forceOfflineMode() && status === "authenticated";
 
   const [loadingTeams, setLoadingTeams] = useState<boolean>(false);
   const [accepted, setAccepted] = useState(false);
@@ -78,7 +83,10 @@ export default function Container(props: ContainerProps) {
       setLoadingTeams(true);
       let newTeams: Team[] = [];
       for (const team of user.teams) {
-        newTeams.push(await api.findTeamById(team));
+        const foundTeam = await api.findTeamById(team).catch(() => undefined);
+        if (!foundTeam)
+          continue;
+        newTeams.push(foundTeam);
       }
       setTeams(newTeams);
 
@@ -96,7 +104,13 @@ export default function Container(props: ContainerProps) {
       setLoadingSeasons(true);
 
       let newSeasons: Season[] = [];
-      for (const season of selectedTeam.seasons) {
+
+      if (!selectedTeam?.seasons) {
+        setLoadingSeasons(false);
+        return;
+      }
+
+      for (const season of selectedTeam?.seasons) {
         newSeasons.push(await api.findSeasonById(season));
       }
 
@@ -159,7 +173,7 @@ export default function Container(props: ContainerProps) {
                 className="grow bg-base-100"
                 placeholder="Search an event"
               />
-              <FaSearch></FaSearch>
+              <FaSearch />
               {eventResults.length > 0 ? (
                 <div className="absolute -translate-x-5 translate-y-20 sm:translate-y-24 w-1/2 sm:w-1/4 bg-base-300 rounded-b-lg sm:p-2">
                   <ul>
@@ -192,23 +206,21 @@ export default function Container(props: ContainerProps) {
                     borderThickness={2}
                   />
                 </Link>
-              ) : (
-                // <Link
-                //   href={"/profile"}
-                //   tabIndex={0}
-                //   className="btn btn-ghost btn-circle avatar sm:mr-5"
-                // >
-                //   <div className="w-10 rounded-full">
-                //     <img src={user?.image} />
-                //   </div>
-                // </Link>
+              ) : isOnline ? (
                 <a
                   href={"/api/auth/signin"}
                   rel="noopener noreferrer"
                   target="_blank"
                 >
                   <button className="btn btn-primary sm:mr-4">Sign In</button>
                 </a>
+              ) : (
+                <Link href="/offline" className="btn btn-ghost flex flex-row sm:mr-4">
+                  <div className="tooltip tooltip-left" data-tip="You are offline.">
+                    <RiWifiOffLine className="text-2xl" />
+                  </div>
+                  <span>Go to offline scouting</span>
+                </Link>
               )}
 
               {/*
@@ -297,7 +309,7 @@ export default function Container(props: ContainerProps) {
                 {teams.map((team, index) => {
                   var initials = team.name
                     ?.split(" ")
-                    .map((section) => section.charAt(0)) ?? "?";
+                    ?.map((section) => section.charAt(0)) ?? "?";
                   var selected = index === selectedTeamIndex;
                   return (
                     <button

components/Footer.tsx

@@ -76,7 +76,7 @@ export default function Footer() {
         >
           <FaList className="inline mr-1" size={16}/>About Us
         </Link>
-        <div>Version {VERSION}</div>
+        <div>Version {new Date(+process.env.NEXT_PUBLIC_BUILD_TIME).toISOString()}</div>
       </nav>
       <div className="max-sm:hidden flex-row flex space-x-4">
         <Link

components/PitReport.tsx

@@ -0,0 +1,185 @@
+import ClientAPI from "@/lib/client/ClientAPI";
+import { useCurrentSession } from "@/lib/client/useCurrentSession";
+import { FormLayout, FormElement, BlockElement } from "@/lib/Layout";
+import { Pitreport, PitReportData } from "@/lib/Types";
+import { useState, useCallback } from "react";
+import { FaRobot } from "react-icons/fa";
+import Flex from "./Flex";
+import Checkbox from "./forms/Checkboxes";
+import ImageUpload from "./forms/ImageUpload";
+import Card from "./Card";
+import { getCompFromLocalStorage, updateCompInLocalStorage } from "@/lib/client/offlineUtils";
+import QRCode from "react-qr-code";
+import { Analytics } from "@/lib/client/Analytics";
+
+const api = new ClientAPI("gearboxiscool");
+
+export default function PitReportForm(props: { pitReport: Pitreport, layout: FormLayout<PitReportData>, compId?: string, 
+    usersteamNumber?: number, compName?: string, username?: string }) {
+  const { session } = useCurrentSession();
+
+  const [pitreport, setPitreport] = useState(props.pitReport);
+
+  const setCallback = useCallback(
+    (key: any, value: boolean | string | number) => {
+      setPitreport((old) => {
+        let copy = structuredClone(old);
+        //@ts-expect-error
+        copy.data[key] = value;
+        return copy;
+      });
+    },
+    []
+  );
+
+  async function submit() {
+    // Remove _id from object
+    const { _id, ...report } = pitreport;
+
+    console.log("Submitting pitreport", report);
+    api.updatePitreport(props.pitReport?._id, {
+      ...report,
+      submitted: true,
+      submitter: session?.user?._id
+    })
+    .catch((e) => {
+      console.error("Error submitting pitreport", e);
+
+      if (!props.compId || !pitreport._id) return;
+
+      updateCompInLocalStorage(props.compId, (comp) => {
+        if (!pitreport._id) {
+          console.error("Pitreport has no _id");
+          return;
+        }
+
+        console.log("Updating pitreport in local storage");
+
+        comp.pitReports[pitreport._id] = {
+          ...pitreport,
+          submitted: true,
+          submitter: session?.user?._id
+        };
+      });
+    })
+    .then(() => {
+      Analytics.pitReportSubmitted(pitreport.teamNumber, props.usersteamNumber ?? -1, props.compName ?? "Unknown", props.username ?? "Unknown");
+    })
+    .finally(() => {
+      location.href = location.href.substring(0, location.href.lastIndexOf("/pit"));
+    });
+  }
+
+  function getComponent(element: FormElement<PitReportData>, isLastInHeader: boolean) {
+    const key = element.key as string;
+
+    if (element.type === "image")
+      return <ImageUpload report={pitreport} callback={setCallback} />
+
+    if (element.type === "boolean")
+      return <Checkbox label={element.label ?? element.key as string} dataKey={key} data={pitreport} callback={setCallback} 
+        divider={!isLastInHeader} />
+
+    if (element.type === "number")
+      return (<>
+        <h1 className="font-semibold text-lg">{element.label}</h1>
+        <input
+          value={pitreport.data?.[key]}
+          onChange={(e) => setCallback(key, e.target.value)}
+          type="number"
+          className="input input-bordered"
+          placeholder={element.label}
+        />
+      </>);
+
+    if (element.type === "string")
+      return (
+        <textarea
+          value={pitreport.data?.comments}
+          className="textarea textarea-primary w-[90%]"
+          placeholder="Say Something Important..."
+          onChange={(e) => {
+            setCallback("comments", e.target.value);
+          }}
+        />
+      );
+
+    const entries = Object.entries(element.type!).map((entry, index) => {
+      const color = ["primary", "accent", "secondary"][index % 3];
+
+      return (
+        <>
+          <span>{entry[0]}</span>
+          <input
+            type="radio"
+            className={`radio radio-${color}`}
+            onChange={() =>
+              setCallback(key, entry[1] as boolean | string | number)
+            }
+            checked={pitreport.data?.[element.key as string] === entry[1]}
+          />
+        </>
+      );
+    });
+
+    return (<>
+      <h1 className="font-semibold text-lg">{element.label}</h1>
+      <div className="grid grid-cols-2 translate-x-6 space-y-1">{entries}</div>
+    </>);
+  }
+
+  const components = Object.entries(props.layout).map(([header, elements]) => {
+    const inputs = elements.map((element, index) => {
+      if (!Array.isArray(element))
+        return getComponent(element as FormElement<PitReportData>, index === elements.length - 1);
+
+      const block = element as BlockElement<PitReportData>;
+      return block?.map((row) =>
+        row.map((element, elementIndex) =>
+          getComponent(element, elementIndex === row.length - 1)
+        )
+      );
+    });
+
+    return (
+      <div key={header}>
+        <h1 className="font-semibold text-lg">{header}</h1>
+        <div className="translate-x-10">
+          {inputs}
+        </div>
+      </div>
+    );
+  });
+
+  return (
+    <Flex mode="col" className="items-center w-screen h-full space-y-4">
+      <Card className="w-1/4" coloredTop="bg-accent">
+        <Flex center={true} mode="col">
+          <h1 className="text-4xl font-semibold">Pitscouting</h1>
+          <div className="divider"></div>
+          <h1 className="font-semibold text-2xl">
+            <FaRobot className="inline mr-2" size={30}></FaRobot>
+            Team <span className="text-accent">{pitreport.teamNumber}</span>
+          </h1>
+        </Flex>
+      </Card>
+      <Card>
+        {components}
+        <button className="btn btn-primary " onClick={submit}>
+          Submit
+        </button>
+      </Card>
+      <Card title="Share while offline">
+        <div className="w-full flex justify-center">
+          <QRCode value={JSON.stringify({
+            pitReport: {
+              ...pitreport,
+              submitted: true,
+              submitter: session?.user?._id
+            }
+          })} />
+        </div>
+      </Card>
+    </Flex>
+  );
+}

components/PwaConfig.tsx

@@ -2,49 +2,49 @@ export default function PwaConfig() {
   return (
     <>
       <meta name="application-name" content="Gearbox" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-        <meta name="apple-mobile-web-app-title" content="Gearbox" />
-        <meta name="description" content="Scouting made simple." />
-        <meta name="format-detection" content="telephone=no" />
-        <meta name="mobile-web-app-capable" content="yes" />
-        <meta name="msapplication-config" content="/icons/browserconfig.xml" />
-        <meta name="msapplication-TileColor" content="#2B5797" />
-        <meta name="msapplication-tap-highlight" content="no" />
-        <meta name="theme-color" content="#000000" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+      <meta name="apple-mobile-web-app-title" content="Gearbox" />
+      <meta name="description" content="Scouting made simple." />
+      <meta name="format-detection" content="telephone=no" />
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="msapplication-config" content="/icons/browserconfig.xml" />
+      <meta name="msapplication-TileColor" content="#2B5797" />
+      <meta name="msapplication-tap-highlight" content="no" />
+      <meta name="theme-color" content="#000000" />
 
-        <link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" />
-        <link rel="apple-touch-icon" sizes="152x152" href="/icons/touch-icon-ipad.png" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/icons/touch-icon-iphone-retina.png" />
-        <link rel="apple-touch-icon" sizes="167x167" href="/icons/touch-icon-ipad-retina.png" />
+      <link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" />
+      <link rel="apple-touch-icon" sizes="152x152" href="/icons/touch-icon-ipad.png" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/icons/touch-icon-iphone-retina.png" />
+      <link rel="apple-touch-icon" sizes="167x167" href="/icons/touch-icon-ipad-retina.png" />
 
-        <link rel="icon" type="image/png" sizes="220x204" href="/public/favicon.png" />
-        <link rel="manifest" href="/manifest.json" />
-        <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
-        <link rel="shortcut icon" href="/favicon.ico" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+      <link rel="icon" type="image/png" sizes="220x204" href="/public/favicon.png" />
+      <link rel="manifest" href="/manifest.json" />
+      <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
+      <link rel="shortcut icon" href="/favicon.ico" />
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
 
-        <meta name="twitter:card" content="summary" />
-        <meta name="twitter:url" content="https://4026.org" />
-        <meta name="twitter:title" content="Gearbox" />
-        <meta name="twitter:description" content="Scouting made simple." />
-        <meta name="twitter:image" content="https://yourdomain.com/icons/android-chrome-192x192.png" />
-        <meta name="twitter:creator" content="@4026" />
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content="Gearbox" />
-        <meta property="og:description" content="Scouting made simple." />
-        <meta property="og:site_name" content="Gearbox" />
-        <meta property="og:url" content="https://4026.org" />
-        <meta property="og:image" content="https://4026.org/public/favicon.png" />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:url" content="https://4026.org" />
+      <meta name="twitter:title" content="Gearbox" />
+      <meta name="twitter:description" content="Scouting made simple." />
+      <meta name="twitter:image" content="https://yourdomain.com/icons/android-chrome-192x192.png" />
+      <meta name="twitter:creator" content="@4026" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="Gearbox" />
+      <meta property="og:description" content="Scouting made simple." />
+      <meta property="og:site_name" content="Gearbox" />
+      <meta property="og:url" content="https://4026.org" />
+      <meta property="og:image" content="https://4026.org/public/favicon.png" />
 
-        {/* apple splash screen images */}
-        {/* <link rel='apple-touch-startup-image' href='/images/apple_splash_2048.png' sizes='2048x2732' />
-        <link rel='apple-touch-startup-image' href='/images/apple_splash_1668.png' sizes='1668x2224' />
-        <link rel='apple-touch-startup-image' href='/images/apple_splash_1536.png' sizes='1536x2048' />
-        <link rel='apple-touch-startup-image' href='/images/apple_splash_1125.png' sizes='1125x2436' />
-        <link rel='apple-touch-startup-image' href='/images/apple_splash_1242.png' sizes='1242x2208' />
-        <link rel='apple-touch-startup-image' href='/images/apple_splash_750.png' sizes='750x1334' />
-        <link rel='apple-touch-startup-image' href='/images/apple_splash_640.png' sizes='640x1136' /> */}
+      {/* apple splash screen images */}
+      {/* <link rel='apple-touch-startup-image' href='/images/apple_splash_2048.png' sizes='2048x2732' />
+      <link rel='apple-touch-startup-image' href='/images/apple_splash_1668.png' sizes='1668x2224' />
+      <link rel='apple-touch-startup-image' href='/images/apple_splash_1536.png' sizes='1536x2048' />
+      <link rel='apple-touch-startup-image' href='/images/apple_splash_1125.png' sizes='1125x2436' />
+      <link rel='apple-touch-startup-image' href='/images/apple_splash_1242.png' sizes='1242x2208' />
+      <link rel='apple-touch-startup-image' href='/images/apple_splash_750.png' sizes='750x1334' />
+      <link rel='apple-touch-startup-image' href='/images/apple_splash_640.png' sizes='640x1136' /> */}
     </>
   );
 }