feat(frc_events): Add FRC Events as an alternative match data source (#…

…60)

Co-authored-by: Evan Strat <[email protected]>

client/src/components/alerts/FrcEventsWarning.vue

@@ -0,0 +1,25 @@
+<template>
+  <VAlert v-if="!settingsStore.isFirstLoad && settingsStore.settings?.useFrcEventsApi"
+          color="warning"
+          variant="tonal"
+          density="comfortable"
+          :rounded="props.rounded ?? 0"
+          icon="mdi-alert-outline"
+  >
+    <template v-slot:text>
+      <strong>Using FRC Events API.</strong> This is not recommended unless match data is unavailable on The Blue
+      Alliance.
+    </template>
+  </VAlert>
+</template>
+<script lang="ts" setup>
+import {useSettingsStore} from "@/stores/settings";
+
+const settingsStore = useSettingsStore();
+settingsStore.getSettings();
+
+interface IProps {
+  rounded?: number;
+}
+const props = defineProps<IProps>();
+</script>

client/src/components/alerts/GlobalAlerts.vue

@@ -4,6 +4,7 @@
     <SandboxModeAlert />
     <PrivateUploads />
     <NoPlaylistMappings />
+    <FrcEventsWarning />
   </div>
 </template>
 
@@ -12,4 +13,5 @@ import SandboxModeAlert from "@/components/alerts/SandboxModeAlert.vue";
 import YouTubeAuthIncompleteAlert from "@/components/alerts/YouTubeAuthIncompleteAlert.vue";
 import NoPlaylistMappings from "@/components/alerts/NoPlaylistMappings.vue";
 import PrivateUploads from "@/components/alerts/PrivateUploads.vue";
+import FrcEventsWarning from "@/components/alerts/FrcEventsWarning.vue";
 </script>

client/src/components/alerts/NoPlaylistMappings.vue

@@ -2,6 +2,7 @@
   <VAlert v-if="!playlistsStore.isFirstLoad && !playlistsStore.playlists?.length"
           color="info"
           variant="tonal"
+          density="comfortable"
           :rounded="props.rounded ?? 0"
           icon="mdi-upload-off"
   >

client/src/components/alerts/PrivateUploads.vue

@@ -2,6 +2,7 @@
   <VAlert v-if="!settingsStore.isFirstLoad && settingsStore.settings?.youTubeVideoPrivacy !== 'public'"
           color="warning"
           variant="tonal"
+          density="comfortable"
           :rounded="props.rounded ?? 0"
           icon="mdi-eye-off"
   >

client/src/components/alerts/SandboxModeAlert.vue

@@ -2,6 +2,7 @@
   <VAlert v-if="!settingsStore.isFirstLoad && settingsStore.settings?.sandboxModeEnabled"
           color="warning"
           variant="tonal"
+          density="comfortable"
           :rounded="props.rounded ?? 0"
           icon="mdi-upload-off"
   >

client/src/components/alerts/YouTubeAuthIncompleteAlert.vue

@@ -3,6 +3,7 @@
           color="error"
           variant="tonal"
           :rounded="0"
+          density="comfortable"
           icon="mdi-alert-circle"
   >
     <template v-slot:text>

client/src/components/matches/MatchDataAttribution.vue

@@ -0,0 +1,19 @@
+<template>
+  <p v-if="settingsStore.settings?.useFrcEventsApi"
+     class="text-caption"
+  >
+    <VIcon icon="mdi-information" /> <a target="_blank" href="https://frc-events.firstinspires.org/services/API">
+      Event Data provided by <em>FIRST</em>
+    </a>
+  </p>
+  <p v-else class="text-caption">
+    <VIcon icon="mdi-information" /> <a target="_blank" href="https://thebluealliance.com">
+      Powered by The Blue Alliance
+    </a>
+  </p>
+</template>
+<script lang="ts" setup>
+import {useSettingsStore} from "@/stores/settings";
+
+const settingsStore = useSettingsStore();
+</script>

