From de95f7f1186162a5426f5d538b42f0bd73081369 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Mon, 24 Jun 2024 15:07:13 +0200
Subject: [PATCH] Add form field for water temperature

---
 src/components/FieldWrapper.vue           |  2 +-
 src/components/specific/TypeOfTeaForm.vue | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/FieldWrapper.vue b/src/components/FieldWrapper.vue
index 5ac3888..281bfa3 100644
--- a/src/components/FieldWrapper.vue
+++ b/src/components/FieldWrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <label :for="inputId" class="ps-0.5 font-bold text-xs uppercase tracking-widest">{{ label }}</label>
+    <label :for="inputId" class="ps-0.5 font-bold text-xs uppercase tracking-widest whitespace-nowrap">{{ label }}</label>
     <slot :input-id="inputId"/>
   </div>
 </template>
diff --git a/src/components/specific/TypeOfTeaForm.vue b/src/components/specific/TypeOfTeaForm.vue
index 120d30c..5e32e77 100644
--- a/src/components/specific/TypeOfTeaForm.vue
+++ b/src/components/specific/TypeOfTeaForm.vue
@@ -7,6 +7,9 @@
       <FieldWrapper label="Steeping time">
         <DurationInput v-model="data.steepingTime" largest-unit="minutes" :minimum="Temporal.Duration.from({ seconds: 10 })" :disabled="isLoading"/>
       </FieldWrapper>
+      <FieldWrapper label="Water temp. (°C)">
+        <TextualInput v-model="waterTemperatureInCelsius" type="number" min="0" max="300" :disabled="isLoading"/>
+      </FieldWrapper>
     </div>
     <FieldWrapper label="Note" v-slot="{ inputId }">
       <TextualInput v-model="data.notes" type="area" :id="inputId" :disabled="isLoading"/>
@@ -48,4 +51,14 @@
     savedData.value = cloneDeep(toRaw(data))
     isLoading.value = false
   }
+
+  const waterTemperatureInCelsius = computed({
+    set(newValue: string) {
+      const parsed = Number(newValue)
+      data.waterTemperatureInCelsius = isNaN(parsed) ? 100 : parsed
+    },
+    get() {
+      return String(data.waterTemperatureInCelsius)
+    }
+  })
 </script>
\ No newline at end of file