Release 1.2.0 (#8)

* chore: update deps

* chore: update version number

* feat: assign to range (#10)

* feat: assign to range

* feat: improve assignment form

* feat: add helper text, closes #6

* feat: allow days to be copied, closes #7 (#11)

* feat: support tss 2.0.0 (#12), closes #9

Author: Arcath

app/lib/constants.ts

@@ -1,9 +1,9 @@
-export const VERSION = '1.1.0'
+export const VERSION = '1.2.0'
 
 export const RequiredVersions = {
   controller: VERSION,
-  tts: '1.0.1',
-  piper: '1.2.0',
+  tts: '2.0.0',
+  piper: '1.3.0',
   sounder: '1.1.1'
 }
 

app/lib/ui.tsx

@@ -59,12 +59,18 @@ export const FormElement: React.FC<{
       <label className="grid grid-cols-2 gap-4 mb-2">
         <span className="font-semibold">{label}</span>
         <div className="row-span-2">{children}</div>
-        <span className="text-neutral-400">{helperText}</span>
+        <HelperText>{helperText}</HelperText>
       </label>
     </div>
   )
 }
 
+export const HelperText: React.FC<{
+  children: React.ReactNode
+}> = ({children}) => {
+  return <span className="text-neutral-400">{children}</span>
+}
+
 export const Actions: React.FC<{
   actions: {
     label: string

app/routes/about.tsx

@@ -28,15 +28,28 @@ export const loader = async ({request}: LoaderFunctionArgs) => {
   const piperData = await new Promise<{
     version: string
     piperVersion: string
+    pythonVersion: string
   }>(resolve => {
-    fetch(`${process.env.TTS_API}/status`)
+    fetch(`${process.env.TTS_API}/status.json`)
       .then(response => {
         response
           .json()
           .then(data => resolve(data))
-          .catch(() => resolve({version: '0.0.0', piperVersion: '0.0.0'}))
+          .catch(() =>
+            resolve({
+              version: '0.0.0',
+              piperVersion: '0.0.0',
+              pythonVersion: '0.0.0'
+            })
+          )
+      })
+      .catch(() => {
+        resolve({
+          version: '0.0.0',
+          piperVersion: '0.0.0',
+          pythonVersion: '0.0.0'
+        })
       })
-      .catch(() => resolve({version: '0.0.0', piperVersion: '0.0.0'}))
   })
 
   const sounderLatest = await new Promise<string>(resolve => {

app/routes/days.add.tsx

@@ -3,7 +3,7 @@ import {
   type ActionFunctionArgs,
   type LoaderFunctionArgs
 } from '@remix-run/node'
-import {useNavigate} from '@remix-run/react'
+import {useNavigate, useLoaderData} from '@remix-run/react'
 import {invariant} from '@arcath/utils'
 
 import {getPrisma} from '~/lib/prisma.server'
@@ -18,7 +18,11 @@ export const loader = async ({request}: LoaderFunctionArgs) => {
     return redirect('/login')
   }
 
-  return {}
+  const prisma = getPrisma()
+
+  const days = await prisma.dayType.findMany({orderBy: {name: 'asc'}})
+
+  return {days}
 }
 
 export const action = async ({request}: ActionFunctionArgs) => {
@@ -33,23 +37,56 @@ export const action = async ({request}: ActionFunctionArgs) => {
   const formData = await request.formData()
 
   const name = formData.get('name') as string | undefined
+  const copyFrom = formData.get('copyFrom') as string | undefined
 
   invariant(name)
+  invariant(copyFrom)
+
+  const dayType = await prisma.dayType.create({data: {name}})
 
-  await prisma.dayType.create({data: {name}})
+  if (copyFrom !== '-') {
+    const schedules = await prisma.schedule.findMany({
+      where: {dayTypeId: copyFrom === '_' ? undefined : copyFrom}
+    })
+
+    await prisma.schedule.createMany({
+      data: schedules.map(({time, weekDays, zoneId, audioId}) => {
+        return {dayTypeId: dayType.id, time, weekDays, zoneId, audioId}
+      })
+    })
+  }
 
   return redirect(`/calendar`)
 }
 
 const AddDay = () => {
   const navigate = useNavigate()
+  const {days} = useLoaderData<typeof loader>()
 
   return (
     <Page title="Add Day">
       <form method="post">
         <FormElement label="Name" helperText="Descriptive name for the day.">
           <input name="name" className={INPUT_CLASSES} />
         </FormElement>
+        <FormElement
+          label="Copy From"
+          helperText="The day type to copy the schedule from"
+        >
+          <select name="copyFrom" className={INPUT_CLASSES}>
+            <option value="-" selected>
+              None
+            </option>
+            <option value="_">Default</option>
+            {days.map(({id, name}) => {
+              return (
+                <option key={id} value={id}>
+                  {name}
+                </option>
+              )
+            })}
+          </select>
+        </FormElement>
         <Actions
           actions={[
             {

app/routes/days.assignments.tsx

@@ -4,14 +4,14 @@ import {
   type MetaFunction,
   redirect
 } from '@remix-run/node'
-import {useLoaderData} from '@remix-run/react'
-import {invariant} from '@arcath/utils'
-import {subDays, format} from 'date-fns'
+import {useLoaderData, useNavigate} from '@remix-run/react'
+import {invariant, asyncForEach} from '@arcath/utils'
+import {subDays, format, eachDayOfInterval} from 'date-fns'
 
 import {getPrisma} from '~/lib/prisma.server'
 import {INPUT_CLASSES, pageTitle} from '~/lib/utils'
 import {checkSession} from '~/lib/session'
-import {Page} from '~/lib/ui'
+import {Page, FormElement, Actions, HelperText} from '~/lib/ui'
 import {useLocalStorage} from '~/lib/hooks/use-local-storage'
 
 export const meta: MetaFunction = () => {
@@ -49,14 +49,23 @@ export const action = async ({request}: ActionFunctionArgs) => {
 
   const formData = await request.formData()
 
-  const date = formData.get('date') as string | undefined
+  const startDate = formData.get('startDate') as string | undefined
+  const endDate = formData.get('endDate') as string | undefined
   const day = formData.get('day') as string | undefined
 
-  invariant(date)
+  invariant(startDate)
+  invariant(endDate)
   invariant(day)
 
-  await prisma.dayTypeAssignment.create({
-    data: {date: new Date(date), dayTypeId: day}
+  const days = eachDayOfInterval({
+    start: new Date(startDate),
+    end: new Date(endDate)
+  })
+
+  await asyncForEach(days, async date => {
+    await prisma.dayTypeAssignment.create({
+      data: {date, dayTypeId: day}
+    })
   })
 
   return redirect(`/days/assignments`)
@@ -69,10 +78,15 @@ const DayAssignments = () => {
     'assignmentDate',
     format(new Date(), 'yyyy-LL-dd')
   )
+  const navigate = useNavigate()
 
   return (
-    <Page title="Day Assignments">
-      <form method="post">
+    <div className="grid grid-cols-1 gap-4">
+      <Page title="Day Assignments">
+        <HelperText>
+          These assignments change the day type for the given days to that day
+          types schedule.
+        </HelperText>
         <table className="box-table">
           <thead>
             <tr>
@@ -99,49 +113,78 @@ const DayAssignments = () => {
               )
             })}
           </tbody>
-          <tfoot>
-            <tr>
-              <td>
-                <input
-                  type="date"
-                  className={INPUT_CLASSES}
-                  name="date"
-                  defaultValue={assignmentDate}
-                  onChange={e => {
-                    setAssignmentDate(e.target.value)
-                  }}
-                />
-              </td>
-              <td>
-                <select
-                  className={INPUT_CLASSES}
-                  name="day"
-                  defaultValue={day}
-                  onChange={e => {
-                    setDay(e.target.value)
-                  }}
-                >
-                  {days.map(({id, name}) => {
-                    return (
-                      <option key={id} value={id}>
-                        {name}
-                      </option>
-                    )
-                  })}
-                </select>
-              </td>
-              <td>
-                <input
-                  type="submit"
-                  value="Add"
-                  className={`${INPUT_CLASSES} bg-green-400`}
-                />
-              </td>
-            </tr>
-          </tfoot>
         </table>
-      </form>
-    </Page>
+      </Page>
+      <Page title="Add Assignments">
+        <form method="post">
+          <FormElement
+            label="From"
+            helperText="The date to start assigning from. To only assign one day set both From and To to the same date."
+          >
+            <input
+              type="date"
+              name="startDate"
+              className={INPUT_CLASSES}
+              defaultValue={assignmentDate}
+              onChange={e => {
+                setAssignmentDate(e.target.value)
+              }}
+            />
+          </FormElement>
+          <FormElement
+            label="To"
+            helperText="The date to end assignments. To only assign one day set both From and To to the same date."
+          >
+            <input
+              type="date"
+              className={INPUT_CLASSES}
+              name="endDate"
+              defaultValue={assignmentDate}
+              onChange={e => {
+                setAssignmentDate(e.target.value)
+              }}
+            />
+          </FormElement>
+          <FormElement
+            label="Day"
+            helperText="The day type to assign to these dates"
+          >
+            <select
+              className={INPUT_CLASSES}
+              name="day"
+              defaultValue={day}
+              onChange={e => {
+                setDay(e.target.value)
+              }}
+            >
+              {days.map(({id, name}) => {
+                return (
+                  <option key={id} value={id}>
+                    {name}
+                  </option>
+                )
+              })}
+            </select>
+          </FormElement>
+          <Actions
+            actions={[
+              {
+                label: 'Cancel',
+                color: 'bg-stone-200',
+                onClick: e => {
+                  e.preventDefault()
+                  navigate('/calendar')
+                }
+              },
+              {
+                label: 'Add Assignments',
+                color: 'bg-green-300'
+              }
+            ]}
+          />
+        </form>
+      </Page>
+    </div>
   )
 }
 

app/routes/sounds.add-tts.tsx

@@ -62,9 +62,8 @@ export const action = async ({request}: ActionFunctionArgs) => {
 
   const downloadResponse = await fetch(`${process.env.TTS_API}/piper`, {
     body: JSON.stringify({
-      target: `${sound.id}.wav`,
       text: tts,
-      speed
+      length_scale: speed
     }),
     headers: {'Content-Type': 'application/json'},
     method: 'post'