client/src/components/matches/MatchSelector.vue

@@ -5,6 +5,13 @@
   >
     {{ matchListStore.error }}
   </VAlert>
+
+  <VRow class="mb-1">
+    <VCol>
+      <MatchDataAttribution />
+    </VCol>
+  </VRow>
+
   <!--
   Note: this component may be laggy when running in development, but in production builds the performance
   should become significantly better.
@@ -31,7 +38,7 @@
       >
         Refresh
       </VBtn>
-      <VBtn v-if="matchStore.selectedMatchKey"
+      <VBtn v-if="!settingsStore.settings?.useFrcEventsApi && matchStore.selectedMatchKey"
             prepend-icon="mdi-open-in-new"
             variant="outlined"
             class="ml-2"
@@ -71,9 +78,13 @@
 import {useMatchStore} from "@/stores/match";
 import {useMatchListStore} from "@/stores/matchList";
 import {onMounted} from "vue";
+import FrcEventsWarning from "@/components/alerts/FrcEventsWarning.vue";
+import {useSettingsStore} from "@/stores/settings";
+import MatchDataAttribution from "@/components/matches/MatchDataAttribution.vue";
 
 const matchStore = useMatchStore();
 const matchListStore = useMatchListStore();
+const settingsStore = useSettingsStore();
 
 onMounted(() => {
   matchListStore.getMatchList();

client/src/types/IObfuscatedSecrets.ts

@@ -5,5 +5,6 @@ export interface IObfuscatedSecrets {
     theBlueAllianceReadApiKey: boolean,
     theBlueAllianceTrustedApiAuthId: boolean,
     theBlueAllianceTrustedApiAuthSecret: boolean,
+    frcEventsApiKey: boolean,
     [key: string]: boolean,
 }

client/src/types/ISettings.ts

@@ -11,6 +11,7 @@ export interface ISettings {
   sandboxModeEnabled: boolean,
   youTubeVideoPrivacy: string,
   linkVideosOnTheBlueAlliance: boolean;
+  useFrcEventsApi: boolean;
   [key: string]: string | boolean,
 }
 

client/src/views/Settings.vue

@@ -89,8 +89,7 @@
                 variant="tonal"
                 class="mt-4 mb-4"
         >
-          Before you can enter your TBA trusted API auth ID and secret, you need to enable this feature using the
-          toggle above.
+          Some settings are hidden because linking match videos on TBA is disabled. Enable the feature to see them.
         </VAlert>
 
         <AutosavingTextInput v-if="
@@ -120,6 +119,50 @@
                                ''"
         />
 
+        <h2 class="mt-4">
+          FRC Events API
+        </h2>
+        <p class="mt-4">
+          If match data is unavailable on The Blue Alliance, it may be available on the FRC Events API. You can check
+          if data is available on
+          <a href="https://frc-events.firstinspires.org/">https://frc-events.firstinspires.org/</a> and request API
+          credentials at
+          <a href="https://frc-events.firstinspires.org/services/API">
+            https://frc-events.firstinspires.org/services/API
+          </a>.
+        </p>
+        <p class="mt-4 mb-2">
+          To compute the API key, base64 encode the text <code>username:AuthorizationKey</code> and then
+          paste it below.
+        </p>
+
+        <p class="mt-4">Retrieve match data from FRC Events</p>
+        <AutosavingBtnSelectGroup :choices="['On', 'Off']"
+                                  :default-value="settingsStore.settings?.useFrcEventsApi ? 'On' : 'Off'"
+                                  :loading="savingFrcEventsApiKey"
+                                  @on-choice-selected="saveFrcEventsApiKey"
+        />
+
+        <VAlert v-if="!settingsStore.settings?.useFrcEventsApi"
+                color="info"
+                variant="tonal"
+                class="mt-4 mb-4"
+        >
+          Some settings are hidden because FRC Events integration is disabled. Enable the feature to see them.
+        </VAlert>
+        <AutosavingTextInput v-else
+                             :key="`frcEventsApiKey-${dataRefreshKey}`"
+                             :on-submit="submit"
+                             initial-value=""
+                             name="frcEventsApiKey"
+                             label="Base64-encoded FRC Events API key"
+                             input-type="password"
+                             setting-type="secret"
+                             :help-text="settingsStore.obfuscatedSecrets?.frcEventsApiKey ?
+                               'Current value hidden' :
+                               ''"
+        />
+
         <h2 class="mt-4">
           Playlist mappings
         </h2>
@@ -301,6 +344,16 @@ const tbaReadApiKeyHelpText = computed((): string => {
   return baseText;
 });
 
+// TODO(Evan): Move into its own component
+const savingFrcEventsApiKey = ref(false);
+
+async function saveFrcEventsApiKey(value: string): Promise<void> {
+  savingFrcEventsApiKey.value = true;
+  await submit("useFrcEventsApi", value === "On", "setting");
+  await refreshData(false);
+  savingFrcEventsApiKey.value = false;
+}
+
 </script>
 
 <style scoped>

server/settings/secrets.example.json

@@ -5,5 +5,6 @@
   "googleTokenExpiry": "",
   "theBlueAllianceReadApiKey": "",
   "theBlueAllianceTrustedApiAuthId": "",
-  "theBlueAllianceTrustedApiAuthSecret": ""
+  "theBlueAllianceTrustedApiAuthSecret": "",
+  "frcEventsApiKey": ""
 }

server/settings/settings.example.json

@@ -7,5 +7,6 @@
   "sandboxModeEnabled": true,
   "playoffsType": "Double elimination playoff",
   "youTubeVideoPrivacy": "private",
-  "linkVideosOnTheBlueAlliance": false
+  "linkVideosOnTheBlueAlliance": false,
+  "useFrcEventsApi": false
 }

