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

@@ -26,47 +26,48 @@ $(function() {
 
         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',
+                show: "true",
-              backdrop: 'static',
+                backdrop: "static",
-              keyboard: false
+                keyboard: false,
             });
             self.levelingViewModel.initView();
-        }
+        };
 
         self.showPidTuningDialog = function () {
             var dialog = $("#klipper_pid_tuning_dialog");
             dialog.modal({
-              show: 'true',
+                show: "true",
-              backdrop: 'static',
+                backdrop: "static",
-              keyboard: false
+                keyboard: false,
             });
-        }
+        };
 
         self.showOffsetDialog = function () {
             var dialog = $("#klipper_offset_dialog");
             dialog.modal({
-              show: 'true',
+                show: "true",
-              backdrop: 'static'
+                backdrop: "static",
             });
-        }
+        };
 
         self.showGraphDialog = function () {
             var dialog = $("#klipper_graph_dialog");
             dialog.modal({
-              show: 'true',
+                show: "true",
                 minHeight: "500px",
-              maxHeight: "600px"
+                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
@@ -78,78 +79,86 @@ $(function() {
 
                 var dialog = $("#klipper_macro_dialog");
                 dialog.modal({
-                 show: 'true',
+                    show: "true",
-                 backdrop: 'static'
+                    backdrop: "static",
                 });
             }
-        }
+        };
 
         self.navbarClicked = function () {
             $("#tab_plugin_klipper_main_link").find("a").click();
-        }
+        };
 
         self.onGetStatus = function () {
-           OctoPrint.control.sendGcode("Status")
+            OctoPrint.control.sendGcode("Status");
-        }
+        };
 
         self.onRestartFirmware = function () {
-           OctoPrint.control.sendGcode("FIRMWARE_RESTART")
+            OctoPrint.control.sendGcode("FIRMWARE_RESTART");
         };
 
         self.onRestartHost = function () {
-           OctoPrint.control.sendGcode("RESTART")
+            OctoPrint.control.sendGcode("RESTART");
         };
 
         self.onAfterBinding = function () {
-           self.connectionState.selectedPort(self.settings.settings.plugins.klipper.connection.port());
+            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(
-              }
+                        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>")}
+                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();
+            return self.connectionState.isOperational() && hasRight("CONFIG");
-        }
+        };
 
-        self.hasRight = function (right_role) {
+        self.hasRight = function (right_role, type) {
-           var arg = eval("access.permissions.PLUGIN_KLIPPER_"+right_role);
+            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) {
+            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();
-         $('li#settings_plugin_klipper_link a').click();
-         if(profile_type)
-         {
-             var query= "#klipper-settings a[data-profile-type='"+profile_type+"']";
                 $(query).click();
             }
         };
@@ -163,8 +172,12 @@ $(function() {
             "connectionViewModel",
             "klipperLevelingViewModel",
             "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>