From b60cb4a188ad8253cb2913d88297eee13b589067 Mon Sep 17 00:00:00 2001
From: Alexander Klein <alex@kleiax.de>
Date: Fri, 28 Jul 2023 09:01:14 +0200
Subject: [PATCH] run prettier and eslint

---
 src/App.vue                                 |  10 +-
 src/assets/main.css                         |   2 +-
 src/components/AreaControlCard.vue          | 185 +++++++++--------
 src/components/HelloWorld.vue               |  12 +-
 src/components/siteElements/FixedFooter.vue |  83 ++++++++
 src/components/siteElements/Footer.vue      |  81 --------
 src/components/siteElements/Nav.vue         |  43 ----
 src/components/siteElements/NavBar.vue      |  45 +++++
 src/components/siteElements/Sidebar.vue     | 167 ++++++++--------
 src/components/siteElements/TopBanner.vue   |  30 ++-
 src/helper/irrigationApi.js                 | 209 ++++++++++----------
 src/router/index.js                         |   9 +-
 src/views/AboutView.vue                     |  18 +-
 src/views/HomeView.vue                      |   7 +-
 src/views/ImprintView.vue                   | 107 +++++-----
 src/views/QuickAreaControlView.vue          |  36 ++--
 16 files changed, 522 insertions(+), 522 deletions(-)
 create mode 100644 src/components/siteElements/FixedFooter.vue
 delete mode 100644 src/components/siteElements/Footer.vue
 delete mode 100644 src/components/siteElements/Nav.vue
 create mode 100644 src/components/siteElements/NavBar.vue

diff --git a/src/App.vue b/src/App.vue
index b7df79c..95f63c5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <script setup>
-import Footer from './components/siteElements/Footer.vue';
-import TopBanner from './components/siteElements/TopBanner.vue';
-import Sidebar from './components/siteElements/Sidebar.vue';
-import Nav from './components/siteElements/Nav.vue';
-import { RouterLink, RouterView } from 'vue-router';
+import Footer from './components/siteElements/FixedFooter.vue'
+import TopBanner from './components/siteElements/TopBanner.vue'
+import Sidebar from './components/siteElements/SideBar.vue'
+import Nav from './components/siteElements/NavBar.vue'
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
diff --git a/src/assets/main.css b/src/assets/main.css
index 779e7c2..f231fff 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,6 +1,6 @@
 /* @import './base.css'; */
 
-body{
+body {
   margin: 0px;
   margin-bottom: 5em;
   padding: 0px;
diff --git a/src/components/AreaControlCard.vue b/src/components/AreaControlCard.vue
index 0e67efc..12f05c0 100644
--- a/src/components/AreaControlCard.vue
+++ b/src/components/AreaControlCard.vue
@@ -1,114 +1,113 @@
 <script setup>
-import IrrigationApi from '../helper/irrigationApi';
-import { reactive, onBeforeUnmount, ref } from 'vue';
+import IrrigationApi from '../helper/irrigationApi'
+import { reactive, onBeforeUnmount, ref } from 'vue'
 
-const props = defineProps(['areaId']);
-const api = new IrrigationApi();
-let minutesSlider = ref(17);
-let updateInterval;
+const props = defineProps(['areaId'])
+const api = new IrrigationApi()
+let minutesSlider = ref(17)
+let updateInterval
 
 let area = reactive({
-    name: "",
-    description: "",
-    valveId: "",
-});
+  name: '',
+  description: '',
+  valveId: ''
+})
 
 let valve = reactive({
-    status: false,
-    remainingTime: 0,
+  status: false,
+  remainingTime: 0
 })
 
 api.getArea(props.areaId, (areaApi) => {
-    area.name = areaApi.name;
-    area.description = areaApi.description;
-    area.valveId = areaApi.valveId;
-    setUpdateValve();
-});
+  area.name = areaApi.name
+  area.description = areaApi.description
+  area.valveId = areaApi.valveId
+  setUpdateValve()
+})
 
 function setUpdateValve() {
-    updateInterval = setInterval(updateValve, 1000);
+  updateInterval = setInterval(updateValve, 1000)
 
-    function updateValve() {
-        api.getValve(area.valveId, (valveApi) => {
-            valve.status = valveApi.status;
-            valve.remainingTime = valveApi.remainingTime;
-        });
-    }
+  function updateValve() {
+    api.getValve(area.valveId, (valveApi) => {
+      valve.status = valveApi.status
+      valve.remainingTime = valveApi.remainingTime
+    })
+  }
 }
 
 onBeforeUnmount(() => {
-    clearInterval(updateInterval);
-});
+  clearInterval(updateInterval)
+})
 </script>
 
 <template>
