Merge pull request #36 from fumeapp/cycles

🚧 progress with cycles

.gitignore

@@ -31,7 +31,7 @@ app/coverage
 server/coverage
 
 # Test database sqlite file
-prisma/schema/test.db
+prisma/schema/test.db*
 
 
 # cloudflare

app/app.vue

@@ -31,7 +31,7 @@ provide('navigation', navigation)
 </script>
 
 <template>
-  <div>
+  <div class="overlay bg-gray-100 dark:bg-gray-950">
     <NuxtLoadingIndicator />
     <header-main />
     <UMain>

app/components/OgImage/OgLogo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full bg-black">
-    <div class="w-full h-full flex items-center justify-center bg-sky-950/30">
+    <div class="w-full h-full flex items-center pt-40 justify-center bg-sky-950/30">
       <svg
         class="absolute right-0 top-0"
         width="629"

app/components/cartridge/CartridgeCard.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { Cartridge } from '~/types/models'
+import type { Round } from '~/types/models'
 
-defineProps<{ cartridge: Cartridge }>()
+defineProps<{ round: Round }>()
 </script>
 
 <template>
   <div class="flex">
     <u-card>
       <div class="flex flex-col items-center justify-center space-y-8">
-        <cartridge-model :cartridge="cartridge" />
+        <cartridge-model :round="round" />
         <div>
-          {{ cartridge.content }}
-          {{ cartridge.ml }}ml
-          {{ cartridge.mg }}mg
+          {{ round.content }}
+          {{ round.ml }}ml
+          {{ round.mg }}mg
         </div>
-        <shot-log :shots="cartridge?.shots" />
+        <shot-log :round="round" />
       </div>
     </u-card>
   </div>

app/components/cartridge/CartridgeModel.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import type { Cartridge } from '~/types/models'
+import type { Round } from '~/types/models'
 
-const props = defineProps<{ cartridge?: Cartridge, label?: boolean, shotDay?: string }>()
+const props = defineProps<{ round: Round, label?: boolean }>()
 
-const { remainingUnits } = useShot()
-const units = computed(() =>
-  props.cartridge ? remainingUnits(props.cartridge?.shots || [], props.cartridge) : 200,
-)
+const { unitsRemain } = useRound(props.round)
 </script>
 
 <template>
