run prettier and eslint
This commit is contained in:
+5
-5
@@ -1,9 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Footer from './components/siteElements/Footer.vue';
|
import Footer from './components/siteElements/FixedFooter.vue'
|
||||||
import TopBanner from './components/siteElements/TopBanner.vue';
|
import TopBanner from './components/siteElements/TopBanner.vue'
|
||||||
import Sidebar from './components/siteElements/Sidebar.vue';
|
import Sidebar from './components/siteElements/SideBar.vue'
|
||||||
import Nav from './components/siteElements/Nav.vue';
|
import Nav from './components/siteElements/NavBar.vue'
|
||||||
import { RouterLink, RouterView } from 'vue-router';
|
import { RouterView } from 'vue-router'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
/* @import './base.css'; */
|
/* @import './base.css'; */
|
||||||
|
|
||||||
body{
|
body {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
margin-bottom: 5em;
|
margin-bottom: 5em;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|||||||
@@ -1,114 +1,113 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import IrrigationApi from '../helper/irrigationApi';
|
import IrrigationApi from '../helper/irrigationApi'
|
||||||
import { reactive, onBeforeUnmount, ref } from 'vue';
|
import { reactive, onBeforeUnmount, ref } from 'vue'
|
||||||
|
|
||||||
const props = defineProps(['areaId']);
|
const props = defineProps(['areaId'])
|
||||||
const api = new IrrigationApi();
|
const api = new IrrigationApi()
|
||||||
let minutesSlider = ref(17);
|
let minutesSlider = ref(17)
|
||||||
let updateInterval;
|
let updateInterval
|
||||||
|
|
||||||
let area = reactive({
|
let area = reactive({
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
valveId: "",
|
valveId: ''
|
||||||
});
|
})
|
||||||
|
|
||||||
let valve = reactive({
|
let valve = reactive({
|
||||||
status: false,
|
status: false,
|
||||||
remainingTime: 0,
|
remainingTime: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
api.getArea(props.areaId, (areaApi) => {
|
api.getArea(props.areaId, (areaApi) => {
|
||||||
area.name = areaApi.name;
|
area.name = areaApi.name
|
||||||
area.description = areaApi.description;
|
area.description = areaApi.description
|
||||||
area.valveId = areaApi.valveId;
|
area.valveId = areaApi.valveId
|
||||||
setUpdateValve();
|
setUpdateValve()
|
||||||
});
|
})
|
||||||
|
|
||||||
function setUpdateValve() {
|
function setUpdateValve() {
|
||||||
updateInterval = setInterval(updateValve, 1000);
|
updateInterval = setInterval(updateValve, 1000)
|
||||||
|
|
||||||
function updateValve() {
|
function updateValve() {
|
||||||
api.getValve(area.valveId, (valveApi) => {
|
api.getValve(area.valveId, (valveApi) => {
|
||||||
valve.status = valveApi.status;
|
valve.status = valveApi.status
|
||||||
valve.remainingTime = valveApi.remainingTime;
|
valve.remainingTime = valveApi.remainingTime
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
clearInterval(updateInterval);
|
clearInterval(updateInterval)
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="border">
|
<div class="border">
|
||||||
<div v-if="valve.status" class="valveOn valve">
|
<div v-if="valve.status" class="valveOn valve">
|
||||||
<!-- <div id="headline"> -->
|
<!-- <div id="headline"> -->
|
||||||
<h2>{{ area.name }}</h2>
|
<h2>{{ area.name }}</h2>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<p>Status: Offen</p>
|
<p>Status: Offen</p>
|
||||||
<p>Verbleibenede Zeit: {{ valve.remainingTime / 60 }} Min</p>
|
<p>Verbleibenede Zeit: {{ valve.remainingTime / 60 }} Min</p>
|
||||||
<button>Schließen</button>
|
<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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.inputDiv {
|
.inputDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border {
|
.border {
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type='number'] {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"] {
|
input[type='range'] {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
width: 65%;
|
width: 65%;
|
||||||
margin-left: 45px;
|
margin-left: 45px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .headline {
|
/* .headline {
|
||||||
@@ -121,27 +120,27 @@ input[type="range"] {
|
|||||||
height: 80px;
|
height: 80px;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
h2{
|
h2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.valve {
|
.valve {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
}
|
||||||
}</style>
|
</style>
|
||||||
|
|||||||
@@ -1,11 +1,5 @@
|
|||||||
<script setup>
|
<script setup></script>
|
||||||
|
|
||||||
</script>
|
<template><h1>Hello world</h1></template>
|
||||||
|
|
||||||
<template>
|
<style scoped></style>
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
||||||
@@ -1,117 +1,118 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import IrrigationApi from '../../helper/irrigationApi';
|
import IrrigationApi from '../../helper/irrigationApi'
|
||||||
import { reactive, onBeforeUnmount, ref } from 'vue';
|
import { reactive, onBeforeUnmount } from 'vue'
|
||||||
|
|
||||||
const api = new IrrigationApi();
|
const api = new IrrigationApi()
|
||||||
const openValves = reactive([]);
|
const openValves = reactive([])
|
||||||
const areas = [];
|
const areas = []
|
||||||
|
|
||||||
let updateInterval;
|
let updateInterval
|
||||||
let pump = {
|
let pump = {
|
||||||
status: "Off",
|
status: 'Off',
|
||||||
time: 0
|
time: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
api.getAreas(areasApi => {
|
api.getAreas((areasApi) => {
|
||||||
areasApi.forEach(areaApi => {
|
areasApi.forEach((areaApi) => {
|
||||||
areas.push(areaApi);
|
areas.push(areaApi)
|
||||||
});
|
})
|
||||||
updateInterval = setInterval(updateApiData, 1000);
|
updateInterval = setInterval(updateApiData, 1000)
|
||||||
});
|
})
|
||||||
|
|
||||||
function updateApiData() {
|
function updateApiData() {
|
||||||
api.getValves(valves => {
|
api.getValves((valves) => {
|
||||||
valves.forEach(valve => {
|
valves.forEach((valve) => {
|
||||||
if (valve.status) {
|
if (valve.status) {
|
||||||
const foundValve = openValves.find(oldValve => oldValve.id === valve.id);
|
const foundValve = openValves.find((oldValve) => oldValve.id === valve.id)
|
||||||
if(foundValve === undefined) {
|
if (foundValve === undefined) {
|
||||||
openValves.push(valve);
|
openValves.push(valve)
|
||||||
} else {
|
} else {
|
||||||
foundValve.remainingTime = valve.remainingTime;
|
foundValve.remainingTime = valve.remainingTime
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const foundValveIndex = openValves.findIndex(oldValve => oldValve.id === valve.id);
|
const foundValveIndex = openValves.findIndex((oldValve) => oldValve.id === valve.id)
|
||||||
if (foundValveIndex >= 0) {
|
if (foundValveIndex >= 0) {
|
||||||
openValves.splice(foundValveIndex, 1);
|
openValves.splice(foundValveIndex, 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function getAreaName(valveId) {
|
function getAreaName(valveId) {
|
||||||
const area = areas.find(area => area.valveId === valveId)
|
const area = areas.find((area) => area.valveId === valveId)
|
||||||
return area.name;
|
return area.name
|
||||||
}
|
}
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
clearInterval(updateInterval);
|
clearInterval(updateInterval)
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<aside>
|
<aside>
|
||||||
<h2>Infos</h2>
|
<h2>Infos</h2>
|
||||||
<hr />
|
<hr />
|
||||||
<h3>Pumpe</h3>
|
<h3>Pumpe</h3>
|
||||||
<p>
|
<p>
|
||||||
Status: <br />
|
Status: <br />
|
||||||
<b>{{ pump.status }}</b> <br />
|
<b>{{ pump.status }}</b> <br />
|
||||||
seit <br />
|
seit <br />
|
||||||
<b>{{ pump.time }}</b> <br />
|
<b>{{ pump.time }}</b> <br />
|
||||||
Minuten
|
Minuten
|
||||||
</p>
|
</p>
|
||||||
<hr />
|
<hr />
|
||||||
<h3>Offene <br /> Bereiche</h3>
|
<h3>
|
||||||
<p v-if="openValves.length === 0">
|
Offene <br />
|
||||||
Alles zu!
|
Bereiche
|
||||||
</p>
|
</h3>
|
||||||
<p v-else>
|
<p v-if="openValves.length === 0">Alles zu!</p>
|
||||||
<ul>
|
<ul v-else>
|
||||||
<li v-for="valve in openValves">
|
<li v-for="valve in openValves" :key="valve.id">
|
||||||
Bereich: {{ getAreaName(valve.id) }}
|
Bereich: <br />
|
||||||
Verbleibende Zeit: {{ parseInt(valve.remainingTime) }} min
|
{{ getAreaName(valve.id) }} <br />
|
||||||
<span>Schließen!</span>
|
Verbleibende Zeit: <br />
|
||||||
</li>
|
{{ parseInt(valve.remainingTime) }} min <br />
|
||||||
</ul>
|
<span>Schließen!</span>
|
||||||
</p>
|
</li>
|
||||||
<hr />
|
</ul>
|
||||||
</aside>
|
<hr />
|
||||||
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
aside {
|
aside {
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
b {
|
b {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,6 +1,4 @@
|
|||||||
<script setup>
|
<script setup></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
@@ -10,18 +8,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.banner{
|
.banner {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: green;
|
background-color: green;
|
||||||
height: 6em;
|
height: 6em;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1{
|
h1 {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+101
-108
@@ -1,145 +1,138 @@
|
|||||||
const address = "http://garten.home.kleiax.de/api/";
|
const address = 'http://garten.home.kleiax.de/api/'
|
||||||
|
|
||||||
class IrrigationApi {
|
class IrrigationApi {
|
||||||
constructor() {
|
constructor() {}
|
||||||
|
|
||||||
}
|
getValve(id, callback) {
|
||||||
|
httpGet('valve/' + id, callback)
|
||||||
|
}
|
||||||
|
|
||||||
getValve(id, callback) {
|
getValves(callback) {
|
||||||
httpGet('valve/' + id, callback);
|
httpGet('valve', callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
getValves(callback) {
|
getArea(id, callback) {
|
||||||
httpGet('valve', callback);
|
httpGet('area/' + id, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getAreas(callback) {
|
||||||
|
httpGet('area', callback)
|
||||||
|
}
|
||||||
|
|
||||||
getArea(id, callback) {
|
createArea(area, callback) {
|
||||||
httpGet('area/' + id, callback);
|
httpPost('area', area, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
getAreas(callback) {
|
deleteArea(id, callback) {
|
||||||
httpGet('area', callback);
|
httpDelete('area/' + id, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
createArea(area, callback) {
|
patchArea(id, area, callback) {
|
||||||
httpPost('area', area, callback);
|
httpPatch('area/' + id, area, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteArea(id, callback) {
|
getAreaConf(id, callback) {
|
||||||
httpDelete('area/' + id, callback);
|
httpGet('areaConf/specific/' + id, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
patchArea(id, area, callback) {
|
getAreaConfs(area, callback) {
|
||||||
httpPatch('area/' + id, area, callback);
|
httpGet('areaConf/' + area, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
createAreaConf(area, areaConf, callback) {
|
||||||
|
httpPost('areaConf/' + area, areaConf, callback)
|
||||||
|
}
|
||||||
|
|
||||||
getAreaConf(id, callback) {
|
deleteAreaConf(id, callback) {
|
||||||
httpGet('areaConf/specific/' + id, callback);
|
httpDelete('areaConf/' + id, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
getAreaConfs(area, callback) {
|
patchAreaConf(id, areaConf, callback) {
|
||||||
httpGet('areaConf/' + area, callback);
|
httpPatch('areaConf/' + id, areaConf, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
createAreaConf(area, areaConf, callback) {
|
getIrrigationEvent(id, callback) {
|
||||||
httpPost('areaConf/' + area, areaConf, callback);
|
httpGet('irrigationEvent/specific/' + id, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteAreaConf(id, callback) {
|
getIrrigationEvents(areaConf, callback) {
|
||||||
httpDelete('areaConf/' + id, callback);
|
httpGet('irrigationEvent/' + areaConf, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
patchAreaConf(id, areaConf, callback) {
|
createIrrigationEvent(areaConf, irrigationEvent, callback) {
|
||||||
httpPatch('areaConf/' + id, areaConf, callback);
|
httpPost('irrigationEvent/' + areaConf, irrigationEvent, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
deleteIrrigationEvent(id, callback) {
|
||||||
|
httpDelete('irrigationEvent/' + id, callback)
|
||||||
|
}
|
||||||
|
|
||||||
getIrrigationEvent(id, callback) {
|
patchIrrigationEvent(id, irrigationEvent, callback) {
|
||||||
httpGet('irrigationEvent/specific/' + id, callback);
|
httpPatch('irrigationEvent/' + id, irrigationEvent, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
getIrrigationEvents(areaConf, callback) {
|
|
||||||
httpGet('irrigationEvent/' + areaConf, 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function httpGet(apiCall, callback) {
|
function httpGet(apiCall, callback) {
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest()
|
||||||
request.open('GET', address + apiCall);
|
request.open('GET', address + apiCall)
|
||||||
request.onload = function () {
|
request.onload = function () {
|
||||||
const data = JSON.parse(request.response);
|
const data = JSON.parse(request.response)
|
||||||
|
|
||||||
if (request.status >= 200 && request.status < 400) {
|
if (request.status >= 200 && request.status < 400) {
|
||||||
callback(data);
|
callback(data)
|
||||||
} else {
|
} else {
|
||||||
console.log('Error irrigationApi.js httpGet()', data);
|
console.log('Error irrigationApi.js httpGet()', data)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
request.send();
|
request.send()
|
||||||
}
|
}
|
||||||
|
|
||||||
function httpPatch(apiCall, data, callback) {
|
function httpPatch(apiCall, data, callback) {
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest()
|
||||||
request.open('PATCH', address + apiCall);
|
request.open('PATCH', address + apiCall)
|
||||||
request.setRequestHeader("Content-Type", "application/json");
|
request.setRequestHeader('Content-Type', 'application/json')
|
||||||
request.onload = function () {
|
request.onload = function () {
|
||||||
const data = JSON.parse(request.response);
|
const data = JSON.parse(request.response)
|
||||||
|
|
||||||
if (request.status >= 200 && request.status < 400) {
|
if (request.status >= 200 && request.status < 400) {
|
||||||
callback(data);
|
callback(data)
|
||||||
} else {
|
} 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) {
|
function httpDelete(apiCall, callback) {
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest()
|
||||||
request.open('DELETE', address + apiCall);
|
request.open('DELETE', address + apiCall)
|
||||||
request.onload = function () {
|
request.onload = function () {
|
||||||
const data = JSON.parse(request.response);
|
const data = JSON.parse(request.response)
|
||||||
|
|
||||||
if (request.status >= 200 && request.status < 400) {
|
if (request.status >= 200 && request.status < 400) {
|
||||||
callback(data);
|
callback(data)
|
||||||
} else {
|
} else {
|
||||||
console.log('Error irrigationApi.js httpDelete()', data);
|
console.log('Error irrigationApi.js httpDelete()', data)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
request.send();
|
request.send()
|
||||||
}
|
}
|
||||||
|
|
||||||
function httpPost(apiCall, data, callback) {
|
function httpPost(apiCall, data, callback) {
|
||||||
// console.log(data);
|
// console.log(data);
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest()
|
||||||
request.open('POST', address + apiCall);
|
request.open('POST', address + apiCall)
|
||||||
request.setRequestHeader("Content-Type", "application/json");
|
request.setRequestHeader('Content-Type', 'application/json')
|
||||||
request.onload = function () {
|
request.onload = function () {
|
||||||
const data = JSON.parse(request.response);
|
const data = JSON.parse(request.response)
|
||||||
|
|
||||||
if (request.status >= 200 && request.status < 400) {
|
if (request.status >= 200 && request.status < 400) {
|
||||||
callback(data);
|
callback(data)
|
||||||
} else {
|
} 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
|
||||||
|
|
||||||
|
|||||||
+4
-5
@@ -1,5 +1,5 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import HomeView from '../views/HomeView.vue';
|
import HomeView from '../views/HomeView.vue'
|
||||||
import QuickAreaControlView from '../views/QuickAreaControlView.vue'
|
import QuickAreaControlView from '../views/QuickAreaControlView.vue'
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
@@ -32,9 +32,8 @@ const router = createRouter({
|
|||||||
path: '/quickControl',
|
path: '/quickControl',
|
||||||
name: 'quickControl',
|
name: 'quickControl',
|
||||||
component: QuickAreaControlView
|
component: QuickAreaControlView
|
||||||
},
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
});
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import IrrigationApi from '../helper/irrigationApi';
|
import IrrigationApi from '../helper/irrigationApi'
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
const apiData = reactive([]);
|
const apiData = reactive([])
|
||||||
|
|
||||||
const api = new IrrigationApi();
|
const api = new IrrigationApi()
|
||||||
api.getAreas((areas) => {
|
api.getAreas((areas) => {
|
||||||
areas.forEach(area => {
|
areas.forEach((area) => {
|
||||||
apiData.push(area);
|
apiData.push(area)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -1,8 +1,5 @@
|
|||||||
<script setup>
|
<script setup></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1>Seite 1</h1>
|
<h1>Seite 1</h1>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
+60
-45
@@ -1,47 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='impressum'>
|
<div class="impressum">
|
||||||
<h1>Impressum</h1>
|
<h1>Impressum</h1>
|
||||||
<p>Angaben gemäß § 5 TMG</p>
|
<p>Angaben gemäß § 5 TMG</p>
|
||||||
<p>Alexander Klein <br>
|
<p>
|
||||||
Ringstraße 15a<br>
|
Alexander Klein <br />
|
||||||
26899 Rhede (Ems) <br>
|
Ringstraße 15a<br />
|
||||||
</p>
|
26899 Rhede (Ems) <br />
|
||||||
<p> <strong>Vertreten durch: </strong><br>
|
</p>
|
||||||
Alexander Klein<br>
|
<p>
|
||||||
</p>
|
<strong>Vertreten durch: </strong><br />
|
||||||
<p><strong>Kontakt:</strong> <br>
|
Alexander Klein<br />
|
||||||
Telefon: 0157-89217099<br>
|
</p>
|
||||||
E-Mail: <a href='mailto:klein-alexander1@gmx.de'>klein-alexander1@gmx.de</a><br></p>
|
<p>
|
||||||
<p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
|
<strong>Kontakt:</strong> <br />
|
||||||
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und
|
Telefon: 0157-89217099<br />
|
||||||
Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1
|
E-Mail: <a href="mailto:klein-alexander1@gmx.de">klein-alexander1@gmx.de</a><br />
|
||||||
TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind
|
</p>
|
||||||
wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
|
<p>
|
||||||
überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur
|
<strong>Haftungsausschluss: </strong><br /><br /><strong>Haftung für Inhalte</strong
|
||||||
Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt.
|
><br /><br />
|
||||||
Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung
|
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit,
|
||||||
möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend
|
Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als
|
||||||
entfernen.<br><br><strong>Haftung für Links</strong><br><br>
|
Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den
|
||||||
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb
|
allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch
|
||||||
können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist
|
nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder
|
||||||
stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum
|
nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen
|
||||||
Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der
|
zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen
|
||||||
Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete
|
bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der
|
||||||
Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir
|
Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden
|
||||||
derartige Links umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
|
Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br /><br /><strong
|
||||||
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren
|
>Haftung für Links</strong
|
||||||
Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies,
|
><br /><br />
|
||||||
soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an
|
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen
|
||||||
Dritte weitergegeben. <br>
|
Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für
|
||||||
Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail)
|
die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten
|
||||||
Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht
|
verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche
|
||||||
möglich. <br>
|
Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht
|
||||||
Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von
|
erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne
|
||||||
nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen.
|
konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von
|
||||||
Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von
|
Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br /><br /><strong
|
||||||
Werbeinformationen, etwa durch Spam-Mails, vor.<br>
|
>Datenschutz</strong
|
||||||
</p><br>
|
><br /><br />
|
||||||
Website Impressum erstellt durch <a href="https://www.impressum-generator.de">impressum-generator.de</a> von der <a
|
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich.
|
||||||
href="https://www.kanzlei-hasselbach.de/" rel="nofollow">Kanzlei Hasselbach</a>
|
Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder
|
||||||
</div>
|
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>
|
</template>
|
||||||
@@ -1,27 +1,27 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import AreaControlCard from '../components/AreaControlCard.vue';
|
import AreaControlCard from '../components/AreaControlCard.vue'
|
||||||
import IrrigationApi from '../helper/irrigationApi.js';
|
import IrrigationApi from '../helper/irrigationApi.js'
|
||||||
import { reactive } from 'vue';
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
const api = new IrrigationApi();
|
const api = new IrrigationApi()
|
||||||
const areaData = reactive([]);
|
const areaData = reactive([])
|
||||||
|
|
||||||
api.getAreas((areas) => {
|
api.getAreas((areas) => {
|
||||||
areas.forEach(area => {
|
areas.forEach((area) => {
|
||||||
areaData.push(area);
|
areaData.push(area)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.card{
|
.card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user