-    <div class="border">
-        <div v-if="valve.status" class="valveOn valve">
-            <!-- <div id="headline"> -->
-                <h2>{{ area.name }}</h2>
-            <!-- </div> -->
-            <p>Status: Offen</p>
-            <p>Verbleibenede Zeit: {{ valve.remainingTime / 60 }} Min</p>
-            <button>Schließen</button>
-        </div>
-
-        <div v-if="!valve.status" class="valveOff valve">
-            <!-- <div id="headline"> -->
-                <h2>{{ area.name }}</h2>
-            <!-- </div> -->
-            <p>Status: Geschlossen</p>
-            <div class="inputDiv">
-                <input type="range" min="0" max="120" v-model="minutesSlider">
-                <label>
-                    <input type="number" v-model="minutesSlider">
-                    Minuten
-                </label>
-            </div>
-            <button>Öffnen</button>
-        </div>
-
+  <div class="border">
+    <div v-if="valve.status" class="valveOn valve">
+      <!-- <div id="headline"> -->
+      <h2>{{ area.name }}</h2>
+      <!-- </div> -->
+      <p>Status: Offen</p>
+      <p>Verbleibenede Zeit: {{ valve.remainingTime / 60 }} Min</p>
+      <button>Schließen</button>
     </div>
+
+    <div v-if="!valve.status" class="valveOff valve">
+      <!-- <div id="headline"> -->
+      <h2>{{ area.name }}</h2>
+      <!-- </div> -->
+      <p>Status: Geschlossen</p>
+      <div class="inputDiv">
+        <input type="range" min="0" max="120" v-model="minutesSlider" />
+        <label>
+          <input type="number" v-model="minutesSlider" />
+          Minuten
+        </label>
+      </div>
+      <button>Öffnen</button>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .inputDiv {
-    width: 100%;
-    margin-bottom: 16px;
+  width: 100%;
+  margin-bottom: 16px;
 }
 
 p {
-    font-size: larger;
-    text-align: center;
-    width: 100%;
-    margin: 8px;
+  font-size: larger;
+  text-align: center;
+  width: 100%;
+  margin: 8px;
 }
 
 .border {
-    border-width: 2px;
-    border-radius: 10px;
-    border-style: solid;
-    margin: 5px;
-    padding: 5px;
-    width: 250px;
-    height: 250px;
+  border-width: 2px;
+  border-radius: 10px;
+  border-style: solid;
+  margin: 5px;
+  padding: 5px;
+  width: 250px;
+  height: 250px;
 }
 
 label {
-    display: block;
-    text-align: center;
-    font-size: large;
+  display: block;
+  text-align: center;
+  font-size: large;
 }
 
