Fix small bugs and add the starting time of the session

Author: loehnertz

Diff for: README.md

@@ -19,6 +19,7 @@ The app supports both Gong Fu Cha and Western-style brewing and comes with prede
 - PWA support for installation on devices and subsequent offline use.
 - Dark mode for low-light environments.
 - Supports both Gong Fu Cha and Western-style brewing.
+- Remembers when the session was started and how many infusions have been brewed.
 - Choose from predefined tea presets.
 - Set custom initial infusion time and increment per infusion.
 - Timer for each infusion with a countdown and progress bar.

Diff for: src/assets/types.ts

@@ -6,11 +6,12 @@ export interface TeaPreset {
   additionalInfusions: number
 }
 
-export interface Settings {
+export interface SessionSettings {
   initialTime: number
   incrementTime: number
   infusionCount: number
   method: BrewMethod
+  startedAt: number
   savedAt: number
 }
 

Diff for: src/components/CustomSettings.vue

@@ -14,9 +14,9 @@
       </div>
     </div>
     <div class="field">
-      <label class="label is-size-6" for="incrementTime"
-        >Time Increment per Infusion (seconds):</label
-      >
+      <label class="label is-size-6" for="incrementTime">
+        Time Increment per Infusion (seconds):
+      </label>
       <div class="control">
         <input
           id="incrementTime"
@@ -46,15 +46,15 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['updateInitialTime', 'updateInitialTime'],
+  emits: ['updateInitialTime', 'updateIncrementTime'],
   methods: {
     updateInitialTime(event: Event) {
       const target = event.target as HTMLInputElement
       this.$emit('updateInitialTime', parseInt(target.value, 10))
     },
     updateIncrementTime(event: Event) {
       const target = event.target as HTMLInputElement
-      this.$emit('updateInitialTime', parseInt(target.value, 10))
+      this.$emit('updateIncrementTime', parseInt(target.value, 10))
     },
   },
 })

Diff for: src/components/SettingsPanel.vue

@@ -17,8 +17,8 @@
     <PresetDetails v-if="selectedPreset" :preset="selectedPreset" />
     <CustomSettings
       v-else
-      v-model:incrementTime="incrementTime"
-      v-model:initialTime="initialTime"
+      :incrementTime="incrementTime"
+      :initialTime="initialTime"
       @updateIncrementTime="incrementTime = $event"
       @updateInitialTime="initialTime = $event"
     />

Diff for: src/components/TimerAdjustment.vue

