Merge pull request #3 from andorsk/ask/configure

added configure routine

Dockerfile

@@ -0,0 +1,67 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js

README.md

@@ -2,7 +2,9 @@
 
 Tabata timers are used for HIT excrcises. They give you short increments of
 exercies and rest. I use it quite a bit, but the one I use has a paywall after 2
-routines. This is a web5 based tabata timer.
+routines and has a ton of ads. I don't want any of that. 
+
+This is a web5 based tabata timer.
 
 What does web5 mean? Well, you'll own your data. Entirely. This means that you
 don't need to worry about us looking at it ever. This was mostly a fun project
@@ -38,3 +40,5 @@ bun dev
 - [ ] Record Sessions
 - [ ] Sync 
 - [ ] Share sessions
+- [ ] Launch on play store
+- [ ]

src/app/page.tsx

@@ -1,10 +1,10 @@
 import Image from "next/image";
-import WorkoutSelectionView from "@/pages/workoutselectionview";
+import WorkoutSelectionView from "@/app/workoutselectionview";
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col ">
-      <div className="z-10 w-full items-center justify-between font-mono text-sm lg:flex bg-green-500">
+      <div className="z-10 w-full items-center justify-between font-mono text-sm  bg-green-500">
         <WorkoutSelectionView />
       </div>
     </main>

src/app/playview/[id]/page.tsx

@@ -110,12 +110,13 @@ export default function PlayView({ params }: { params: { routerId: string } }) {
     startStepTimer,
     setTimeElapsed,
     setTotalTime,
+    setIsPaused,
   } = useTimer();
   const [routine, setRoutine] = useState(null);
   const [steps, setSteps] = useState([]);
 
   const [currentStep, setCurrentStep] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(true);
   const [isDone, setIsDone] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -130,6 +131,11 @@ export default function PlayView({ params }: { params: { routerId: string } }) {
   const totalCycles = 3;
   const currentCycle = 1;
 
+  useEffect(() => {
+    console.log("setting to ", !isPlaying);
+    setIsPaused(!isPlaying);
+  }, [isPlaying]);
+
   const computeTimeElapsed = (steps: Step[]): number => {
     const time = steps.reduce((total, step) => {
       return total + step.duration;

src/app/workoutselectionview/index.tsx

@@ -5,6 +5,9 @@ import { Routine } from "@/models/workout";
 import { storeRoutine, getRoutines } from "@/lib/store/dwn/routines";
 import { useWeb5 } from "@/context/Web5Context";
 import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import RoutineConfigurationForm from "@/components/configureRoutine/ConfigureRoutine";
 
 const mockRoutines: Routine[] = [
   {
@@ -34,18 +37,22 @@ const mockRoutines: Routine[] = [
 export default function WorkoutSelectionView() {
   const { web5, did } = useWeb5();
   const [routines, setRoutines] = useState([]);
+  const [showModal, setShowModal] = useState(false); // State to control the modal visibility
+  const router = useRouter();
+
+  const handleAddWorkout = () => {
+    setShowModal(true);
+  };
 
-  const handleAddWorkout = async () => {
-    console.log("handling workout");
-    storeRoutine(mockRoutines[0], web5);
+  const handleCloseModal = () => {
+    setShowModal(false);
   };
 
   const handleGetRoutines = async (web5) => {
     try {
       const r = await getRoutines(web5);
       const routinesData = await Promise.all(
         r?.records?.map(async (v, _) => {
-          console.log(v);
           const vv = await v.data.json();
           vv.id = v.id;
           return vv; // Return vv to include it in the array of routinesData
@@ -58,6 +65,22 @@ export default function WorkoutSelectionView() {
     }
   };
 
+  useEffect(() => {
+    if (web5) {
+      console.log("GOT Dispatched Event");
+      const handleFormSubmitted = async () => {
+        setShowModal(false);
+        console.log("testing dispatch");
+        await handleGetRoutines(web5);
+        console.log("passed dispatch");
+      };
+      document.addEventListener("routineSubmitted", handleFormSubmitted);
+      return () => {
+        document.removeEventListener("routineSubmitted", handleFormSubmitted);
+      };
+    }
+  }, [router, web5]);
+
   useEffect(() => {
     if (web5) {
       handleGetRoutines(web5);
@@ -68,12 +91,34 @@ export default function WorkoutSelectionView() {
     <div className="p-4">
       DID: {did}
       <h1 className="text-2xl font-bold text-gray-800 mb-4">Web5 Workouts</h1>
-      <button onClick={handleAddWorkout}> Add Workout </button>
+      <button
+        className="py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+        onClick={handleAddWorkout}
+      >
+        {" "}
+        Add Workout{" "}
+      </button>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">
         {routines.map((routine) => (
           <RoutineCard key={routine.id} routine={routine} />
         ))}
       </div>
+      {showModal && (
+        <div className="fixed inset-0 z-50 overflow-y-auto">
+          <div className="flex items-center justify-center min-h-screen">
+            <div className="modal-overlay fixed inset-0 bg-black opacity-50"></div>
+            <div className="modal-container bg-red-500  w-full fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white max-w-screen-md p-6 rounded-lg shadow-lg overflow-y-auto">
+              <RoutineConfigurationForm className="w-full" />
+              <button
+                onClick={handleCloseModal}
+                className="py-2  px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/components/RoutineCard.tsx

@@ -11,7 +11,6 @@ interface RoutineCardProps {
 }
 
 const RoutineCard: React.FC<RoutineCardProps> = ({ routine }) => {
-  console.log(routine.id);
   return (
     <div className="bg-white shadow-lg rounded-lg p-4 m-4 relative hover:bg-gray-100">
       <div className="absolute top-4 right-4 flex space-x-2">
@@ -20,13 +19,11 @@ const RoutineCard: React.FC<RoutineCardProps> = ({ routine }) => {
             ▶️
           </button>
         </Link>
-        <button className="text-lg font-semibold p-2 rounded-full bg-gray-300 hover:bg-gray-400">
+        {/*  <button { className="text-lg font-semibold p-2 rounded-full bg-gray-300 hover:bg-gray-400">
           ⋮
-        </button>
+        </button> */}
       </div>
-      <h2 className="text-xl font-bold text-gray-800">
-        {routine.title} ({routine.name})
-      </h2>
+      <h4 className="text-md font-bold text-gray-900">{routine.name}</h4>
       <p className="text-gray-600">{routine.description}</p>
       <p className="text-gray-600">{routine.id.slice(-6)}</p>
       <div className="mt-2 text-gray-400">