dynamic class, invisible to anon users

dynamic class based on state, completely invisible to non logged in
users
This commit is contained in:
ntoff 2017-03-24 16:18:17 +10:00
parent 59cc2cadd2
commit ab3d1b66d5
3 changed files with 22 additions and 11 deletions

View File

@ -12,12 +12,11 @@ class EstopPlugin(octoprint.plugin.AssetPlugin,
css=["css/estop.css"]
)
def get_template_configs(self):
return [dict(type="sidebar", name="Emergency STOP!", icon="fa fa-times")]
return [
dict(type="sidebar", name="Emergency STOP!", icon="fa fa-times", template="estop_sidebar.jinja2", styles=["display: none"], data_bind="visible: loginState.isUser")
]
__plugin_name__ = "Emergency Stop Button"
def __plugin_load__():
global __plugin_implementation__
__plugin_implementation__ = EstopPlugin()
__plugin_implementation__ = EstopPlugin()

View File

@ -5,14 +5,26 @@
$(function() {
function EstopViewModel(parameters) {
var self = this;
//see if we're logged in and the printer is operational (for en/disable of button)
self.loginState = parameters[0];
self.printerState = parameters[1];
self.enableEstop = ko.pureComputed(function() {
return self.printerState.isOperational() && self.loginState.isUser();
});
self.estopState = ko.pureComputed(function() {
return self.loginState.isUser() > 0 ? "estop_sidebar" : "estop_sidebar_disabled";
});
self.buttonText = ko.pureComputed(function() {
if (self.enableEstop()) {
return gettext("EMERGENCY STOP");
} else {
return gettext("Offline");
}
});
self.sendEstopCommand = function () {
if (self.enableEstop()) {
OctoPrint.control.sendGcode("M112");
@ -26,6 +38,6 @@ $(function() {
"loginStateViewModel",
"printerStateViewModel",
],
elements: ["#sidebar_plugin_estop"]
elements: ["#sidebar_plugin_estop_wrapper"]
});
});

View File

@ -1,4 +1,4 @@
<div class="estop_sidebar">
<button type="button" id="emergemcy_stop" title="send M112 estop gcode command" class="btn-estop" data-bind="enable: enableEstop, click: function() { sendEstopCommand() }"><i class="fa fa-times" size="+2"></i>{{ _(' EMERGENCY STOP ') }}<i class="fa fa-times" size="+2"></i></button>
<div id="sidebar_estop_background" class="estop_sidebar" data-bind="css: estopState">
<button type="button" id="emergemcy_stop" title="send M112 estop gcode command" class="btn-estop" data-bind="text: buttonText, enable: enableEstop, click: function() { sendEstopCommand() }"></button>
</div>