From ee861d59a1fe6461f630183ea6fa46cd5c9c8763 Mon Sep 17 00:00:00 2001
From: Vitor Henrique <vitormhenrique@gmail.com>
Date: Sun, 10 Jan 2021 17:09:59 -0600
Subject: [PATCH] working on outputs, eddit and delete

---
 octoprint_enclosure/__init__.py               |  5 ++
 octoprint_enclosure/static/js/enclosure.js    | 63 +++++++++++++++++--
 .../output_editor/general_info.jinja2         |  2 +-
 .../templates/output_editor/io_output.jinja2  |  2 +-
 .../output_editor/main_screen.jinja2          |  3 +-
 .../templates/output_table.jinja2             | 12 ++++
 6 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/octoprint_enclosure/__init__.py b/octoprint_enclosure/__init__.py
index ed62fa8..f8daf97 100644
--- a/octoprint_enclosure/__init__.py
+++ b/octoprint_enclosure/__init__.py
@@ -27,6 +27,11 @@ class EnclosurePlugin(octoprint.plugin.StartupPlugin, octoprint.plugin.TemplateP
     def get_settings_defaults(self):
         return dict(enclosureOutputs=[])
 
+    # ~~ SettingsPlugin mixin
+    def on_settings_save(self, data):
+        enclosureOutputs = self._settings.get(["enclosureOutputs"])
+        print(data)
+
     # ~~ Softwareupdate hook
     def get_update_information(self):
         return dict(enclosure=dict(displayName="Enclosure Plugin", displayVersion=self._plugin_version,
diff --git a/octoprint_enclosure/static/js/enclosure.js b/octoprint_enclosure/static/js/enclosure.js
index 6279c93..084a1df 100644
--- a/octoprint_enclosure/static/js/enclosure.js
+++ b/octoprint_enclosure/static/js/enclosure.js
@@ -1,3 +1,8 @@
+function isInteger(value) {
+  return /^\d+$/.test(value);
+}
+
+
 $(function () {
 
   var cleanOutput = function (index_id) {
@@ -125,6 +130,16 @@ $(function () {
 
     self.enclosureOutputs = undefined;
 
+    self.validOutput = ko.pureComputed(function () {
+
+      if (self.output_type() == "regular") {
+        if (self.label() != "" && self.gpio_pin() != "" && isInteger(self.gpio_pin())) {
+          return true
+        }
+      }
+      return false;
+    });
+
     self.fromOutputData = function (data) {
 
       self.isNew(data === undefined);
@@ -133,6 +148,9 @@ $(function () {
         var arrRelaysLength = self.enclosureOutputs().length;
         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];
       }
 
       // general info
@@ -274,11 +292,14 @@ $(function () {
 
     self.onBeforeBinding = function () {
       self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
-      // console.log(self.settingsViewModel.settings.plugins.enclosure)
     };
 
     self.onEventSettingsUpdated = function () {
-      self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
+      // self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
+    };
+
+    self.syncSettings = function(){
+      self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs(self.enclosureOutputs());
     };
 
     self.createOutputEditor = function (data) {
@@ -290,12 +311,18 @@ $(function () {
     self.outputEditor = self.createOutputEditor();
     self.outputEditor.enclosureOutputs = self.enclosureOutputs;
 
+    self.removeOutput = function(data){
+      self.enclosureOutputs.remove(data);
+      self.syncSettings();
+    };
+
     self.showOutputEditorDialog = function (data) {
 
       self.outputEditor.fromOutputData(data);
 
       var editDialog = $("#settings_outputs_edit_dialog");
 
+      $('ul.nav-pills a[data-toggle="tab"]:first', editDialog).tab("show");
       editDialog.modal({
         minHeight: function () {
           return Math.max($.fn.modal.defaults.maxHeight() - 80, 250);
@@ -308,16 +335,40 @@ $(function () {
       });
     };
 
+    self.confirmEditOutput = function () {
+
+      if(self.outputEditor.validOutput()){
+        var callback = function () {
+          $("#settings_outputs_edit_dialog").modal("hide");
+        };
+  
+        self.addOutputs(callback);
+
+        self.syncSettings();
+      }
+    };
+
+
+    self.addOutputs = function (callback) {
+      var isNew = self.outputEditor.isNew();
 
-    self.addOutputs = function () {
       var output = self.outputEditor.toOutputData();
 
-      self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs.push(output);
+      if (isNew){
+        self.enclosureOutputs.push(output);
+      } else{
+        objIndex = self.enclosureOutputs().findIndex((obj => obj.index_id == output.index_id));
+        var _old_output = self.enclosureOutputs()[objIndex];
+        self.enclosureOutputs.replace(_old_output,output);
+      }
+      
+      if (callback !== undefined) {
+        callback();
+      }
     };
 
     self.print_data = function () {
-      console.log(self.enclosureOutputs.root);
-      // console.log(self);
+      console.log(self);
     };
 
     // end of EnclosureViewModel
diff --git a/octoprint_enclosure/templates/output_editor/general_info.jinja2 b/octoprint_enclosure/templates/output_editor/general_info.jinja2
index 025cd23..f9f42f3 100644
--- a/octoprint_enclosure/templates/output_editor/general_info.jinja2
+++ b/octoprint_enclosure/templates/output_editor/general_info.jinja2
@@ -10,7 +10,7 @@
     <div class="control-group">
         <label class="control-label">{{ _('Name') }}</label>
         <div class="controls">
-            <input type="text" data-bind="value: outputEditor.label">
+            <input type="text" data-bind="value: outputEditor.label, valueUpdate: 'afterkeydown'">
             <span class="help-inline">Name displayed on Enclosure Tab</span>
         </div>
     </div>
diff --git a/octoprint_enclosure/templates/output_editor/io_output.jinja2 b/octoprint_enclosure/templates/output_editor/io_output.jinja2
index eb3620e..9b264dd 100644
--- a/octoprint_enclosure/templates/output_editor/io_output.jinja2
+++ b/octoprint_enclosure/templates/output_editor/io_output.jinja2
@@ -3,7 +3,7 @@
   <div class="control-group">
     <label class="control-label">{{ _('IO Number') }}</label>
     <div class="controls">
-      <input type="text" data-bind="value: outputEditor.gpio_pin">
+      <input type="text" data-bind="value: outputEditor.gpio_pin, valueUpdate: 'afterkeydown'">
       <span class="help-inline">GPIO number that will be controlled.</span>
     </div>
   </div>
diff --git a/octoprint_enclosure/templates/output_editor/main_screen.jinja2 b/octoprint_enclosure/templates/output_editor/main_screen.jinja2
index e8360a1..6a04229 100644
--- a/octoprint_enclosure/templates/output_editor/main_screen.jinja2
+++ b/octoprint_enclosure/templates/output_editor/main_screen.jinja2
@@ -103,6 +103,7 @@
     </div>
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
-        <button class="btn btn-primary btn-confirm" data-bind="click: function() { $root.addOutputs(); }">{{ _('Save') }}</button>
+        <button class="btn btn-primary btn-confirm" data-bind="click: function() { $root.confirmEditOutput();}, css: {disabled: !outputEditor.validOutput()}">{{ _('Save') }}</button>
+        <!-- <button class="btn btn-primary btn-confirm" enabled=false>{{ _('Save') }}</button> -->
     </div>
 </div>
diff --git a/octoprint_enclosure/templates/output_table.jinja2 b/octoprint_enclosure/templates/output_table.jinja2
index d081048..b80d7f0 100644
--- a/octoprint_enclosure/templates/output_table.jinja2
+++ b/octoprint_enclosure/templates/output_table.jinja2
@@ -2,8 +2,10 @@
   <thead>
     <tr>
       <th class="">Id</th>
+      <th class="">Label</th>
       <th class="">Type</th>
       <th class="">GPIO</th>
+      <th class="">{{ _('Action') }}</th>
     </tr>
   </thead>
   <tbody data-bind="foreach: $root.enclosureOutputs">
@@ -11,6 +13,16 @@
       <td class="" data-bind="text: index_id"></td>
       <td class="" data-bind="text: label"></td>
       <td class="" data-bind="text: output_type"></td>
+      <!-- ko if: gpio.pin_name  -->
+      <td class="" data-bind="text: gpio.pin_name"></td>
+      <!-- /ko -->
+      <!-- ko ifnot: (gpio.pin_name ) -->
+      <td class="" >N/A</td>
+      <!-- /ko -->
+      <td class="">
+        <a href="#" class="fa fa-pencil" title="{{ _('Edit Output')|edq }}" data-bind="click: function() { $root.showOutputEditorDialog($data); }"></a>&nbsp;|&nbsp;
+        <a href="#" class="fa fa-trash-o" title="{{ _('Delete Output')|edq }}" data-bind="click: function() { $root.removeOutput($data); }"></a>
+    </td>
     </tr>
   </tbody>
 </table>