Profile management added.

data/index.htm

@@ -94,23 +94,42 @@
                     <canvas id="myChart"></canvas>
                 </div>
                 <div class="card-action">
-                  <div class="row">
+                  <div class="row valign-wrapper">
                     <div class="input-field col s3">
+                      <input type="number" name="profileName" id="profileName" />
+                      <label for="Xmax">enter new profile name</label>
+                    </div>
+                    <div class="col s6">
+                      <div>
+                        <a class="btn tooltipped" data-position="bottom" data-tooltip="Save temperature profile." id="btnSaveProfile" onclick="saveProfile()"><i class="material-icons right">save</i>Save</a>
+                        <a class="btn tooltipped" data-position="bottom" data-tooltip="Run temperature profile." id="btnRunProfile" onclick="runProfile()"><i class="material-icons right">play_arrow</i>Run</a>
+                        <a class="btn tooltipped" data-position="bottom" data-tooltip="Delete temperature profile." id="btnDeleteProfile" onclick="deleteProfile()"><i class="material-icons right">delete</i>Delete</a>
+                      </div>
+                    </div>
+                    <div class="input-field col s2">
                       <input type="number" name="Xmax" id="xmax" />
                       <label for="Xmax">Set overall time</label>
                     </div>
-                    <div class="valign-wrapper col s3">
+                    <div class="valign-wrapper col s1">
-                      <h5><a class="waves-effect waves-light btn tooltipped" data-position="bottom" data-tooltip="Set time period." id="btnXmax" onclick="setXmax()">Set</a></h5>
+                      <h5><a class="waves-effect waves-light btn tooltipped" data-position="bottom" data-tooltip="Set time period." id="btnXmax" onclick="setXmax()">xMax</a></h5>
-                    </div>
-                    <div class="col s6">
-                      <div class="center-align">
-                        <h5><a class="teal waves-effect waves-light btn tooltipped" data-position="bottom" data-tooltip="Run temperature profile." id="btnRunProfile" onclick="runProfile()">Run</a></h5>
-                      </div>
                     </div>
                   </div>
                 </div>
             </div>
         </div>
+        <!-- Profiles list-->
+        <div class="row">
+          <div class="card blue-grey darken-1 z-depth-3">
+            <div class="card-content">
+              <!--table here-->
+              <ul class="collection with-header" id="profilesList">
+                <li class="collection-header"><h4>Available profiles</h4></li>
+                <li class="collection-item"><div>ESP_1<a href="#!" class="secondary-content" onclick="getProfile('ESP_1')"><i class="material-icons">cloud_download</i></a></div></li>
+                <li class="collection-item"><div>ESP_2<a href="#!" class="secondary-content" onclick="getProfile('ESP_2')"><i class="material-icons">cloud_download</i></a></div></li>
+              </ul>
+            </div>
+          </div>
+        </div>
       <!-- Footer row -->
       <div class="row">
         ESP32

data/js/scripts.js

@@ -24,7 +24,60 @@ setInterval(function () {
     });
     myChart.update();
   }
-}, 4000);
+}, 40000);
+
+async function fetchData(url) {
+  let raw = await fetch(url);
+  let data = await raw.json();
+  return data;
+}
+
+async function listProfiles() {
+  let list = document.getElementById('profilesList');
+  list.innerHTML = '';
+  let raw = await fetch("/profile/list");
+  let profiles = await raw.json();
+  profiles.forEach((profile, idx)=>{
+  const node = document.createElement('li');
+  node.classList.add("collection-item");
+  node.innerHTML = '<div>'+profile+'<a href="#!" class="secondary-content" onclick="getProfile(\'' + profile + '\')"><i class="material-icons">cloud_download</i></a></div>';
+  list.appendChild(node);
+  });
+}
+
+async function getProfile(name) {
+  let raw = await fetch('/profile/?name='+name);  
+  let profile = await raw.json();
+  myChart.data.datasets[0].data = profile.values;
+  document.getElementById("profileName").value = profile.name;
+  myChart.update();  
+}
+
+function saveProfile() {
+  const data = new URLSearchParams();
+  data.append('name',document.getElementById('profileName').value);
+  data.append('values',myChart.data.datasets[0].data);
+  fetch('/profile/save', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: data
+  })
+  listProfiles();
+}
+function deleteProfile() {
+  const data = new URLSearchParams();
+  data.append('name',document.getElementById('profileName').value);
+  fetch('/profile/delete', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: data
+  })
+  listProfiles();
+}
 
 function setXmax() {
   myChart.data.datasets[0].data[9].x = document.getElementById('xmax').value;
@@ -42,18 +95,15 @@ function setTarget() {
   })
 }
 
