Skip to content

Commit

Permalink
fix broken command widgets #330
Browse files Browse the repository at this point in the history
  • Loading branch information
@j7126
j7126 committed Jan 27, 2022
1 parent d195388 commit 5220652
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 51 deletions.
2 changes: 1 addition & 1 deletion octoprint_dashboard/static/js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
81 changes: 35 additions & 46 deletions octoprint_dashboard/templates/dashboard_settings.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand Down
10 changes: 6 additions & 4 deletions octoprint_dashboard/templates/dashboard_tab.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}" />
Expand All @@ -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 -->
Expand Down Expand Up @@ -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()}" />
Expand Down Expand Up @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 5220652

Please sign in to comment.