From 52206527da6544d4c54fc0d720dbb3376e98fecb Mon Sep 17 00:00:00 2001
From: Jefferey Neuffer <jeffereyneuffer@gmail.com>
Date: Thu, 27 Jan 2022 22:41:36 +1000
Subject: [PATCH] fix broken command widgets #330

---
 octoprint_dashboard/static/js/dashboard.js    |  2 +-
 .../templates/dashboard_settings.jinja2       | 81 ++++++++-----------
 .../templates/dashboard_tab.jinja2            | 10 ++-
 3 files changed, 42 insertions(+), 51 deletions(-)

diff --git a/octoprint_dashboard/static/js/dashboard.js b/octoprint_dashboard/static/js/dashboard.js
index 14039a5..f04571e 100644
--- a/octoprint_dashboard/static/js/dashboard.js
+++ b/octoprint_dashboard/static/js/dashboard.js
@@ -919,7 +919,7 @@ $(function () {
 
         self.addCommandWidget = function () {
             console.log("Adding command Widget");
-            self.dashboardSettings.commandWidgetArray.push({ icon: ko.observable('command-icon.png'), name: ko.observable(''), command: ko.observable(''), enabled: ko.observable(false), interval: ko.observable(10), type: "text" });
+            self.dashboardSettings.commandWidgetArray.push({ icon: ko.observable('command-icon.png'), name: ko.observable(''), command: ko.observable(''), enabled: ko.observable(false), interval: ko.observable(10), type: ko.observable("text") });
         };
 
         self.removeCommandWidget = function (command) {
diff --git a/octoprint_dashboard/templates/dashboard_settings.jinja2 b/octoprint_dashboard/templates/dashboard_settings.jinja2
index adb1962..fac0317 100644
--- a/octoprint_dashboard/templates/dashboard_settings.jinja2
+++ b/octoprint_dashboard/templates/dashboard_settings.jinja2
@@ -183,13 +183,13 @@
                 <span class="dash-info-followup"
                     data-bind="text: gettext('The command(s) will be executed with the privileges of the octoprint server, so think twice...')"></span><br />
                 <div class="row-fluid" data-bind="visible: admin">
-                    <div class="span3">
+                    <div class="span1">
                         <h5>{{ _('Icon') }}</h5>
                     </div>
-                    <div class="span5">
+                    <div class="span7">
                         <h5>{{ _('Name') }}</h5>
                     </div>
-                    <div class="span2">
+                    <div class="span2" style="text-align: center;">
                         <h5>{{ _('Enable') }}</h5>
                     </div>
                     <div class="span2">
@@ -199,23 +199,13 @@
                 <div
                     data-bind="foreach: settingsViewModel.settings.plugins.dashboard.commandWidgetArray, visible: admin">
                     <div class="row-fluid" style="margin-bottom: 5px">
-                        <div class="span3">
-                            <select class="input-medium" data-bind="value: icon" style="width: 100%;">
-                                <option value="command-icon.png">{{ _('Command') }}</option>
-                                <option value="sensor-icon.png">{{ _('Sensor') }}</option>
-                                <option value="ambient-sensor-icon.png">{{ _('Ambient') }}</option>
-                                <option value="light-icon.png">{{ _('Light') }}</option>
-                                <option value="flash-icon.png">{{ _('Power') }}</option>
-                                <option value="cpu-icon.png">{{ _('CPU') }}</option>
-                                <option value="ram-icon.png">{{ _('Memory') }}</option>
-                                <option value="hdd-icon.png">{{ _('Storage') }}</option>
-                                <option value="filament-icon.png">{{ _('Filament') }}</option>
-                            </select>
+                        <div class="span1">
+                            <img style="transform: scale(0.8);" data-bind="attr: {src: 'plugin/dashboard/static/img/' + icon()}" />
                         </div>
-                        <div class="span5">
-                            <input type="text" class="span12" data-bind="value: name">
+                        <div class="span7">
+                            <input type="text" class="span12" data-bind="value: name" readonly>
                         </div>
-                        <div class="span2">
+                        <div class="span2" style="text-align: center;">
                             <input type="checkbox" title="{{ _('Widget options') }}" data-bind="checked: enabled">
                         </div>
                         <div class="span1">
@@ -233,14 +223,14 @@
                             tabindex="-1" role="dialog" aria-hidden="true">
                             <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                                <h3>{{ _('Edit Command Widget') }} "<span data-bind="text: name"></span>"</h3>
+                                <h3>{{ _('Edit Command Widget') }}</h3>
                             </div>
                             <div class="modal-body">
                                 <div class="row-fluid">
                                     <div class="span2">
                                         <label>{{ _('Icon') }}</label>
                                     </div>
-                                    <div class="span10">
+                                    <div class="span9">
                                         <select class="input-medium" data-bind="value: icon" style="width: 100%;">
                                             <option value="command-icon.png">{{ _('Command') }}</option>
                                             <option value="sensor-icon.png">{{ _('Sensor') }}</option>
@@ -253,6 +243,9 @@
                                             <option value="filament-icon.png">{{ _('Filament') }}</option>
                                         </select>
                                     </div>
+                                    <div class="span1">
+                                        <img style="transform: scale(0.8);" data-bind="attr: {src: '/plugin/dashboard/static/img/' + icon()}" />
+                                    </div>
                                 </div>
                                 <div class="row-fluid">
                                     <div class="span2">
@@ -279,52 +272,48 @@
                                 </div>
                                 <div class="row-fluid">
                                     <div class="span2">
-                                        <label>{{ _('Enable Command') }}</label>
+                                        <label>{{ _('Type') }}</label>
                                     </div>
                                     <div class="span10">
-                                        <input type="checkbox" title="{{ _('Enable Command Widget') }}"
-                                            data-bind="checked: enabled">
+                                        <select class="input-medium" data-bind="value: type" style="width: 100%;">
+                                            <option value="3/4">Temp</option>
+                                            <option value="progress">Progress</option>
+                                            <option value="text">Text</option>
+                                        </select>
                                     </div>
                                 </div>
                                 <div class="row-fluid">
-                                    <div class="span2">
+                                    <div class="span10">
                                         <label>{{ _('Command Interval (Seconds)') }}</label>
                                     </div>
-                                    <div class="span10">
+                                    <div class="span2">
                                         <input type="number" min="0" max="3600" step="0.1" data-bind="value: interval"
                                             class="span9" style="width: 100%;">
                                     </div>
                                 </div>
-                                <div class="row-fluid">
-                                    <div class="span2">
-                                        <label>{{ _('Type') }}</label>
-                                    </div>
-                                    <div class="span10">
-                                        <select class="input-medium" data-bind="value: type" style="width: 100%;">
-                                            <option value="3/4">Temp</option>
-                                            <option value="progress">Progress</option>
-                                            <option value="text">Text</option>
-                                        </select>
-                                    </div>
-                                </div>
                             </div>
 
                             <div class="modal-footer">
-                                <button title="{{ _('Remove Command Widget') }}" class="btn btn-danger"
-                                    data-bind="click: $parent.removeCommandWidget" data-dismiss="modal">
-                                    <i class="fa fa-trash-o"></i> {{ _('Remove Command Widget') }}</button>
-                                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _('Done')
-                                    }}</button>
+                                <button title="{{ _('Enable') }}" class="btn btn-success" data-bind="click: function() {enabled(true)}, hidden: enabled">
+                                    {{ _('Enable') }}
+                                </button>
+                                <button title="{{ _('Disable') }}" class="btn btn-warning" data-bind="click: function() {enabled(false)}, visible: enabled">
+                                    {{ _('Disable') }}
+                                </button>
+                                <button title="{{ _('Remove Command Widget') }}" class="btn btn-danger" data-bind="click: $parent.removeCommandWidget" data-dismiss="modal">
+                                    <i class="fa fa-trash-o"></i> {{ _('Remove Command Widget') }}
+                                </button>
+                                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
+                                    {{ _('Done')}}
+                                </button>
                             </div>
                         </div>
 
                     </div>
                 </div>
                 <div class="row-fluid">
-                    <div class="offset10 span2">
-                        <button title="{{ _('Add Command Widget') }}" class="btn btn-primary"
-                            data-bind="click: addCommandWidget, visible: admin"><i class="fa fa-plus"></i></button>
-                    </div>
+                        <button title="{{ _('Add Command Widget') }}" class="btn btn-primary" style="width: 100%"
+                            data-bind="click: addCommandWidget, visible: admin"><i class="fa fa-plus"></i> {{ _('New Command Widget') }}</button>
                 </div>
             </div>
         </div>
diff --git a/octoprint_dashboard/templates/dashboard_tab.jinja2 b/octoprint_dashboard/templates/dashboard_tab.jinja2
index 56c38e2..613787c 100644
--- a/octoprint_dashboard/templates/dashboard_tab.jinja2
+++ b/octoprint_dashboard/templates/dashboard_tab.jinja2
@@ -277,7 +277,7 @@
 
       <!-- ko if: dashboardSettings.showCommandWidgets -->
       <!-- ko foreach: commandWidgetArray -->
-      <!-- ko if: enabled && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.THREE_QUARTER -->
+      <!-- ko if: enabled() && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.THREE_QUARTER -->
         <div class="dashboardGridItem dashboard_threeQuarterGauge"
           data-bind="css: $parent.gaugesCentreInGrid('cmd', $index()), visible: $parent.fsCommandWidgets() && (!$parent.dashboardSettings.printingOnly_TempGauges() || $parent.printerStateModel.isPrinting())">
           <img class="dashboardIcon" data-bind="attr: {'src': 'plugin/dashboard/static/img/' + icon(), 'title': name}" />
@@ -298,6 +298,7 @@
 
             <text class="dashboardGauge" font-size="30" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
               fill="#08c" data-bind="html: Math.round($parent.cmdResults()[$index()]) + '°C'"></text>
+            <text class="dashboardGauge" font-size="20" x="50%" y="85%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="text: name"></text>
           </svg>
         </div>
       <!-- /ko -->
@@ -337,7 +338,7 @@
       <!-- Text Command Widgets -->
       <!-- ko if: dashboardSettings.showCommandWidgets -->
       <!-- ko foreach: commandWidgetArray -->
-        <!-- ko if: enabled && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.TEXT -->
+        <!-- ko if: enabled() && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.TEXT -->
         <div class="dashboardGridItem command"
           data-bind="visible: (!$parent.dashboardSettings.printingOnly_CommandWidgets() || $parent.printerStateModel.isPrinting()) && $parent.fsCommandWidgets()">
           <img class="dashboardIcon" data-bind="attr: {src: 'plugin/dashboard/static/img/' + icon(), title: name()}" />
@@ -443,9 +444,10 @@
               </svg>
             </div>
           
+          <!-- Progress Command Widgets -->
           <!-- ko if: dashboardSettings.showCommandWidgets -->
           <!-- ko foreach: commandWidgetArray -->
-            <!-- ko if: enabled && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.PROGRESS -->
+            <!-- ko if: enabled() && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.PROGRESS -->
               <div class="dashboardProgressContainer dashboardProgressInline" data-bind="visible: (!$parent.dashboardSettings.printingOnly_ProgressGauges() || $parent.printerStateModel.isPrinting())">
                 <svg class="current" width="120" height="120" viewBox="0 0 120 120">
                   <circle cx="60" cy="60" r="54" fill="none" stroke="#ccc" stroke-width="12" />
@@ -519,7 +521,7 @@
     <!-- Progress Bars -->
     <!-- ko if: dashboardSettings.showCommandWidgets -->
     <!-- ko foreach: commandWidgetArray -->
-      <!-- ko if: enabled && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.PROGRESS -->
+      <!-- ko if: enabled() && $parent.castToWidgetTypes(type()) === $parent.widgetTypes.PROGRESS -->
       <div class="dashboardGridItem dashboardProgressBar" style="text-align:center;" data-bind="visible: $parent.dashboardSettings.gaugetype() == 'bar' && (!$parent.dashboardSettings.printingOnly_ProgressGauges() || $parent.printerStateModel.isPrinting())">
         <span title="{{_('Cmd Widget Progress')}}" data-bind="text: name()"></span>
         <span data-bind="attr: { title: ' ' + gettext('progress')}, html: ' ' + $parent.formatPercentage($parent.cmdResults()[$index()] * 100.0)"></span>