server/src/models/CompLevel.ts

@@ -1,4 +1,6 @@
 /* eslint-disable no-unused-vars */
+import { type FrcApiTournamentLevel } from "@src/models/frcEvents/frcTournamentLevel";
+
 /**
  * Represents the competition level of a match.
  */
@@ -48,3 +50,33 @@ export function abbreviatedCompLevel(compLevel: CompLevel): string {
             throw new Error(`Comp level ${compLevel} is invalid.`);
     }
 }
+
+export function toFrcApiTournamentLevel(compLevel: CompLevel): FrcApiTournamentLevel {
+    switch (compLevel) {
+        case CompLevel.Qualification:
+            return "qual";
+        case CompLevel.Quarterfinal:
+            return "playoff";
+        case CompLevel.Semifinal:
+            return "playoff";
+        case CompLevel.Final:
+            return "playoff";
+        default:
+            throw new Error(`Comp level ${compLevel} is invalid.`);
+    }
+}
+
+export function toFrcEventsUrlTournamentLevel(compLevel: CompLevel): string {
+    switch (compLevel) {
+        case CompLevel.Qualification:
+            return "qualifications";
+        case CompLevel.Quarterfinal:
+            return "playoffs";
+        case CompLevel.Semifinal:
+            return "playoffs";
+        case CompLevel.Final:
+            return "playoffs";
+        default:
+            throw new Error(`Comp level ${compLevel} is invalid.`);
+    }
+}

server/src/models/Settings.ts

@@ -8,6 +8,7 @@ export interface ISettings {
     sandboxModeEnabled: boolean,
     youTubeVideoPrivacy: string,
     linkVideosOnTheBlueAlliance: boolean;
+    useFrcEventsApi: boolean;
 }
 
 export type SettingsKey = keyof ISettings;
@@ -20,6 +21,7 @@ export interface ISecretSettings {
     theBlueAllianceReadApiKey: string,
     theBlueAllianceTrustedApiAuthId: string,
     theBlueAllianceTrustedApiAuthSecret: string,
+    frcEventsApiKey: string,
     [key: string]: string,
 }