Merge pull request #15 from fumeapp/shotday

🚧 laying some ground wrok

app/components/cartridge/CartridgeModel.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Cartridge } from '~/types/models'
 
-const props = defineProps<{ cartridge?: Cartridge, label?: boolean }>()
+const props = defineProps<{ cartridge?: Cartridge, label?: boolean, shotDay?: string }>()
 
 const { remainingUnits } = useShot()
 const units = computed(() =>
@@ -23,6 +23,12 @@ const units = computed(() =>
         </span>
       </div>
 
+      <div class="absolute text-xs right-2 top-1 text-black">
+        <span v-if="shotDay" class="shadow">
+          {{ weekdayToFull(shotDay) }}
+        </span>
+      </div>
+
       <div :style="`width: ${units}px;`" class="h-full bg-gradient-to-b from-sky-600 to-sky-100 transition-all duration-1000" />
 
       <div class="h-full w-3 bg-black/80 flex-shrink-0 border-black border-l border-r" />

app/components/pen/PenCard.vue

@@ -81,6 +81,8 @@ const items = computed(() => {
         </div>
 
         <shot-form :pen="pen" :cartridge="pen.cartridge" @created="reload" />
+
+        <shot-day-form :pen="pen" @updated="reload" />
       </div>
     </u-card>
     <u-dashboard-modal v-model="attachModal" title="Attach a Cartridge" description="Choose an available cartridge">

app/components/shot/ShotDayForm.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { Pen } from '~/types/models'
+
+const props = defineProps<{ pen: Pen }>()
+
+const emit = defineEmits(['updated'])
+const route = useRoute()
+
+const isShotDayToday = computed((): boolean =>
+  weekDays[new Date().getDay()]?.toLowerCase() === props.pen.shotDay?.toLowerCase(),
+)
+
+const update = (day?: string) => {
+  useApi()
+    .api(
+      route.params.user ? `/api/user/${route.params.user}/pen/${props.pen.id}` : `/api/pen/${props.pen.id}`,
+      { method: 'PUT', body: { cartridgeId: props.pen.cartridgeId, shotDay: day || undefined } },
+    )
+    .then(() => emit('updated'))
+}
+</script>
+
+<template>
+  <div v-if="!pen.shotDay" class="flex flex-col space-y-2 items-center">
+    <u-button-group>
+      <u-button
+        v-for="day in weekDays"
+        :key="day"
+        :label="day"
+        color="white"
+        @click="update(day)"
+      />
+    </u-button-group>
+    <span class="text-sm">Choose a shot day to help you remember</span>
+  </div>
+  <div v-else class="flex items-center space-x-1">
+    <span> Your shot day is </span>
+    <u-badge :label="weekdayToFull(pen.shotDay)" variant="soft" size="lg" />
+    <u-button :ui="{ rounded: 'rounded-full' }" icon="i-mdi-close" size="xs" variant="ghost" square @click="update()" />
+  </div>
+  <u-alert
+    v-if="isShotDayToday"
+    icon="i-mdi-alert"
+    title="Shot day is today"
+    description="Don't forget to take your shot and log it!"
+    color="emerald"
+  />
+</template>
+
+<style scoped></style>

app/pages/users/index.vue

@@ -61,7 +61,7 @@ const { data: users } = await useFetch<MetapiResponse<User>>('/api/all/user')
       <template #pens-data="{ row }">
         <div class="flex flex-col space-y-1">
           <pen-model v-for="pen in row.pens" :key="pen.id" :color="pen.color">
-            <cartridge-model v-if="pen.cartridge" :cartridge="pen.cartridge" label />
+            <cartridge-model v-if="pen.cartridge" :cartridge="pen.cartridge" :shot-day="pen.shotDay" label />
             <div v-else>
               No Cartridge
             </div>

app/utils/shared.ts

@@ -3,6 +3,17 @@ import type { CookieOptions } from '#app'
 
 (BigInt.prototype as any).toJSON = function () { return this.toString() }
 
+export const weekDays = [...Array(7)].map((_, i) =>
+  new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(new Date(1970, 0, 4 + i)),
+)
+
+export const weekdayToFull = (shortDay: string): string => {
+  const index = weekDays.findIndex(day => day.toLowerCase() === shortDay.toLowerCase())
+  if (index === -1)
+    throw new Error(`Invalid short day: ${shortDay}`)
+  return new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(new Date(1970, 0, 4 + index))
+}
+
 export type HeaderIconLink = HeaderLink & { icon: string }
 
 export const links: HeaderIconLink[] = [

prisma/migrations/20240822065859_init/migration.sql → prisma/migrations/20240825024141_init/migration.sql

@@ -17,6 +17,7 @@ CREATE TABLE `pens` (
     `userId` BIGINT NOT NULL,
     `cartridgeId` BIGINT NULL,
     `color` VARCHAR(191) NOT NULL,
+    `shotDay` VARCHAR(191) NULL,
     `createdAt` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
     `updatedAt` DATETIME(3) NOT NULL,
 

prisma/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (i.e. Git)
-provider = "mysql"
+provider = "mysql"

prisma/schema/meds.prisma

@@ -20,6 +20,7 @@ model Pen {
   cartridge   Cartridge? @relation(fields: [cartridgeId], references: [id], onDelete: Restrict)
   cartridgeId BigInt?    @unique
   color       String
+  shotDay     String?
   createdAt   DateTime   @default(now())
   updatedAt   DateTime   @updatedAt
 

server/controllers/pen.ts

@@ -51,24 +51,31 @@ const update = authedHandler(async ({ user, event }) => {
     id: z.number(),
     color: z.enum(penColors as [string, ...string[]]),
     cartridgeId: z.number().optional(),
+    shotDay: z.string().optional(),
   })
+  const body = await readBody(event)
   const parsed = schema.safeParse({
     id: Number.parseInt(event.context.params?.id as string),
-    cartridgeId: Number.parseInt((await readBody(event))?.cartridgeId) || undefined,
-    color: (await readBody(event))?.color || penColors[0],
+    cartridgeId: Number.parseInt(body?.cartridgeId) || undefined,
+    color: body?.color || penColors[0],
+    shotDay: body?.shotDay || undefined,
   })
   if (!parsed.success) return metapi().error(event, parsed.error.issues, 400)
-  const pen = await prisma.pen.update({
+  console.log(parsed.data)
+  const update = {
     where: {
       id: parsed.data.id,
       userId: user.id,
     },
     data: {
       cartridgeId: parsed.data.cartridgeId ? BigInt(parsed.data.cartridgeId) : null,
       color: parsed.data.color,
+      shotDay: parsed.data.shotDay || null,
     },
     include: inc,
-  })
+  }
+  console.log(update)
+  const pen = await prisma.pen.update(update)
 
   return metapi().success('pen updated', pen)
 })

server/controllers/pens.ts

@@ -56,11 +56,14 @@ const update = authedModelHandler<Pen>(async ({ event, model: pen }) => {
   const schema = z.object({
     user: z.number(),
     cartridgeId: z.number().optional(),
+    shotDay: z.string().optional(),
   })
 
+  const body = await readBody(event)
   const parsed = schema.safeParse({
     user: Number.parseInt(event.context.params?.user as string),
-    cartridgeId: Number.parseInt((await readBody(event))?.cartridgeId) || undefined,
+    cartridgeId: Number.parseInt(body?.cartridgeId) || undefined,
+    shotDay: body?.shotDay || undefined,
   })
   if (!parsed.success) return metapi().error(event, parsed.error.issues, 400)
 
@@ -71,6 +74,7 @@ const update = authedModelHandler<Pen>(async ({ event, model: pen }) => {
     },
     data: {
       cartridgeId: parsed.data.cartridgeId ? BigInt(parsed.data.cartridgeId) : null,
+      shotDay: parsed.data.shotDay || null,
     },
   })