From ccab9ddb12fd3c3cf1f27cfa0ab2e044397f3b29 Mon Sep 17 00:00:00 2001
From: alban <git@albancrommer.com>
Date: Thu, 7 Dec 2023 19:52:59 +0100
Subject: [PATCH] feat: http server

---
 esp32-timed-switch.ino | 48 ++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/esp32-timed-switch.ino b/esp32-timed-switch.ino
index 890e873..d5f9339 100644
--- a/esp32-timed-switch.ino
+++ b/esp32-timed-switch.ino
@@ -13,14 +13,19 @@
 // --------------------------------------------
 
 
-// PREFRENCES
+const char* html_app="<title>ESP32 timed Switch</title><script src=https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js></script><h1>Scheduler</h1><script>class Schedule{constructor(scheduleArray){if(scheduleArray&&scheduleArray.length===24){this.schedule=scheduleArray.slice();}else{this.schedule=[24].fill(0x000)}}loadFromArrayBuffer=function(buffer){var view=new DataView(buffer);for(var i=0;i<24;i+=1){this.schedule[i]=view.getUint32(i*4)}};updateSegment(hour,segment,state){if(hour<0||hour>=24){throw new Error('Hour must be between 0 and 23.')}if(segment<0||segment>=12){throw new Error('Segment must be between 0 and 11.')}const bitPosition=11-segment;if(state){this.schedule[hour]|=(1<<bitPosition)}else{this.schedule[hour]&= ~(1<<bitPosition)}}serializeForDisplay(){return this.schedule.map(hour=>{if(hour===0xFFF){return{displayValue:' ',class:'on'}}else if(hour===0x000){return{displayValue:' ',class:'off'}}else{return{displayValue:' ',class:'partial'}}})}prepareEditMatrix(){const editMatrix=[];for(let hour=0;hour<24;hour+=1){const hourSegments=[];for(let segment=0;segment<12;segment+=1){hourSegments.push({value:(this.schedule[hour]&(1<<segment))!==0?1:0})}editMatrix.push(hourSegments.reverse())}return editMatrix}updateFromEditMatrix(editMatrix){for(let hour=0;hour<24;hour+=1){let hourValue=0;for(let segment=0;segment<12;segment+=1){if(editMatrix[hour][11-segment].value){hourValue|=(1<<segment)}}this.schedule[hour]=hourValue}}serializeToArrayBuffer=function(){var buffer=new ArrayBuffer(24*4);var view=new DataView(buffer);for(var i=0;i<this.schedule.length;i+=1){view.setUint32(i*4,this.schedule[i])}return buffer}}var app=angular.module('plugSchedulerApp',[]);app.controller('PlugScheduleController',['$http',function($http){var ctrl=this;ctrl.editMode=false;ctrl.$onInit=function(){ctrl.scheduleObj=new Schedule();ctrl.getSchedule()};ctrl.getSchedule=function(){if(ctrl.plugId===undefined){throw new Error('plugId is not defined')}var url=`/api/schedule/${ctrl.plugId }`;$http.get(url,{responseType:'arraybuffer'}).then(function(response){ctrl.scheduleObj.loadFromArrayBuffer(response.data);ctrl.displaySchedule=ctrl.scheduleObj.serializeForDisplay()}).catch(function(error){console.error('Error fetching schedule:',error)})};ctrl.modifySchedule=function(){ctrl.editMode=true;ctrl.editMatrix=ctrl.scheduleObj.prepareEditMatrix()};ctrl.saveSchedule=function(){ctrl.editMode=false;ctrl.scheduleObj.updateFromEditMatrix(ctrl.editMatrix);ctrl.updateSchedule()};ctrl.updateSchedule=function(){var url=`/api/schedule/${ctrl.plugId }`;var serializedSchedule=ctrl.scheduleObj.serializeToArrayBuffer();$http.post(url,serializedSchedule,{headers:{'Content-Type':'application/octet-stream'},responseType:'arraybuffer',transformRequest:[]}).then(function(response){console.log(\"successfully updated\");ctrl.displaySchedule=ctrl.scheduleObj.serializeForDisplay()},function(error){console.error('Error updating schedule:',error)})};ctrl.checkAll=function(hourIndex){ctrl.editMatrix[hourIndex].forEach(segment=>{segment.value=1})};ctrl.uncheckAll=function(hourIndex){ctrl.editMatrix[hourIndex].forEach(segment=>{segment.value=0})}}]);app.component('plugScheduleWidget',{bindings:{plugId:'<'},template:`<div class=plug-schedule-widget><h3>Schedule for Plug {{ $ctrl.plugId }}</h3><div ng-if=!$ctrl.editMode><div class=hour-cell ng-class=hour.class ng-repeat=\"hour in $ctrl.displaySchedule track by $index\">{{ hour.displayValue }}</div><button ng-click=$ctrl.modifySchedule()>Modify Schedule</button></div><div ng-if=$ctrl.editMode><table><tr ng-repeat=\"hourSegments in $ctrl.editMatrix track by $index\"><td ng-repeat=\"segment in hourSegments track by $index\"><input ng-false-value=0 ng-model=segment.value ng-true-value=1 type=checkbox><td><button ng-click=$ctrl.checkAll($index)>Check All</button> <button ng-click=$ctrl.uncheckAll($index)>Uncheck All</button></table><button ng-click=$ctrl.saveSchedule()>Save Schedule</button></div></div>`,controller:'PlugScheduleController'});</script><div ng-app=plugSchedulerApp><plug-schedule-widget plug-id=1></plug-schedule-widget><plug-schedule-widget plug-id=2></plug-schedule-widget><plug-schedule-widget plug-id=3></plug-schedule-widget><plug-schedule-widget plug-id=4></plug-schedule-widget><plug-schedule-widget plug-id=5></plug-schedule-widget><plug-schedule-widget plug-id=6></plug-schedule-widget><plug-schedule-widget plug-id=7></plug-schedule-widget><plug-schedule-widget plug-id=8></plug-schedule-widget></div><style>*{font-family:Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;padding:0;border-spacing:0;border:transparent;text-align:center;color:#aaa;font-weight:400}body{width:80%;margin:auto;background:#333340}button{padding:4px 8px;margin-left:5px;vertical-align:top;border-radius:12px;background:#696983;color:eee;margin-top:5px}.hour-cell{display:inline-block;width:10px;height:25px;margin-top:4px}.off{background-color:#eee}.on{background-color:#8e8}.partial{background-color:#bdc}table{margin:auto}</style>";
+
+
+// PREFERENCES
 Preferences preferences;
 #define RW_MODE false
 #define RO_MODE true
 
 // WIFI
