Event log GUI

src/home.htm

@@ -970,6 +970,37 @@ <h2>Display</h2>
                                  disable: displayGroup.fetching">Save</button>
             </p-->
           </div>
+
+          <div class="box box-full left">
+            <h2 class="left">History</h2>
+
+            <table>
+              <thead>
+                <tr>
+                  <th>Time</th>
+                  <th>Type</th>
+                  <th>Status</th>
+                  <th>Energy</th>
+                  <th>Temp</th>
+                </tr>
+              </thead>
+              <tbody data-bind="foreach: logs.events">
+                <tr>
+                  <td><span data-bind="text: localTime"></span></td>
+                  <td><span data-bind="text: type"></span></td>
+                  <td><span data-bind="text: estate"></span></td>
+                  <td><span data-bind="text: scaleString(energy(), 1000, 2) + ' kWh'"></span></td>
+                  <td><span data-bind="text: scaleString(temperatureMax(), 1, 1) + ' &deg;C'"></span></td>
+                </tr>
+              </tbody>
+              <tfoot data-bind="visible: logs.hasMore, disable: logs.fetchingBlock">
+                <tr>
+                  <td colspan="5" data-bind="click: logs.updateNext, clickBubble: false" style="text-align: center;">Load more</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+
         </div>
         <!--end tab 3-->
 

src/home.js

@@ -28,6 +28,23 @@
 
 })();
 
+ko.extenders.date = function(target) {
+  var result = ko.computed({
+    read: function() {
+      var value = target();
+      if(typeof value === "string") {
+        value = new Date(value);
+      }
+
+      value = value.toLocaleString();
+
+      return value;
+    },
+    write: target
+  });
+
+  return result;
+};
 
 // Convert string to number, divide by scale, return result
 // as a string with specified precision

src/view_models/EventLogViewModel.js

@@ -0,0 +1,125 @@
+/* global $, ko, StateHelperViewModel */
+/* exported EventLogViewModel */
+
+function EventLogEntryViewModel(data, block, index)
+{
+  "use strict";
+
+  ko.mapping.fromJS(data, {}, this);
+  this.key = ko.observable(block+"-"+index);
+  this.block = ko.observable(block);
+  this.index = ko.observable(index);
+  this.localTime = this.time.extend({ date: true });
+  this.vehicle = ko.computed(() => { return (0 !== (this.evseFlags() & 0x0100)) ? 1 : 0; });
+
+  const stateHelper = new StateHelperViewModel(this.evseState, this.vehicle);
+  this.isConnected = stateHelper.isConnected;
+  this.isReady = stateHelper.isReady;
+  this.isCharging = stateHelper.isCharging;
+  this.isError = stateHelper.isError;
+  this.isEnabled = stateHelper.isEnabled;
+  this.isSleeping = stateHelper.isSleeping;
+  this.isDisabled = stateHelper.isDisabled;
+  this.isPaused = stateHelper.isPaused;
+  this.estate = stateHelper.estate;
+}
+
+function EventLogViewModel(baseEndpoint)
+{
+  "use strict";
+  const endpoint = ko.pureComputed(function () { return baseEndpoint() + "/logs"; });
+
+  this.block = ko.observable(0);
+  var index = 0;
+  ko.mapping.fromJS({
+    min: 0,
+    max: 0
+  }, {}, this);
+
+  this.hasMore = ko.computed(() => { return this.block() > this.min(); });
+  this.events = ko.observableArray([]);
+  this.fetching = ko.observable(false);
+  this.fetchingBlock = ko.observable(false);
+
+  this.update = (after = () => { }) => {
+    this.fetching(true);
+    $.get(endpoint(), (data) => {
+      ko.mapping.fromJS(data, this);
+      updateBlock(this.max(), () => {
+        if(this.events.length < 5 && this.block() > this.min()) {
+          this.updateNext();
+        }
+      });
+    }, "json").always(() => {
+      this.fetching(false);
+      after();
+    });
+  };
+
+  this.updateNext = () => {
+    updateBlock(this.block() - 1);
+  };
+
+  var maxBlock = -1;
+  var maxBlockIndex = 0;
+
+  const updateBlock = (fetchBlock, after = () => { }) => {
+    this.fetchingBlock(true);
+    this.block(fetchBlock);
+    index = 0;
+    $.get(endpoint()+"/"+fetchBlock, (data) => {
+      for (const event of data) {
+        // IMPROVE: handle updating log entries
+        this.events.push(new EventLogEntryViewModel(event, fetchBlock, index++));
+      }
+
+      if(fetchBlock > maxBlock) {
+        maxBlock = fetchBlock;
+        maxBlockIndex = index;
+      }
+
+      this.events.sort(eventSort);
+    }, "json").always(() => {
+      this.fetchingBlock(false);
+      after();
+    });
+  };
+
+  var lastLog = new Date();
+  this.addLog = (status) => {
+    var now = new Date();
+    if(now - lastLog < 1000) {
+      return;
+    }
+    lastLog = now;
+
+    var data = {
+      time: now.toISOString(),
+      type: "",
+      managerState: status.status(),
+      evseState: status.state(),
+      evseFlags: status.flags(),
+      elapsed: status.elapsed(),
+      pilot: status.pilot(),
+      energy: status.session_energy(),
+      temperature: status.temp() / 10,
+      temperatureMax: status.temp_max() / 10,
+      divertMode: status.divertmode()
+    };
+    var event = new EventLogEntryViewModel(data, maxBlock, maxBlockIndex++);
+
+    // Derived types in status have not been properly re-evaluated at this point but
+    // the values in the event are correct.
+    event.type(event.isError() ? "warning" : "information");
+
+    this.events.push(event);
+    this.events.sort(eventSort);
+  };
+
+  const eventSort = (left, right) => {
+    if(right.block() != left.block()) {
+      return right.block() - left.block();
+    }
+    return right.index() - left.index();
+  };
+}

