run prettier and eslint

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>

src/assets/main.css

@@ -1,6 +1,6 @@
 /* @import './base.css'; */
 
-body{
+body {
   margin: 0px;
   margin-bottom: 5em;
   padding: 0px;

src/components/AreaControlCard.vue

@@ -1,44 +1,44 @@
 <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,
+  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;
-        });
+      valve.status = valveApi.status
+      valve.remainingTime = valveApi.remainingTime
+    })
   }
 }
 
 onBeforeUnmount(() => {
-    clearInterval(updateInterval);
-});
+  clearInterval(updateInterval)
+})
 </script>
 
 <template>
@@ -58,15 +58,14 @@ onBeforeUnmount(() => {
       <!-- </div> -->
       <p>Status: Geschlossen</p>
       <div class="inputDiv">
-                <input type="range" min="0" max="120" v-model="minutesSlider">
+        <input type="range" min="0" max="120" v-model="minutesSlider" />
         <label>
-                    <input type="number" v-model="minutesSlider">
+          <input type="number" v-model="minutesSlider" />
           Minuten
         </label>
       </div>
       <button>Öffnen</button>
     </div>
-
   </div>
 </template>
 
@@ -99,12 +98,12 @@ label {
   font-size: large;
 }
 
-input[type="number"] {
+input[type='number'] {
   width: 30%;
   font-size: larger;
 }
 
-input[type="range"] {
+input[type='range'] {
   align-self: center;
   width: 65%;
   margin-left: 45px;
@@ -121,7 +120,7 @@ input[type="range"] {
     height: 80px;
 } */
 
-h2{
+h2 {
   display: inline-block;
   width: 100%;
   height: 80px;
@@ -143,5 +142,5 @@ button {
   width: 100%;
   height: 50px;
   border-radius: 10px;
-
-}</style>
+}
+</style>

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>

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>

src/components/siteElements/Footer.vue

@@ -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>

src/components/siteElements/Nav.vue

@@ -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>

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>

src/components/siteElements/Sidebar.vue

@@ -1,52 +1,52 @@
 <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",
+  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 => {
+  api.getValves((valves) => {
+    valves.forEach((valve) => {
       if (valve.status) {
-                const foundValve = openValves.find(oldValve => oldValve.id === valve.id);
-                if(foundValve === undefined) {
-                    openValves.push(valve);
+        const foundValve = openValves.find((oldValve) => oldValve.id === valve.id)
+        if (foundValve === undefined) {
+          openValves.push(valve)
         } else {
-                    foundValve.remainingTime = valve.remainingTime;
+          foundValve.remainingTime = valve.remainingTime
         }
       } else {
-                const foundValveIndex = openValves.findIndex(oldValve => oldValve.id === valve.id);
+        const foundValveIndex = openValves.findIndex((oldValve) => oldValve.id === valve.id)
         if (foundValveIndex >= 0) {
-                    openValves.splice(foundValveIndex, 1);
+          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>
@@ -62,19 +62,20 @@ onBeforeUnmount(() => {
       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
+    <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>
-        </p>
     <hr />
   </aside>
 </template>

src/components/siteElements/TopBanner.vue

@@ -1,6 +1,4 @@
-<script setup>
-
-</script>
+<script setup></script>
 
 <template>
   <div class="banner">
@@ -10,7 +8,7 @@
 </template>
 
 <style scoped>
-  .banner{
+.banner {
   display: flex;
   width: 100%;
   background-color: green;
@@ -18,10 +16,10 @@
   align-items: center;
   justify-items: center;
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-  }
+}
 
-  h1{
+h1 {
   margin: 0px;
   margin-left: 16px;
-  }
+}
 </style>

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);
+    httpGet('valve/' + id, callback)
   }
 
   getValves(callback) {
-        httpGet('valve', callback);
+    httpGet('valve', callback)
   }
 
-
   getArea(id, callback) {
-        httpGet('area/' + id, callback);
+    httpGet('area/' + id, callback)
   }
 
   getAreas(callback) {
-        httpGet('area', callback);
+    httpGet('area', callback)
   }
 
   createArea(area, callback) {
-        httpPost('area', area, callback);
+    httpPost('area', area, callback)
   }
 
   deleteArea(id, callback) {
-        httpDelete('area/' + id, callback);
+    httpDelete('area/' + id, callback)
   }
 
   patchArea(id, area, callback) {
-        httpPatch('area/' + id, area, callback);
+    httpPatch('area/' + id, area, callback)
   }
 
-
   getAreaConf(id, callback) {
-        httpGet('areaConf/specific/' + id, callback);
+    httpGet('areaConf/specific/' + id, callback)
   }
 
   getAreaConfs(area, callback) {
-        httpGet('areaConf/' + area, callback);
+    httpGet('areaConf/' + area, callback)
   }
 
   createAreaConf(area, areaConf, callback) {
-        httpPost('areaConf/' + area, areaConf, callback);
+    httpPost('areaConf/' + area, areaConf, callback)
   }
 
   deleteAreaConf(id, callback) {
-        httpDelete('areaConf/' + id, callback);
+    httpDelete('areaConf/' + id, callback)
   }
 
   patchAreaConf(id, areaConf, callback) {
-        httpPatch('areaConf/' + id, areaConf, callback);
+    httpPatch('areaConf/' + id, areaConf, callback)
   }
 
-
   getIrrigationEvent(id, callback) {
-        httpGet('irrigationEvent/specific/' + id, callback);
+    httpGet('irrigationEvent/specific/' + id, callback)
   }
 
   getIrrigationEvents(areaConf, callback) {
-        httpGet('irrigationEvent/' + areaConf, callback);
+    httpGet('irrigationEvent/' + areaConf, callback)
   }
 
   createIrrigationEvent(areaConf, irrigationEvent, callback) {
-        httpPost('irrigationEvent/' + areaConf, irrigationEvent, callback);
+    httpPost('irrigationEvent/' + areaConf, irrigationEvent, callback)
   }
 
   deleteIrrigationEvent(id, callback) {
-        httpDelete('irrigationEvent/' + id, callback);
+    httpDelete('irrigationEvent/' + id, callback)
   }
 
   patchIrrigationEvent(id, irrigationEvent, callback) {
-        httpPatch('irrigationEvent/' + id, irrigationEvent, callback);
+    httpPatch('irrigationEvent/' + id, irrigationEvent, callback)
   }
-
 }
 
 function httpGet(apiCall, callback) {
-    var request = new XMLHttpRequest();
-    request.open('GET', address + apiCall);
+  var request = new XMLHttpRequest()
+  request.open('GET', address + apiCall)
   request.onload = function () {
-        const data = JSON.parse(request.response);
+    const data = JSON.parse(request.response)
 
     if (request.status >= 200 && request.status < 400) {
-            callback(data);
+      callback(data)
     } else {
-            console.log('Error irrigationApi.js httpGet()', data);
+      console.log('Error irrigationApi.js httpGet()', data)
     }
-    };
-    request.send();
+  }
+  request.send()
 }
 
 function httpPatch(apiCall, data, callback) {
-    var request = new XMLHttpRequest();
-    request.open('PATCH', address + apiCall);
-    request.setRequestHeader("Content-Type", "application/json");
+  var request = new XMLHttpRequest()
+  request.open('PATCH', address + apiCall)
+  request.setRequestHeader('Content-Type', 'application/json')
   request.onload = function () {
-        const data = JSON.parse(request.response);
+    const data = JSON.parse(request.response)
 
     if (request.status >= 200 && request.status < 400) {
-            callback(data);
+      callback(data)
     } else {
-            console.log('Error irrigationApi.js httpPatch()', data);
+      console.log('Error irrigationApi.js httpPatch()', data)
     }
-    };
-    request.send(JSON.stringify(data));
+  }
+  request.send(JSON.stringify(data))
 }
 
 function httpDelete(apiCall, callback) {
-    var request = new XMLHttpRequest();
-    request.open('DELETE', address + apiCall);
+  var request = new XMLHttpRequest()
+  request.open('DELETE', address + apiCall)
   request.onload = function () {
-        const data = JSON.parse(request.response);
+    const data = JSON.parse(request.response)
 
     if (request.status >= 200 && request.status < 400) {
-            callback(data);
+      callback(data)
     } else {
-            console.log('Error irrigationApi.js httpDelete()', data);
+      console.log('Error irrigationApi.js httpDelete()', data)
     }
-    };
-    request.send();
+  }
+  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");
+  var request = new XMLHttpRequest()
+  request.open('POST', address + apiCall)
+  request.setRequestHeader('Content-Type', 'application/json')
   request.onload = function () {
-        const data = JSON.parse(request.response);
+    const data = JSON.parse(request.response)
 
     if (request.status >= 200 && request.status < 400) {
-            callback(data);
+      callback(data)
     } else {
-            console.log('Error irrigationApi.js httpPost()', data);
+      console.log('Error irrigationApi.js httpPost()', data)
     }
-    };
-    request.send(JSON.stringify(data));
+  }
+  request.send(JSON.stringify(data))
 }
 
-export default IrrigationApi;
-        
+export default IrrigationApi

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

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>

src/views/HomeView.vue

@@ -1,8 +1,5 @@
-<script setup>
-
-</script>
+<script setup></script>
 
 <template>
   <h1>Seite 1</h1>
-  
 </template>

src/views/ImprintView.vue

@@ -1,47 +1,62 @@
 <template>
-    <div class='impressum'>
+  <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>
+      Alexander Klein <br />
+      Ringstraße 15a<br />
+      26899 Rhede (Ems) <br />
     </p>
-        <p> <strong>Vertreten durch: </strong><br>
-            Alexander Klein<br>
+    <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>
+    <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>

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>
+    <AreaControlCard v-for="area in areaData" :areaId="area.id" :key="area.id"></AreaControlCard>
   </div>
 </template>
 
 <style scoped>
-    .card{
+.card {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-    }
+}
 </style>