-const char* ssid                = "/tmp/lab";
-const char* password            = "bitte2cucung";
+// const char* ssid                = "/tmp/lab";
+// const char* password            = "bitte2cucung";
+const char* ssid                = "Wokwi-GUEST";
+const char* password            = "";
 const uint8_t wifi_loop_max     = 10;
 
 // NTP
@@ -65,7 +70,7 @@ unsigned int pin_list[2] = {
   };
 
 // HTTP
-WiFiClient http_client;
+WiFiClient client;
 WiFiServer http_server(3000);
 String request;
 
@@ -188,7 +193,7 @@ void run_scheduler(){
 
 
 // HTTP
-void deserializeSchedule(String content, int schedule[24]) {
+void deserializeSchedule(WiFiClient &client, int schedule[24]) {
   client.readBytes((char*)schedule, 24 * sizeof(int));
 }
 
@@ -269,18 +274,6 @@ void setup(){
 }
 
 
-void html() {
-  http_client.println("HTTP/1.1 200 OK");
-  http_client.println("Content-Type: text/html");
-  http_client.println("Connection: close");
-  http_client.println();
-
-  http_client.println("<!DOCTYPE HTML>");
-  http_client.println("<html>");
-  http_client.println("</body>");
-  http_client.println("</html>");
-
-}
 
 void loop(){
 
@@ -290,8 +283,8 @@ void loop(){
   }
 
 
-  http_client = http_server.available();
-  if (!http_client) {
+  client = http_server.available();
+  if (!client) {
     return;
   }
 
@@ -318,6 +311,13 @@ void loop(){
       client.println("Connection: close");
       client.println();
     }
+  // GET homepage
+  } else if (request.indexOf("GET /") >= 0) {
+      client.println("HTTP/1.1 200 OK");
+      client.println("Content-Type: text/plain");
+      client.println("Connection: close");
+      client.println();
+      client.println(html_app);
   }
 
   // POST request
@@ -337,15 +337,21 @@ void loop(){
 
     // Update the schedule for the specified plug
     if (plugId >= 0 && plugId < 8) {
-      deserializeSchedule(postBody, scheduler_list[plugId]);
+      // deserializeSchedule(&client, scheduler_list[plugId]);
       Serial.println("Schedule updated for plug " + plugIdStr);
     } else {
       Serial.println("Invalid plug ID");
     }
+
   }
 
+  client.println("HTTP/1.1 200 OK");
+  client.println("Content-Type: text/plain");
+  client.println("Connection: close");
+  client.println();
+  client.println(html_app);
 
-  http_client.stop();
+  client.stop();
 
 
 }