@@ -18,18 +15,12 @@ const units = computed(() =>
       <div class="absolute bg-white w-1 h-4 rounded-t bottom-0 left-[100px]" />
       <div class="absolute bg-white w-1 h-4 rounded-t bottom-0 left-[150px]" />
       <div class="absolute text-xs left-2 top-1 text-black">
-        <span v-if="cartridge && label" class="shadow">
-          {{ cartridge.content }} {{ cartridge.mg }}mg
+        <span v-if="label" class="shadow">
+          {{ round.content }} {{ round.mg }}mg
         </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 :style="`width: ${unitsRemain()}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" />
       <div class="h-full w-3 bg-black/80 flex-shrink-0 border-black border-r" />

app/components/header/HeaderMain.vue

@@ -45,15 +45,20 @@ const links = [
       <UNavigationTree :links="mapContentNavigation(navigation)" />
     </template>
   </u-header>
-  <div class="bg-gray-100 dark:bg-gray-950">
+  <div>
     <div class="py-2 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
-      <div v-if="crumbs.length" class="flex items-center justify-between space-x-2 py-2">
-        <u-breadcrumb :links="crumbs" />
-        <u-button-group v-if="actions && actions[0]" :size="actions[0].size">
-          <u-button v-for="action in actions" :key="action.label" v-bind="action" @click="action.click" />
-        </u-button-group>
-      </div>
-      <div v-else class="h-10" />
+      <client-only>
+        <div v-if="crumbs.length" class="flex items-center justify-between space-x-2 py-2">
+          <u-breadcrumb :links="crumbs" />
+          <u-button-group v-if="actions && actions[0]" :size="actions[0].size">
+            <u-button v-for="action in actions" :key="action.label" v-bind="action" @click="action.click" />
+          </u-button-group>
+        </div>
+        <div v-else class="h-10" />
+        <template #fallback>
+          <div class="h-10">&nbsp;</div>
+        </template>
+      </client-only>
     </div>
   </div>
 </template>

app/components/header/HeaderProfile.vue

@@ -30,6 +30,14 @@ const items = [
       shortcuts: ['U'],
       disabled: !user.value.isAdmin,
     },
+    {
+      label: 'Calendar',
+      icon: 'i-mdi-calendar',
+      click: async () => await navigateTo('/calendar'),
+      shortcuts: ['C'],
+      disabled: !user.value.isAdmin,
+    },
+
   ],
   [
     {

app/components/pen/PenCard.vue

@@ -1,100 +1,25 @@
 <script setup lang="ts">
-import type { MetapiResponse } from '~/types/metapi'
-import type { Cartridge, Pen } from '~/types/models'
+import type { Round } from '~/types/models'
 
-const props = defineProps<{ pen: Pen, cartridges: Cartridge[], readonly?: boolean }>()
-
-const emit = defineEmits(['reload'])
-
-const attachModal = ref(false)
-
-const reload = () => {
-  attachModal.value = false
-  emit('reload')
-}
-
-const options = computed(() => props.cartridges.filter(c => c.pen === null || c.pen?.id === props.pen.id).map(c => ({ label: `${c.content} ${c.ml}ml ${c.mg}mg`, value: c.id })))
-
-const cartridgeId = ref(props.pen.cartridgeId)
-const dirty = computed(() => props.pen.cartridgeId !== cartridgeId.value)
-
-const insert = () => useApi()
-  .api<MetapiResponse<Cartridge>>(`/api/user/${props.pen.userId}/pen/${props.pen.id}`, { method: 'PUT', body: { cartridgeId: cartridgeId.value } })
-  .then(reload)
-const eject = () => useApi()
-  .api<MetapiResponse<Cartridge>>(`/api/user/${props.pen.userId}/pen/${props.pen.id}`, { method: 'PUT' })
-  .then(reload)
-const remove = () => useApi()
-  .api<MetapiResponse<Cartridge>>(`/api/user/${props.pen.userId}/pen/${props.pen.id}`, { method: 'DELETE' })
-  .then(reload)
-
-const items = computed(() => {
-  return [
-    [
-      !props.pen.cartridge
-        ? {
-            label: 'Attach Cartridge',
-            icon: 'i-mdi-plus',
-            click: () => attachModal.value = true,
-          }
-        : {
-            label: 'Eject Cartridge',
-            icon: 'i-mdi-minus',
-            click: () => useConfirm().confirm('Remove Cartridge', 'Are you sure you want to remove this cartridge?', 'Eject', eject),
-          },
-    ],
-    [
-      {
-        label: 'Delete pen',
-        icon: 'i-mdi-trash',
-        click: () => useConfirm().confirm('Remove Cartridge', 'Are you sure you want to delete this pen?', 'Remove', remove),
-      },
-    ],
-  ]
-})
+defineProps<{ round: Round }>()
 </script>
 
 <template>
   <div class="flex">
     <u-card class="w-full">
       <div class="flex flex-col items-center justify-center space-y-4">
-        <u-dropdown v-if="!readonly" :items="items" class="self-end">
-          <u-button icon="i-mdi-dots-vertical" size="xs" variant="ghost" />
-        </u-dropdown>
-        <pen-model :color="pen.color">
+        <pen-model :color="round.color">
           <transition name="fade">
-            <cartridge-model v-if="pen.cartridge" :cartridge="pen.cartridge" />
+            <cartridge-model :round="round" />
           </transition>
         </pen-model>
-        <div v-if="pen.cartridge">
-          {{ pen.cartridge.content }} {{ pen.cartridge.ml }}ml {{ pen.cartridge.mg }}mg
-        </div>
-        <div v-else>
-          No cartridge attached
-        </div>
-        <div v-if="pen.cartridge && pen.cartridge.shots">
-          <shot-summary :shots="pen.cartridge.shots" :cartridge="pen.cartridge" />
+        <div>
+          {{ round.content }} {{ round.ml }}ml {{ round.mg }}mg
         </div>
-        <div v-if="pen.cartridge && pen.cartridge.shots">
-          <shot-log :shots="pen.cartridge.shots" @reload="emit('reload')" />
-        </div>
-
-        <shot-form :pen="pen" :cartridge="pen.cartridge" @created="reload" />
-
-        <shot-day-form :pen="pen" @updated="reload" />
+        <shot-summary :round="round" />
+        <shot-log :round="round" />
       </div>
     </u-card>
-    <u-dashboard-modal v-model="attachModal" title="Attach a Cartridge" description="Choose an available cartridge">
-      <u-button-group>
-        <u-select-menu
-          v-model="cartridgeId"
-          :options="options"
-          placeholder="Choose a Cartridge"
-          value-attribute="value"
-        />
-        <u-button icon="i-mdi-plus" label="Attach" size="xs" :disabled="!dirty" @click="insert" />
-      </u-button-group>
-    </u-dashboard-modal>
   </div>
 </template>
 

app/components/pen/PenList.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { Cartridge, Pen } from '@prisma/client'
+import type { Round } from '~/types/models'
 
-defineProps<{ pens: Pen[], cartridges: Cartridge[], readonly?: boolean }>()
+defineProps<{ rounds: Round[] }>()
 const emit = defineEmits(['reload'])
 </script>
 
 <template>
   <div>
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
       <pen-card
-        v-for="pen in pens" :key="pen.id.toString()"
-        :pen="pen"
-        :cartridges="cartridges"
-        :readonly="readonly"
+        v-for="round in rounds" :key="round.id"
+        :round="round"
         @reload="emit('reload')"
       />
     </div>