src/view_models/OpenEvseViewModel.js

@@ -101,37 +101,14 @@ function OpenEvseViewModel(baseEndpoint, configViewModel, statusViewModel) {
   self.tempCheckSupported = ko.observable(false);
 
   // Derived states
-  self.isConnected = ko.pureComputed(function () {
-    return [2, 3].indexOf(self.status.state()) !== -1;
-  });
-
-  self.isReady = ko.pureComputed(function () {
-    return [0, 1].indexOf(self.status.state()) !== -1;
-  });
-
-  self.isCharging = ko.pureComputed(function () {
-    return 3 === self.status.state();
-  });
-
-  self.isError = ko.pureComputed(function () {
-    return [4, 5, 6, 7, 8, 9, 10, 11].indexOf(self.status.state()) !== -1;
-  });
-
-  self.isEnabled = ko.pureComputed(function () {
-    return [0, 1, 2, 3].indexOf(self.status.state()) !== -1;
-  });
-
-  self.isSleeping = ko.pureComputed(function () {
-    return 254 === self.status.state();
-  });
-
-  self.isDisabled = ko.pureComputed(function () {
-    return 255 === self.status.state();
-  });
-
-  self.isPaused = ko.pureComputed(function () {
-    return [254, 255].indexOf(self.status.state()) !== -1;
-  });
+  self.isConnected = self.status.isConnected;
+  self.isReady = self.status.isReady;
+  self.isCharging = self.status.isCharging;
+  self.isError = self.status.isError;
+  self.isEnabled = self.status.isEnabled;
+  self.isSleeping = self.status.isSleeping;
+  self.isDisabled = self.status.isDisabled;
+  self.isPaused = self.status.isPaused;
 
   // helper to select an appropriate value for time limit
   self.selectTimeLimit = function(limit)

src/view_models/OpenEvseWiFiViewModel.js

@@ -1,4 +1,4 @@
-/* global $, ko, ConfigViewModel, StatusViewModel, RapiViewModel, WiFiScanViewModel, WiFiConfigViewModel, OpenEvseViewModel, PasswordViewModel, ZonesViewModel, ConfigGroupViewModel, ScheduleViewModel, VehicleViewModel */
+/* global $, ko, ConfigViewModel, StatusViewModel, RapiViewModel, WiFiScanViewModel, WiFiConfigViewModel, OpenEvseViewModel, PasswordViewModel, ZonesViewModel, ConfigGroupViewModel, ScheduleViewModel, VehicleViewModel, EventLogsViewModel */
 /* exported OpenEvseWiFiViewModel */
 
 function OpenEvseWiFiViewModel(baseHost, basePort, baseProtocol)
@@ -39,6 +39,7 @@ function OpenEvseWiFiViewModel(baseHost, basePort, baseProtocol)
   self.zones = new ZonesViewModel(self.baseEndpoint);
   self.schedule = new ScheduleViewModel(self.baseEndpoint);
   self.vehicle = new VehicleViewModel(self.baseEndpoint, self.config, self.status);
+  self.logs = new EventLogViewModel(self.baseEndpoint);
 
   self.initialised = ko.observable(false);
   self.updating = ko.observable(false);
@@ -69,6 +70,13 @@ function OpenEvseWiFiViewModel(baseHost, basePort, baseProtocol)
     flag(!flag());
   };
 
