more and more

src/components/AreaControlCard.vue

@@ -4,7 +4,7 @@ import { reactive, onBeforeUnmount, ref } from 'vue'
 
 const props = defineProps(['areaId'])
 const api = new IrrigationApi()
-let minutesSlider = ref(17)
+let minutesSlider = ref(20)
 let updateInterval
 
 let area = reactive({
@@ -65,95 +65,28 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="border">
-    <div v-if="valve.status" class="valveOn valve">
-      <h2>{{ area.name }}</h2>
-      <p>Status: Offen </p>
-      <div class="inputDiv">
-        <p>Verbleibenede Zeit: {{ parseInt(valve.remainingTime / 60) }} Min</p>
+  <div class="border-solid border-2 border-black rounded-2xl p-1 m-1 w-48 h-48 flex flex-col bg-gray-100">
+    <div v-if="valve.status" class="flex flex-col items-center">
+      <h2 class="text-lg text-center h-14 mb-2">{{ area.name }}</h2>
+      <p class="text-center mb-1">Status: Offen </p>
+      <div class="flex flex-col items-center mb-2">
+        <p class="text-center">Verbleibenede Zeit: <br /> {{ parseInt(valve.remainingTime / 60) }} Min</p>
       </div>
-      <button @click="close">Schließen</button>
+      <button class="text-lg border-2 border-black rounded-xl w-3/4 hover:bg-gray-300" @click="close">Schließen</button>
     </div>
 
-    <div v-if="!valve.status" class="valveOff valve">
-      <h2>{{ area.name }}</h2>
-      <p>Status: Geschlossen</p>
-      <div class="inputDiv">
-        <input type="range" min="0" max="120" v-model="minutesSlider" />
-        <label>
-          <input type="number" v-model="minutesSlider" />
+    <div v-if="!valve.status" class="flex flex-col items-center">
+      <h2 class="text-lg text-center h-14 mb-2">{{ area.name }}</h2>
+      <p class="text-center mb-2">Status: Geschlossen</p>
+      <div class="flex flex-col items-center mb-2">
+        <input class="w-3/4 mb-1" type="range" min="0" max="120" v-model="minutesSlider" />
+        <label class="flex w-3/4">
+          <input class="w-1/2 mr-2" type="number" v-model="minutesSlider" />
           Minuten
         </label>
       </div>
-      <button @click="open">Öffnen</button>
+      <button class="text-lg border-2 border-black rounded-xl w-3/4 hover:bg-gray-300" @click="open">Öffnen</button>
     </div>
   </div>
 </template>
 
-<style scoped>
-.inputDiv {
-  width: 100%;
-  height: 70px;
-  margin-bottom: 12px;
-}
-
-p {
-  font-size: larger;
-  text-align: center;
-  width: 100%;
-  margin: 8px;
-}
-
-.border {
-  border-width: 2px;
-  border-radius: 10px;
-  border-style: solid;
-  border-color: black;
-  margin: 5px;
-  padding: 5px;
-  width: 250px;
-  height: 250px;
-}
-
-label {
-  display: block;
-  text-align: center;
-  font-size: large;
-}
-
-input[type='number'] {
-  width: 30%;
-  font-size: larger;
-}
-
-input[type='range'] {
-  align-self: center;
-  width: 65%;
-  margin-left: 45px;
-  height: 30px;
-}
-
-h2 {
-  display: inline-block;
-  width: 100%;
-  height: 80px;
-  line-height: 30px;
-  text-align: center;
-  vertical-align: middle;
-  margin: 0;
-  padding: 0;
-}
-
-.valve {
-  height: 100%;
-
-  display: flex;
-  flex-wrap: wrap;
-}
-
-button {
-  width: 100%;
-  height: 50px;
-  border-radius: 10px;
-}
-</style>

src/components/irrigation/irrigationAreaConfCard.vue

@@ -15,19 +15,24 @@
             </div>
             <div class="flex flex-row items-center w-full justify-between">
                 <div>
-                    <button v-if="!changed">
-                        <img class="w-10 ml-2" src="../../assets/img/buttons/delete_icon.svg" alt="Löschen" @click="deleteArea">
+                    <button v-if="!changed" @click="deleteArea">
+                        <img class="w-10 ml-2" src="../../assets/img/buttons/delete_icon.svg" alt="Löschen">
                     </button>
-                    <button v-else>
-                        <img class="w-10 ml-2" src="../../assets/img/buttons/sync_icon.svg" alt="Aktualisieren" @click="updateArea">
+                    <button v-else @click="updateArea">
+                        <img class="w-10 ml-2" src="../../assets/img/buttons/sync_icon.svg" alt="Aktualisieren">
                     </button>
                 </div>
-                <textarea class="w-2/3" name="description" rows="8" v-model="area.description" @keypress="sthChanged"></textarea>
+                <textarea class="w-2/3 resize-none h-52" name="description" v-model="area.description" @keypress="sthChanged"></textarea>
             </div>
         </div>
         <div class="w-full overflow-auto">
+            <div class="flex flex-row justify-between w-11/12">
                 <h3 class="text-center text-xl">Konfigurationen</h3>
-            <IrrigationAreaConfLine v-for="conf in area.areaConfs" :key="conf.id" :areaConf="conf" @confDeleted="confDeleted">
+                <button class="mr-2">
+                    <img class="w-5" src="../../assets/img/buttons/add_icon.svg" alt="Hinzufügen" @click="addAreaConf">
+                </button>
+            </div>
+            <IrrigationAreaConfLine v-for="conf in area.areaConfs" :key="conf.id" :areaConf="conf" :areaId="props.areaId" @confDeleted="confDeleted">
             </IrrigationAreaConfLine>
         </div>
     </div>
@@ -38,6 +43,8 @@ import IrrigationApi from '../../helper/irrigationApi';
 import IrrigationAreaConfLine from './irrigationAreaConfLine.vue';
 
 import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router'
+import { areaConfigSelect } from '../../stores/configSelect.js';
 
 const area = reactive({
     name: "",
@@ -50,6 +57,8 @@ const props = defineProps(['areaId']);
 const emit = defineEmits(["areaDeleted"]);
 const api = new IrrigationApi();
 const changed = ref(false);
+const store = areaConfigSelect();
+const router = useRouter();
 
 api.getArea(props.areaId, (data) => {
     area.name = data.name;
@@ -65,7 +74,6 @@ api.getValves((data) => {
 });
 
 function sthChanged() {
-    console.log(area.valveId)
     changed.value = true;
 }
 
@@ -95,4 +103,10 @@ function confDeleted(id) {
     }
 }
 
+function addAreaConf() {
+    store.$state.areaId = props.areaId;
+    store.$state.areaConf = 'new';
+    router.push('/irrigationEventView');
+}
+
 </script>

src/components/irrigation/irrigationAreaConfLine.vue

@@ -1,12 +1,16 @@
 <template>
-    <div class="rowCenter spaceBetween">
-        <div class="rowCenter">
-            <input type="checkbox" name="active" v-model="props.areaConf.activated" @change="changeState">
+    <div class="flex flex-row w-11/12 justify-between border border-black rounded-lg px-2 mb-1 items-center">
+        <div class="flex flex-row">
+            <input class="w-5 mr-2" type="checkbox" name="active" v-model="props.areaConf.activated" @change="changeState">
             {{ props.areaConf.name }}
         </div>
-        <div class="rowCenter">
-            <img src="../../assets/img/buttons/more_icon.svg" alt="Details" @click="detailsConf">
-            <img src="../../assets/img/buttons/delete_icon.svg" alt="Löschen" @click="deleteConf">
+        <div class="flex flex-row items-center">
+            <button @click="detailsConf">
+                <img class="w-8" src="../../assets/img/buttons/more_icon.svg" alt="Details">
+            </button>
+            <button @click="deleteConf">
+                <img class="h-5" src="../../assets/img/buttons/delete_icon.svg" alt="Löschen">
+            </button>
         </div>
 
     </div>
@@ -18,8 +22,8 @@ import { useRouter } from 'vue-router'
 import { areaConfigSelect } from '../../stores/configSelect.js';
 
 const store = areaConfigSelect();
-const router = useRouter()
-const props = defineProps(['areaConf']);
+const router = useRouter();
+const props = defineProps(['areaConf', 'areaId']);
 const emit = defineEmits(['confDeleted']);
 const api = new IrrigationApi();
 
@@ -40,53 +44,9 @@ function deleteConf() {
 }
 
 function detailsConf() {
+    store.$state.areaId = props.areaId;
     store.$state.areaConf = props.areaConf;
-    store.$state.areaConfId = props.areaConf.id;
     router.push('/irrigationEventView');
 }
 </script>
 
-<style scoped>
-.rowCenter img {
-    align-self: center;
-    width: 20px;
-    height: 20px;
-    margin-left: 8px;
-}
-
-.rowCenter img:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-}
-
-button {
-    display: flex;
-    width: 20px;
-    height: 20px;
-    border-style: solid;
-    border-radius: 5px;
-    border-width: 1px;
-}
-
-.rowCenter {
-    display: flex;
-    align-items: center;
-}
-
-.spaceBetween {
-    justify-content: space-between;
-    height: 25px;
-    border-style: solid;
-    border-width: 2px;
-    border-radius: 8px;
-    margin-bottom: 5px;
-    margin-right: 5px;
-    padding: 0 8px;
-}
-
-input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
-    margin-right: 10px;
-}
-</style>

src/components/irrigation/irrigationEventCard.vue

@@ -1,33 +1,78 @@
 <template>
-    <div>
-        <form>
-            <label for="">
-                <input type="checkbox" name="activ">
-                Aktiv
-            </label>
-            <select>
-                <option v-for="(day, index) in days" :key="day" :value="index">
+    <div class="border-2 m-1 p-1 rounded-lg flex flex-row items-center space-x-2">
+        <input type="checkbox" name="activ" v-model="event.activated" @change="changeActivated">
+        <select v-model="event.day" @change="changed = true">
+            <option v-for="(day, index) in days" :key="day" :value="index + 1">
                 {{ day }}
             </option>
         </select>
-            <label for="time">
-                Startzeit: 
-                <input type="time" name="time">
-            </label>
-            <label for="duration">
-                Dauer:
-                <input type="number" name="duration" value="20">
-            </label>
-            <button><img src="../../assets/img/buttons/sync_icon.svg" alt="Aktualisieren"></button>
-            <button><img src="../../assets/img/buttons/delete_icon.svg" alt="Löschen"></button>
-        </form>
+        <label for="time"> Startzeit: </label>
+        <input type="time" name="time" v-model="timeString" @change="changed = true">
+        <label for="duration"> Dauer: </label>
+        <input class="w-11" type="number" name="duration" v-model="event.duration" @change="changed = true">
+        <button v-if="changed" @click="updateEvent"><img class="h-7" src="../../assets/img/buttons/sync_icon.svg" alt="Aktualisieren"></button>
+        <button v-else @click="deleteEvent"><img class="h-7" src="../../assets/img/buttons/delete_icon.svg" alt="Löschen"></button>
     </div>
 </template>
 
 <script setup>
+import { ref, computed, onBeforeMount, reactive } from 'vue';
+import IrrigationApi from '../../helper/irrigationApi.js';
 
-const props = defineProps(['eventId']);
+const api = new IrrigationApi();
+const changed = ref(false);
+const emit = defineEmits(['eventDeleted', 'valueChange']);
+const props = defineProps(['event', 'confId']);
 const days = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
+const timeString = computed({
+    get() {
+        var houre = event.timeH;
+        var minute = event.timeM;
+        if (houre < 10) {
+            houre = '0' + houre;
+        }
+        if (minute < 10) {
+            minute = '0' + minute
+        }
+        return houre + ':' + minute;
+    },
+    set(time) {
+        var h, m;
+        [h, m] = time.split(':');
+        event.timeH = parseInt(h);
+        event.timeM = parseInt(m);
+    }
+});
+const event = reactive({
+    day: props.event.day,
+    activated: props.event.activated,
+    timeH: props.event.timeH,
+    timeM: props.event.timeM,
+    duration: props.event.duration
+});
+
+function updateEvent() {
+    api.patchIrrigationEvent(props.event.id, event, (data) => {
+        console.log('Hallo von Patch: ', data);
+    });
+    emit('valueChange', event, props.event.id, props.confId);
+    changed.value = false;
+}
+
+function deleteEvent() {
+    api.deleteIrrigationEvent(props.event.id, () => {
+        emit('eventDeleted', props.event.id, props.confId);
+    })
+}
+
+function changeActivated() {
+    api.patchIrrigationEvent(props.event.id, {
+        activated: event.activated
+    }, (data) => {
+        console.log('Hallo von Patch: ', data);
+    });
+}
+
 </script>
 
 <style scoped>

src/stores/configSelect.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 
 export const areaConfigSelect = defineStore("areaConfigSelect", {
     state: () => ({
-        areaConfId: "Test",
+        areaId: '',
         areaConf: {}
     }),
     actions: {

src/views/IrrigationView.vue

@@ -21,7 +21,7 @@ function removeArea(id) {
 </script>
 
 <template>
-    <h2>Bewässerung</h2>
+    <h2 class="w-full text-center text-2xl mb-4"> Bereiche</h2>
     <div class="rowMaking">
         <IrrigationAreaConfCard v-for="area in areas" :key="area.id" :areaId="area.id" @areaDeleted="removeArea">
 

src/views/QuickAreaControlView.vue

@@ -13,9 +13,12 @@ api.getAreas((areas) => {
 })
 </script>
 <template>
+  <div>
+    <h1 class="w-full text-center text-3xl mb-4">Schnellzugriff</h1>
     <div class="card">
       <AreaControlCard v-for="area in areaData" :areaId="area.id" :key="area.id"></AreaControlCard>
     </div>
+  </div>
 </template>
 
 <style scoped>

src/views/irrigationEventView.vue

@@ -1,34 +1,95 @@
 <template>
-    <h2>Konfiguration Auswählen</h2>
+    <div class="flex flex-col items-center">
+        <h2 class="w-full text-center text-2xl mb-4">Zeiten</h2>
+        <div class="flex flex-col w-full space-y-2 items-center border-4 p-3 rounded-xl">
             <div>
-        <label for="area">
+                <label class="w-28 inline-block" for="area">
                     Bereich:
-            <select name="area">
-                <option value="bla"> Hey </option>
-            </select>
                 </label>
-        <label for="areaConf">
-            Konfiguration:
-            <select name="areaConf">
-                <option value="blu"> Du </option>
+                <select class="w-64" name="area" v-model="selectedArea" @change="changeCurrentArea">
+                    <option v-for="area in areas" :key="area.id" :value="area.id">
+                        {{ area.name }}
+                    </option>
                 </select>
-        </label>
             </div>
-    <h2>Bewässerungs Zeiten</h2>
+            <div>
+                <label class="w-28 inline-block" for="areaConf">
+                    Konfiguration:
+                </label>
+                <select class="w-64" name="areaConf" v-model="selectedConf" @change="changeCurrentConf">
+                    <option v-for="areaConf in areaConfs" :key="areaConf.id" :value="areaConf.id">
+                        {{ areaConf.name }}
+                    </option>
+                </select>
+            </div>
+        </div>
+        <h2 class="m-3 text-xl">Bewässerungs Ereignisse</h2>
         <div class="eventCards">
-        <EventCard v-for="event in store.$state.areaConf.irrigationEvents" :key="event.id" :eventId="event.id">
+            <EventCard v-for="event in store.$state.areaConf.irrigationEvents" :key="event.id" :event="event" :confId="selectedConf" @eventDeleted="removeEventFromList" @valueChange="updateEventInList">
 
             </EventCard>
         </div>
+    </div>
 </template>
 
 <script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
 import { areaConfigSelect } from '../stores/configSelect.js';
 import EventCard from '../components/irrigation/irrigationEventCard.vue'
+import IrrigationApi from '../helper/irrigationApi.js';
 
+const api = new IrrigationApi();
 const store = areaConfigSelect();
+const areas = reactive([]);
+const areaConfs = reactive([]);
+const selectedArea = ref('');
+const selectedConf = ref('');
+
+onBeforeMount(() => {
+    api.getAreas((areasApi) => {
+        areasApi.forEach(area => {
+            areas.push(area);
+        });
+    });
+
+    selectedArea.value = store.$state.areaId;
+    changeCurrentArea();
+    selectedConf.value = store.$state.areaConf.id;
+});
+
+function changeCurrentArea() {
+    areaConfs.length = 0;
+    const area = areas.find((area) => area.id === selectedArea.value)
+    if (area === undefined) {
+        setTimeout(changeCurrentArea, 20);
+        return;
+    }
+    area.areaConfs.forEach(areaConf => {
+        areaConfs.push(areaConf);
+    });
+    store.$state.areaId = area.id;
+}
+
+function changeCurrentConf() {
+    store.$state.areaConf = areaConfs.find((areaConf) => areaConf.id === selectedConf.value);
+}
+
+function removeEventFromList(eventId, confId) {
+    const i = areaConfs.findIndex((areaConf) => areaConf.id === confId);
+    const j = areaConfs[i].irrigationEvents.findIndex((event) => event.id === eventId);
+
+    areaConfs[i].irrigationEvents.splice(j, 1);
+}
+
+function updateEventInList(eventId, confId, event){
+    const i = areaConfs.findIndex((areaConf) => areaConf.id === confId);
+    const j = areaConfs[i].irrigationEvents.findIndex((event) => event.id === eventId);
+
+    areaConfs[i].irrigationEvents[j].day = event.day;
+    areaConfs[i].irrigationEvents[j].duration = event.duration;
+    areaConfs[i].irrigationEvents[j].timeH = event.timeH;
+    areaConfs[i].irrigationEvents[j].timeM = event.timeM;
+    areaConfs[i].irrigationEvents[j].activated = event.activated;
+}
+
 </script>
-
-<style scoped>
-
-</style>