diff --git a/src/components/AreaControlCard.vue b/src/components/AreaControlCard.vue index 12f05c0..de3a8f2 100644 --- a/src/components/AreaControlCard.vue +++ b/src/components/AreaControlCard.vue @@ -15,7 +15,8 @@ let area = reactive({ let valve = reactive({ status: false, - remainingTime: 0 + remainingTime: 0, + freeze: 0 }) api.getArea(props.areaId, (areaApi) => { @@ -29,6 +30,10 @@ function setUpdateValve() { updateInterval = setInterval(updateValve, 1000) function updateValve() { + if (valve.freeze > 0) { + valve.freeze--; + return; + } api.getValve(area.valveId, (valveApi) => { valve.status = valveApi.status valve.remainingTime = valveApi.remainingTime @@ -36,6 +41,24 @@ function setUpdateValve() { } } +function open() { + api.commandManualControlUniqueIrrigationEvent(props.areaId, minutesSlider.value, data => { + // console.info(data); + valve.status = true; + valve.remainingTime = minutesSlider.value * 60; + valve.freeze = 3; + }); +} + +function close() { + api.commandManualControlStop(props.areaId, (data) => { + // console.info(data); + valve.status = false; + valve.remainingTime = 0; + valve.freeze = 3; + }); +} + onBeforeUnmount(() => { clearInterval(updateInterval) }) @@ -44,18 +67,16 @@ onBeforeUnmount(() => { @@ -72,7 +93,8 @@ onBeforeUnmount(() => { \ No newline at end of file diff --git a/src/components/irrigation/irrigationAreaConfLine.vue b/src/components/irrigation/irrigationAreaConfLine.vue new file mode 100644 index 0000000..c3751f3 --- /dev/null +++ b/src/components/irrigation/irrigationAreaConfLine.vue @@ -0,0 +1,87 @@ + + + + + \ No newline at end of file diff --git a/src/components/irrigation/irrigationEventCard.vue b/src/components/irrigation/irrigationEventCard.vue new file mode 100644 index 0000000..43603ba --- /dev/null +++ b/src/components/irrigation/irrigationEventCard.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/components/siteElements/NavBar.vue b/src/components/siteElements/NavBar.vue index f300db9..7e919cc 100644 --- a/src/components/siteElements/NavBar.vue +++ b/src/components/siteElements/NavBar.vue @@ -6,15 +6,29 @@ import { RouterLink } from 'vue-router' diff --git a/src/components/siteElements/Sidebar.vue b/src/components/siteElements/Sidebar.vue index 213d9c5..63d6a45 100644 --- a/src/components/siteElements/Sidebar.vue +++ b/src/components/siteElements/Sidebar.vue @@ -6,113 +6,167 @@ const api = new IrrigationApi() const openValves = reactive([]) const areas = [] +let freeze = 0; 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) + 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) - } - } + if (freeze > 0) { + freeze--; + return; + } + 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 +} + +function getAreaId(valveId) { + const area = areas.find((area) => area.valveId === valveId) + return area.id } onBeforeUnmount(() => { - clearInterval(updateInterval) + clearInterval(updateInterval) }) + +function close(event) { + api.commandManualControlStop(getAreaId(event.srcElement.id), (data) => { + // console.info(data); + }); + const foundValveIndex = openValves.findIndex((valve) => valve.id === event.srcElement.id) + if (foundValveIndex >= 0) { + openValves.splice(foundValveIndex, 1) + freeze = 3; + } +} diff --git a/src/helper/irrigationApi.js b/src/helper/irrigationApi.js index c30ec66..8ca8cab 100644 --- a/src/helper/irrigationApi.js +++ b/src/helper/irrigationApi.js @@ -1,138 +1,165 @@ -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) - } + } - getValves(callback) { - httpGet('valve', callback) - } + getValve(id, callback) { + httpGet('valve/' + id, callback); + } - getArea(id, callback) { - httpGet('area/' + id, callback) - } + getValves(callback) { + httpGet('valve', callback); + } - getAreas(callback) { - httpGet('area', callback) - } - createArea(area, callback) { - httpPost('area', area, callback) - } + getArea(id, callback) { + httpGet('area/' + id, callback); + } - deleteArea(id, callback) { - httpDelete('area/' + id, callback) - } + getAreas(callback) { + httpGet('area', callback); + } - patchArea(id, area, callback) { - httpPatch('area/' + id, area, callback) - } + createArea(area, callback) { + httpPost('area', area, callback); + } - getAreaConf(id, callback) { - httpGet('areaConf/specific/' + id, callback) - } + deleteArea(id, callback) { + httpDelete('area/' + id, callback); + } - getAreaConfs(area, callback) { - httpGet('areaConf/' + area, callback) - } + patchArea(id, area, callback) { + httpPatch('area/' + id, 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) - } + deleteIrrigationEvent(id, callback) { + httpDelete('irrigationEvent/' + id, callback); + } - patchIrrigationEvent(id, irrigationEvent, callback) { - httpPatch('irrigationEvent/' + id, irrigationEvent, callback) - } + patchIrrigationEvent(id, irrigationEvent, callback) { + httpPatch('irrigationEvent/' + id, irrigationEvent, callback); + } + + + commandManualControlPause(id, duration, callback) { + httpPost('manualControl/pause/' + id, { duration: duration}, callback); + } + + commandManualControlPauseAll(callback) { + httpPost('manualControl/pauseAll/', {}, callback); + } + + commandManualControlUniqueIrrigationEvent(id, duration, callback) { + httpPost('manualControl/uniqueIrrigationEvent/' + id, {duration: duration}, callback); + } + + commandManualControlStop(id, callback) { + httpPost('manualControl/stop/' + id, {}, callback); + } + + commandManualControlStopAll(duration, callback) { + httpPost('manualControl/stopAll/', {duration: duration}, 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 +export default IrrigationApi; + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 747b4f0..e1f9436 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,6 +1,8 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' -import QuickAreaControlView from '../views/QuickAreaControlView.vue' +import { createRouter, createWebHistory } from 'vue-router'; +import HomeView from '../views/HomeView.vue'; +import QuickAreaControlView from '../views/QuickAreaControlView.vue'; +import LightingView from '../views/LightingView.vue'; +import IrrigationView from '../views/IrrigationView.vue'; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -32,7 +34,17 @@ const router = createRouter({ path: '/quickControl', name: 'quickControl', component: QuickAreaControlView - } + }, + { + path: '/lighting', + name: 'lighting', + component: LightingView + }, + { + path: '/irrigation', + name: 'irrigation', + component: IrrigationView + }, ] }) diff --git a/src/views/InfoView.vue b/src/views/InfoView.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/views/IrrigationView.vue b/src/views/IrrigationView.vue new file mode 100644 index 0000000..3e10fc8 --- /dev/null +++ b/src/views/IrrigationView.vue @@ -0,0 +1,32 @@ + + + + + \ No newline at end of file diff --git a/src/views/LightingView.vue b/src/views/LightingView.vue new file mode 100644 index 0000000..12cb7de --- /dev/null +++ b/src/views/LightingView.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/views/LightningView.vue b/src/views/LightningView.vue deleted file mode 100644 index e69de29..0000000