Make various style updates.

Squashed commit of the following:

commit 25e3a175320933f71d06424ce01076acc3497071
Author: Ethan Swan <[email protected]>
Date:   Mon Sep 4 12:46:09 2023 -0500

    Make dark theme darker.

commit 9ae5ae39477c99cdd5077796cae5b1f93617924a
Author: Ethan Swan <[email protected]>
Date:   Mon Sep 4 12:37:43 2023 -0500

    Add details to workout cards.

commit fe2a21820a2a7304440ceb4e336497aa70d4ca3e
Author: Ethan Swan <[email protected]>
Date:   Mon Sep 4 12:32:14 2023 -0500

    Add details to recent workout cards.

commit f034e98a2d5eee80387fac06c42e7797a12580fc
Author: Ethan Swan <[email protected]>
Date:   Mon Sep 4 11:37:55 2023 -0500

    Run prettier.

app/(protected)/dashboard/NewWorkoutPanel.tsx

@@ -2,7 +2,7 @@
 
 import { Workout, WorkoutType } from "@/lib/resources/apiTypes";
 
-import { createNewWorkout } from "@/lib/resources/workouts/createNewWorkout";
+import { createWorkout } from "@/lib/resources/workouts";
 import { useRouter } from "next/navigation";
 
 async function createAndStartWorkout(workoutTypeId: string): Promise<Workout> {
@@ -11,7 +11,7 @@ async function createAndStartWorkout(workoutTypeId: string): Promise<Workout> {
     status: "in-progress",
     start_time: new Date(), // start the workout right now.
   };
-  return await createNewWorkout({ workout });
+  return await createWorkout({ workout });
 }
 
 export default function NewWorkoutPanel({
@@ -33,11 +33,7 @@ export default function NewWorkoutPanel({
   });
   return (
     <div className="w-full pt-2">
-      {workoutTypes && (
-        <h2 className="text-lg lg:text-2xl">
-          New Workout by Type
-        </h2>
-      )}
+      {workoutTypes && <h2 className="text-lg lg:text-2xl">New Workout</h2>}
       <div className="flex flex-row flex-wrap mt-2 gap-2 lg:gap-4">
         {newWorkoutCards}
       </div>
@@ -52,9 +48,9 @@ type NewWorkoutButtonProps = {
 
 function NewWorkoutButton({ name, onClick }: NewWorkoutButtonProps) {
   return (
-    <button className="flex flex-col font-bold" onClick={onClick}>
-      <div className="w-32 h-16 rounded-lg shadow-lg flex flex-row justify-between items-center px-2 text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 dark:shadow-2xl">
-        <p>{name}</p>
+    <button className="flex flex-col" onClick={onClick}>
+      <div className="w-32 h-16 rounded-lg shadow-md dark:shadow-sm shadow-gold dark:shadow-gold flex flex-row justify-between items-center px-2 text-gray-800 dark:text-gray-300 bg-white dark:bg-gray-900">
+        <p className="px-2">{name}</p>
         <i className="fi fi-sr-arrow-alt-circle-right text-3xl inline-flex align-[-0.2rem] text-gold" />
       </div>
     </button>

app/(protected)/dashboard/RecentWorkoutsPanel.tsx

@@ -20,8 +20,11 @@ export default async function RecentWorkoutsPanel({
       <h2 className="text-2xl">Recent Workouts</h2>
       <div className="flex flex-row gap-2 lg:gap-4 flex-wrap mt-2">
         {wktsWithDetails.length > 0 ? (
-          wktsWithDetails.map(({ workout }) => (
-            <RecentWorkoutCard key={workout.id} workout={workout} />
+          wktsWithDetails.map((wktWithDetails) => (
+            <RecentWorkoutCard
+              key={wktWithDetails.workout.id}
+              workoutWithDtls={wktWithDetails}
+            />
           ))
         ) : (
           <p className="text-gray-500 dark:text-gray-300 pt-2">None yet!</p>
@@ -58,17 +61,50 @@ function formatDate(date: Date): string {
   return `${year}-${month}-${day}`;
 }
 
-async function RecentWorkoutCard({ workout }: { workout: WorkoutWithType }) {
+function differenceInHoursMinutesAndSecondsFormatted(
+  start: Date,
+  end: Date,
+): string {
+  const diff = Math.abs(start.getTime() - end.getTime());
+  const hours = Math.floor(diff / 1000 / 60 / 60);
+  const minutes = Math.floor(diff / 1000 / 60) % 60;
+  const seconds = Math.floor(diff / 1000) % 60;
+  return `${hours}:${String(minutes).padStart(2, "0")}:${String(
+    seconds,
+  ).padStart(2, "0")}`;
+}
+
+async function RecentWorkoutCard({
+  workoutWithDtls,
+}: {
+  workoutWithDtls: WorkoutWithDetails;
+}) {
+  const { workout, exercises } = workoutWithDtls;
   const startTime = workout.start_time
     ? new Date(workout.start_time)
     : undefined;
+  const endTime = workout.end_time ? new Date(workout.end_time) : undefined;
+  const durationString =
+    startTime && endTime
+      ? differenceInHoursMinutesAndSecondsFormatted(startTime, endTime)
+      : "Unfinished";
+  const exerciseCount = exercises.length;
+
   const startTimeText = startTime ? formatDate(startTime) : "----";
-  const name = workout.workout_type_name ?? "Custom Workout";
+  const name = workout.workout_type_name ?? "Custom";
   return (
     <Link href={`/workouts/${workout.id}`}>
-      <div className="rounded-lg p-2 lg:p-4 shadow-lg w-32 h-32 flex flex-col gap-2 bg-white dark:bg-gray-800 dark:shadow-2xl">
-        <p className="text-sm">{startTimeText}</p>
-        <h2 className="text-gray-600 dark:text-gray-300 text-base lg:text-lg font-bold">{name}</h2>
+      <div className="rounded-lg p-2 lg:p-3 shadow-md dark:shadow-sm shadow-gold w-32 h-32 flex flex-col bg-white dark:bg-gray-900 dark:shadow-gold text-gray-600 dark:text-gray-400">
+        <div className="flex-grow">
+          <p className="text-sm">{startTimeText}</p>
+          <h2 className="text-gray-800 dark:text-gray-300 text-base lg:text-lg font-bold">
+            {name}
+          </h2>
+        </div>
+        <div className="flex-grow-0">
+          <p className="text-sm">{exerciseCount} sets</p>
+          <p className="text-sm">{durationString}</p>
+        </div>
       </div>
     </Link>
   );

app/(protected)/live/workouts/[workoutId]/LiveWorkout.tsx

@@ -17,7 +17,8 @@ import ExerciseInputModal, {
 } from "./exerciseGroupWidget/ExerciseInputModal";
 import { createExercise, overwriteExercise } from "@/lib/resources/exercises";
 import { deleteExercise } from "@/lib/resources/exercises/delete";
-import Link from "next/link";
+import { updateWorkout } from "@/lib/resources/workouts";
+import { useRouter } from "next/navigation";
 
 type ExerciseGroup = {
   exerciseType?: ExerciseType;
@@ -36,7 +37,9 @@ export default function LiveWorkout({
   exerciseSets,
   exerciseTypes,
 }: LiveWorkoutProps) {
-  // Sets aren't a construct in the database, so we need to add an artificial key to each set.
+  const router = useRouter();
+
+  // Workout groupings aren't a construct in the database, so we need to add an artificial key to each set.
   const initialGroups: ExerciseGroup[] = exerciseSets.map((set) => ({
     exerciseType: set.exerciseType,
     exercises: set.exercises,
@@ -178,6 +181,20 @@ export default function LiveWorkout({
     );
   }
 
+  const onFinishWorkout = () => {
+    // Mark the workout finished.
+    updateWorkout({
+      workoutId: workout.id,
+      fields: {
+        end_time: new Date(),
+        status: "completed",
+      },
+    }).then(() => {
+      // For now, redirect to the view-only workout page. Eventually this should go to some kind of summary.
+      router.push(`/workouts/${workout.id}`);
+    });
+  };
+
   const workoutName = workout.workout_type_name || "Custom Workout";
   return (
     <main>
@@ -215,20 +232,19 @@ export default function LiveWorkout({
             />
           );
         })}
-      <CreateNewExerciseGroupWidget onClick={onClickCreateNewExerciseGroup} />
+        <CreateNewExerciseGroupWidget onClick={onClickCreateNewExerciseGroup} />
       </div>
       {modal}
       <div className="w-full flex flex-row justify-center text-xl font-bold">
-        <Link href="/dashboard">
-          <button
-            className="flex flex-row justify-center items-center
-                        rounded-full text-white bg-gold
-                        py-3 px-4 m-2 gap-3 dark:text-gray-700"
-          >
-            <p>Finish Workout</p>
-            <i className="fi fi-br-checkbox inline-flex align-[-0.2rem]" />
-          </button>
-        </Link>
+        <button
+          className="flex flex-row justify-center items-center
+                      rounded-full text-white bg-gold
+                      py-3 px-4 m-2 gap-3 dark:text-gray-900"
+          onClick={onFinishWorkout}
+        >
+          <p>Finish Workout</p>
+          <i className="fi fi-br-checkbox inline-flex align-[-0.2rem]" />
+        </button>
       </div>
     </main>
   );

app/layout.tsx

@@ -15,7 +15,9 @@ export const metadata = {
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={`${inter.className} min-h-screen relative bg-gray-100 dark:bg-gray-700`}>
+      <body
+        className={`${inter.className} min-h-screen relative bg-gray-100 dark:bg-gray-800`}
+      >
         <NavBar />
         <div className="flex flex-row justify-center text-gray-700 dark:text-gray-100">
           <div className="content-container w-[48rem] flex-shrink">

lib/requests.ts

@@ -8,7 +8,7 @@ const HTTP_TIMEOUT = 3000;
 
 type RequestParams = {
   route: string;
-  method: "GET" | "POST" | "PUT" | "DELETE";
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
   params?: Record<string, string>;
   body?: string;
 };
@@ -90,6 +90,16 @@ export async function put({ route, params, body }: PutParams): Promise<any> {
   return await request({ route, method: "PUT", params, body });
 }
 
+type PatchParams = {
+  route: string;
+  id: string;
+  body?: string;
+};
+
+export async function patch({ route, id, body }: PatchParams): Promise<any> {
+  return await request({ route, method: "PATCH", params: { id }, body });
+}
+
 type DeleteParams = {
   route: string;
   id: string;

lib/resources/exercises/index.ts

@@ -1,3 +1,3 @@
 export { createExercise, createExercises } from "./create";
-export { getExercisesByWorkoutId } from "./get";
+export { getExercisesByWorkoutId } from "./read";
 export { overwriteExercise } from "./update";

lib/resources/workouts/createNewWorkout.ts → lib/resources/workouts/create.ts

@@ -5,7 +5,7 @@ import { post } from "@/lib/requests";
 
 const route = `/workouts/`;
 
-export async function createNewWorkout({
+export async function createWorkout({
   workout,
 }: {
   workout: Workout;

lib/resources/workouts/index.ts

@@ -0,0 +1,3 @@
+export { createWorkout } from "./create";
+export { getWorkoutById, getAllWorkouts } from "./read";
+export { updateWorkout } from "./update";

lib/resources/workouts/update.ts

@@ -0,0 +1,22 @@
+"use server";
+
+import { patch } from "@/lib/requests";
+import { Workout } from "@/lib/resources/apiTypes";
+
+const ROUTE = "/workouts/";
+
+type UpdateWorkoutParams = {
+  workoutId: string;
+  fields: Partial<Workout>;
+};
+
+export async function updateWorkout({
+  workoutId,
+  fields,
+}: UpdateWorkoutParams): Promise<Workout> {
+  return (await patch({
+    route: `${ROUTE}`,
+    id: workoutId,
+    body: JSON.stringify(fields),
+  })) as Workout;
+}