✨ working cartridge and other fixes

fumeapp · Sep 17, 2024 · 584b876 · 584b876
1 parent ac67406
commit 584b876
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 20 deletions.
diff --git a/app/app.vue b/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>

diff --git a/app/components/cartridge/CartridgeModel.vue b/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" />

diff --git a/app/components/header/HeaderMain.vue b/app/components/header/HeaderMain.vue
@@ -45,7 +45,7 @@ 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">
       <client-only>
         <div v-if="crumbs.length" class="flex items-center justify-between space-x-2 py-2">
@@ -55,6 +55,9 @@ const links = [
           </u-button-group>
         </div>
         <div v-else class="h-10" />
+        <template #fallback>
+          <div class="h-10">&nbsp;</div>
+        </template>
       </client-only>
     </div>
   </div>

diff --git a/app/components/round/RoundSummary.vue b/app/components/round/RoundSummary.vue
@@ -3,15 +3,15 @@ import type { Round } from '@prisma/client'
 import { format } from 'date-fns'
 
 const props = defineProps<{ round: Round }>()
-const { lastShotDay, nextRoundDay } = useRound(props.round)
+const { nextRoundDate } = useRound(props.round)
 </script>
 
 <template>
   <div>
     <div> {{ round.content }} {{ round.mg }}mg</div>
     <div>
       Started {{ format(round.date, 'M/d/yy') }}
-      Refill by {{ format(nextRoundDay(), 'M/d/yy') }}
+      Refill by {{ format(nextRoundDate(), 'M/d/yy') }}
     </div>
   </div>
 </template>

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <u-main class="bg-gray-100 dark:bg-gray-950 overlay flex flex-col w-full">
+    <u-main class="flex flex-col w-full">
       <div class="py-2 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full flex-1">
         <slot />
       </div>