Feat: Implement patient input restriction setting in monitor page

LifeAdventurer · Mar 31, 2024 · f7ef6fd · f7ef6fd
1 parent 54280f1
commit f7ef6fd
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/monitor/index.html b/monitor/index.html
@@ -92,7 +92,23 @@ <h1> 護理站數據監測 </h1>
           <div class="col">
             <div class="card shadow h-100 bg-light">
               <div class="card-body" style="padding-top: 10px">
-                <h3 class="card-title mb-3">{{ patientAccount }}</h3>
+                <div class="row">
+                  <h3 class="col-4 card-title mb-3">{{ patientAccount }}</h3>
+                  <div class="col input-group mb-3">
+                    <div v-if="isEditing[patientAccount]" class="input-group-text">
+                      <input type="checkbox" :id="'food-checkbox-' + index" v-model="foodCheckboxChecked[patientAccount]">
+                      <label :for="'food-checkbox-' + index">吃</label>
+                      <input type="checkbox" :id="'water-checkbox-' + index" v-model="waterCheckboxChecked[patientAccount]">
+                      <label :for="'water-checkbox-' + index">水</label>
+                    </div>
+                    <input v-if="isEditing[patientAccount]" v-model="limitAmount[patientAccount]" @input="handleInput($event.target.value, patientAccount)" type="text" class="form-control" pattern="\d*">
+                    <input v-else :value="restrictionContext[patientAccount] || '尚未設定限制'" type="text" class="form-control text-center" readonly>
+                    <button class="btn btn-primary" @click="toggleEdit(patientAccount)">
+                      <i v-if="isEditing[patientAccount]" class="fas fa-check"></i>
+                      <i v-else class="fas fa-pencil-alt"></i>
+                    </button>
+                  </div>
+                </div>
                 <div class="row">
                   <template v-if="patientRecords[patientAccount][currentDateYY_MM_DD]">
                     <table class="table table-striped table-bordered">

diff --git a/monitor/script.js b/monitor/script.js
@@ -13,6 +13,11 @@ Vue.createApp({
       filteredPatientAccounts: [],
       searchQuery: '',
       currentDateMMDD: '', 
+      limitAmount: {},
+      isEditing: {},
+      foodCheckboxChecked: {},
+      waterCheckboxChecked: {},
+      restrictionContext: {},
       apiUrl: 'https://tobiichi3227.eu.org/',
       showScrollButton: false,
     }
@@ -94,6 +99,27 @@ Vue.createApp({
       const lastDate = keys[keys.length - 1].replace(/_/g, '/');
       return `${firstDate} ~ ${lastDate}`;
     },
+    toggleEdit(patientAccount) {
+      if (this.isEditing[patientAccount] && !this.foodCheckboxChecked[patientAccount] && !this.waterCheckboxChecked[patientAccount]) {
+        alert('請勾選選項');
+        return;
+      }
+      this.isEditing[patientAccount] = !this.isEditing[patientAccount];
+      if (!this.isEditing[patientAccount]) {
+        let context;
+        if (this.foodCheckboxChecked[patientAccount] && this.waterCheckboxChecked[patientAccount]) {
+          context = `限制進食加喝水不超過${this.limitAmount[patientAccount]}公克`
+        } else if (this.foodCheckboxChecked[patientAccount]) {
+          context = `限制進食不超過${this.limitAmount[patientAccount]}公克`
+        } else {
+          context = `限制喝水不超過${this.limitAmount[patientAccount]}公克`
+        }
+        this.restrictionContext[patientAccount] = context;
+      }
+    },
+    handleInput(value) {
+      this.limitAmount[patientAccount] = parseInt(value);
+    },
     confirmLogout() {
       if (confirm('請確認是否要登出')) {
         this.account = '';