@@ -64,8 +64,8 @@ export default defineComponent({
   emits: ['updateOffsetTime'],
   data() {
     return {
-      positivePercentageAdjustments: [10, 25, 50],
-      negativePercentageAdjustments: [10, 25, 50].reverse(),
+      positivePercentageAdjustments: [25, 50, 75],
+      negativePercentageAdjustments: [25, 50, 75].reverse(),
     }
   },
   methods: {

Diff for: src/components/TimerDisplay.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="content has-text-centered mt-5">
-    <p class="title is-2">
-      Current Infusion: <span class="has-text-weight-bold">{{ infusionCount }}</span>
+    <p id="infusion-counter" class="title is-2">
+      <span class="has-text-weight-bold">Current Infusion:</span>
+      {{ infusionCount }}
+    </p>
+    <p id="start-time" class="title is-6">
+      <span class="has-text-weight-bold">Started at:</span>
+      {{ startedAt.toLocaleTimeString(undefined, dateFormatOptions) }}
     </p>
     <p class="title is-1">
       <span id="timer">{{ timeRemaining.toFixed(2) }}</span>
@@ -42,6 +47,10 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    startedAt: {
+      type: Date,
+      required: true,
+    },
   },
   emits: ['finishInfusion', 'updateTimerRunning'],
   data() {
@@ -54,6 +63,7 @@ export default defineComponent({
       intervalId: null as number | null,
       beepEnd: new Audio('./audio/sonar_high.mp3'),
       beepWarning: new Audio('./audio/sonar_low.mp3'),
+      dateFormatOptions: { hour: '2-digit', minute: '2-digit', hour12: false } as const,
     }
   },
   computed: {
@@ -190,6 +200,14 @@ export default defineComponent({
 </script>
 
 <style scoped>
+#infusion-counter {
+  margin-bottom: 0.5em;
+}
+
+#start-time {
+  margin-bottom: 2em;
+}
+
 #timer {
   font-size: 3.5rem;
   font-weight: bold;

Diff for: src/components/TimerPanel.vue

@@ -7,6 +7,7 @@
       :infusionCount="infusionCount"
       :initialTime="initialTime"
       :offsetTime="offsetTime"
+      :startedAt="startedAt"
       @finishInfusion="finishInfusion"
       @updateTimerRunning="timerRunning = $event"
     />
@@ -63,6 +64,10 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    startedAt: {
+      type: Date,
+      required: true,
+    },
   },
   emits: ['changedInfusionCount', 'finishInfusion', 'backToSettings'],
   data() {

Diff for: src/shared.ts

@@ -0,0 +1,9 @@
+/**
+ * Checks if the given timestamp is older than 12 hours from the current time (epoch).
+ *
+ * @param savedAt The timestamp to check (epoch).
+ */
+export function isOlderThan12hours(savedAt: number): boolean {
+  if (!savedAt) return true
+  return Date.now() - savedAt > 12 * 60 * 60 * 1000
+}

Diff for: src/views/AboutView.vue

@@ -12,6 +12,8 @@
         <li>Responsive design that works well on both desktop and mobile devices.</li>
         <li>PWA support for installation on devices and subsequent offline use.</li>
         <li>Dark mode for low-light environments.</li>
+        <li>Supports both Gong Fu Cha and Western-style brewing.</li>
+        <li>Remembers when the session was started and how many infusions have been brewed.</li>
         <li>Choose from predefined tea presets.</li>
         <li>Set custom initial infusion time and increment per infusion.</li>
         <li>Timer for each infusion with a countdown and progress bar.</li>

Diff for: src/views/BrewView.vue

@@ -13,6 +13,7 @@
         :incrementTime="incrementTime"
         :infusionCount="infusionCount"
         :initialTime="initialTime"
+        :startedAt="new Date(startedAt)"
         @backToSettings="backToSettings"
         @changedInfusionCount="updateInfusionCount"
         @finishInfusion="finishInfusion"
@@ -27,8 +28,9 @@ import TimerPanel from '@/components/TimerPanel.vue'
 import SettingsPanel from '@/components/SettingsPanel.vue'
 import BackToSettings from '@/components/BackToSettings.vue'
 import FooterAttribution from '@/components/FooterAttribution.vue'
-import type { Settings, TeaPreset } from '@/assets/types'
+import type { SessionSettings, TeaPreset } from '@/assets/types'
 import { BrewMethod } from '@/assets/types'
+import { isOlderThan12hours } from '@/shared'
 
 export default defineComponent({
   name: 'BrewView',
@@ -57,6 +59,7 @@ export default defineComponent({
       initialTime: this.customDefaults.initialTime,
       incrementTime: this.customDefaults.incrementTime,
       infusionCount: 1,
+      startedAt: Date.now(),
       timerRunning: false,
       showSettings: false,
       chineseTeaProverbs: [
@@ -68,6 +71,17 @@ export default defineComponent({
       ],
     }
   },
+  watch: {
+    /**
+     * Watches for changes to the infusion count and sets the start time once the first infusion is complete.
+     */
+    infusionCount(newCount) {
+      if (newCount === 2) {
+        const initialTimeMillis = this.initialTime * 1000
+        this.startedAt = Date.now() - initialTimeMillis
+      }
+    },
+  },
   methods: {
     /**
      * Confirm the settings and save them to local storage.
@@ -76,22 +90,20 @@ export default defineComponent({
       this.initialTime = event.initialTime
       this.incrementTime = event.incrementTime
       this.infusionCount = 1
+      this.startedAt = Date.now()
+
       this.persistSettings()
+
       this.showSettings = false
     },
     /**
      * Load the settings from local storage.
      */
     loadSettings() {
-      function isOlderThan12hours(savedAt: number) {
-        if (!savedAt) return true
-        return Date.now() - savedAt > 12 * 60 * 60 * 1000
-      }
-
       const storedSettings = localStorage.getItem('settings')
 
       if (storedSettings) {
-        const settings: Settings = JSON.parse(storedSettings)
+        const settings: SessionSettings = JSON.parse(storedSettings)
 
         // Clear settings if:
         // - the settings were saved more than 12 hours ago
@@ -103,12 +115,14 @@ export default defineComponent({
           !settings.initialTime ||
           !settings.incrementTime
         ) {
+          console.log('Settings are outdated or malformed; discarding them')
           localStorage.removeItem('settings')
           this.showSettings = true
         } else {
           this.initialTime = settings.initialTime
           this.incrementTime = settings.incrementTime
           this.infusionCount = settings.infusionCount || 1
+          this.startedAt = settings.startedAt || Date.now()
           this.showSettings = false
         }
       } else {
@@ -120,8 +134,10 @@ export default defineComponent({
      */
     finishInfusion(event: { infusionCount: number; offsetTime: number }) {
       console.log(`Enjoy your tea: ${this.getRandomTeaProverb()}`)
+
       this.initialTime += event.offsetTime
       this.infusionCount = event.infusionCount
+
       this.persistSettings()
     },
     /**
@@ -145,11 +161,12 @@ export default defineComponent({
      * Persist the current settings to local storage.
      */
     persistSettings() {
-      const settings: Settings = {
+      const settings: SessionSettings = {
         initialTime: this.initialTime,
         incrementTime: this.incrementTime,
         infusionCount: this.infusionCount,
         method: this.method,
+        startedAt: this.startedAt,
         savedAt: Date.now(),
       }
       localStorage.setItem('settings', JSON.stringify(settings))
@@ -159,6 +176,7 @@ export default defineComponent({
      */
     updateInfusionCount(infusionCount: number) {
       this.infusionCount = infusionCount
+
       this.persistSettings()
     },
     /**

Diff for: src/views/HomeView.vue

@@ -50,6 +50,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import FooterAttribution from '@/components/FooterAttribution.vue'
+import { BrewMethod, type SessionSettings } from '@/assets/types'
+import { isOlderThan12hours } from '@/shared'
 
 export default defineComponent({
   name: 'HomeView',
@@ -63,6 +65,34 @@ export default defineComponent({
     selectWestern() {
       this.$router.push('/western-brew')
     },
+    loadSettings() {
+      const storedSettings = localStorage.getItem('settings')
+
+      if (storedSettings) {
+        const settings: SessionSettings = JSON.parse(storedSettings)
+
+        if (isOlderThan12hours(settings.savedAt)) {
+          console.log('Settings are outdated; discarding them')
+          localStorage.removeItem('settings')
+          return
+        }
+
+        switch (settings.method) {
+          case BrewMethod.GONG_FU:
+            this.selectGongFu()
+            break
+          case BrewMethod.WESTERN:
+            this.selectWestern()
+            break
+          default:
+            console.warn('Unknown brewing method:', settings.method)
+            break
+        }
+      }
+    },
+  },
+  mounted() {
+    this.loadSettings()
   },
 })
 </script>