From b5c5ad13c1ecfc5413a5f3afb0ecadf97fa551ec Mon Sep 17 00:00:00 2001
From: Vitor de Miranda Henrique <vitormhenrique@MacBook-Pro.local>
Date: Sun, 20 Dec 2020 23:39:19 -0600
Subject: [PATCH] changing template structure

---
 octoprint_enclosure/__init__.py               |  4 ++
 .../templates/enclosure_settings.jinja2       | 42 +++++------
 octoprint_enclosure/static/js/enclosure.js    | 30 ++++++--
 .../templates/enclosureSettings.jinja2        |  5 --
 .../templates/enclosure_settings.jinja2       |  5 ++
 .../templates/outputEditor.jinja2             | 44 ------------
 .../templates/outputEditorGeneral.jinja2      |  9 ---
 .../templates/outputTable.jinja2              | 16 -----
 .../output_editor/gcode_output.jinja2         |  4 ++
 .../output_editor/general_info.jinja2         | 70 +++++++++++++++++++
 .../templates/output_editor/io_output.jinja2  | 21 ++++++
 .../output_editor/main_screen.jinja2          | 37 ++++++++++
 .../output_editor/neopixel_output.jinja2      |  5 ++
 .../templates/output_editor/pwm_output.jinja2 |  4 ++
 .../output_editor/rgb_strip_output.jinja2     |  4 ++
 .../output_editor/shell_script_output.jinja2  |  4 ++
 .../output_editor/temp_alarm_output.jinja2    |  5 ++
 .../output_editor/temp_sensor_output.jinja2   |  3 +
 .../templates/output_table.jinja2             | 23 ++++++
 19 files changed, 234 insertions(+), 101 deletions(-)
 delete mode 100644 octoprint_enclosure/templates/enclosureSettings.jinja2
 create mode 100644 octoprint_enclosure/templates/enclosure_settings.jinja2
 delete mode 100644 octoprint_enclosure/templates/outputEditor.jinja2
 delete mode 100644 octoprint_enclosure/templates/outputEditorGeneral.jinja2
 delete mode 100644 octoprint_enclosure/templates/outputTable.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/gcode_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/general_info.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/io_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/main_screen.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/neopixel_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/pwm_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/rgb_strip_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/shell_script_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/temp_alarm_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_editor/temp_sensor_output.jinja2
 create mode 100644 octoprint_enclosure/templates/output_table.jinja2

