From 8162aa3c8e5badf64cc566581d492c126cef3b24 Mon Sep 17 00:00:00 2001 From: alban Date: Tue, 27 Feb 2024 00:25:12 +0100 Subject: [PATCH] feat: add schedule buttons and tweak CSS --- html/images/homescreen128.png | Bin 0 -> 3335 bytes html/index.html | 171 +++++++++++++++++++++++++++------- html/manifest.json | 16 ++++ html/mockup.py | 50 +++++----- 4 files changed, 177 insertions(+), 60 deletions(-) create mode 100644 html/images/homescreen128.png create mode 100644 html/manifest.json diff --git a/html/images/homescreen128.png b/html/images/homescreen128.png new file mode 100644 index 0000000000000000000000000000000000000000..711e0a3cda0b945a7f50cc61dd30f200ee0f7b00 GIT binary patch literal 3335 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 ESP32 timed Switch + +

Scheduler

@@ -24,7 +26,7 @@ class Schedule { // Load from binary data var view = new DataView(buffer); for (var i = 0; i < 24; i++) { - this.schedule[i] = view.getUint32(i * 4); + this.schedule[i] = view.getUint16(i * 2); } }; @@ -53,7 +55,7 @@ class Schedule { return this.schedule.map(hour => { if (hour === 0xFFF) { // All segments on return { displayValue: ' ', class: 'on' }; - } else if (hour === 0x000) { // All segments off + } else if (hour === 0x00) { // All segments off return { displayValue: ' ', class: 'off' }; } else { return { displayValue: ' ', class: 'partial' }; @@ -93,12 +95,12 @@ class Schedule { serializeToArrayBuffer = function() { // Convert to binary data - var buffer = new ArrayBuffer(24 * 4); + var buffer = new ArrayBuffer(24 * 2); var view = new DataView(buffer); for (var i = 0; i < this.schedule.length; i++) { - view.setUint32(i * 4, this.schedule[i]); + view.setUint16(i * 2, this.schedule[i]); } - return buffer; + return view; }; } @@ -108,10 +110,26 @@ class Schedule { // Start of Angular var app = angular.module('plugSchedulerApp', []); +app.value('api_host', window.location.host); +app.factory("data", function(){ + var sharedData = { api_host: window.location.host} + return { + getSharedData: function () { + return sharedData; + } + }; +}); -app.controller('PlugScheduleController', ['$http', function($http) { +app.controller('ApiHostController', ['$scope', 'api_host', 'data', function( $scope, api_host, data) { + var ctrl = this; + $scope.data = data.getSharedData(); + window.ctrl = $scope +}]) + +app.controller('PlugScheduleController', ['$scope', '$http', 'data', function( $scope, $http, data) { var ctrl = this; ctrl.editMode = false; + $scope.data = data.getSharedData(); ctrl.$onInit = function() { ctrl.scheduleObj = new Schedule(); // Initialize with a default schedule @@ -120,11 +138,11 @@ app.controller('PlugScheduleController', ['$http', function($http) { ctrl.getSchedule = function() { if (ctrl.plugId === undefined) { - throw new Error('plugId is not defined'); + return; } // Fetch the schedule from the server for a given plug ID - var url = `/api/schedule/${ctrl.plugId}` + var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}` $http.get(url, { responseType: 'arraybuffer' }).then(function(response) { ctrl.scheduleObj.loadFromArrayBuffer(response.data); ctrl.displaySchedule = ctrl.scheduleObj.serializeForDisplay(); @@ -148,7 +166,7 @@ app.controller('PlugScheduleController', ['$http', function($http) { // Send the updated schedule to the server ctrl.updateSchedule = function() { - var url = `/api/schedule/${ctrl.plugId}` + var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}` var serializedSchedule = ctrl.scheduleObj.serializeToArrayBuffer(); $http.post(url, serializedSchedule, { @@ -162,11 +180,10 @@ app.controller('PlugScheduleController', ['$http', function($http) { console.log("successfully updated"); ctrl.displaySchedule = ctrl.scheduleObj.serializeForDisplay(); }, function(error) { - console.error('Error updating schedule:', error); + alert('Error updating schedule:', error); }); }; - // check all segments for a specific hour ctrl.checkAll = function(hourIndex) { ctrl.editMatrix[hourIndex].forEach(segment => { @@ -180,6 +197,37 @@ app.controller('PlugScheduleController', ['$http', function($http) { segment.value = 0; }); }; + ctrl.invertAll = function(hourIndex) { + ctrl.editMatrix[hourIndex].forEach(segment => { + var inverted = Math.abs( segment.value - 1) + segment.value = inverted; + }); + }; + + ctrl.checkPattern = function(hourIndex, results) { + for( index = 0; index < ctrl.editMatrix[hourIndex].length; index++){ + ctrl.editMatrix[hourIndex][index] = { value : results[index] }; + } + }; + + ctrl.checkHalf = function(hourIndex) { + ctrl.checkPattern( hourIndex, [1,1,1,1,1,1,0,0,0,0,0,0]); + }; + + ctrl.checkFourth = function(hourIndex) { + ctrl.checkPattern( hourIndex, [1,1,1,0,0,0,1,1,1,0,0,0]); + }; + + ctrl.checkSixth = function(hourIndex) { + ctrl.checkPattern( hourIndex, [1,1,0,0,1,1,0,0,1,1,0,0]); + }; + + ctrl.checkTwelveth = function(hourIndex) { + ctrl.checkPattern( hourIndex, [1,0,1,0,1,0,1,0,1,0,1,0]); + }; + + + }]); app.component('plugScheduleWidget', { @@ -188,22 +236,32 @@ app.component('plugScheduleWidget', { }, template: `
-

Schedule for Plug {{ $ctrl.plugId }}

+

Plug {{ $ctrl.plugId }}

{{ hour.displayValue }}
- +
+ + + + - +
{{ segment * 5 }}
+ {{ $index }} - - + + + + + + +
@@ -217,21 +275,29 @@ app.component('plugScheduleWidget', { // End of Angular - + - -
- - - - - - - - +
+
+ + + + + + + + +
+
-