From 46c6dcaa29dc8d5cbd9b6546c5855a3cc0fd4d51 Mon Sep 17 00:00:00 2001
From: bogd <bogd@live.ru>
Date: Wed, 15 May 2024 11:11:07 +0200
Subject: [PATCH] ASTRO and CRON schedulers are wrapped  into drop down list

---
 cards/AstroTimerCard.vue | 69 ++++++++++++++++++----------------------
 cards/CronCard.vue       | 65 ++++++++++++++++---------------------
 2 files changed, 59 insertions(+), 75 deletions(-)

diff --git a/cards/AstroTimerCard.vue b/cards/AstroTimerCard.vue
index b7acf6e..3258c99 100644
--- a/cards/AstroTimerCard.vue
+++ b/cards/AstroTimerCard.vue
@@ -1,7 +1,7 @@
 <template>
   <q-card flat class="card">
     <q-card-section>
-      <div class="text-h6">Astro Scheduler</div>
+      <div class="text-h6">ASTRO Scheduler</div>
     </q-card-section>
     <q-card-section class="q-pt-none">
       <div class="row">
@@ -10,43 +10,36 @@
       </div>
     </q-card-section>
     <q-card-section class="q-pt-none">
-      <div class="q-pa-md">
-        <div class="q-gutter-md q-pa-none q-pb-none">
-          <q-card flat bordered class="card" v-for="astrorec in data.astrorecs.records" :key="astrorec.num"
-            v-show="!astrorec.del">
-            <q-card-section>
-              <div class="text-h6">Task {{ astrorec.num }}</div>
-            </q-card-section>
-            <q-card-section class="q-pt-none">
-              <div><q-toggle v-model="astrorec.enab" :true-value=1 :false-value=0>Task enabled</q-toggle>
-              </div>
-              <div><q-toggle v-model="astrorec.rise" :true-value=1 :false-value=0>
-                  {{ (astrorec.rise) ? 'Sunrise' : 'Sunset' }}</q-toggle></div>
-              <div><q-toggle v-model="astrorec.sensor_enab" :true-value=1 :false-value=0>Light sensor</q-toggle></div>
-              <div class="row" v-if="astrorec.sensor_enab" style="align-items: center;">
-                <div class="q-pa-xs col-6"><q-input v-model="astrorec.sensor_angle" label="Sensor Sun angle" /></div>
-                <div class="q-pa-xs col-6">Apply time: {{ min_to_str(astrorec.sensor_time) }}</div>
-              </div>
-              <div class="row" style="align-items: center;">
-                <div class="q-pa-xs col-6"><q-input v-model="astrorec.main_angle" label="Main Sun angle" /></div>
-                <div class="q-pa-xs col-6">Apply time: {{ min_to_str(astrorec.main_time) }}</div>
-              </div>
-              <q-input v-model="astrorec.name" label="Task name" />
-              <q-input v-model="astrorec.exec" label="Execute command" />
-            </q-card-section>
-            <q-card-actions>
-              <q-btn class="btn" flat v-on:click="ApplyAstroRecord(astrorec.num)">Apply</q-btn>
-              <q-btn class="btn" flat v-on:click="DeleteAstroRecord(astrorec.num)">Delete</q-btn>
-            </q-card-actions>
-          </q-card>
-        </div>
-      </div>
-
+      <q-expansion-item flat v-for="astrorec in data.astrorecs.records" :key="astrorec.num"
+        :label="list_header(astrorec)" v-show="!astrorec.del">
+        <q-card flat bordered>
+          <q-card-section class="q-pt-none">
+            <div><q-toggle v-model="astrorec.enab" :true-value=1 :false-value=0>Task enabled</q-toggle>
+            </div>
+            <div><q-toggle v-model="astrorec.rise" :true-value=1 :false-value=0>
+                {{ (astrorec.rise) ? 'Sunrise' : 'Sunset' }}</q-toggle></div>
+            <div><q-toggle v-model="astrorec.sensor_enab" :true-value=1 :false-value=0>Light sensor</q-toggle></div>
+            <div class="row" v-if="astrorec.sensor_enab" style="align-items: center;">
+              <div class="q-pa-xs col-6"><q-input v-model="astrorec.sensor_angle" label="Sensor Sun angle" /></div>
+              <div class="q-pa-xs col-6 text-h6">{{ min_to_str(astrorec.sensor_time) }}</div>
+            </div>
+            <div class="row" style="align-items: center;">
+              <div class="q-pa-xs col-6"><q-input v-model="astrorec.main_angle" label="Main Sun angle" /></div>
+              <div class="q-pa-xs col-6 text-h6">{{ min_to_str(astrorec.main_time) }}</div>
+            </div>
+            <q-input v-model="astrorec.name" label="Task name" />
+            <q-input v-model="astrorec.exec" label="Execute command" />
+          </q-card-section>
+          <q-card-actions>
+            <q-btn class="btn" flat v-on:click="ApplyAstroRecord(astrorec.num)">Save task</q-btn>
+            <q-btn class="btn" flat v-on:click="DeleteAstroRecord(astrorec.num)">Delete task</q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-expansion-item>
     </q-card-section>
