From 2aadfcaf7d4163c93494b44ee2b976929609ad29 Mon Sep 17 00:00:00 2001
From: bogdan <bogd@live.ru>
Date: Tue, 14 May 2024 17:06:50 +0200
Subject: [PATCH] implementing frontend for astro data

---
 cards/AstroTimerCard.vue | 157 ++++++++++++++++++++++++++++++++-------
 1 file changed, 130 insertions(+), 27 deletions(-)

diff --git a/cards/AstroTimerCard.vue b/cards/AstroTimerCard.vue
index 35c5e77..5bd0421 100644
--- a/cards/AstroTimerCard.vue
+++ b/cards/AstroTimerCard.vue
@@ -1,20 +1,58 @@
 <template>
-    <q-card flat class="card">
-        <q-card-section>
-            <div class="text-h6">Astro Scheduler</div>
-        </q-card-section>
-        <q-card-actions>
-            <div class="row">
-                <div><q-input v-model="data.lat" label="Latitude" /></div>
-                <div><q-input v-model="data.lon" label="Longitude" /></div>
-                <div><q-input v-model="data.ang" label="Sun angle" /></div>
-            </div>
-            <div class="row">
-                <div><q-input v-model="data.timestamp" label="Unixtime" /></div>
-                <div><q-btn class="btn" flat v-on:click="Calc">Test Astro</q-btn></div>
-            </div>
-        </q-card-actions>
-    </q-card>
+  <q-card flat class="card">
+    <q-card-section>
+      <div class="text-h6">Astro Scheduler</div>
+    </q-card-section>
+    <q-card-section class="q-pt-none">
+      <div class="row">
+        <div class="q-pa-md col-6"><q-input v-model="data.astrorecs.lat" label="LAT" /></div>
+        <div class="q-pa-md col-6"><q-input v-model="data.astrorecs.lon" label="LON" /></div>
+      </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="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>Sun rise/set</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">
+                  <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">Sensor time: {{ min_to_str(astrorec.sensor_time) }}
+
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="q-pa-xs col-6"><q-input v-model="astrorec.main_angle" label="Sun angle" /></div>
+                  <div class="q-pa-xs col-6"> 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-card-section>
+    </q-scroll-area>
+    <q-card-actions>
+      <div>
+        <q-btn class="btn" flat v-on:click="AddAstroRecord">Add new</q-btn>
+      </div>
+    </q-card-actions>
+  </q-card>
 </template>
 
 <script setup>
@@ -22,23 +60,88 @@ import { reactive, computed } from "vue";
 import { PostData } from "components/webguicomp/network";
 import { ShowDelayDialog } from "components/webguicomp/helpers";
 
-const init = {
-    timestamp: 0,
-    lat: 54.73,
-    lon: 20.51,
-    ang: 0.0,
-    sunrise: '',
-    sunset: ''
+function min_to_str(min) {
+  return `${Math.floor(min / 60)}h ${min % 60}m`
 }
 
-const cond = {
-
+let initrecs = function () {
+  let out = [], rec;
+  for (i = 1; i <= 16; i++) {
+    rec = {
+      num: i,
+      del: 1,
+      enab: 1,
+      rise: 1,
+      sensor_enab: 0,
+      sensor_angle: 0,
+      sensor_time: 0,
+      main_angle: 0,
+      main_time: 0,
+      name: "",
+      exec: "",
+    }
+    out.push(rec);
+  }
+  console.log(JSON.stringify(out));
+  return out;
 };
 
-function TestAstro() {
-    PostData({ astro_test: data.timestamp }, 1, 0);
+
+const init = {
+  astrorecs: {
+    lat: 0,
+    lon: 0,
+    records: initrecs
+  }
 }
 
+function ApplyAstroRecord(num) {
+  PostData({
+    astrorecs: {
+      lat: data.astrorecs.lat,
+      lon: data.astrorecs.lon,
+      records: [
+        {
+          num: data.astrorecs.records[num - 1].num,
+          del: data.astrorecs.records[num - 1].del,
+          enab: data.astrorecs.records[num - 1].enab,
+          rise: data.astrorecs.records[num - 1].rise,
+          sensor_enab: data.astrorecs.records[num - 1].sensor_enab,
+          sensor_angle: data.astrorecs.records[num - 1].sensor_angle,
+          main_angle: data.astrorecs.records[num - 1].main_angle,
+          name: data.astrorecs.records[num - 1].name,
+          exec: data.astrorecs.records[num - 1].exec
+        }
+      ]
+    }
+  }, 1, 1, ShowDelayDialog('Data applying...', 250, PostData(data, 2, 0, null)));
+}
+
+function DeleteAstroRecord(num) {
+  data.astrorecs.records[num - 1].del = 1;
+  ApplyAstroRecord(num);
+}
+
+function AddAstroRecord() {
+  for (let i = 0; i < 16; i++) {
+    if (data.astrorecs.records[i].del == 1) {
+      data.astrorecs.records[i].del = 0;
+      data.astrorecs.records[i].enab = 0;
+      ApplyAstroRecord(i + 1);
+      break;
+    }
+  }
+}
+
+
+const scrollHeight = computed(() => {
+  let num = 0;
+  for (let i = 0; i < 16; i++) if (!data.astrorecs.records[i].del) ++num;
+  return (num <= 2) ? num * 400 : 800;
+});
+
+
+
 const data = reactive(init);
 PostData(data, 2, 0, null);
 </script>