-input[type="number"] {
-    width: 30%;
-    font-size: larger;
+input[type='number'] {
+  width: 30%;
+  font-size: larger;
 }
 
-input[type="range"] {
-    align-self: center;
-    width: 65%;
-    margin-left: 45px;
-    height: 30px;
+input[type='range'] {
+  align-self: center;
+  width: 65%;
+  margin-left: 45px;
+  height: 30px;
 }
 
 /* .headline {
@@ -121,27 +120,27 @@ input[type="range"] {
     height: 80px;
 } */
 
-h2{
-    display: inline-block;
-    width: 100%;
-    height: 80px;
-    line-height: 30px;
-    text-align: center;
-    vertical-align: middle;
-    margin: 0;
-    padding: 0;
+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;
+  height: 100%;
+
+  display: flex;
+  flex-wrap: wrap;
 }
 
 button {
-    width: 100%;
-    height: 50px;
-    border-radius: 10px;
-
-}</style>
\ No newline at end of file
+  width: 100%;
+  height: 50px;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5176044..2076277 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,11 +1,5 @@
-<script setup>
+<script setup></script>
 
-</script>
+<template><h1>Hello world</h1></template>
 
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/siteElements/FixedFooter.vue b/src/components/siteElements/FixedFooter.vue
new file mode 100644
index 0000000..18a3e4e
--- /dev/null
+++ b/src/components/siteElements/FixedFooter.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import { reactive } from 'vue'
+
+const localTime = reactive({
+  h: '01',
+  m: '02',
+  s: '03',
+  print() {
+    return this.h + ':' + this.m + ':' + this.s
+  }
+})
+
+updateTime()
+
+function updateTime() {
+  function addLeadingZero(i) {
+    if (i < 10) {
+      i = '0' + i
+    } // add zero in front of numbers < 10
+    return i
+  }
+
+  const today = new Date()
+  localTime.h = addLeadingZero(today.getHours())
+  localTime.m = addLeadingZero(today.getMinutes())
+  localTime.s = addLeadingZero(today.getSeconds())
+  setTimeout(updateTime, 1000)
+}
+</script>
+
+<template>
+  <footer>
+    <div>
+      <ul>
+        <li>
+          Lokale Zeit: <span id="footerLocalTime"> {{ localTime.print() }}</span>
+        </li>
+        <li>Server Zeit: <span id="footerServerTime">00:00:00</span></li>
+      </ul>
+    </div>
+    <div>Kleiax Irrigation Frontend</div>
+    <div>
+      <ul class="links">
+        <li><RouterLink to="/imprint">Impressum</RouterLink></li>
+        <li><RouterLink to="/api">Api</RouterLink></li>
+      </ul>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+footer {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  height: 4em;
+  display: flex;
+  justify-content: space-between;
+  place-items: center;
+  background-color: aquamarine;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0px;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.links {
+  text-align: right;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/siteElements/Footer.vue b/src/components/siteElements/Footer.vue
deleted file mode 100644
index 20fd93c..0000000
--- a/src/components/siteElements/Footer.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup>
-    import { RouterLink } from 'vue-router';
-    import { reactive } from "vue"; 
-
-    
-    const localTime = reactive({
-        h: "01",
-        m: "02",
-        s: "03",
-        print() {
-            return this.h + ":" + this.m + ":" + this.s
-        }
-    });
-
-    updateTime();
-
-    function updateTime() {
-        function addLeadingZero(i) {
-            if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
-            return i;
-        }
-
-        const today = new Date();
-        localTime.h = addLeadingZero(today.getHours());
-        localTime.m = addLeadingZero(today.getMinutes());
-        localTime.s = addLeadingZero(today.getSeconds());
-        setTimeout(updateTime, 1000);
-    }
-</script>
-
-<template>
-  <footer>
-    <div>
-        <ul>
-            <li>Lokale Zeit: <span id="footerLocalTime"> {{ localTime.print() }}</span></li>
-            <li>Server Zeit: <span id="footerServerTime">00:00:00</span></li>
-        </ul>
-    </div>
-    <div>Kleiax Irrigation Frontend</div>
-    <div>
-        <ul class="links">
-            <li><RouterLink to="/imprint">Impressum</RouterLink></li>
-            <li><RouterLink to="/api">Api</RouterLink></li>
-        </ul>
-    </div>
-    
-  </footer>
-</template>
-
-<style scoped>
-    footer{
-        position: fixed;
-        bottom: 0px;
-        width: 100%;
-        height: 4em;
-        display: flex;
-        justify-content: space-between;
-        place-items: center;
-        background-color: aquamarine;
-    }
-
-    ul{
-        list-style-type: none;
-        padding: 0px;
-        margin-left: 8px;
-        margin-right: 8px;;
-    }
-
-    .links{
-        text-align: right;
-    }
-
-    a{
-        text-decoration: none;
-        color: black;
-    }
-
-    a:hover{
-        text-decoration: underline;
-    }
-</style>
diff --git a/src/components/siteElements/Nav.vue b/src/components/siteElements/Nav.vue
deleted file mode 100644
index dc9478b..0000000
--- a/src/components/siteElements/Nav.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { RouterLink } from 'vue-router'
-</script>
-
-<template>
-    <nav>
-        <ul>
-            <li>
-                <RouterLink to="/"> <img src="../../assets/img/menuIcon/home.svg"> Start </RouterLink>
-            </li>
-            <li>
-                <RouterLink to="/about"> <img src="../../assets/img/menuIcon/logs.svg"> About</RouterLink>
-            </li>
-            <li>
-                <RouterLink to="/quickControl"> <img src="../../assets/img/menuIcon/logs.svg"> Control</RouterLink>
-            </li>
-        </ul>
-    </nav>
-</template>
-
-<style scoped>
-ul {
-    display: flex;
-    list-style-type: none;
-}
-
-img {
-    padding-right: 8px;
-}
-
-a {
-    display: block;
-    text-decoration: none;
-    color: white;
-    padding: 8px;
-    display: flex;
-    align-items: center;
-}
-
-a:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-</style>
diff --git a/src/components/siteElements/NavBar.vue b/src/components/siteElements/NavBar.vue
new file mode 100644
index 0000000..f300db9
--- /dev/null
+++ b/src/components/siteElements/NavBar.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+</script>
+
+<template>
+  <nav>
+    <ul>
+      <li>
+        <RouterLink to="/"> <img src="../../assets/img/menuIcon/home.svg" /> Start </RouterLink>
+      </li>
+      <li>
+        <RouterLink to="/about"> <img src="../../assets/img/menuIcon/logs.svg" /> About</RouterLink>
+      </li>
+      <li>
+        <RouterLink to="/quickControl">
+          <img src="../../assets/img/menuIcon/logs.svg" /> Control</RouterLink
+        >
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style scoped>
+ul {
+  display: flex;
+  list-style-type: none;
+}
+
+img {
+  padding-right: 8px;
+}
+
+a {
+  display: block;
+  text-decoration: none;
+  color: white;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+}
+
+a:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/src/components/siteElements/Sidebar.vue b/src/components/siteElements/Sidebar.vue
index 5fed348..213d9c5 100644
--- a/src/components/siteElements/Sidebar.vue
+++ b/src/components/siteElements/Sidebar.vue
@@ -1,117 +1,118 @@
 <script setup>
-import IrrigationApi from '../../helper/irrigationApi';
-import { reactive, onBeforeUnmount, ref } from 'vue';
+import IrrigationApi from '../../helper/irrigationApi'
+import { reactive, onBeforeUnmount } from 'vue'
 
-const api = new IrrigationApi();
-const openValves = reactive([]);
-const areas = [];
+const api = new IrrigationApi()
+const openValves = reactive([])
+const areas = []
 
-let updateInterval;
+let updateInterval
 let pump = {
-    status: "Off",
-    time: 0
+  status: 'Off',
+  time: 0
 }
 
-api.getAreas(areasApi => {
-    areasApi.forEach(areaApi => {
-        areas.push(areaApi);
-    });
-    updateInterval = setInterval(updateApiData, 1000);
-});
+api.getAreas((areasApi) => {
+  areasApi.forEach((areaApi) => {
+    areas.push(areaApi)
+  })
+  updateInterval = setInterval(updateApiData, 1000)
+})
 
 function updateApiData() {
-    api.getValves(valves => {
-        valves.forEach(valve => {
-            if (valve.status) {
-                const foundValve = openValves.find(oldValve => oldValve.id === valve.id);
-                if(foundValve === undefined) {
-                    openValves.push(valve);
-                } else {
-                    foundValve.remainingTime = valve.remainingTime;
-                }
-            } else {
-                const foundValveIndex = openValves.findIndex(oldValve => oldValve.id === valve.id);
-                if (foundValveIndex >= 0) {
-                    openValves.splice(foundValveIndex, 1);
-                }
-            }
-        });
-    });
+  api.getValves((valves) => {
+    valves.forEach((valve) => {
+      if (valve.status) {
+        const foundValve = openValves.find((oldValve) => oldValve.id === valve.id)
+        if (foundValve === undefined) {
+          openValves.push(valve)
+        } else {
+          foundValve.remainingTime = valve.remainingTime
+        }
+      } else {
+        const foundValveIndex = openValves.findIndex((oldValve) => oldValve.id === valve.id)
+        if (foundValveIndex >= 0) {
+          openValves.splice(foundValveIndex, 1)
+        }
+      }
+    })
+  })
 }
 
 function getAreaName(valveId) {
-    const area = areas.find(area => area.valveId === valveId)
-    return area.name;
+  const area = areas.find((area) => area.valveId === valveId)
+  return area.name
 }
 
 onBeforeUnmount(() => {
-    clearInterval(updateInterval);
-});
+  clearInterval(updateInterval)
+})
 </script>
 
 <template>
-    <aside>
-        <h2>Infos</h2>
-        <hr />
-        <h3>Pumpe</h3>
-        <p>
-            Status: <br />
-            <b>{{ pump.status }}</b> <br />
-            seit <br />
-            <b>{{ pump.time }}</b> <br />
-            Minuten
-        </p>
-        <hr />
-        <h3>Offene <br /> Bereiche</h3>
-        <p v-if="openValves.length === 0">
-            Alles zu!
-        </p>
-        <p v-else>
-            <ul>
-                <li v-for="valve in openValves">
-                    Bereich: {{ getAreaName(valve.id) }}
-                    Verbleibende Zeit: {{ parseInt(valve.remainingTime) }} min
-                    <span>Schließen!</span>
-                </li>
-            </ul>
-        </p>
-        <hr />
-    </aside>
+  <aside>
+    <h2>Infos</h2>
+    <hr />
+    <h3>Pumpe</h3>
+    <p>
+      Status: <br />
+      <b>{{ pump.status }}</b> <br />
+      seit <br />
+      <b>{{ pump.time }}</b> <br />
+      Minuten
+    </p>
+    <hr />
+    <h3>
+      Offene <br />
+      Bereiche
+    </h3>
+    <p v-if="openValves.length === 0">Alles zu!</p>
+    <ul v-else>
+      <li v-for="valve in openValves" :key="valve.id">
+        Bereich: <br />
+        {{ getAreaName(valve.id) }} <br />
+        Verbleibende Zeit: <br />
+        {{ parseInt(valve.remainingTime) }} min <br />
+        <span>Schließen!</span>
+      </li>
+    </ul>
+    <hr />
+  </aside>
 </template>
 
 <style scoped>
 aside {
-    min-width: 200px;
-    border-radius: 10px;
-    border-style: solid;
-    border-width: 2px;
+  min-width: 200px;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 2px;
 }
 
 h2 {
-    display: inline-block;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    vertical-align: middle;
+  display: inline-block;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  vertical-align: middle;
 }
 
 h3 {
-    display: inline-block;
-    width: 100%;
-    height: 20px;
-    line-height: 20px;
-    text-align: center;
-    vertical-align: middle;
+  display: inline-block;
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
 }
 
 p {
-    text-align: center;
-    font-size: larger;
-    margin: 0;
+  text-align: center;
+  font-size: larger;
+  margin: 0;
 }
 
 b {
-    text-decoration: underline;
+  text-decoration: underline;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/siteElements/TopBanner.vue b/src/components/siteElements/TopBanner.vue
index 399307a..53c1186 100644
--- a/src/components/siteElements/TopBanner.vue
+++ b/src/components/siteElements/TopBanner.vue
@@ -1,6 +1,4 @@
-<script setup>
-
-</script>
+<script setup></script>
 
 <template>
   <div class="banner">
@@ -10,18 +8,18 @@
 </template>
 
 <style scoped>
-  .banner{
-    display: flex;
-    width: 100%;
-    background-color: green;
-    height: 6em;
-    align-items: center;
-    justify-items: center;
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-  }
+.banner {
+  display: flex;
+  width: 100%;
+  background-color: green;
+  height: 6em;
+  align-items: center;
+  justify-items: center;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+}
 
-  h1{
-    margin: 0px;
-    margin-left: 16px;
-  }
+h1 {
+  margin: 0px;
+  margin-left: 16px;
+}
 </style>
diff --git a/src/helper/irrigationApi.js b/src/helper/irrigationApi.js
index 438f200..c30ec66 100644
--- a/src/helper/irrigationApi.js
+++ b/src/helper/irrigationApi.js
@@ -1,145 +1,138 @@
-const address = "http://garten.home.kleiax.de/api/";
+const address = 'http://garten.home.kleiax.de/api/'
 
 class IrrigationApi {
-    constructor() {
+  constructor() {}
 
-    }
+  getValve(id, callback) {
+    httpGet('valve/' + id, callback)
+  }
 
-    getValve(id, callback) {
-        httpGet('valve/' + id, callback);
-    }
+  getValves(callback) {
+    httpGet('valve', callback)
+  }
 
-    getValves(callback) {
-        httpGet('valve', callback);
-    }
+  getArea(id, callback) {
+    httpGet('area/' + id, callback)
+  }
 
+  getAreas(callback) {
+    httpGet('area', callback)
+  }
 
-    getArea(id, callback) {
-        httpGet('area/' + id, callback);
-    }
+  createArea(area, callback) {
+    httpPost('area', area, callback)
+  }
 
-    getAreas(callback) {
-        httpGet('area', callback);
-    }
+  deleteArea(id, callback) {
+    httpDelete('area/' + id, callback)
+  }
 
-    createArea(area, callback) {
-        httpPost('area', area, callback);
-    }
+  patchArea(id, area, callback) {
+    httpPatch('area/' + id, area, callback)
+  }
 
-    deleteArea(id, callback) {
-        httpDelete('area/' + id, callback);
-    }
+  getAreaConf(id, callback) {
+    httpGet('areaConf/specific/' + id, callback)
+  }
 
-    patchArea(id, area, callback) {
-        httpPatch('area/' + id, area, callback);
-    }
-    
+  getAreaConfs(area, callback) {
+    httpGet('areaConf/' + area, callback)
+  }
 
-    getAreaConf(id, callback) {
-        httpGet('areaConf/specific/' + id, callback);
-    }
-    
-    getAreaConfs(area, callback) {
-        httpGet('areaConf/' + area, callback);
-    }
+  createAreaConf(area, areaConf, callback) {
+    httpPost('areaConf/' + area, areaConf, callback)
+  }
 
-    createAreaConf(area, areaConf, callback) {
-        httpPost('areaConf/' + area, areaConf, callback);
-    }
+  deleteAreaConf(id, callback) {
+    httpDelete('areaConf/' + id, callback)
+  }
 
-    deleteAreaConf(id, callback) {
-        httpDelete('areaConf/' + id, callback);
-    }
+  patchAreaConf(id, areaConf, callback) {
+    httpPatch('areaConf/' + id, areaConf, callback)
+  }
 
-    patchAreaConf(id, areaConf, callback) {
-        httpPatch('areaConf/' + id, areaConf, callback);
-    }
+  getIrrigationEvent(id, callback) {
+    httpGet('irrigationEvent/specific/' + id, callback)
+  }
 
+  getIrrigationEvents(areaConf, callback) {
+    httpGet('irrigationEvent/' + areaConf, callback)
+  }
 
-    getIrrigationEvent(id, callback) {
-        httpGet('irrigationEvent/specific/' + id, callback);
-    }
-    
-    getIrrigationEvents(areaConf, callback) {
-        httpGet('irrigationEvent/' + areaConf, callback);
-    }
+  createIrrigationEvent(areaConf, irrigationEvent, callback) {
+    httpPost('irrigationEvent/' + areaConf, irrigationEvent, callback)
+  }
 
-    createIrrigationEvent(areaConf, irrigationEvent, callback) {
-        httpPost('irrigationEvent/' + areaConf, irrigationEvent, callback);
-    }
-
-    deleteIrrigationEvent(id, callback) {
-        httpDelete('irrigationEvent/' + id, callback);
-    }
-
-    patchIrrigationEvent(id, irrigationEvent, callback) {
-        httpPatch('irrigationEvent/' + id, irrigationEvent, callback);
-    }
+  deleteIrrigationEvent(id, callback) {
+    httpDelete('irrigationEvent/' + id, callback)
+  }
 
+  patchIrrigationEvent(id, irrigationEvent, callback) {
+    httpPatch('irrigationEvent/' + id, irrigationEvent, callback)
+  }
 }
 
 function httpGet(apiCall, callback) {
-    var request = new XMLHttpRequest();
-    request.open('GET', address + apiCall);
-    request.onload = function () {
-        const data = JSON.parse(request.response);
+  var request = new XMLHttpRequest()
+  request.open('GET', address + apiCall)
+  request.onload = function () {
+    const data = JSON.parse(request.response)
 
-        if (request.status >= 200 && request.status < 400) {
-            callback(data);
-        } else {
-            console.log('Error irrigationApi.js httpGet()', data);
-        }
-    };
-    request.send();
+    if (request.status >= 200 && request.status < 400) {
+      callback(data)
+    } else {
+      console.log('Error irrigationApi.js httpGet()', data)
+    }
+  }
+  request.send()
 }
 
 function httpPatch(apiCall, data, callback) {
-    var request = new XMLHttpRequest();
-    request.open('PATCH', address + apiCall);
-    request.setRequestHeader("Content-Type", "application/json");
-    request.onload = function () {
-        const data = JSON.parse(request.response);
+  var request = new XMLHttpRequest()
+  request.open('PATCH', address + apiCall)
+  request.setRequestHeader('Content-Type', 'application/json')
+  request.onload = function () {
+    const data = JSON.parse(request.response)
 
-        if (request.status >= 200 && request.status < 400) {
-            callback(data);
-        } else {
-            console.log('Error irrigationApi.js httpPatch()', data);
-        }
-    };
-    request.send(JSON.stringify(data));
+    if (request.status >= 200 && request.status < 400) {
+      callback(data)
+    } else {
+      console.log('Error irrigationApi.js httpPatch()', data)
+    }
+  }
+  request.send(JSON.stringify(data))
 }
 
 function httpDelete(apiCall, callback) {
-    var request = new XMLHttpRequest();
-    request.open('DELETE', address + apiCall);
-    request.onload = function () {
-        const data = JSON.parse(request.response);
+  var request = new XMLHttpRequest()
+  request.open('DELETE', address + apiCall)
+  request.onload = function () {
+    const data = JSON.parse(request.response)
 
-        if (request.status >= 200 && request.status < 400) {
-            callback(data);
-        } else {
-            console.log('Error irrigationApi.js httpDelete()', data);
-        }
-    };
-    request.send();
+    if (request.status >= 200 && request.status < 400) {
+      callback(data)
+    } else {
+      console.log('Error irrigationApi.js httpDelete()', data)
+    }
+  }
+  request.send()
 }
 
 function httpPost(apiCall, data, callback) {
-    // console.log(data);
-    var request = new XMLHttpRequest();
-    request.open('POST', address + apiCall);
-    request.setRequestHeader("Content-Type", "application/json");
-    request.onload = function () {
-        const data = JSON.parse(request.response);
+  // console.log(data);
+  var request = new XMLHttpRequest()
+  request.open('POST', address + apiCall)
+  request.setRequestHeader('Content-Type', 'application/json')
+  request.onload = function () {
+    const data = JSON.parse(request.response)
 
-        if (request.status >= 200 && request.status < 400) {
-            callback(data);
-        } else {
-            console.log('Error irrigationApi.js httpPost()', data);
-        }
-    };
-    request.send(JSON.stringify(data));
+    if (request.status >= 200 && request.status < 400) {
+      callback(data)
+    } else {
+      console.log('Error irrigationApi.js httpPost()', data)
+    }
+  }
+  request.send(JSON.stringify(data))
 }
 
-export default IrrigationApi;
-        
\ No newline at end of file
+export default IrrigationApi
diff --git a/src/router/index.js b/src/router/index.js
index 75da481..747b4f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,5 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import HomeView from '../views/HomeView.vue';
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
 import QuickAreaControlView from '../views/QuickAreaControlView.vue'
 
 const router = createRouter({
@@ -32,9 +32,8 @@ const router = createRouter({
       path: '/quickControl',
       name: 'quickControl',
       component: QuickAreaControlView
-    },
-
+    }
   ]
-});
+})
 
 export default router
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index ea4f6dc..104b27f 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,15 +1,15 @@
 <script setup>
