getting user interface started

.gitignore

@@ -1,2 +1,3 @@
 .vscode
 *.pyc
+*.egg-info*

octoprint_enclosure/__init__.py

@@ -14,12 +14,13 @@ class EnclosurePlugin(octoprint.plugin.StartupPlugin, octoprint.plugin.TemplateP
     # ~~ TemplatePlugin
     def get_template_configs(self):
         return [
-            dict(type="settings", template="enclosure_settings.jinja2", custom_bindings=True)
+            dict(type="settings", template="enclosureSettings.jinja2", custom_bindings=True)
             ]
 
     # ~~ AssetPlugin mixin
     def get_assets(self):
-        return dict(js=["js/enclosure.js", "js/bootstrap-colorpicker.min.js"],
+        return dict(
+            js=["js/enclosure.js", "js/bootstrap-colorpicker.min.js"],
             css=["css/bootstrap-colorpicker.css", "css/enclosure.css"])
 
     # ~~ Softwareupdate hook

octoprint_enclosure/old_stuff/static/css/bootstrap-colorpicker.css

@@ -226,5 +226,4 @@
 }
 .colorpicker-inline.colorpicker-visible {
   display: inline-block;
-}
-/*# sourceMappingURL=bootstrap-colorpicker.css.map */
+}

octoprint_enclosure/static/css/bootstrap-colorpicker.css

@@ -226,5 +226,4 @@
 }
 .colorpicker-inline.colorpicker-visible {
   display: inline-block;
-}
-/*# sourceMappingURL=bootstrap-colorpicker.css.map */
+}

octoprint_enclosure/static/js/enclosure.js

@@ -1,8 +1,75 @@
 $(function () {
-  function EnclosureViewModel(parameters) {
 
-    self.showAddOutputDialog = function (data) {
-      var editDialog = $("#settings_outputs_editDialog");
+  var cleanOutput = function () {
+    return {
+      index_id: "",
+      label: "",
+      output_type: "Regular",
+      gpio: {
+        pin_name: ""
+      }
+    }
+  };
+
+  function EnclosureOutputEditorViewModel(parameters) {
+    var self = this;
+
+    self.isNew = ko.observable(false);
+    self.label = ko.observable();
+    self.output_type = ko.observable();
+    self.gpio_pin = ko.observable();
+
+    self.fromOutputData = function (data) {
+
+      self.isNew(data === undefined);
+
+      if (data === undefined) {
+        data = cleanOutput();
+      }
+
+      self.label(data.label);
+      self.output_type(data.output_type);
+      self.gpio_pin(data.gpio.pin_name);
+
+    };
+
+    self.toOutputData = function () {
+      var output_data = {
+        index_id: "",
+        label: self.label(),
+        output_type: self.output_type(),
+        gpio: {
+          pin_name: self.gpio_pin()
+        }
+      }
+      return output_data
+    };
+
+    // end of EnclosureOutputEditorViewModel
+  }; 
+
+  function EnclosureViewModel(parameters) {
+    var self = this;
+
+    self.settingsViewModel = parameters[0];
+    self.connectionViewModel = parameters[1];
+    self.printerStateViewModel = parameters[2];
+
+    self.enclosureOutputs = ko.observableArray();
+
+    self.createOutputEditor = function (data) {
+      var outputEditor = new EnclosureOutputEditorViewModel();
+
+      return outputEditor;
+    };
+
+    self.outputEditor = self.createOutputEditor();
+
+    self.showOutputEditorDialog = function (data) {
+
+      self.outputEditor.fromOutputData(data);
+
+      var editDialog = $("#settings_outputs_edit_dialog");
 
       editDialog.modal({
         minHeight: function () {
@@ -14,12 +81,23 @@ $(function () {
           return -($(this).width() / 2);
         }
       });
-    }
+    };
 
 
+    self.addOutputs = function () {
+      var output = self.outputEditor.toOutputData();
+
+    };
+
+    self.print = function () {
+      console.log(self);
+    };
+
+    // end of EnclosureViewModel
   };
 
 
+
   OCTOPRINT_VIEWMODELS.push({
     construct: EnclosureViewModel,
     // ViewModels your plugin depends on, e.g. loginStateViewModel, settingsViewModel, ...
@@ -28,4 +106,4 @@ $(function () {
     elements: ["#settings_plugin_enclosure"]
   });
 
-});
+})

octoprint_enclosure/templates/enclosureSettings.jinja2

@@ -0,0 +1,5 @@
+<h4>{{ _('Raspberry Pi Outputs') }}</h4>
+
+{% include "outputTable.jinja2" %}
+
+{% include "outputEditor.jinja2" %}

octoprint_enclosure/templates/enclosure_settings.jinja2

@@ -1,5 +0,0 @@
-<h4>{{ _('Raspberry Pi Outputs Testaaa') }}</h4>
-
-{% include "outputTable.jinja2" %}
-
-{% include "outputSettingsEditor.jinja2" %}

octoprint_enclosure/templates/outputEditor.jinja2

@@ -0,0 +1,44 @@
+<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>
+
+

octoprint_enclosure/templates/outputEditorGeneral.jinja2

@@ -0,0 +1,9 @@
+<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>

octoprint_enclosure/templates/outputSettingsEditor.jinja2

@@ -1,13 +0,0 @@
-<div id="settings_outputs_editDialog" class="modal hide fade">
-    <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
-        <h3 class="modal-title"></h3>
-    </div>
-    <div class="modal-body">
-        
-    </div>
-    <div class="modal-footer">
-        <button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
-        <button class="btn btn-primary btn-confirm"><i class="fa fa-spinner fa-spin"></i> {{ _('Confirm') }}</button>
-    </div>
-</div>

octoprint_enclosure/templates/outputTable.jinja2

@@ -12,5 +12,5 @@
 </table>
 
 <div class="control-group">
-  <button class="btn pull-right" data-bind="click: function() { $root.showAddOutputDialog(); }">Add Outputs...</button>
+  <button class="btn pull-right" data-bind="click: function() { $root.showOutputEditorDialog(); }">Add Outputs...</button>
 </div>

setup.py

@@ -33,7 +33,7 @@ plugin_url = "https://github.com/vitormhenrique/OctoPrint-Enclosure"
 plugin_license = "AGPLv3"
 
 # Any additional requirements besides OctoPrint should be listed here
-plugin_requires = ["RPi.GPIO>=0.6.5","requests>=2.7"]
+plugin_requires = []
 
 additional_setup_parameters = {}