feat: offline mode / caching routes on startup

android/app/capacitor.build.gradle

@@ -9,6 +9,8 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-app')
+    implementation project(':capacitor-dialog')
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-geolocation')
     implementation project(':capacitor-preferences')

android/capacitor.settings.gradle

@@ -2,6 +2,12 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/.pnpm/@capacitor+android@8.3.0_patch_hash=5f151b861cf2cde88167eece495aecb0862a61bea5115b27870_874123a7c3556940d002a867e09a2b84/node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/.pnpm/@capacitor+app@8.1.1_@capacitor+core@8.3.0/node_modules/@capacitor/app/android')
+
+include ':capacitor-dialog'
+project(':capacitor-dialog').projectDir = new File('../node_modules/.pnpm/@capacitor+dialog@8.0.1_@capacitor+core@8.3.0/node_modules/@capacitor/dialog/android')
+
 include ':capacitor-filesystem'
 project(':capacitor-filesystem').projectDir = new File('../node_modules/.pnpm/@capacitor+filesystem@8.1.2_@capacitor+core@8.3.0/node_modules/@capacitor/filesystem/android')
 

ios/App/CapApp-SPM/Package.swift

@@ -12,6 +12,8 @@ let package = Package(
     ],
     dependencies: [
         .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", exact: "8.3.0"),
+        .package(name: "CapacitorApp", path: "../../../node_modules/.pnpm/@capacitor+app@8.1.1_@capacitor+core@8.3.0/node_modules/@capacitor/app"),
+        .package(name: "CapacitorDialog", path: "../../../node_modules/.pnpm/@capacitor+dialog@8.0.1_@capacitor+core@8.3.0/node_modules/@capacitor/dialog"),
         .package(name: "CapacitorFilesystem", path: "../../../node_modules/.pnpm/@capacitor+filesystem@8.1.2_@capacitor+core@8.3.0/node_modules/@capacitor/filesystem"),
         .package(name: "CapacitorGeolocation", path: "../../../node_modules/.pnpm/@capacitor+geolocation@8.0.0_@capacitor+core@8.3.0/node_modules/@capacitor/geolocation"),
         .package(name: "CapacitorPreferences", path: "../../../node_modules/.pnpm/@capacitor+preferences@8.0.1_@capacitor+core@8.3.0/node_modules/@capacitor/preferences")
@@ -22,6 +24,8 @@ let package = Package(
             dependencies: [
                 .product(name: "Capacitor", package: "capacitor-swift-pm"),
                 .product(name: "Cordova", package: "capacitor-swift-pm"),
+                .product(name: "CapacitorApp", package: "CapacitorApp"),
+                .product(name: "CapacitorDialog", package: "CapacitorDialog"),
                 .product(name: "CapacitorFilesystem", package: "CapacitorFilesystem"),
                 .product(name: "CapacitorGeolocation", package: "CapacitorGeolocation"),
                 .product(name: "CapacitorPreferences", package: "CapacitorPreferences")

package.json

@@ -39,7 +39,9 @@
   },
   "dependencies": {
     "@capacitor/android": "8.3.0",
+    "@capacitor/app": "^8.1.1",
     "@capacitor/core": "^8.3.0",
+    "@capacitor/dialog": "^8.0.1",
     "@capacitor/filesystem": "^8.1.2",
     "@capacitor/geolocation": "^8.0.0",
     "@capacitor/ios": "^8.3.0",

src/lib/components/ConnectionPill.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import * as Card from './ui/card';
+  import { onMount } from 'svelte';
+  import * as Empty from './ui/empty';
+  import { connectivityManager, ConnectionStatus } from '$lib/managers/connectivity.manager.svelte';
+  import { CloudOff } from '@lucide/svelte';
+  import { Spinner } from './ui/spinner';
+
+  type Props = {
+    animateTime?: number;
+    initialHideTime?: number; // prevent popup from showing on mount (ex, at homepage startup)
+    offset?: string; // gap between the safe area (notch/camera cutout) and the pill
+  };
+
+  const { animateTime = 500, initialHideTime = 0, offset = '0.75rem' }: Props = $props();
+
+  let mayShow = $state(false);
+  let contentWidth = $state(0);
+
+  const status = $derived.by(connectivityManager.getConnectionStatus);
+  const isBadStatus = $derived(status !== ConnectionStatus.ONLINE);
+
+  onMount(() => {
+    if (initialHideTime > 0) {
+      mayShow = false;
+      setTimeout(() => (mayShow = true), initialHideTime);
+    }
+  });
+</script>
+
+{#if mayShow && isBadStatus}
+  {@const Icon = status === ConnectionStatus.OFFLINE ? CloudOff : Spinner}
+  <div
+    class="pointer-events-none fixed inset-x-0 top-0 z-50 flex justify-center"
+    style="
+      padding-top: calc(env(safe-area-inset-top, 0px) + {offset});
+      padding-left: calc(env(safe-area-inset-left, 0px) + 0.75rem);
+      padding-right: calc(env(safe-area-inset-right, 0px) + 0.75rem);
+    "
+  >
+    <div
+      in:fly={{ y: -100, duration: animateTime, opacity: 1 }}
+      out:fly={{ y: -100, duration: animateTime, opacity: 1 }}
+    >
+      <Card.Root
+        class="flex-row items-center overflow-hidden rounded-full shadow-md transition-[width] duration-300 ease-out motion-reduce:transition-none"
+        style="width: {contentWidth ? `${contentWidth + 2}px` : 'auto'}"
+      >
+        <div
+          bind:clientWidth={contentWidth}
+          class="flex w-max shrink-0 flex-row items-center gap-2 py-2 pr-4 pl-2 whitespace-nowrap"
+        >
+          <Empty.Media variant="icon" class="mb-0 size-7 rounded-full">
+            <Icon class="size-4" />
+          </Empty.Media>
+          <Empty.Title class="text-sm font-semibold tracking-wide">
+            {ConnectionStatus.asMessage(status)}
+          </Empty.Title>
+        </div>
+      </Card.Root>
+    </div>
+  </div>
+{/if}

src/lib/components/map/MapElements.svelte

@@ -16,7 +16,7 @@
   import { goto } from '$app/navigation';
 
   const routes = useRoutes();
-  const drawnRouteIds = $derived(mapManager.drawnRoutes.map((route) => route.id));
+  const drawnRouteIds = $derived(mapManager.drawnRoutes.map((route) => route.routeCode));
   const busLocations = $derived(useVehicles(() => ({ route: mapManager.selectedRoute })));
 
   let userLocation: Location | null = $state(null);
@@ -58,21 +58,21 @@
     flushScheduled = false;
     const topmost = requestedRoutes.reduce((a, b) => (b.index > a.index ? b : a)).route;
     requestedRoutes.length = 0; //cursed
-    goto(`/route/${topmost.id}`);
+    goto(`/route/${topmost.routeCode}`);
   }
 </script>
 
 {#snippet routeLine(route: Route, index: number)}
-  {#each route.directions as direction (`${route.id}-${direction.id}`)}
+  {#each route.directions as direction (`${route.routeCode}-${direction.id}`)}
     {@const isSelected =
       direction.id === mapManager.selectedDirectionId || mapManager.selectedDirectionId == ''}
-    {@const isShown = drawnRouteIds.includes(route.id)}
+    {@const isShown = drawnRouteIds.includes(route.routeCode)}
     {@const opacity = isShown ? (isSelected ? 1 : 0.5) : 0}
 
     <MapRoute
       coordinates={direction.pathPoints.map((point) => [point.longitude, point.latitude])}
       color={getRouteTint(route, themeManager.theme)}
-      id={`${route.id}-${direction.id}`}
+      id={`${route.routeCode}-${direction.id}`}
       onclick={() => {
         if (!isSelected) return; //opacity check instead of isShown for ghost directional routes
         requestRoute(route, index);
@@ -103,7 +103,7 @@
   </MapMarker>
 {/snippet}
 
-{#each routes?.data as route, i (route.id)}
+{#each routes?.data as route, i (route.routeCode)}
   {@render routeLine(route, i)}
 {/each}
 

src/lib/components/ui/map/MapControls.svelte

@@ -2,11 +2,15 @@
   import { mapManager } from '$lib/managers/map.manager.svelte';
   import { cn } from '$lib/utils.js';
   import { Geolocation } from '@capacitor/geolocation';
-  import { Locate, LocateFixed } from '@lucide/svelte';
+  import { Braces, Locate, LocateFixed } from '@lucide/svelte';
   import { getContext } from 'svelte';
   import Button from '../button/button.svelte';
   import Spinner from '../spinner/spinner.svelte';
   import type { MapContext } from './Map.svelte';
+  import { connectivityManager } from '$lib/managers/connectivity.manager.svelte';
+  import { Dialog } from '@capacitor/dialog';
+  import { Capacitor, CapacitorException } from '@capacitor/core';
+  import { App } from '@capacitor/app';
   interface Props {
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     showZoom?: boolean;
@@ -67,6 +71,25 @@
       waitingForLocation = false;
     }
   }
+  async function handleCacheScramble() {
+    const { message, status } = await connectivityManager.scrambleCacheUUIDS();
+    await Dialog.alert({
+      title: 'Cache Scrambler',
+      message: message,
+    });
+    if (!status) return;
+    // true = exit
+    try {
+      await App.exitApp();
+    } catch (error) {
+      if (!(error instanceof CapacitorException)) return;
+      await Dialog.alert({
+        title: 'Cache Scrambler',
+        message: 'assuming webpage... reloading',
+      });
+      window.location.reload();
+    }
+  }
 </script>
 
 {#if loaded}
@@ -86,5 +109,17 @@
         <Locate class="size-6 stroke-muted-foreground" />
       {/if}
     </Button>
+    <!-- for uuid scrambling -->
+    {#if connectivityManager.isDevMode}
+      <Button
+        variant="outline"
+        size="icon-xl"
+        onclick={handleCacheScramble}
+        aria-label="Locate"
+        class="dark:bg-card"
+      >
+        <Braces class="size-6 stroke-muted-foreground"></Braces>
+      </Button>
+    {/if}
   </div>
 {/if}

src/lib/data/api/aggie_spirit.ts

@@ -45,6 +45,7 @@ export const useAuthCodeAPI = () => {
   const query = createLoggingQuery<string>(() => ({
     label: ASAPIQueryKey.AUTH_CODE,
     queryKey: [ASAPIQueryKey.AUTH_CODE],
+    meta: { network: true, auth: true },
     queryFn: async () => {
       const authCodeB64 = await (await fetch('https://auth.maroonrides.app')).text();
       return atob(authCodeB64);
@@ -60,6 +61,7 @@ export const useAuthTokenAPI = () => {
 
   const query = createDependencyQuery<Headers>(() => ({
     queryKey: [ASAPIQueryKey.AUTH_TOKEN],
+    meta: { network: true },
     queryFn: async () => {
       var res = await fetch('https://aggiespirit.ts.tamu.edu/', { credentials: 'omit' });
 
@@ -84,6 +86,7 @@ export const useRoutePlanAuthTokenAPI = (params: () => { queryString: string })
     const { queryString } = params();
     return {
       queryKey: [ASAPIQueryKey.ROUTE_PLAN_AUTH_TOKEN],
+      meta: { network: true },
       queryFn: async () => {
         var res = await fetch(`https://aggiespirit.ts.tamu.edu/TripPlanner/${queryString}`, {
           credentials: 'omit',
@@ -111,6 +114,7 @@ export const useBaseDataAPI = () => {
 
   const query = createDependencyQuery<IGetBaseDataResponse>(() => ({
     queryKey: [ASAPIQueryKey.BASE_DATA],
+    meta: { network: true },
     queryFn: async () => {
       const baseData = await getBaseData(authTokenQuery.data!);
       GetBaseDataResponseSchema.parse(baseData);
@@ -130,6 +134,7 @@ export const usePatternPathsAPI = () => {
 
   const query = createDependencyQuery<IGetPatternPathsResponse>(() => ({
     queryKey: [ASAPIQueryKey.PATTERN_PATHS],
+    meta: { network: true },
     queryFn: async () => {
       const baseData = baseDataQuery.data as IGetBaseDataResponse;
 
@@ -174,6 +179,7 @@ export const useStopEstimateAPI = (
     const { routeKey, directionKey, stopCode } = params();
     return {
       queryKey: [ASAPIQueryKey.STOP_ESTIMATE, routeKey, directionKey, stopCode],
+      meta: { network: true },
       queryFn: async () => {
         const response = await getNextDepartureTimes(
           routeKey,
@@ -200,6 +206,7 @@ export const useTimetableEstimateAPI = (params: () => { stopCode: string; date:
     const { stopCode, date } = params();
     return {
       queryKey: [ASAPIQueryKey.TIMETABLE_ESTIMATE, stopCode, moment(date).format('YYYY-MM-DD')],
+      meta: { network: true },
       queryFn: async () => {
         const response = await getStopEstimates(stopCode, date, authTokenQuery.data!);
         GetStopEstimatesResponseSchema.parse(response);
@@ -221,6 +228,7 @@ export const useStopScheduleAPI = (params: () => { stopCode: string; date: Date
     const { stopCode, date } = params();
     return {
       queryKey: [ASAPIQueryKey.STOP_SCHEDULE, stopCode, moment(date).format('YYYY-MM-DD')],
+      meta: { network: true },
       queryFn: async () => {
         const response = await getStopSchedules(stopCode, date, authTokenQuery.data!);
         GetStopSchedulesResponseSchema.parse(response);
@@ -242,6 +250,7 @@ export const useVehiclesAPI = (params: () => { routeKey: string }) => {
     const { routeKey } = params();
     return {
       queryKey: [ASAPIQueryKey.VEHICLES, routeKey],
+      meta: { network: true },
       queryFn: async () => {
         let busesResponse = (await getVehicles(
           [routeKey],

src/lib/data/api/route_planning.ts

@@ -24,6 +24,7 @@ export const useSearchSuggestionAPI = (params: () => { query: string }) => {
     const { query } = params();
     return {
       queryKey: [ASRoutePlanQueryKey.SEARCH_SUGGESTION, query],
+      meta: { network: true },
       queryFn: async () => {
         // we need data from pattern paths to get the stop GPS locations
         // This is limitation of the API where we can't get the GPS location of a stop directly
@@ -93,6 +94,7 @@ export const useTripPlanAPI = (
     const { origin, destination, date, deadline } = params();
     return {
       queryKey: [ASRoutePlanQueryKey.TRIP_PLAN, origin, destination, date, deadline],
+      meta: { network: true },
       queryFn: async () => {
         let response = await getTripPlan(
           routePlanAuthToken.data!,

src/lib/data/app.ts

@@ -9,7 +9,9 @@ import {
   type StopSchedule,
   type TimeEstimate,
 } from '$lib/data/types';
+import { connectivityManager } from '$lib/managers/connectivity.manager.svelte';
 import { queryLogger } from '$lib/utils/logger';
+import type { CreateQueryResult } from '@tanstack/svelte-query';
 import moment from 'moment';
 import { createDependencyQuery, createSelectableQuery } from '../utils/queries';
 import {
@@ -38,6 +40,8 @@ export const useRoutes = () => {
 
   const query = createDependencyQuery<Route[]>(() => ({
     queryKey: [QueryKey.ROUTE_LIST],
+    meta: { isRoutes: true },
+    placeholderData: connectivityManager.cachedRoutes,
     queryFn: async () => {
       queryLogger.i(`Loaded ${asRouteList.data?.length} routes from Aggie Spirit`);
       return asRouteList.data!;

src/lib/data/structure/aggie_spirit.ts

@@ -179,7 +179,7 @@ export const useASStopEstimate = (
     queryFn: async () => {
       const stopEstimates = apiStopEstimateQuery.data!;
 
-      return stopEstimates.routeDirectionTimes[0].nextDeparts.map((e) => {
+      return (stopEstimates.routeDirectionTimes[0]?.nextDeparts ?? []).map((e) => {
         return {
           dataSource: DataSource.AGGIE_SPIRIT,
           estimatedTime: e.estimatedDepartTimeUtc