0.8.0

### Changed - Improved settings layout to reduce clutter.
jneilliii · Feb 3, 2018 · 8183a86 · 8183a86
1 parent aac37de
commit 8183a86
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 130 deletions.
diff --git a/changelog.md b/changelog.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.8.0] - 2018-02-02
+### Changed
+- Improved settings layout to reduce clutter.
+
 ## [0.7.0] - 2018-02-01
 ### Fixed
 - GCode off delay.
@@ -55,6 +59,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 - Initial release.
 
+[0.8.0]: https://github.com/jneilliii/OctoPrint-Tasmota/tree/0.8.0
 [0.7.0]: https://github.com/jneilliii/OctoPrint-Tasmota/tree/0.7.0
 [0.6.0]: https://github.com/jneilliii/OctoPrint-Tasmota/tree/0.6.0
 [0.5.0]: https://github.com/jneilliii/OctoPrint-Tasmota/tree/0.5.0

diff --git a/octoprint_tasmota/__init__.py b/octoprint_tasmota/__init__.py
@@ -72,7 +72,8 @@ def on_settings_migrate(self, target, current=None):
 
 	def get_assets(self):
 		return dict(
-			js=["js/tasmota.js"]
+			js=["js/tasmota.js"],
+			css=["css/tasmota.css"]
 		)
 
 	##~~ TemplatePlugin mixin

