Merge pull request #49 from Shinsina/improvements

Usability improvements
Shinsina · May 14, 2024 · c1a7dd4 · c1a7dd4
2 parents d5efb07 + eeb4afd
commit c1a7dd4
Show file tree

Hide file tree

Showing 17 changed files with 508 additions and 111 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,13 +12,13 @@
   "dependencies": {
     "@alpinejs/collapse": "^3.13.10",
     "@astrojs/alpinejs": "^0.4.0",
-    "@astrojs/db": "^0.11.0",
+    "@astrojs/db": "^0.11.1",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
     "@types/alpinejs": "^3.13.10",
     "@types/alpinejs__collapse": "^3.13.4",
     "alpinejs": "^3.13.10",
-    "astro": "^4.7.1",
+    "astro": "^4.8.3",
     "tailwindcss": "^3.4.3"
   }
 }
diff --git a/src/lib/layouts/default.astro b/src/lib/layouts/default.astro
@@ -1,5 +1,5 @@
 ---
-const { title, description } = Astro.props;
+const { id, title, description } = Astro.props;
 const seoTitle = title ? `Stat 'n' Track: ${title}` : "Stat 'n' Track";
 const seoDescription =
   description || "An iRacing planner and statistics analyzer";
@@ -37,6 +37,72 @@ const seoDescription =
         >
       </div>
     </div>
+    { id ? (<div
+      class="text-center lg:text-3xl md:text-lg sm:text-md grid grid-cols-5 py-2 border-white border-x-2 border-b-2"
+    >
+      <div>
+        <a class="underline" href=`/Stat-N-Track/user/${id}/scheduling`
+          >Scheduling</a
+        >
+      </div>
+      <div>
+        <a class="underline" href=`/Stat-N-Track/user/${id}/scheduling/by-week`
+          >Scheduling By Week</a
+        >
+      </div>
+      <div>
+        <a class="underline" href=`/Stat-N-Track/user/${id}/subsessions`
+          >All Sessions</a
+        >
+      </div>
+      <div>
+        <a class="underline" href=`/Stat-N-Track/user/${id}/subsessions/by-year`
+          >Sessions By Year</a
+        >
+      </div>
+      <div>
+        <a
+          class="underline"
+          href=`/Stat-N-Track/user/${id}/subsessions/by-car-class`
+          >Sessions By Car Class</a
+        >
+      </div>
+    </div>
+    <div
+      class="text-center lg:text-3xl md:text-lg sm:text-md grid grid-cols-5 py-2 border-white border-x-2 border-b-2"
+    >
+      <div>
+        <a
+          class="underline"
+          href=`/Stat-N-Track/user/${id}/subsessions/by-track`
+          >Sessions By Track</a
+        >
+      </div>
+      <div>
+        <a class="underline" href=`/Stat-N-Track/user/${id}/standings`
+          >All Season Standings</a
+        >
+      </div>
+      <div>
+        <a
+          class="underline"
+          href=`/Stat-N-Track/user/${id}/standings/full-participation`
+          >Fully Participated Season Standings</a
+        >
+      </div>
+      <div>
+        <a class="underline" href=`/Stat-N-Track/user/${id}/standings/by-year`
+          >Season Standings By Year</a
+        >
+      </div>
+      <div>
+        <a
+          class="underline"
+          href=`/Stat-N-Track/user/${id}/standings/by-car-class`
+          >Season Standings By Car Class</a
+        >
+      </div>
+    </div>) : <></> }
     <slot />
   </body>
 </html>
