From 2433c5e451707ec484ab9f89c66acbee8e6285ff Mon Sep 17 00:00:00 2001
From: Vitor Henrique <vitormhenrique@gmail.com>
Date: Tue, 9 Mar 2021 21:34:19 -0600
Subject: [PATCH] handling some UI logic

---
 .gitignore                                    |  1 +
 octoprint_enclosure/__init__.py               | 24 ++++----
 .../js/{enclosure.js => old_enclosure.js}     |  2 +-
 octoprint_enclosure/static/js/enclosure.js    | 59 ++++++++++++-------
 .../templates/enclosure_settings.jinja2       | 31 +++++++---
 .../input_editor/general_info.jinja2          | 16 +++--
 .../templates/input_editor/io_output.jinja2   |  6 +-
 .../input_editor/output_action.jinja2         |  5 +-
 .../input_editor/temperature_sensor.jinja2    | 16 ++---
 9 files changed, 94 insertions(+), 66 deletions(-)
 rename octoprint_enclosure/old_stuff/static/js/{enclosure.js => old_enclosure.js} (96%)

diff --git a/.gitignore b/.gitignore
index 3f311b8..9b9b4d6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 *.pyc
 *.egg-info
 .DS_Store
+config.yaml
diff --git a/octoprint_enclosure/__init__.py b/octoprint_enclosure/__init__.py
index 29e36aa..387ab06 100644
--- a/octoprint_enclosure/__init__.py
+++ b/octoprint_enclosure/__init__.py
@@ -5,17 +5,16 @@ import octoprint.plugin
 import octoprint.util
 
 
-
 class EnclosurePlugin(octoprint.plugin.StartupPlugin, octoprint.plugin.TemplatePlugin, octoprint.plugin.SettingsPlugin,
                       octoprint.plugin.AssetPlugin, octoprint.plugin.BlueprintPlugin,
                       octoprint.plugin.EventHandlerPlugin):
-    
 
     # ~~ TemplatePlugin
     def get_template_configs(self):
         return [
-            dict(type="settings", template="enclosure_settings.jinja2", custom_bindings=True)
-            ]
+            dict(type="settings", template="enclosure_settings.jinja2",
+                 custom_bindings=True)
+        ]
 
     # ~~ AssetPlugin mixin
     def get_assets(self):
@@ -23,25 +22,24 @@ class EnclosurePlugin(octoprint.plugin.StartupPlugin, octoprint.plugin.TemplateP
             js=["js/enclosure.js", "js/bootstrap-colorpicker.min.js"],
             css=["css/bootstrap-colorpicker.css", "css/enclosure.css"])
 
-    # ~~ SettingsPlugin 
+    # ~~ SettingsPlugin
     def get_settings_defaults(self):
-        return dict(enclosureOutputs=[])
+        return dict(enclosureOutputs=[], enclosureInputs=[])
 
     # ~~ SettingsPlugin mixin
     def on_settings_save(self, data):
         enclosureOutputs = self._settings.get(["enclosureOutputs"])
+        enclosureInputs = self._settings.get(["enclosureInputs"])
         print(data)
         octoprint.plugin.SettingsPlugin.on_settings_save(self, data)
 
     # ~~ Softwareupdate hook
     def get_update_information(self):
         return dict(enclosure=dict(displayName="Enclosure Plugin", displayVersion=self._plugin_version,
-            # version check: github repository
-            type="github_release", user="vitormhenrique", repo="OctoPrint-Enclosure", current=self._plugin_version,
-            # update method: pip
-            pip="https://github.com/vitormhenrique/OctoPrint-Enclosure/archive/{target_version}.zip"))
-
-   
+                                   # version check: github repository
+                                   type="github_release", user="vitormhenrique", repo="OctoPrint-Enclosure", current=self._plugin_version,
+                                   # update method: pip
+                                   pip="https://github.com/vitormhenrique/OctoPrint-Enclosure/archive/{target_version}.zip"))
 
 
 __plugin_name__ = "Enclosure Plugin"