-function getPID() {
+async function getPID() {
-  const url = '/pid';
+  let raw = await fetch('/pid');
-  fetch(url)
+  let data = await raw.json();
-  .then((respone)=>{
+
-    return respone.json();
+  document.getElementById('kp').value = data.kp || -1;
-  })
+  document.getElementById('ki').value = data.ki || -1;
-    .then((data)=>{
+  document.getElementById('kd').value = data.kd || -1;
-      document.getElementById('kp').value = data.kp || -1;
+
-      document.getElementById('ki').value = data.ki || -1;
+  M.updateTextFields();
-      document.getElementById('kd').value = data.kd || -1;
-      M.updateTextFields();
-    })
 }
 
 function setPID() {
@@ -62,7 +112,7 @@ function setPID() {
   data.append('ki', document.getElementById('ki').value);
   data.append('kd', document.getElementById('kd').value);  
   fetch('/pid', {
-    method: 'GET',
+    method: 'POST',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
     },

src/main.cpp

@@ -138,6 +138,85 @@ String getStatus(void)
   // return JSON.stringify(jsonStatus);
 }
 
+String getProfilesList(void)
+{
+  JsonDocument jsonList;
+  String list;
+  settings.begin("profiles");
+  list  = settings.getString("list");
+  Serial.println(list);
+  deserializeJson(jsonList, list);
+  settings.end();
+  serializeJson(jsonList,list);
+  return list;
+}
+
+String getProfile(AsyncWebServerRequest * request)
+{
+  int params = request->params();
+  if(params > 0){
+    JsonDocument jsonProfile;
+    String name = request->getParam("name")->value();
+    settings.begin("profiles");
+    jsonProfile["name"] = name;
+    jsonProfile["values"] = serialized(settings.getString(name.c_str()));
+    settings.end();
+    String profile;
+    serializeJson(jsonProfile, profile);
+    Serial.println(profile);
+    return profile;
+  }
+}
+boolean saveProfile(AsyncWebServerRequest * request)
+{
+    int params = request->params();
+    if(params > 1){
+      String name = request->getParam("name",true)->value();
+      String values = request->getParam("values",true)->value();
+      Serial.print(name);Serial.println(values);
+      settings.begin("profiles");
+      if(!settings.isKey(name.c_str()))
+      {
+        //add new profile to list
+        JsonDocument jsonList;
+        deserializeJson(jsonList,settings.getString("list"));
+        jsonList.add(name);
+        String list;
+        serializeJson(jsonList,list);
+        Serial.println(list);
+        settings.putString("list",list);
+      }
+      settings.putString(name.c_str(),values);
+      settings.end();
+      return true;
+    }
+    return false;
+}
+
+boolean deleteProfile(AsyncWebServerRequest * request)
+{
+  bool res = false;
+  int params = request->params();
+  if(params == 1){
+    settings.begin("profiles");
+    JsonDocument jsonList;
+    String name = request->getParam("name",true)->value();
+    deserializeJson(jsonList,settings.getString("list"));
+    if(jsonList.containsKey(name)){
+      //remove from list
+      jsonList.remove(name);
+      String list;
+      serializeJson(jsonList,list);
+      settings.putString("list",list);
+      //remove profile
+      settings.remove(name.c_str());
+      res = true;
+    }
+    settings.end();
+  }
+  return res;
+}
+
 String getPID(AsyncWebServerRequest * request)
 {
   JsonDocument jsonPID;
@@ -413,7 +492,16 @@ server.addHandler(new SPIFFSEditor(SPIFFS,http_username,http_password));
     // } 
     request->send(200, "text/plain", (String)target);
   });
-  server.on("/profile", HTTP_POST,[](AsyncWebServerRequest *request){
+  server.on("/profile/list", HTTP_GET, [](AsyncWebServerRequest *request){
+    request->send(200, "text/plain", getProfilesList());
+  });
+  server.on("/profile/save", HTTP_POST,[](AsyncWebServerRequest *request){
+    request->send(200, "text/plain", saveProfile(request) ? "OK": "Error");
+  });
+  server.on("/profile/delete", HTTP_POST,[](AsyncWebServerRequest *request){
+    request->send(200, "text/plain", deleteProfile(request) ? "OK": "Error");
+  });
+  server.on("/profile/run", HTTP_POST,[](AsyncWebServerRequest *request){
   // AsyncCallbackJsonWebHandler *handler = new AsyncCallbackJsonWebHandler("/profile", [](AsyncWebServerRequest *request, JsonVariant &json) {
 
     int params = request->params();
@@ -456,6 +544,16 @@ server.addHandler(new SPIFFSEditor(SPIFFS,http_username,http_password));
     }
     request->send(200, "text/plain", "{test: \"ok\"}");
   });
+  server.on("/profile/resetlist", HTTP_GET,[](AsyncWebServerRequest * request){
+    settings.begin("profiles");
+    settings.clear();
+    settings.putString("list","");
+    request->send(200,"text/plain","profiles lilst reset");
+  });
+
+  server.on("/profile", HTTP_GET, [](AsyncWebServerRequest *request){
+    request->send(200, "text/plain", getProfile(request));
+  });
 
   server.begin();
   duty = millis();