diff --git a/src/lib/layouts/standings.astro b/src/lib/layouts/standings.astro
@@ -79,7 +79,7 @@ const generateLinkForKey = ({
 };
 ---
 
-<DefaultLayout title={seoTitle} description={seoDescription}>
+<DefaultLayout {id} title={seoTitle} description={seoDescription}>
   <div class="grid grid-cols-1 pt-6 overflow-x-scroll">
     <table x-ref="Table" x-data="table" class="text-center col-span-1">
       <tr x-ref="Headings"

diff --git a/src/lib/layouts/subsessions.astro b/src/lib/layouts/subsessions.astro
@@ -5,7 +5,7 @@ import lapTimeFields from "$lib/utils/lap-time-fields";
 import parseLapTime from "$lib/utils/parse-lap-time";
 import type { SessionResult, Subsession as SubsessionType } from "$lib/types";
 import DefaultLayout from "$lib/layouts/default.astro";
-const { seoTitle, seoDescription, subsessions } = Astro.props;
+const { id, seoTitle, seoDescription, subsessions } = Astro.props;
 const results = subsessions.map(
   ({
     Subsession,
@@ -77,7 +77,7 @@ const keysToDisplay = new Set(Object.keys(results[0] || {}));
 const { keysArray, handledResults } = handleResults({ keysToDisplay, results });
 ---
 
-<DefaultLayout title={seoTitle} description={seoDescription}>
+<DefaultLayout {id} title={seoTitle} description={seoDescription}>
   <div class="grid grid-cols-1 pt-6 overflow-x-scroll">
     <table x-ref="Table" x-data="table" class="text-center col-span-1">
       <tr x-ref="Headings"

diff --git a/src/pages/user/[id]/index.astro b/src/pages/user/[id]/index.astro
@@ -9,63 +9,4 @@ const title = `User  - ${id}`;
 const description = `User page for user ID: ${id}`;
 ---
 
-<DefaultLayout {title} {description}>
-  <div class="h-screen text-center text-3xl">
-    <div>
-      <a class="underline" href=`/Stat-N-Track/user/${id}/scheduling`
-        >Scheduling</a
-      >
-    </div>
-    <div>
-      <a class="underline" href=`/Stat-N-Track/user/${id}/scheduling/by-week`
-        >Scheduling By Week</a
-      >
-    </div>
-    <div>
-      <a class="underline" href=`/Stat-N-Track/user/${id}/subsessions`
-        >All Sessions</a
-      >
-    </div>
-    <div>
-      <a class="underline" href=`/Stat-N-Track/user/${id}/subsessions/by-year`
-        >Sessions By Year</a
-      >
-    </div>
-    <div>
-      <a
-        class="underline"
-        href=`/Stat-N-Track/user/${id}/subsessions/by-car-class`
-        >Sessions By Car Class</a
-      >
-    </div>
-    <div>
-      <a class="underline" href=`/Stat-N-Track/user/${id}/subsessions/by-track`
-        >Sessions By Track</a
-      >
-    </div>
-    <div>
-      <a class="underline" href=`/Stat-N-Track/user/${id}/standings`
-        >All Season Standings</a
-      >
-    </div>
-    <div>
-      <a
-        class="underline"
-        href=`/Stat-N-Track/user/${id}/standings/full-participation`
-        >Fully Participated Season Standings</a
-      >
-    </div>
-    <div>
-      <a class="underline" href=`/Stat-N-Track/user/${id}/standings/by-year`
-        >Season Standings By Year</a
-      >
-    </div>
-    <div>
-      <a
-        class="underline"
-        href=`/Stat-N-Track/user/${id}/standings/by-car-class`
-        >Season Standings By Car Class</a
-      >
-    </div>
-  </div>
-</DefaultLayout>
+<DefaultLayout {id} {title} {description} />
diff --git a/src/pages/user/[id]/scheduling/by-week/[timestamp].astro b/src/pages/user/[id]/scheduling/by-week/[timestamp].astro
@@ -126,7 +126,7 @@ const title = `Scheduling By Week - ${id} and week starting ${new Date(Number(ti
 const description = title;
 ---
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
   <div class="grid grid-cols-1 pt-6 overflow-x-scroll">
     <div class="text-center col-span-1 text-2xl pb-6">
       <p>Week Starts</p>

diff --git a/src/pages/user/[id]/scheduling/by-week/index.astro b/src/pages/user/[id]/scheduling/by-week/index.astro
@@ -14,7 +14,7 @@ const title = `Scheduling By Week - ${id}`;
 const description = `Scheduling by week page for user ID: ${id}`;
 ---
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
   <div class="text-center text-3xl">
     {Object.keys(weeks).map((week) => (<div><a class="underline" href=`/Stat-N-Track/user/${id}/scheduling/by-week/${Number(new Date(week))}` >{new Date(week).toLocaleString("en-US", { timeZone: "America/Chicago" })}</a></div>))}
   </div>

diff --git a/src/pages/user/[id]/scheduling/index.astro b/src/pages/user/[id]/scheduling/index.astro
@@ -107,7 +107,7 @@ const title = `Scheduling - ${id}`;
 const description = `Scheduling page for user ID: ${id}`;
 ---
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
   <div class="grid grid-cols-4 text-center pt-6">
     {
       Object.keys(results[0])

diff --git a/src/pages/user/[id]/season/[seasonId]/car-class/[carClassId]/index.astro b/src/pages/user/[id]/season/[seasonId]/car-class/[carClassId]/index.astro
@@ -116,12 +116,12 @@ const title = `Season information for season ID ${seasonId} - car class ID - ${c
 const description = title;
 ---
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
   <a
     class="underline"
     href=`/Stat-N-Track/user/${id}/season/${seasonId}/car-class/${carClassId}/season-summary`
   >
-    <div class="text-center py-4 border-2">
+    <div class="text-center py-4 border-x-2 border-b-2">
       <p><b>View Season Summary</b></p>
     </div>
   </a>

diff --git a/src/pages/user/[id]/season/[seasonId]/car-class/[carClassId]/season-summary.astro b/src/pages/user/[id]/season/[seasonId]/car-class/[carClassId]/season-summary.astro
@@ -222,8 +222,8 @@ const overviewItems = [
 ];
 ---
 
-<DefaultLayout {title} {description}>
-  <div class="text-center py-4 border-2">
+<DefaultLayout {id} {title} {description}>
+  <div class="text-center py-4 border-x-2 border-b-2">
     <p><b>{title}</b></p>
     <div class="text-center row-span-1">
       Overview

diff --git a/src/pages/user/[id]/standings/by-car-class/index.astro b/src/pages/user/[id]/standings/by-car-class/index.astro
@@ -25,7 +25,7 @@
 ---
 
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
 	<div class="text-center text-3xl">
 	 {Array.from(carClassNames).sort().map((carClassName) => (<div><a class="underline" href=`/Stat-N-Track/user/${id}/standings/by-car-class/${carClassMap.get(carClassName)}` >{carClassName}</a></div>))}
 	</div>

diff --git a/src/pages/user/[id]/standings/by-year/index.astro b/src/pages/user/[id]/standings/by-year/index.astro
@@ -23,7 +23,7 @@ import {
 ---
 
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
 	<div class="text-center text-3xl">
     {years.map((year) => (<div><a class="underline" href=`/Stat-N-Track/user/${id}/standings/by-year/${year.season_year}` >{year.season_year}</a></div>))}
 	</div>

diff --git a/src/pages/user/[id]/subsessions/by-car-class/index.astro b/src/pages/user/[id]/subsessions/by-car-class/index.astro
@@ -25,7 +25,7 @@
 ---
 
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
 	<div class="text-center text-3xl">
 	 {Array.from(carClassNames).sort().map((carClassName) => (<div><a class="underline" href=`/Stat-N-Track/user/${id}/subsessions/by-car-class/${carClassMap.get(carClassName)}` >{carClassName}</a></div>))}
 	</div>

diff --git a/src/pages/user/[id]/subsessions/by-track/[trackSlug].astro b/src/pages/user/[id]/subsessions/by-track/[trackSlug].astro
@@ -60,7 +60,7 @@ const tracksFromDb: Array<{ track: unknown | Track }> = await db
 const tracks = tracksFromDb as Array<{ track: Track }>;
 const generatedTrackMap = generateTrackMap({ tracks });
 const { trackName, configName } = generatedTrackMap.get(trackSlug) || {};
-const subsessions = await db
+const allSubsessionsForTrack = await db
   .select()
   .from(Subsession)
   .innerJoin(
@@ -75,6 +75,14 @@ const subsessions = await db
     )
   )
   .orderBy(desc(Subsession.subsession_id));
+const subsessions = allSubsessionsForTrack.filter(
+  ({
+    Subsession: {
+      // @ts-expect-error
+      track: { track_name, config_name },
+    },
+  }) => track_name === trackName && config_name === configName
+);
 ---
 
 <SubsessionsLayout {id} {seoTitle} {seoDescription} {subsessions} />
diff --git a/src/pages/user/[id]/subsessions/by-track/index.astro b/src/pages/user/[id]/subsessions/by-track/index.astro
@@ -19,7 +19,7 @@ const title = `Subsessions By Track - ${id}`;
 const description = `Subsessions by track page for user ID: ${id}`;
 ---
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
   <div class="text-center text-3xl">
     {Array.from(trackMap).sort().map(([key, track]) => (<div><a class="underline" href=`/Stat-N-Track/user/${id}/subsessions/by-track/${key}` >{track.trackName} {track.configName.replace('N/A', '')}</a></div>))}
 	</div>

diff --git a/src/pages/user/[id]/subsessions/by-year/index.astro b/src/pages/user/[id]/subsessions/by-year/index.astro
@@ -23,7 +23,7 @@ import {
 ---
 
 
-<DefaultLayout {title} {description}>
+<DefaultLayout {id} {title} {description}>
 	<div class="text-center text-3xl">
     {years.map((year) => (<div><a class="underline" href=`/Stat-N-Track/user/${id}/subsessions/by-year/${year.season_year}` >{year.season_year}</a></div>))}
 	</div>