Update2

Prettified
hide buttons if someone has no permissions

octoprint_klipper/static/css/klipper.css

@@ -57,6 +57,24 @@ ul#klipper-settings {
    font-family: monospace;
 }
 
+#tab_plugin_klipper_main .row-fluid {
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+}
+
+#tab_plugin_klipper_main .span8 {
+   min-width: 50%;
+   width: auto;
+   flex-grow: 6;
+}
+
+#tab_plugin_klipper_main .span4 {
+   flex-grow: 1;
+   flex-shrink: 1;
+   width: auto;
+}
+
 #settings_plugin_klipper {
    height: 100%;
 }

octoprint_klipper/static/js/klipper.js

@@ -4,16 +4,16 @@
 // it under the terms of the GNU Affero General Public License as
 // published by the Free Software Foundation, either version 3 of the
 // License, or (at your option) any later version.
- 
+
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU Affero General Public License for more details.
- 
+
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-$(function() {
+$(function () {
     function KlipperViewModel(parameters) {
         var self = this;
 
@@ -23,148 +23,161 @@ $(function() {
         self.levelingViewModel = parameters[3];
         self.paramMacroViewModel = parameters[4];
         self.access = parameters[5];
-        
+
         self.shortStatus = ko.observable();
         self.logMessages = ko.observableArray();
-        self.hasRight = ko.observable(false);
-        
-        self.showLevelingDialog = function() {
-           var dialog = $("#klipper_leveling_dialog");
-           dialog.modal({
-              show: 'true',
-              backdrop: 'static',
-              keyboard: false
-           });
-           self.levelingViewModel.initView();
-        }
-        
-        self.showPidTuningDialog = function() {
-           var dialog = $("#klipper_pid_tuning_dialog");
-           dialog.modal({
-              show: 'true',
-              backdrop: 'static',
-              keyboard: false
-           });
-        }
-        
-        self.showOffsetDialog = function() {
-           var dialog = $("#klipper_offset_dialog");
-           dialog.modal({
-              show: 'true',
-              backdrop: 'static'
-           });
-        }
-        
-        self.showGraphDialog = function() {
-           var dialog = $("#klipper_graph_dialog");
-           dialog.modal({
-              show: 'true',
-              minHeight: "500px",
-              maxHeight: "600px"
-           });
-        }
-        
-        self.executeMacro = function(macro) {
-           var paramObjRegex = /{(.*?)}/g;
-           
-           if (macro.macro().match(paramObjRegex) == null) {
-              OctoPrint.control.sendGcode(
-                 // Use .split to create an array of strings which is sent to 
-                 // OctoPrint.control.sendGcode instead of a single string.
-                 macro.macro().split(/\r\n|\r|\n/)
-              );
-           } else {
-              self.paramMacroViewModel.process(macro);
-              
-              var dialog = $("#klipper_macro_dialog");
-              dialog.modal({
-                 show: 'true',
-                 backdrop: 'static'
-              });
-           }
-        }
 
-        self.navbarClicked = function() {
+        self.showLevelingDialog = function () {
+            var dialog = $("#klipper_leveling_dialog");
+            dialog.modal({
+                show: "true",
+                backdrop: "static",
+                keyboard: false,
+            });
+            self.levelingViewModel.initView();
+        };
+
+        self.showPidTuningDialog = function () {
+            var dialog = $("#klipper_pid_tuning_dialog");
+            dialog.modal({
+                show: "true",
+                backdrop: "static",
+                keyboard: false,
+            });
+        };
+
+        self.showOffsetDialog = function () {
+            var dialog = $("#klipper_offset_dialog");
+            dialog.modal({
+                show: "true",
+                backdrop: "static",
+            });
+        };
+
+        self.showGraphDialog = function () {
+            var dialog = $("#klipper_graph_dialog");
+            dialog.modal({
+                show: "true",
+                minHeight: "500px",
+                maxHeight: "600px",
+            });
+        };
+
+        self.executeMacro = function (macro) {
+            var paramObjRegex = /{(.*?)}/g;
+
+            if (!this.hasRight("MACROS")) return;
+
+            if (macro.macro().match(paramObjRegex) == null) {
+                OctoPrint.control.sendGcode(
+                    // Use .split to create an array of strings which is sent to
+                    // OctoPrint.control.sendGcode instead of a single string.
+                    macro.macro().split(/\r\n|\r|\n/)
+                );
+            } else {
+                self.paramMacroViewModel.process(macro);
+
+                var dialog = $("#klipper_macro_dialog");
+                dialog.modal({
+                    show: "true",
+                    backdrop: "static",
+                });
+            }
+        };
+
+        self.navbarClicked = function () {
             $("#tab_plugin_klipper_main_link").find("a").click();
-        }
-
-        self.onGetStatus = function() {
-           OctoPrint.control.sendGcode("Status")
-        }
-        
-        self.onRestartFirmware = function() {
-           OctoPrint.control.sendGcode("FIRMWARE_RESTART")
         };
-        
-        self.onRestartHost = function() {
-           OctoPrint.control.sendGcode("RESTART")
-        };
-        
-        self.onAfterBinding = function() {
-           self.connectionState.selectedPort(self.settings.settings.plugins.klipper.connection.port());
-        }
-        
-        self.onDataUpdaterPluginMessage = function(plugin, message) {
-           if(plugin == "klipper") {
-              if(message["type"] == "status") {
-                 self.shortStatus(message["payload"]);
-              } else {
-                 self.logMessage(message["time"], message["subtype"], message["payload"]);
-              }
-           }
-        }
 
-        self.logMessage = function(timestamp, type, message) {
+        self.onGetStatus = function () {
-           self.logMessages.push({
+            OctoPrint.control.sendGcode("Status");
-              time: timestamp,
-              type: type,
-              msg: message.replace(/\n/gi, "<br>")}
-           );
-        }
-        
-        self.onClearLog = function() {
-           self.logMessages.removeAll();
         };
-        
-        self.isActive = function() {
-           return self.connectionState.isOperational() && self.loginState.hasPermission(self.access.permissions.PLUGIN_KLIPPER_CONFIG); //was: && self.loginState.isUser();
-        }
 
-        self.hasRight = function (right_role) {
+        self.onRestartFirmware = function () {
-           var arg = eval("access.permissions.PLUGIN_KLIPPER_"+right_role);
+            OctoPrint.control.sendGcode("FIRMWARE_RESTART");
-           return self.loginState.hasPermissionKo(arg);
+        };
-        }
+
+        self.onRestartHost = function () {
+            OctoPrint.control.sendGcode("RESTART");
+        };
+
+        self.onAfterBinding = function () {
+            self.connectionState.selectedPort(
+                self.settings.settings.plugins.klipper.connection.port()
+            );
+        };
+
+        self.onDataUpdaterPluginMessage = function (plugin, message) {
+            if (plugin == "klipper") {
+                if (message["type"] == "status") {
+                    self.shortStatus(message["payload"]);
+                } else {
+                    self.logMessage(
+                        message["time"],
+                        message["subtype"],
+                        message["payload"]
+                    );
+                }
+            }
+        };
+
+        self.logMessage = function (timestamp, type, message) {
+            self.logMessages.push({
+                time: timestamp,
+                type: type,
+                msg: message.replace(/\n/gi, "<br>"),
+            });
+        };
+
+        self.onClearLog = function () {
+            self.logMessages.removeAll();
+        };
+
+        self.isActive = function () {
+            return self.connectionState.isOperational() && hasRight("CONFIG");
+        };
+
+        self.hasRight = function (right_role, type) {
+            var arg = eval(
+				"self.access.permissions.PLUGIN_KLIPPER_" + right_role		
+            );
+
+            if (type == "Ko") {
+                return self.loginState.hasPermissionKo(arg);
+			}
+			return self.loginState.hasPermission(arg);
+        };
 
         // OctoKlipper settings link
-        self.openOctoKlipperSettings = function(profile_type) {
+        self.openOctoKlipperSettings = function (profile_type) {
+            if (!this.hasRight("CONFIG")) return;
 
-         if (
+            $("a#navbar_show_settings").click();
-            !self.loginState.hasPermission(
+            $("li#settings_plugin_klipper_link a").click();
-                self.access.permissions.PLUGIN_KLIPPER_CONFIG
+            if (profile_type) {
-            )
+                var query =
-         )
+                    "#klipper-settings a[data-profile-type='" +
-            return;
+                    profile_type +
-
+                    "']";
-         $('a#navbar_show_settings').click();
+                $(query).click();
-         $('li#settings_plugin_klipper_link a').click();
+            }
-         if(profile_type)
-         {
-             var query= "#klipper-settings a[data-profile-type='"+profile_type+"']";
-             $(query).click();
-         }
         };
     }
 
     OCTOPRINT_VIEWMODELS.push({
         construct: KlipperViewModel,
         dependencies: [
-           "settingsViewModel",
+            "settingsViewModel",
-           "loginStateViewModel",
+            "loginStateViewModel",
-           "connectionViewModel",
+            "connectionViewModel",
-           "klipperLevelingViewModel",
+            "klipperLevelingViewModel",
-           "klipperMacroDialogViewModel",
+            "klipperMacroDialogViewModel",
-           "accessViewModel"
+            "accessViewModel",
+        ],
+        elements: [
+            "#tab_plugin_klipper_main",
+            "#sidebar_plugin_klipper",
+            "#navbar_plugin_klipper",
         ],
-        elements: ["#tab_plugin_klipper_main", "#sidebar_plugin_klipper", "#navbar_plugin_klipper"]
     });
 });

octoprint_klipper/templates/klipper_sidebar.jinja2

@@ -5,7 +5,7 @@
       <button class="btn btn-block" data-bind="click: connectionState.connect, text: connectionState.buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
    </div>
 </div>
-<div class="control-group">
+<div class="control-group" data-bind="visible: hasRight('MACRO', 'Ko')">
    <div class="controls">
       <button class="btn btn-block" data-bind="visible: loginState.hasPermissionKo(access.permissions.PLUGIN_KLIPPER_CONFIG), click: function() {openOctoKlipperSettings('klipper-config');}">{{ _('Open Klipper config') }}</button>
    </div>