-
     <q-card-actions>
-      <div>
-        <q-btn class="btn" flat v-on:click="AddAstroRecord">Add new</q-btn>
+      <div class="q-pa-md">
+        <q-btn class="btn" flat v-on:click="AddAstroRecord">Add task</q-btn>
       </div>
     </q-card-actions>
   </q-card>
@@ -61,8 +54,8 @@ function min_to_str(min) {
   return `${Math.floor(min / 60)}h ${min % 60}m`
 }
 
-function event_str(v) {
-  return `${Math.floor(min / 60)}h ${min % 60}m`
+function list_header(rec) {
+  return `Task ${rec.num} [${rec.name}]`;
 }
 
 function initrecs() {
diff --git a/cards/CronCard.vue b/cards/CronCard.vue
index 20ca096..cbdb7a6 100644
--- a/cards/CronCard.vue
+++ b/cards/CronCard.vue
@@ -3,46 +3,43 @@
         <q-card-section>
             <div class="text-h6">CRON Scheduler</div>
         </q-card-section>
-        <q-scroll-area :style="{ height: scrollHeight + 'px' }">
-            <q-card-section class="q-pt-none">
-                <div class="q-pa-md">
-                    <div class="q-gutter-md q-pa-none q-pb-none">
-                        <q-card flat bordered class="card" v-for="cronrec in data.cronrecs" :key="cronrec.num"
-                            v-show="!cronrec.del">
-                            <q-card-section>
-                                <div class="text-h6">Task {{ cronrec.num }}</div>
-                            </q-card-section>
-                            <q-card-section class="q-pt-none">
-                                <div><q-toggle v-model="cronrec.enab" :true-value=1 :false-value=0>Task enabled</q-toggle>
-                                </div>
-                                <div><q-toggle v-model="cronrec.prev" :true-value=1 :false-value=0>Trigger
-                                        previous</q-toggle></div>
-                                <q-input v-model="cronrec.name" label="Task name" />
-                                <q-input v-model="cronrec.cron" label="CRON expression" />
-                                <q-input v-model="cronrec.exec" label="Execute command" />
-                            </q-card-section>
-                            <q-card-actions>
-                                <q-btn class="btn" flat v-on:click="ApplyCronRecord(cronrec.num)">Apply</q-btn>
-                                <q-btn class="btn" flat v-on:click="DeleteCronRecord(cronrec.num)">Delete</q-btn>
-                            </q-card-actions>
-                        </q-card>
-                    </div>
-                </div>
-            </q-card-section>
-        </q-scroll-area>
+        <q-card-section class="q-pt-none">
+            <q-expansion-item v-for="cronrec in data.cronrecs" :key="cronrec.num" :label="list_header(cronrec)"
+                v-show="!cronrec.del">
+                <q-card flat bordered>
+                    <q-card-section class="q-pt-none">
+                        <div><q-toggle v-model="cronrec.enab" :true-value=1 :false-value=0>Task enabled</q-toggle>
+                        </div>
+                        <div><q-toggle v-model="cronrec.prev" :true-value=1 :false-value=0>Trigger
+                                previous</q-toggle></div>
+                        <q-input v-model="cronrec.name" label="Task name" />
+                        <q-input v-model="cronrec.cron" label="CRON expression" />
+                        <q-input v-model="cronrec.exec" label="Execute command" />
+                    </q-card-section>
+                    <q-card-actions>
+                        <q-btn class="btn" flat v-on:click="ApplyCronRecord(cronrec.num)">Save task</q-btn>
+                        <q-btn class="btn" flat v-on:click="DeleteCronRecord(cronrec.num)">Delete task</q-btn>
+                    </q-card-actions>
+                </q-card>
+            </q-expansion-item>
+        </q-card-section>
         <q-card-actions>
-            <div>
-                <q-btn class="btn" flat v-on:click="AddCronRecord">Add new</q-btn>
+            <div class="q-pa-md">
+                <q-btn class="btn" flat v-on:click="AddCronRecord">Add task</q-btn>
             </div>
         </q-card-actions>
     </q-card>
 </template>
-  
+
 <script setup>
 import { reactive, computed } from "vue";
 import { PostData } from "components/webguicomp/network";
 import { ShowDelayDialog } from "components/webguicomp/helpers";
 
+function list_header(rec) {
+    return `Task ${rec.num} [${rec.name}]`;
+}
+
 const init = {
     cronrecs: [
         { num: 1, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
@@ -75,7 +72,7 @@ function ApplyCronRecord(num) {
             cron: data.cronrecs[num - 1].cron,
             exec: data.cronrecs[num - 1].exec
         }]
-    }, 1, 1, ShowDelayDialog('Data applying...', 250, null));
+    }, 1, 1, null);
 }
 
 function DeleteCronRecord(num) {
@@ -94,12 +91,6 @@ function AddCronRecord() {
     }
 }
 
-const scrollHeight = computed(() => {
-    let num = 0;
-    for (let i = 0; i < 16; i++) if (!data.cronrecs[i].del) ++num;
-    return (num <= 2) ? num * 400 : 800;
-});
-
 const data = reactive(init);
 PostData(data, 2, 0, null);
 </script>