add views for adding

src/components/irrigation/irrigationAreaConfCard.vue

@@ -106,7 +106,7 @@ function confDeleted(id) {
 function addAreaConf() {
     store.$state.areaId = props.areaId;
     store.$state.areaConf = 'new';
-    router.push('/irrigationEventView');
+    router.push('/addConf');
 }
 
 </script>

src/forms/areaConfForm.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="flex flex-col w-full space-y-2 items-center border-4 p-3 rounded-xl">
+        <div>
+            <label class="w-28 inline-block" for="area">
+                Bereich:
+            </label>
+            <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>
+        </div>
+        <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>
+                <option v-if="props.newAvailable && selectedArea" value="new">
+                    Hinzufügen
+                </option>
+            </select>
+        </div>
+        <div v-if="selectedConf == 'new'">
+            <label class="w-28 inline-block" for="name">
+                Name: 
+            </label>
+            <input class="w-64" type="text" name="name">
+        </div>
+        <div>
+            <label class="w-28 inline-block" for="description">
+                Beschreibung:
+            </label>
+            <textarea class="w-64" name="description" cols="30" rows="10"></textarea>
+        </div>
+        <div class="flex flex-row w-64 justify-between">
+            <button>Zurück</button>
+            <button>Speichern</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+import IrrigationApi from '../helper/irrigationApi.js';
+import { areaConfigSelect } from '../stores/configSelect.js';
+
+const api = new IrrigationApi();
+const props = defineProps(['newAvailable']);
+const selectedArea = ref('');
+const store = areaConfigSelect();
+const areas = reactive([]);
+const areaConfs = reactive([]);
+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);
+}
+
+</script>

src/router/index.js

@@ -4,6 +4,9 @@ import QuickAreaControlView from '../views/QuickAreaControlView.vue';
 import LightingView from '../views/LightingView.vue';
 import IrrigationView from '../views/IrrigationView.vue';
 import IrrigationEventView from '../views/IrrigationEventView.vue';
+import AddAreaConfView from '../views/AddAreaConfView.vue';
+import AddAreaView from '../views/AddAreaView.vue';
+import AddEventsView from '../views/AddEventsView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -51,6 +54,21 @@ const router = createRouter({
       name: 'irrigationEventView',
       component: IrrigationEventView
     },
+    {
+      path: '/addArea',
+      name: 'addArea',
+      component: AddAreaView
+    },
+    {
+      path: '/addConf',
+      name: 'addConf',
+      component: AddAreaConfView
+    },
+    {
+      path: '/addEvent',
+      name: 'addEvent',
+      component: AddEventsView
+    },
   ]
 })
 

src/views/AddAreaConfView.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <AreaConfForm :new-available=true></AreaConfForm>
+    </div>
+</template>
+
+<script setup>
+import AreaConfForm from '../forms/areaConfForm.vue';
+
+</script>

src/views/AddAreaView.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>

src/views/AddEventsView.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>