diff --git a/octoprint_enclosure/__init__.py b/octoprint_enclosure/__init__.py
index af4c8bf..314a7a0 100644
--- a/octoprint_enclosure/__init__.py
+++ b/octoprint_enclosure/__init__.py
@@ -23,6 +23,10 @@ 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 
+    def get_settings_defaults(self):
+        return dict(enclosureOutputs=[])
+
     # ~~ Softwareupdate hook
     def get_update_information(self):
         return dict(enclosure=dict(displayName="Enclosure Plugin", displayVersion=self._plugin_version,
diff --git a/octoprint_enclosure/old_stuff/templates/enclosure_settings.jinja2 b/octoprint_enclosure/old_stuff/templates/enclosure_settings.jinja2
index 45a2b8a..b5eb478 100644
--- a/octoprint_enclosure/old_stuff/templates/enclosure_settings.jinja2
+++ b/octoprint_enclosure/old_stuff/templates/enclosure_settings.jinja2
@@ -11,7 +11,7 @@
     <!-- <div class="controls">
     <h5>IO <span data-bind="text: $index"> </span></h5>
   </div> -->
-    <div class="control-group">
+    <!-- <div class="control-group">
       <label class="control-label">{{ _('Output Type') }}</label>
       <div class="controls">
         <label class="radio">
@@ -55,7 +55,7 @@
       </div>
       <div class="controls">
         <label class="radio">
-          <input type="radio" value="gcode_output" data-bind="checked: output_type, attr: {name: 'output_type_' + $index() }"> {{ _('Gcode') }}
+          <input type="radio" value="gcode_output" data-bind="checked: output_type, attr: {name: 'output_type_' + $index() }"> {{ _('GCode') }}
           </span>
         </label>
       </div>
@@ -65,23 +65,23 @@
           </span>
         </label>
       </div>
-    </div>
+    </div> -->
     <!-- ko if: ($data.output_type() != "temperature_alarm")  -->
-    <div class="control-group">
+    <!-- <div class="control-group">
       <label class="control-label">{{ _('Label') }}</label>
       <div class="controls">
         <input type="text" class="input-block-level" data-bind="value: label">
         <span class="help-inline">Name displayed on Enclosure Tab</span>
       </div>
-    </div>
+    </div> -->
     <!-- /ko -->
-    <div class="control-group">
+    <!-- <div class="control-group">
       <label class="control-label">{{ _('Id') }}</label>
       <div class="controls">
         <input type="text" class="input-block-level" data-bind="value: index_id" disabled="true">
         <span class="help-inline">Id used for API control</span>
       </div>
-    </div>
+    </div> -->
     <!-- ko if: ($data.output_type() == "shell_output")  -->
     <div class="control-group">
       <label class="control-label">{{ _('Script') }}</label>
@@ -92,22 +92,22 @@
     </div>
     <!-- /ko -->
     <!-- ko ifnot: ($data.output_type() == "gcode_output" || $data.output_type() == "temperature_alarm" || $data.output_type() == "shell_output" || $data.output_type() == "ledstrip") -->
-    <div class="control-group">
-      <label class="control-label">{{ _('IO Number') }}</label>
-      <div class="controls">
-        <input type="text" class="input-block-level" data-bind="value: gpio_pin">
+    <!-- <div class="control-group"> -->
+      <!-- <label class="control-label">{{ _('IO Number') }}</label> -->
+      <!-- <div class="controls"> -->
+        <!-- <input type="text" class="input-block-level" data-bind="value: gpio_pin"> -->
         <!-- ko ifnot: ($data.output_type() == "neopixel_indirect")  -->
-        <span class="help-inline">GPIO number that will be controlled.</span>
+        <!-- <span class="help-inline">GPIO number that will be controlled.</span> -->
         <!-- /ko -->
         <!-- ko if: ($data.output_type() == "neopixel_indirect")  -->
-        <span class="help-inline">
-          <span class="label label-danger">Attention</span> Neopixel requires a microcontroller (ex: arduino) 
-            connected to I2C bus. This is the pin on the
-          microcontroller that is connected to the Neopixel.
-        </span>
+        <!-- <span class="help-inline"> -->
+          <!-- <span class="label label-danger">Attention</span> Neopixel requires a microcontroller (ex: arduino)  -->
+            <!-- connected to I2C bus. This is the pin on the -->
+          <!-- microcontroller that is connected to the Neopixel. -->
+        <!-- </span> -->
         <!-- /ko -->
-      </div>
-    </div>
+      <!-- </div> -->
+    <!-- </div> -->
     <!-- /ko -->
 
     <!-- ko if: ($data.output_type() == "pwm" ) -->
@@ -253,14 +253,14 @@
     <!-- /ko -->
 
     <!-- ko if: ($data.output_type() == "regular" || $data.output_type() == "temp_hum_control" )  -->
-    <div class="control-group">
+    <!-- <div class="control-group">
       <div class="controls">
         <label class="checkbox">
           <input type="checkbox" data-bind="checked: active_low"> {{ _('Active Low') }}
         </label>
         <span class="help-inline">Active low means that the GPIO will turn on when receive a low signal (ground) from Raspberry PI</span>
       </div>
-    </div>
+    </div> -->
     <!-- /ko -->
 
     <!-- ko if: ($data.output_type() == "regular" || $data.output_type() == "gcode_output" ||  $data.output_type() == "shell_output" ||  $data.output_type() == "ledstrip") -->
diff --git a/octoprint_enclosure/static/js/enclosure.js b/octoprint_enclosure/static/js/enclosure.js
index f9f6d9a..d34d400 100644
--- a/octoprint_enclosure/static/js/enclosure.js
+++ b/octoprint_enclosure/static/js/enclosure.js
@@ -1,8 +1,8 @@
 $(function () {
 
-  var cleanOutput = function () {
+  var cleanOutput = function (index_id) {
     return {
-      index_id: "",
+      index_id: index_id,
       label: "",
       output_type: "Regular",
       gpio: {
@@ -15,18 +15,24 @@ $(function () {
     var self = this;
 
     self.isNew = ko.observable(false);
+    self.index_id = ko.observable();
     self.label = ko.observable();
     self.output_type = ko.observable();
     self.gpio_pin = ko.observable();
+    self.enclosureOutputs = undefined;
 
     self.fromOutputData = function (data) {
 
       self.isNew(data === undefined);
 
       if (data === undefined) {
-        data = cleanOutput();
+        var arrRelaysLength = self.enclosureOutputs().length;
+        var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureOutputs()[arrRelaysLength - 1].index_id + 1;
+        data = cleanOutput(nextIndex);
       }
 
+
+      self.index_id(data.index_id);
       self.label(data.label);
       self.output_type(data.output_type);
       self.gpio_pin(data.gpio.pin_name);
@@ -46,7 +52,7 @@ $(function () {
     };
 
     // end of EnclosureOutputEditorViewModel
-  }; 
+  };
 
   function EnclosureViewModel(parameters) {
     var self = this;
@@ -57,6 +63,15 @@ $(function () {
 
     self.enclosureOutputs = ko.observableArray();
 
+    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.createOutputEditor = function (data) {
       var outputEditor = new EnclosureOutputEditorViewModel();
 
@@ -64,6 +79,7 @@ $(function () {
     };
 
     self.outputEditor = self.createOutputEditor();
+    self.outputEditor.enclosureOutputs = self.enclosureOutputs;
 
     self.showOutputEditorDialog = function (data) {
 
@@ -87,10 +103,12 @@ $(function () {
     self.addOutputs = function () {
       var output = self.outputEditor.toOutputData();
 
+      self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs.push(output);
     };
 
-    self.print = function () {
-      console.log(self);
+    self.print_data = function () {
+      console.log(self.enclosureOutputs.root);
+      // console.log(self);
     };
 
     // end of EnclosureViewModel
diff --git a/octoprint_enclosure/templates/enclosureSettings.jinja2 b/octoprint_enclosure/templates/enclosureSettings.jinja2
deleted file mode 100644
index a6d0db4..0000000
--- a/octoprint_enclosure/templates/enclosureSettings.jinja2
+++ /dev/null
@@ -1,5 +0,0 @@
-<h4>{{ _('Raspberry Pi Outputs') }}</h4>
-
-{% include "outputTable.jinja2" %}
-
-{% include "outputEditor.jinja2" %}
\ No newline at end of file
diff --git a/octoprint_enclosure/templates/enclosure_settings.jinja2 b/octoprint_enclosure/templates/enclosure_settings.jinja2
new file mode 100644
index 0000000..7db8ede
--- /dev/null
+++ b/octoprint_enclosure/templates/enclosure_settings.jinja2
@@ -0,0 +1,5 @@
+<h4>{{ _('Raspberry Pi Outputs') }}</h4>
+
+{% include "output_table.jinja2" %}
+
+{% include "output_editor/main_screen.jinja2" %}
\ No newline at end of file
diff --git a/octoprint_enclosure/templates/outputEditor.jinja2 b/octoprint_enclosure/templates/outputEditor.jinja2
deleted file mode 100644
index ca5611c..0000000
--- a/octoprint_enclosure/templates/outputEditor.jinja2
+++ /dev/null
@@ -1,44 +0,0 @@
-<div id="settings_outputs_edit_dialog" class="modal hide fade">
-    <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
-        <h3 class="modal-title">Add / Edit Output</h3>
-    </div>
-    <div class="modal-body">
-
-
-        <div class="full-sized-box">
-            <ul class="nav nav-pills">
-                <li class="active"><a href="#settings_outputs_edit_dialog_general" data-toggle="tab">{{ _('General') }}</a></li>
-                <li><a href="#settings_outputs_edit_dialog_buildvolume" data-toggle="tab">{{ _('Print bed & build volume') }}</a></li>
-                <li><a href="#settings_outputs_edit_dialog_axes" data-toggle="tab">{{ _('Axes') }}</a></li>
-                <li><a href="#settings_outputs_edit_dialog_extruder" data-toggle="tab">{{ _('Hotend & extruder') }}</a></li>
-            </ul>
-
-            <div class="tab-content">
-                <div id="settings_outputs_edit_dialog_general" class="tab-pane active">
-                    {% include "outputEditorGeneral.jinja2" %}
-                </div>
-
-                <div id="settings_outputs_edit_dialog_buildvolume" class="tab-pane">
-                    <h3 class="modal-title">test2</h3>
-                </div>
-
-                <div id="settings_outputs_edit_dialog_axes" class="tab-pane">
-                    <h3 class="modal-title">test3</h3>
-                </div>
-
-                <div id="settings_outputs_edit_dialog_extruder" class="tab-pane">
-                    <h3 class="modal-title">test4</h3>
-                </div>
-            </div>
-        </div>
-
-
-    </div>
-    <div class="modal-footer">
-        <button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
-        <button class="btn btn-primary btn-confirm">{{ _('Confirm') }}</button>
-    </div>
-</div>
-
-
diff --git a/octoprint_enclosure/templates/outputEditorGeneral.jinja2 b/octoprint_enclosure/templates/outputEditorGeneral.jinja2
deleted file mode 100644
index 64c0dbd..0000000
--- a/octoprint_enclosure/templates/outputEditorGeneral.jinja2
+++ /dev/null
@@ -1,9 +0,0 @@
-<form class="form-horizontal">
-    <div class="control-group">
-        <label class="control-label">{{ _('Name') }}</label>
-        <div class="controls">
-            <input type="text" data-bind="value: outputEditor.label">
-            <span class="help-inline">Name displayed on Enclosure Tab</span>
-        </div>
-    </div>
-</form>
diff --git a/octoprint_enclosure/templates/outputTable.jinja2 b/octoprint_enclosure/templates/outputTable.jinja2
deleted file mode 100644
index 720f363..0000000
--- a/octoprint_enclosure/templates/outputTable.jinja2
+++ /dev/null
@@ -1,16 +0,0 @@
-<table class="table table-striped table-hover table-condensed table-hover" id="settings_enclosure_outputs" style="">
-  <thead>
-    <tr>
-      <th class="settings_printerProfiles_profiles_name">Id</th>
-      <th class="settings_printerProfiles_profiles_model">Type</th>
-      <th class="settings_printerProfiles_profiles_action">GPIO</th>
-    </tr>
-  </thead>
-  <tbody >
-
-  </tbody>
-</table>
-
-<div class="control-group">
-  <button class="btn pull-right" data-bind="click: function() { $root.showOutputEditorDialog(); }">Add Outputs...</button>
-</div>
diff --git a/octoprint_enclosure/templates/output_editor/gcode_output.jinja2 b/octoprint_enclosure/templates/output_editor/gcode_output.jinja2
new file mode 100644
index 0000000..4e2fccc
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/gcode_output.jinja2
@@ -0,0 +1,4 @@
+<form class="form-horizontal">
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/general_info.jinja2 b/octoprint_enclosure/templates/output_editor/general_info.jinja2
new file mode 100644
index 0000000..4da1e95
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/general_info.jinja2
@@ -0,0 +1,70 @@
+<form class="form-horizontal">
+
+    <div class="control-group">
+        <label class="control-label">{{ _('Output ID') }}</label>
+        <div class="controls">
+          <input type="text" data-bind="value: outputEditor.index_id" readonly>
+          <span class="help-inline">Auto generated ID for Output</span>
+        </div>
+      </div>
+    <div class="control-group">
+        <label class="control-label">{{ _('Name') }}</label>
+        <div class="controls">
+            <input type="text" data-bind="value: outputEditor.label">
+            <span class="help-inline">Name displayed on Enclosure Tab</span>
+        </div>
+    </div>
+
+    <div class="control-group">
+        <label class="control-label">{{ _('Output Type') }}</label>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio"  value="regular" data-bind="checked: outputEditor.output_type"> {{ _('Regular IO') }}
+          </label>
+        </div>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio" value="pwm" data-bind="checked: outputEditor.output_type"> {{ _('PWM') }}
+          </label>
+        </div>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio" value="neopixel" data-bind="checked: outputEditor.output_type"> {{ _('NeoPixel Direct') }}
+            </span>
+          </label>
+        </div>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio" value="led_strip" data-bind="checked: outputEditor.output_type"> {{ _('RGB LED Strip') }}
+            </span>
+          </label>
+        </div>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio" value="temp_hum_control" data-bind="checked: outputEditor.output_type"> {{ _('Temperature / Humidity Control') }}
+            </span>
+          </label>
+        </div>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio" value="temperature_alarm" data-bind="checked: outputEditor.output_type"> {{ _('Temperature Alarm') }}
+            </span>
+          </label>
+        </div>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio" value="gcode_output" data-bind="checked: outputEditor.output_type"> {{ _('GCode') }}
+            </span>
+          </label>
+        </div>
+        <div class="controls">
+          <label class="radio">
+            <input type="radio" name="output_type_radio" value="shell_output" data-bind="checked: outputEditor.output_type"> {{ _('Shell Script') }}
+            </span>
+          </label>
+        </div>
+      </div>
+
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/io_output.jinja2 b/octoprint_enclosure/templates/output_editor/io_output.jinja2
new file mode 100644
index 0000000..c646d90
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/io_output.jinja2
@@ -0,0 +1,21 @@
+<form class="form-horizontal">
+
+  <div class="control-group">
+    <label class="control-label">{{ _('IO Number') }}</label>
+    <div class="controls">
+      <input type="text" data-bind="value: outputEditor.gpio_pin">
+      <span class="help-inline">GPIO number that will be controlled.</span>
+    </div>
+  </div>
+
+  <!-- <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox" data-bind="checked: active_low"> {{ _('Active Low') }}
+      </label>
+      <span class="help-inline">Active low means that the GPIO will turn on when receive a low signal (ground) from Raspberry PI</span>
+    </div>
+  </div> -->
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/main_screen.jinja2 b/octoprint_enclosure/templates/output_editor/main_screen.jinja2
new file mode 100644
index 0000000..63c8815
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/main_screen.jinja2
@@ -0,0 +1,37 @@
+<div id="settings_outputs_edit_dialog" class="modal hide fade">
+    <div class="modal-header">
+        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+        <h3 class="modal-title">Add / Edit Output</h3>
+    </div>
+    <div class="modal-body">
+
+
+        <div class="full-sized-box">
+            <ul class="nav nav-pills">
+                <li class="active"><a href="#settings_outputs_edit_dialog_general" data-toggle="tab">{{ _('General') }}</a></li>
+                 <!-- ko ifnot: (outputEditor.output_type() == "gcode_output" || outputEditor.output_type() == "temperature_alarm" || outputEditor.output_type() == "shell_output" || outputEditor.output_type() == "led_strip") -->
+                <li><a href="#settings_outputs_edit_dialog_io" data-toggle="tab">{{ _('IO Settings') }}</a></li>
+                <!-- /ko -->
+
+            </ul>
+
+            <div class="tab-content">
+                <div id="settings_outputs_edit_dialog_general" class="tab-pane active">
+                    {% include "general_info.jinja2" %}
+                </div>
+
+                <div id="settings_outputs_edit_dialog_io" class="tab-pane">
+                    {% include "io_output.jinja2" %}
+                </div>
+
+
+            </div>
+        </div>
+
+
+    </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>
+    </div>
+</div>
diff --git a/octoprint_enclosure/templates/output_editor/neopixel_output.jinja2 b/octoprint_enclosure/templates/output_editor/neopixel_output.jinja2
new file mode 100644
index 0000000..00afc80
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/neopixel_output.jinja2
@@ -0,0 +1,5 @@
+<form class="form-horizontal">
+
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/pwm_output.jinja2 b/octoprint_enclosure/templates/output_editor/pwm_output.jinja2
new file mode 100644
index 0000000..4e2fccc
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/pwm_output.jinja2
@@ -0,0 +1,4 @@
+<form class="form-horizontal">
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/rgb_strip_output.jinja2 b/octoprint_enclosure/templates/output_editor/rgb_strip_output.jinja2
new file mode 100644
index 0000000..4e2fccc
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/rgb_strip_output.jinja2
@@ -0,0 +1,4 @@
+<form class="form-horizontal">
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/shell_script_output.jinja2 b/octoprint_enclosure/templates/output_editor/shell_script_output.jinja2
new file mode 100644
index 0000000..4e2fccc
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/shell_script_output.jinja2
@@ -0,0 +1,4 @@
+<form class="form-horizontal">
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/temp_alarm_output.jinja2 b/octoprint_enclosure/templates/output_editor/temp_alarm_output.jinja2
new file mode 100644
index 0000000..00afc80
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/temp_alarm_output.jinja2
@@ -0,0 +1,5 @@
+<form class="form-horizontal">
+
+
+
+</form>
diff --git a/octoprint_enclosure/templates/output_editor/temp_sensor_output.jinja2 b/octoprint_enclosure/templates/output_editor/temp_sensor_output.jinja2
new file mode 100644
index 0000000..d5e38cf
--- /dev/null
+++ b/octoprint_enclosure/templates/output_editor/temp_sensor_output.jinja2
@@ -0,0 +1,3 @@
+<form class="form-horizontal">
+
+</form>
diff --git a/octoprint_enclosure/templates/output_table.jinja2 b/octoprint_enclosure/templates/output_table.jinja2
new file mode 100644
index 0000000..d081048
--- /dev/null
+++ b/octoprint_enclosure/templates/output_table.jinja2
@@ -0,0 +1,23 @@
+<table class="table table-striped table-hover table-condensed table-hover" id="settings_enclosure_outputs" style="">
+  <thead>
+    <tr>
+      <th class="">Id</th>
+      <th class="">Type</th>
+      <th class="">GPIO</th>
+    </tr>
+  </thead>
+  <tbody data-bind="foreach: $root.enclosureOutputs">
+    <tr data-bind="attr: {title: name}">
+      <td class="" data-bind="text: index_id"></td>
+      <td class="" data-bind="text: label"></td>
+      <td class="" data-bind="text: output_type"></td>
+    </tr>
+  </tbody>
+</table>
+
+<div class="control-group">
+  <button class="btn pull-right" data-bind="click: function() { $root.showOutputEditorDialog(); }">Add
+    Outputs...</button>
+</div>
+
+<button class="btn pull-right" data-bind="click: function() { $root.print_data(); }">Test</button>
\ No newline at end of file