@@ -56,4 +54,4 @@ def __plugin_load__():
     __plugin_hooks__ = {
         # "octoprint.comm.protocol.gcode.queuing"       : __plugin_implementation__.hook_gcode_queuing,
         "octoprint.plugin.softwareupdate.check_config": __plugin_implementation__.get_update_information
-    }
\ No newline at end of file
+    }
diff --git a/octoprint_enclosure/old_stuff/static/js/enclosure.js b/octoprint_enclosure/old_stuff/static/js/old_enclosure.js
similarity index 96%
rename from octoprint_enclosure/old_stuff/static/js/enclosure.js
rename to octoprint_enclosure/old_stuff/static/js/old_enclosure.js
index 99876d3..905ecdc 100644
--- a/octoprint_enclosure/old_stuff/static/js/enclosure.js
+++ b/octoprint_enclosure/old_stuff/static/js/old_enclosure.js
@@ -11,7 +11,7 @@ $(function () {
     self.rpi_outputs = ko.observableArray();
     self.rpi_inputs = ko.observableArray();
 
-    self.settingsOpen = false;
+    self.settingsOpen = ko.observable(false);
 
     self.settings_outputs_regular = ko.pureComputed(function () {
       return ko.utils.arrayFilter(self.settingsViewModel.settings.plugins.enclosure.rpi_outputs(), function (item) {
diff --git a/octoprint_enclosure/static/js/enclosure.js b/octoprint_enclosure/static/js/enclosure.js
index fc883be..b62e4fd 100644
--- a/octoprint_enclosure/static/js/enclosure.js
+++ b/octoprint_enclosure/static/js/enclosure.js
@@ -137,17 +137,17 @@ $(function () {
 
     });
 
-    self.fromOutputData = function (data) {
+    self.fromInputEnclosureData = function (data) {
 
       self.isNew(data === undefined);
 
       if (data === undefined) {
         var arrRelaysLength = self.enclosureInputs().length;
-        var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureInputs()[arrRelaysLength - 1].index_id + 1;
+        var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureInputs()[arrRelaysLength - 1].index_id() + 1;
         data = cleanInput(nextIndex);
       } else {
         objIndex = self.enclosureInputs().findIndex((obj => obj.index_id == data.index_id));
-        data = self.enclosureInputs()[objIndex];
+        data = ko.mapping.toJS(self.enclosureInputs()[objIndex]);
       }
 
       // general info
@@ -173,7 +173,7 @@ $(function () {
 
     };
 
-    self.toOutputData = function (data) {
+    self.toInputEnclosureData = function (data) {
       var output_data = {
         index_id: self.index_id(),
         label: self.label(),
@@ -276,17 +276,17 @@ $(function () {
       return false;
     });
 
-    self.fromOutputData = function (data) {
+    self.fromOutputEnclosureData = function (data) {
 
       self.isNew(data === undefined);
 
       if (data === undefined) {
         var arrRelaysLength = self.enclosureOutputs().length;
-        var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureOutputs()[arrRelaysLength - 1].index_id + 1;
+        var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureOutputs()[arrRelaysLength - 1].index_id() + 1;
         data = cleanOutput(nextIndex);
       } else {
         objIndex = self.enclosureOutputs().findIndex((obj => obj.index_id == data.index_id));
-        data = self.enclosureOutputs()[objIndex];
+        data = ko.mapping.toJS(self.enclosureOutputs()[objIndex]);
       }
 
       // general info
@@ -347,7 +347,7 @@ $(function () {
 
     };
 
-    self.toOutputData = function () {
+    self.toOutputEnclosureData = function () {
       var output_data = {
         index_id: self.index_id(),
         label: self.label(),
@@ -427,16 +427,29 @@ $(function () {
     self.enclosureOutputs = ko.observableArray();
     self.enclosureInputs = ko.observableArray();
 
+    self.settings_unsaved = ko.observable(false);
+
     self.onBeforeBinding = function () {
-      self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
+      self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs())
+      self.enclosureInputs(self.settingsViewModel.settings.plugins.enclosure.enclosureInputs())
+      // self.settings_unsaved(false);
     };
 
-    self.onEventSettingsUpdated = function () {
+    self.onSettingsBeforeSave = function () {
       // self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
     };
 
-    self.syncSettings = function () {
+    self.onEventSettingsUpdated = function () {
       self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs(self.enclosureOutputs());
+      self.settingsViewModel.settings.plugins.enclosure.enclosureInputs(self.enclosureInputs());
+      self.settings_unsaved(false);
+    };
+
+
+    self.syncSettings = function () {
+      // self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs(self.enclosureOutputs());
+      // self.settingsViewModel.settings.plugins.enclosure.enclosureInputs(self.enclosureInputs());
+      // self.settings_unsaved(false);
     };
 
     self.createOutputEditor = function (data) {
@@ -458,17 +471,17 @@ $(function () {
 
     self.removeOutput = function (data) {
       self.enclosureOutputs.remove(data);
-      self.syncSettings();
+      self.settings_unsaved(true);
     };
 
     self.removeInput = function(data){
       self.enclosureInputs.remove(data);
-      self.syncSettings();
+      self.settings_unsaved(true);
     }
 
     self.showOutputEditorDialog = function (data) {
 
-      self.outputEditor.fromOutputData(data);
+      self.outputEditor.fromOutputEnclosureData(data);
 
       var editDialog = $("#settings_outputs_edit_dialog");
 
@@ -487,7 +500,7 @@ $(function () {
 
     self.showInputEditorDialog = function (data) {
 
-      self.inputEditor.fromOutputData(data);
+      self.inputEditor.fromInputEnclosureData(data);
 
       var editDialog = $("#settings_inputs_edit_dialog");
 
@@ -513,7 +526,7 @@ $(function () {
 
         self.addOutputs(callback);
 
-        self.syncSettings();
+        // self.syncSettings();
       }
     };
 
@@ -526,7 +539,7 @@ $(function () {
 
         self.addInputs(callback);
 
-        self.syncSettings();
+        // self.syncSettings();
       }
     };
 
@@ -534,12 +547,14 @@ $(function () {
     self.addOutputs = function (callback) {
       var isNew = self.outputEditor.isNew();
 
-      var output = self.outputEditor.toOutputData();
+      self.settings_unsaved(true);
+
+      var output = ko.mapping.fromJS(self.outputEditor.toOutputEnclosureData());
 
       if (isNew) {
         self.enclosureOutputs.push(output);
       } else {
-        objIndex = self.enclosureOutputs().findIndex((obj => obj.index_id == output.index_id));
+        objIndex = self.enclosureOutputs().findIndex((obj => obj.index_id() == output.index_id()));
         var _old_output = self.enclosureOutputs()[objIndex];
         self.enclosureOutputs.replace(_old_output, output);
       }
@@ -552,12 +567,14 @@ $(function () {
     self.addInputs = function (callback) {
       var isNew = self.inputEditor.isNew();
 
-      var input = self.inputEditor.toOutputData();
+      self.settings_unsaved(true);
+
+      var input = ko.mapping.fromJS(self.inputEditor.toInputEnclosureData());
 
       if (isNew) {
         self.enclosureInputs.push(input);
       } else {
-        objIndex = self.enclosureInputs().findIndex((obj => obj.index_id == input.index_id));
+        objIndex = self.enclosureInputs().findIndex((obj => obj.index_id() == input.index_id()));
         var _old_input = self.enclosureInputs()[objIndex];
         self.enclosureInputs.replace(_old_input, input);
       }
diff --git a/octoprint_enclosure/templates/enclosure_settings.jinja2 b/octoprint_enclosure/templates/enclosure_settings.jinja2
index c4abac7..34187d5 100644
--- a/octoprint_enclosure/templates/enclosure_settings.jinja2
+++ b/octoprint_enclosure/templates/enclosure_settings.jinja2
@@ -1,18 +1,33 @@
-<h4>{{ _('Raspberry Pi Outputs') }}</h4>
+<form class="form-horizontal" onsubmit="return false;">
 
-{% include "output_table.jinja2" %}
+    <!-- ko if: ($root.settings_unsaved())  -->
+    <div class="alert alert-block">
+        <strong>Note: </strong>You have unsaved data, canceling settings will revert all configurations made here.
+    </div>
+    <!-- /ko -->
+
+    <h4>{{ _('Raspberry Pi Outputs') }}</h4>
+
+
+    {% include "output_table.jinja2" %}
+
+</form>
 
 {% include "output_editor/main_screen.jinja2" %}
 
-<h4>{{ _('Raspberry Pi Inputs') }}</h4>
+<form class="form-horizontal" onsubmit="return false;">
+    <h4>{{ _('Raspberry Pi Inputs') }}</h4>
 
-{% include "input_table.jinja2" %}
+    {% include "input_table.jinja2" %}
+</form>
 
 {% include "input_editor/main_screen.jinja2" %}
 
+<form class="form-horizontal" onsubmit="return false;">
+    <h4>{{ _('Debug') }}</h4>
 
+    <div class="control-group">
+        <button class="btn pull-right" data-bind="click: function() { $root.print_data(); }">Test</button>
+    </div>
 
-
-<!-- <div class="control-group">
-    <button class="btn pull-right" data-bind="click: function() { $root.print_data(); }">Test</button>
-</div> -->
\ No newline at end of file
+</form>
\ No newline at end of file
diff --git a/octoprint_enclosure/templates/input_editor/general_info.jinja2 b/octoprint_enclosure/templates/input_editor/general_info.jinja2
index 656cf53..3007933 100644
--- a/octoprint_enclosure/templates/input_editor/general_info.jinja2
+++ b/octoprint_enclosure/templates/input_editor/general_info.jinja2
@@ -19,18 +19,18 @@
   <div class="control-group">
     <label class="control-label">{{ _('Input Type') }}</label>
     <div class="controls">
-      <input type="radio" value="regular_gpio" data-bind="checked: input_type"> {{ _('GPIO Input') }}
+      <input type="radio" value="regular_gpio" data-bind="checked: inputEditor.input_type"> {{ _('GPIO Input') }}
     </div>
     <div class="controls">
-      <input type="radio" value="temperature_sensor" data-bind="checked: input_type"> {{ _('Temperature Sensor') }}
+      <input type="radio" value="temperature_sensor" data-bind="checked: inputEditor.input_type"> {{ _('Temperature Sensor') }}
     </div>
     <div class="control-group">
       <div class="controls">
-        <!-- kocomment if: (outputEditor.input_type() == "regular_gpio")  -->
+        <!-- kocomment if: (inputEditor.input_type() == "regular_gpio")  -->
         <span class="help-inline">
           <span class="label label-info">Info:</span> GPIO will input status of the pin (HIGH or LOW) to trigger actions on configured outputs or printer events</span>
         <!-- /kocomment -->
-        <!-- kocomment if: (outputEditor.input_type() == "temperature_sensor")  -->
+        <!-- kocomment if: (inputEditor.input_type() == "temperature_sensor")  -->
         <span class="help-inline">
           <span class="label label-info">Info:</span> Temperature Sensors will input temperature and humidity data.
         </span>
@@ -40,18 +40,16 @@
   </div>
 
 
-  <!-- kocomment if: (outputEditor.input_type() == "regular_gpio")  -->
+  <!-- kocomment if: (inputEditor.input_type() == "regular_gpio")  -->
   <div class="control-group">
     <label class="control-label">{{ _('Action Type') }}</label>
     <div class="controls">
-      <input type="radio" value="output_control" data-bind="checked: action_type"> {{ _('Output Control') }}
+      <input type="radio" value="output_control" data-bind="checked: inputEditor.action_type"> {{ _('Output Control') }}
     </div>
     <div class="controls">
-      <input type="radio" value="printer_control" data-bind="checked: action_type"> {{ _('Printer') }}
+      <input type="radio" value="printer_control" data-bind="checked: inputEditor.action_type"> {{ _('Printer') }}
     </div>
   </div>
   <!-- /kocomment -->
 
-
-
 </form>
\ No newline at end of file
diff --git a/octoprint_enclosure/templates/input_editor/io_output.jinja2 b/octoprint_enclosure/templates/input_editor/io_output.jinja2
index 97d3fda..74fdea5 100644
--- a/octoprint_enclosure/templates/input_editor/io_output.jinja2
+++ b/octoprint_enclosure/templates/input_editor/io_output.jinja2
@@ -3,7 +3,7 @@
     <div class="control-group">
         <label class="control-label" for="settings-enclosure-io1">{{ _('Input IO Number') }}</label>
         <div class="controls">
-            <input type="text" class="input-block-level" data-bind="value: gpio_pin">
+            <input type="text" class="input-block-level" data-bind="value: inputEditor.gpio_pin">
             <span class="help-inline">Input GPIO that will detect the event that should trigger the action. For example
                 if you have a filament sensor
                 you put the GPIO pin that the sensor is connected. This can also be a press of a button or any other
@@ -14,7 +14,7 @@
     <div class="control-group">
         <label class="control-label">Input Pull Resistor</label>
         <div class="controls">
-            <select data-bind="value: input_pull_resistor">
+            <select data-bind="value: inputEditor.input_pull_resistor">
                 <option value="input_pull_up">Input Pull-up</option>
                 <option value="input_pull_down">Input Pull-down</option>
             </select>
@@ -26,7 +26,7 @@
     <div class="control-group">
         <label class="control-label">Event Trigger</label>
         <div class="controls">
-            <select data-bind="value: edge">
+            <select data-bind="value: inputEditor.edge">
                 <option value="rise">Rise</option>
                 <option value="fall">Fall</option>
             </select>
diff --git a/octoprint_enclosure/templates/input_editor/output_action.jinja2 b/octoprint_enclosure/templates/input_editor/output_action.jinja2
index 1db831d..49485cd 100644
--- a/octoprint_enclosure/templates/input_editor/output_action.jinja2
+++ b/octoprint_enclosure/templates/input_editor/output_action.jinja2
@@ -16,8 +16,7 @@
     <div class="control-group">
         <label class="control-label"> Controlled IO</label>
         <div class="controls">
-            <select data-bind="options: $root.settings_possible_outputs, optionsText: 'label',
-                      optionsValue: 'index_id', value: $data.controlled_io">
+            <select >
             </select>
             <span class="help-inline">When the event happen, you want control which OUTPUT?</span>
         </div>
@@ -26,7 +25,7 @@
     <div class="control-group">
         <label class="control-label">Set Controlled IO Value</label>
         <div class="controls">
-            <select data-bind="value: controlled_io_set_value">
+            <select data-bind="value: inputEditor.controlled_io_set_value">
                 <option value="low">Low</option>
                 <option value="high">High</option>
                 <option value="toggle">Toggle</option>
diff --git a/octoprint_enclosure/templates/input_editor/temperature_sensor.jinja2 b/octoprint_enclosure/templates/input_editor/temperature_sensor.jinja2
index 5f3e472..17d1d8a 100644
--- a/octoprint_enclosure/templates/input_editor/temperature_sensor.jinja2
+++ b/octoprint_enclosure/templates/input_editor/temperature_sensor.jinja2
@@ -4,7 +4,7 @@
     <div class="control-group">
         <label class="control-label" for="settings-enclosure-dhtModel">{{ _('Sensor Type') }}</label>
         <div class="controls">
-            <select data-bind="value: outputEditor.temperature_sensor_type">
+            <select data-bind="value: inputEditor.temperature_sensor_type">
                 <option value="">Select Sensor</option>
                 <option value="11">DHT11</option>
                 <option value="22">DHT22</option>
@@ -21,11 +21,11 @@
     </div>
 
 
-    <!-- ko ifnot: (outputEditor.temperature_sensor_type() == "si7021") || (outputEditor.temperature_sensor_type() == "bme280") || (outputEditor.temperature_sensor_type() == "tmp102") || (outputEditor.temperature_sensor_type() == "mcp9808") -->
+    <!-- ko ifnot: (inputEditor.temperature_sensor_type() == "si7021") || (inputEditor.temperature_sensor_type() == "bme280") || (inputEditor.temperature_sensor_type() == "tmp102") || (inputEditor.temperature_sensor_type() == "mcp9808") -->
     <div class="control-group">
         <label class="control-label" for="settings-enclosure-dhtPin">{{ _('Sensor Pin') }}</label>
         <div class="controls">
-            <input type="text" class="input-block-level" data-bind="value: outputEditor.gpio_pin" value="4">
+            <input type="text" class="input-block-level" data-bind="value: inputEditor.gpio_pin" value="4">
             <span class="help-inline">GPIO pin for temperature sensor, recommended to use 4 as DS18B20 has default
                 support to pin #4 (BCM)</span>
         </div>
@@ -34,11 +34,11 @@
 
 
 
-    <!-- ko if: (outputEditor.temperature_sensor_type() == "18b20")  -->
+    <!-- ko if: (inputEditor.temperature_sensor_type() == "18b20")  -->
     <div class="control-group">
         <label class="control-label" for="settings-enclosure-dhtPin">{{ _('DS18B20 Serial') }}</label>
         <div class="controls">
-            <input type="text" class="input-block-level" data-bind="value: outputEditor.temperature_sensor_address"
+            <input type="text" class="input-block-level" data-bind="value: inputEditor.temperature_sensor_address"
                 value="">
             <span class="help-inline">DS18B20 serial value, needs to be used to have support for multiple sensors,
                 read documentation on github page
@@ -47,18 +47,18 @@
     </div>
     <!-- /ko -->
 
-    <!-- ko if: (outputEditor.temperature_sensor_type() == "si7021") || (outputEditor.temperature_sensor_type() == "bme280") || (outputEditor.temperature_sensor_type() == "tmp102") || (outputEditor.temperature_sensor_type() == "mcp9808") -->
+    <!-- ko if: (inputEditor.temperature_sensor_type() == "si7021") || (inputEditor.temperature_sensor_type() == "bme280") || (inputEditor.temperature_sensor_type() == "tmp102") || (inputEditor.temperature_sensor_type() == "mcp9808") -->
     <div class="control-group">
         <label class="control-label" for="settings-enclosure-dhtPin">{{ _('Sensor Address') }}</label>
         <div class="controls">
-            <input type="text" class="input-block-level" data-bind="value: outputEditor.temperature_sensor_address">
+            <input type="text" class="input-block-level" data-bind="value: inputEditor.temperature_sensor_address">
             <span class="help-inline">Sensor address in HEX value, you can find it by running
                 <code>i2cdetect -y 1</code> on your Raspberry Pi</span>
         </div>
     </div>
     <!-- /ko -->
 
-    <!-- ko if: (outputEditor.temperature_sensor_type() == "max31855") -->
+    <!-- ko if: (inputEditor.temperature_sensor_type() == "max31855") -->
     <!-- <div class="control-group">
         <label class="control-label" for="settings-enclosure-dhtPin">{{ _('Sensor Pin') }}</label>
         <div class="controls">