diff --git a/octoprint_tasmota/static/css/tasmota.css b/octoprint_tasmota/static/css/tasmota.css
@@ -0,0 +1,16 @@
+#navbar_plugin_tasmota > a > i.on {
+	color: #00FF00 !important;
+}
+
+#navbar_plugin_tasmota > a > i.off {
+	color: #FF0000 !important;
+}
+
+#navbar_plugin_tasmota > a > i.unknown {
+	color: #808080 !important;
+}
+
+#TasmotaEditor table th, #TasmotaEditor table td {
+	border-top: none;
+	vertical-align: top;
+}
diff --git a/octoprint_tasmota/static/js/tasmota.js b/octoprint_tasmota/static/js/tasmota.js
@@ -15,6 +15,8 @@ $(function() {
 		self.isPrinting = ko.observable(false);
 		self.gcodeOnString = function(data){return 'M80 '+data.ip()+' '+data.idx();};
 		self.gcodeOffString = function(data){return 'M81 '+data.ip()+' '+data.idx();};
+		self.selectedPlug = ko.observable();
+		self.processing = ko.observableArray([]);
 
 		self.onBeforeBinding = function() {		
 			self.arrSmartplugs(self.settings.settings.plugins.tasmota.arrSmartplugs());
@@ -38,35 +40,46 @@ $(function() {
 		}
 
 		self.addPlug = function() {
-			self.settings.settings.plugins.tasmota.arrSmartplugs.push({'ip':ko.observable(''),
-									'idx':ko.observable('1'),
-									'displayWarning':ko.observable(true),
-									'warnPrinting':ko.observable(false),
-									'gcodeEnabled':ko.observable(false),
-									'gcodeOnDelay':ko.observable(0),
-									'gcodeOffDelay':ko.observable(0),
-									'autoConnect':ko.observable(true),
-									'autoConnectDelay':ko.observable(10.0),
-									'autoDisconnect':ko.observable(true),
-									'autoDisconnectDelay':ko.observable(0),
-									'sysCmdOn':ko.observable(false),
-									'sysRunCmdOn':ko.observable(''),
-									'sysCmdOnDelay':ko.observable(0),
-									'sysCmdOff':ko.observable(false),
-									'sysRunCmdOff':ko.observable(''),
-									'sysCmdOffDelay':ko.observable(0),
-									'currentState':ko.observable('unknown'),
-									'btnColor':ko.observable('#808080'),
-									'username':ko.observable('admin'),
-									'password':ko.observable(''),
-									'icon':ko.observable('icon-bolt'),
-									'label':ko.observable('')});
+			self.selectedPlug({'ip':ko.observable(''),
+			                   'idx':ko.observable('1'),
+			                   'displayWarning':ko.observable(true),
+			                   'warnPrinting':ko.observable(false),
+			                   'gcodeEnabled':ko.observable(false),
+			                   'gcodeOnDelay':ko.observable(0),
+			                   'gcodeOffDelay':ko.observable(0),
+			                   'autoConnect':ko.observable(true),
+			                   'autoConnectDelay':ko.observable(10.0),
+			                   'autoDisconnect':ko.observable(true),
+			                   'autoDisconnectDelay':ko.observable(0),
+			                   'sysCmdOn':ko.observable(false),
+			                   'sysRunCmdOn':ko.observable(''),
+			                   'sysCmdOnDelay':ko.observable(0),
+			                   'sysCmdOff':ko.observable(false),
+			                   'sysRunCmdOff':ko.observable(''),
+			                   'sysCmdOffDelay':ko.observable(0),
+			                   'currentState':ko.observable('unknown'),
+			                   'btnColor':ko.observable('#808080'),
+			                   'username':ko.observable('admin'),
+			                   'password':ko.observable(''),
+			                   'icon':ko.observable('icon-bolt'),
+			                   'label':ko.observable('')});
+			self.settings.settings.plugins.tasmota.arrSmartplugs.push(self.selectedPlug());
+			$("#TasmotaEditor").modal("show");
+		}
+
+		self.editPlug = function(data) {
+			self.selectedPlug(data);
+			$("#TasmotaEditor").modal("show");
 		}
 
 		self.removePlug = function(row) {
 			self.settings.settings.plugins.tasmota.arrSmartplugs.remove(row);
 		}
 
+		self.cancelClick = function(data) {
+			self.processing.remove(data.ip());
+		}
+
 		self.onDataUpdaterPluginMessage = function(plugin, data) {
             if (plugin != "tasmota") {
                 return;
@@ -86,13 +99,10 @@ $(function() {
 				plug.currentState(data.currentState)
 				switch(data.currentState) {
 					case "on":
-						plug.btnColor("#00FF00");
 						break;
 					case "off":
-						plug.btnColor("#FF0000");
 						break;
 					default:
-						plug.btnColor("#808080");
 						new PNotify({
 							title: 'Tasmota Error',
 							text: 'Status ' + plug.currentState() + ' for ' + plug.ip() + '. Double check IP Address\\Hostname in Tasmota Settings.',
@@ -102,9 +112,11 @@ $(function() {
 				}                
                 self.settings.saveData();
 			}
+			self.processing.remove(data.ip);
         };
 
 		self.toggleRelay = function(data) {
+			self.processing.push(data.ip());
 			switch(data.currentState()){
 				case "on":
 					self.turnOff(data);
@@ -146,11 +158,11 @@ $(function() {
         };
 
     	self.turnOff = function(data) {
-			var dlg_id = "#tasmota_poweroff_confirmation_dialog_" + data.ip().replace( /(:|\.|[|])/g, "\\$1") + "_" + data.idx();
-			if((data.displayWarning() || (self.isPrinting() && data.warnPrinting())) && !$(dlg_id).is(':visible')){
-				$(dlg_id).modal("show");
+			if((data.displayWarning() || (self.isPrinting() && data.warnPrinting())) && !$("#TasmotaWarning").is(':visible')){
+				self.selectedPlug(data);
+				$("#TasmotaWarning").modal("show");
 			} else {
-				$(dlg_id).modal("hide");
+				$("#TasmotaWarning").modal("hide");
 				if(data.sysCmdOff()){
 					setTimeout(function(){self.sysCommand(data.sysRunCmdOff())},data.sysCmdOffDelay()*1000);
 				}

diff --git a/octoprint_tasmota/templates/tasmota_navbar.jinja2 b/octoprint_tasmota/templates/tasmota_navbar.jinja2
@@ -1,23 +1,21 @@
 <!-- ko foreach: settings.settings.plugins.tasmota.arrSmartplugs -->
-<!-- ko if: $data.ip().length > 0 -->
-<a class="pull-right" href=#" data-bind="click: $root.toggleRelay,visible: $root.loginState.loggedIn(),style: {color: $data.btnColor()}, attr: {title: $data.label()}" style="display: none;float: left;"><i class="icon" data-bind="css: $data.icon()"></i></a>
-<div data-bind="attr: {id: 'tasmota_poweroff_confirmation_dialog_' + $data.ip() + '_' + $data.idx()}" class="modal hide fade">
+<a class="pull-right" href=#" data-bind="click: $root.toggleRelay,visible: $root.loginState.loggedIn(),attr: {title: $data.label}" style="display: none;float: left;"><i class="icon" data-bind="css: [currentState(), icon(),($root.processing().includes(ip()) ? 'icon-spin' : '')].join(' ')"></i></a>
+<!-- /ko -->
+<div id="TasmotaWarning" data-bind="with: selectedPlug" class="modal hide fade">
     <div class="modal-header">
         <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
         <h3>OctoPrint-Tasmota</h3>
     </div>
     <div class="modal-body">
         <p>
-            <!--ko text: $data.ip()--><!--/ko--> is currently <!--ko text: $data.currentState()--><!--/ko-->. 
+            <!--ko text: ip()--><!--/ko--> is currently <!--ko text: currentState()--><!--/ko-->. 
         </p>
         <p>
             {{ _('Are you sure you want to proceed?') }}
         </p>
     </div>
     <div class="modal-footer">
-        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
+        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true" data-bind="click: $root.cancelClick">{{ _('Cancel') }}</a>
         <a href="#" class="btn btn-danger" data-bind="click: $root.turnOff">{{ _('Proceed') }}</a>
     </div>
 </div>
-<!-- /ko -->
-<!-- /ko -->