+  self.status.state.subscribe((state) => {
+    self.logs.addLog(self.status);
+  });
+  self.status.flags.subscribe((flags) => {
+    self.logs.addLog(self.status);
+  });
+
   // Advanced mode
   self.advancedMode = ko.observable(false);
   self.advancedMode.subscribe(function (val) {
@@ -225,7 +233,7 @@ function OpenEvseWiFiViewModel(baseHost, basePort, baseProtocol)
   self.itemsLoaded = ko.pureComputed(function () {
     return self.loadedCount() + self.openevse.updateCount();
   });
-  self.itemsTotal = ko.observable(3 + self.openevse.updateTotal());
+  self.itemsTotal = ko.observable(4 + self.openevse.updateTotal());
   self.start = function () {
     self.updating(true);
     self.status.update(function () {
@@ -234,19 +242,22 @@ function OpenEvseWiFiViewModel(baseHost, basePort, baseProtocol)
         self.loadedCount(self.loadedCount() + 1);
         self.schedule.update(function () {
           self.loadedCount(self.loadedCount() + 1);
-          if(self.status.rapi_connected()) {
-            self.openevse.update(self.finishedStarting);
-          } else {
-            self.finishedStarting();
-            self.status.rapi_connected.subscribe((val) => {
-              if(val) {
-                self.config.update(() => {
-                  self.openevse.update(() => {
+          self.logs.update(() => {
+            self.loadedCount(self.loadedCount() + 1);
+            if(self.status.rapi_connected()) {
+              self.openevse.update(self.finishedStarting);
+            } else {
+              self.finishedStarting();
+              self.status.rapi_connected.subscribe((val) => {
+                if(val) {
+                  self.config.update(() => {
+                    self.openevse.update(() => {
+                    });
                   });
-                });
-              }
-            });
-          }
+                }
+              });
+            }
+          });
         });
       });
       self.connect();

src/view_models/StateHelperViewModel.js

@@ -0,0 +1,93 @@
+function StateHelperViewModel(state, vehicle) {
+  this.estate = ko.pureComputed(function () {
+    var estate;
+    switch (state()) {
+      case 0:
+        estate = "Starting";
+        break;
+      case 1:
+        estate = "EV Not connected";
+        break;
+      case 2:
+        estate = "EV Connected";
+        break;
+      case 3:
+        estate = "Charging";
+        break;
+      case 4:
+        estate = "Vent Required";
+        break;
+      case 5:
+        estate = "Diode Check Failed";
+        break;
+      case 6:
+        estate = "GFCI Fault";
+        break;
+      case 7:
+        estate = "No Earth Ground";
+        break;
+      case 8:
+        estate = "Stuck Relay";
+        break;
+      case 9:
+        estate = "GFCI Self Test Failed";
+        break;
+      case 10:
+        estate = "Over Temperature";
+        break;
+      case 11:
+        estate = "Over Current";
+        break;
+      case 254:
+      case 255:
+        estate = "Waiting";
+        if(false !== vehicle())
+        {
+          estate += " - EV " ;
+          if(1 === vehicle()) {
+            estate += "Connected";
+          } else {
+            estate += "Not connected";
+          }
+        }
+        break;
+      default:
+        estate = "Invalid";
+        break;
+    }
+    return estate;
+  });
+
+  this.isConnected = ko.pureComputed(() => {
+    return [2, 3].indexOf(state()) !== -1;
+  });
+
+  this.isReady = ko.pureComputed(() => {
+    return [0, 1].indexOf(state()) !== -1;
+  });
+
+  this.isCharging = ko.pureComputed(() => {
+    return 3 === state();
+  });
+
+  this.isError = ko.pureComputed(() => {
+    return [4, 5, 6, 7, 8, 9, 10, 11].indexOf(state()) !== -1;
+  });
+
+  this.isEnabled = ko.pureComputed(() => {
+    return [0, 1, 2, 3].indexOf(state()) !== -1;
+  });
+
+  this.isSleeping = ko.pureComputed(() => {
+    return 254 === state();
+  });
+
+  this.isDisabled = ko.pureComputed(() => {
+    return 255 === state();
+  });
+
+  this.isPaused = ko.pureComputed(() => {
+    return [254, 255].indexOf(state()) !== -1;
+  });
+
+}