-  import IrrigationApi from '../helper/irrigationApi';
-  import { reactive } from 'vue'
+import IrrigationApi from '../helper/irrigationApi'
+import { reactive } from 'vue'
 
-  const apiData = reactive([]);
+const apiData = reactive([])
 
-  const api = new IrrigationApi();
-  api.getAreas((areas) => {
-    areas.forEach(area => {
-      apiData.push(area);
-    });
-  });
+const api = new IrrigationApi()
+api.getAreas((areas) => {
+  areas.forEach((area) => {
+    apiData.push(area)
+  })
+})
 </script>
 
 <template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index cd4bb1b..4b70433 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,8 +1,5 @@
-<script setup>
-
-</script>
+<script setup></script>
 
 <template>
-    <h1>Seite 1</h1>
-  
+  <h1>Seite 1</h1>
 </template>
diff --git a/src/views/ImprintView.vue b/src/views/ImprintView.vue
index 3423160..647e7c8 100644
--- a/src/views/ImprintView.vue
+++ b/src/views/ImprintView.vue
@@ -1,47 +1,62 @@
 <template>
-    <div class='impressum'>
-        <h1>Impressum</h1>
-        <p>Angaben gemäß § 5 TMG</p>
-        <p>Alexander Klein <br>
-            Ringstraße 15a<br>
-            26899 Rhede (Ems) <br>
-        </p>
-        <p> <strong>Vertreten durch: </strong><br>
-            Alexander Klein<br>
-        </p>
-        <p><strong>Kontakt:</strong> <br>
-            Telefon: 0157-89217099<br>
-            E-Mail: <a href='mailto:klein-alexander1@gmx.de'>klein-alexander1@gmx.de</a><br></p>
-        <p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
-            Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und
-            Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1
-            TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind
-            wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
-            überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur
-            Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt.
-            Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung
-            möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend
-            entfernen.<br><br><strong>Haftung für Links</strong><br><br>
-            Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb
-            können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist
-            stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum
-            Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der
-            Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete
-            Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir
-            derartige Links umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
-            Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren
-            Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies,
-            soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an
-            Dritte weitergegeben. <br>
-            Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail)
-            Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht
-            möglich. <br>
-            Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von
-            nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen.
-            Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von
-            Werbeinformationen, etwa durch Spam-Mails, vor.<br>
-        </p><br>
-        Website Impressum erstellt durch <a href="https://www.impressum-generator.de">impressum-generator.de</a> von der <a
-            href="https://www.kanzlei-hasselbach.de/" rel="nofollow">Kanzlei Hasselbach</a>
-    </div>
-</template>
\ No newline at end of file
+  <div class="impressum">
+    <h1>Impressum</h1>
+    <p>Angaben gemäß § 5 TMG</p>
+    <p>
+      Alexander Klein <br />
+      Ringstraße 15a<br />
+      26899 Rhede (Ems) <br />
+    </p>
+    <p>
+      <strong>Vertreten durch: </strong><br />
+      Alexander Klein<br />
+    </p>
+    <p>
+      <strong>Kontakt:</strong> <br />
+      Telefon: 0157-89217099<br />
+      E-Mail: <a href="mailto:klein-alexander1@gmx.de">klein-alexander1@gmx.de</a><br />
+    </p>
+    <p>
+      <strong>Haftungsausschluss: </strong><br /><br /><strong>Haftung für Inhalte</strong
+      ><br /><br />
+      Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit,
+      Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als
+      Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den
+      allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch
+      nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder
+      nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen
+      zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen
+      bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der
+      Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden
+      Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br /><br /><strong
+        >Haftung für Links</strong
+      ><br /><br />
+      Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen
+      Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für
+      die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten
+      verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche
+      Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht
+      erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne
+      konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von
+      Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br /><br /><strong
+        >Datenschutz</strong
+      ><br /><br />
+      Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich.
+      Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder
+      eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis.
+      Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br />
+      Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per
+      E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff
+      durch Dritte ist nicht möglich. <br />
+      Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur
+      Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird
+      hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich
+      rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch
+      Spam-Mails, vor.<br />
+    </p>
+    <br />
+    Website Impressum erstellt durch
+    <a href="https://www.impressum-generator.de">impressum-generator.de</a> von der
+    <a href="https://www.kanzlei-hasselbach.de/" rel="nofollow">Kanzlei Hasselbach</a>
+  </div>
+</template>
diff --git a/src/views/QuickAreaControlView.vue b/src/views/QuickAreaControlView.vue
index 108a8b7..b9f4d73 100644
--- a/src/views/QuickAreaControlView.vue
+++ b/src/views/QuickAreaControlView.vue
@@ -1,27 +1,27 @@
 <script setup>
-import AreaControlCard from '../components/AreaControlCard.vue';
-import IrrigationApi from '../helper/irrigationApi.js';
-import { reactive } from 'vue';
+import AreaControlCard from '../components/AreaControlCard.vue'
+import IrrigationApi from '../helper/irrigationApi.js'
+import { reactive } from 'vue'
 
-const api = new IrrigationApi();
-const areaData = reactive([]);
+const api = new IrrigationApi()
+const areaData = reactive([])
 
 api.getAreas((areas) => {
-    areas.forEach(area => {
-        areaData.push(area);
-    });
-});
+  areas.forEach((area) => {
+    areaData.push(area)
+  })
+})
 </script>
 <template>
-    <div class="card">
-        <AreaControlCard v-for="area in areaData" :areaId="area.id"></AreaControlCard>
-    </div>
+  <div class="card">
+    <AreaControlCard v-for="area in areaData" :areaId="area.id" :key="area.id"></AreaControlCard>
+  </div>
 </template>
 
 <style scoped>
-    .card{
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-</style>
\ No newline at end of file
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+</style>