UI styling, added JSON editor to Rule-specific processing settings, f…

…ix for notification payload evaluation
mercure-imaging · Mar 28, 2024 · 0e8f7cb · 0e8f7cb
1 parent 18feef2
commit 0e8f7cb
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 29 deletions.
diff --git a/webinterface/rules.py b/webinterface/rules.py
@@ -187,6 +187,7 @@ async def rules_edit_post(request) -> Response:
 
     notification_payload = form.get("notification_payload", "")
     notification_payload = notification_payload.strip().lstrip("{").rstrip("}")
+
     new_rule: Rule = Rule(
         rule=form.get("rule", "False"),
         target=form.get("target", ""),

diff --git a/webinterface/statics/css/custom.css b/webinterface/statics/css/custom.css
@@ -488,3 +488,64 @@ table.dataTable tbody tr.selected th, table.dataTable tbody tr.selected td {
 .monofont {
   font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
 }
+
+.jse-menu, .jse-contextmenu, .jse-absolute-popup-content, .jse-open-dropdown, .jse-dropdown-items, .jse-context-menu-button {
+  background-color: #2f2f2f !important;
+}
+
+.jse-context-menu-pointer {
+  /*background-color: #4d4d4d !important;  */
+}
+
+.jse-context-menu-pointer.jse-selected {
+  background-color: #3273dc !important; 
+}
+
+.jse-context-menu-pointer:hover {
+  background-color: #2f2f2f !important;    
+}
+
+.jse-insert-area {
+  /*outline-color: #0a0a0a !important;*/
+}
+
+.jse-dropdown-items {
+  border: 1px solid #7a7a7a !important;
+}
+
+.jse-context-menu-button:hover, .jse-dropdown-button:hover, .jse-dropdown-item:hover {
+  background-color: #7a7a7a !important;
+}
+
+.jse-open-dropdown:hover {
+  background-color: #7a7a7a !important;
+}
+
+.jse-message.jse-success {
+  background-color: #22c65b !important;
+}
+
+.jse-message.jse-error {
+  background-color: #ff3860 !important;  
+}
+
+.cm-gutters {
+  background-color: #f5f5f5 !important;
+}
+
+body {
+  --jse-font-size: 16px;
+  --jse-font-size-mono: 16px;
+}
+
+.cm-line::before {
+  color: #cdcdcd !important;
+}
+
+.cm-activeLine {
+  background-color: rgba(0, 0, 0, 0.0) !important;
+}
+
+.cm-activeLineGutter {
+  background-color: rgba(0, 0, 0, 0.0) !important;
+}
diff --git a/webinterface/templates/base.html b/webinterface/templates/base.html
@@ -115,6 +115,7 @@
 
   <script type="module">
     import { JSONEditor } from "{{ url_for('static', path='/js/svelte-jsoneditor.js') }}"
+
     $(document).ready(function () {
       // Check for click events on the navbar burger icon
       $(".navbar-burger").click(function () {
@@ -176,17 +177,17 @@
                           return;
                       }
                       if (!updatedContent.text) {
-                       setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 100);
+                       setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 10);
                       }
                       el.val(updatedContent.text);
                   },
                   onFocus: (content) => {
                     if (!$(new_div).find(".cm-line").text()) 
-                      setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 100);
+                      setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 10);
                   },
                   onBlur: (content) => {
                     if (!$(new_div).find(".cm-line").text()) 
-                      setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 100);
+                      setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 10);
                   }
                   }});
           el.on("input", (evt)=> {
@@ -201,14 +202,11 @@
           // } else {
           ed.set({"text":el.val()})
           if (!el.val()) {
-            setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 500);
-          }
+            setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 1000);
+          }          
           // }
-        }))
-
+        }))        
       });        
-
-
 </script>
 </body>
 </html>
diff --git a/webinterface/templates/configuration_edit.html b/webinterface/templates/configuration_edit.html
@@ -6,17 +6,14 @@
 <main role="main">
     <div class="container">
         <h1 class="title">Configuration</h1>
-        <form method="post" onsubmit="return validate()">
-
+        <form method="post" onsubmit="return validate()">       
             <div class="columns">
                 <div class="column is-full">
-                    <div id="jsoneditor" style="    --jse-theme-color: #383e42; --jse-theme-color-highlight: #687177;"></div>
-                            <textarea class="textarea textarea_scroll hidden" style="display: none;" cols="50" rows="1" wrap="off" id="edit_field" name="editor"
+                    <div id="jsoneditor" style="--jse-theme-color: #2f2f2f; --jse-theme-color-highlight: #687177;"></div>
+                    <textarea class="textarea textarea_scroll hidden" style="display: none;" cols="50" rows="1" wrap="off" id="edit_field" name="editor"
                                 style="font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;"
                                 spellcheck="false"></textarea>
-                        </div>
-                    </div>
-                </div>
+                </div>        
             </div>
             <div class="notification is-danger" id="erroralert" style="display: none;">
                 <i class="fas fa-bug"></i>&nbsp;&nbsp;Error in configuration detected. Please check input for correct
@@ -32,9 +29,8 @@ <h1 class="title">Configuration</h1>
                     </div>
                 </div>
             </div>
-    </div>
-    {% endif %}
-    </form>
+            {% endif %}
+        </form>
     </div>
 </main>
 <script>
@@ -62,7 +58,7 @@ <h1 class="title">Configuration</h1>
     const editor = new JSONEditor({
       target: document.getElementById('jsoneditor'),
       props: {
-        mode: "tree",
+        mode: "text",
         // mainMenuBar: false,
         navigationBar: false,
         content,
@@ -72,11 +68,11 @@ <h1 class="title">Configuration</h1>
         },
         onChangeMode: (mode) => {
             if (mode == 'tree') {
-                window.editor.expand((els)=>["rules","modules", "targets"].indexOf(els[0])==-1) 
+                window.editor.expand((els)=>["rules", "modules", "targets"].indexOf(els[0])==-1) 
             } 
         },
         onRenderMenu(items, context) {
-            items = items.filter((i)=>["jse-sort", "jse-transform","jse-collapse-all"].indexOf(i.className) == -1 && i.text!="table");
+            items = items.filter((i)=>["jse-sort", "jse-transform", "jse-collapse-all"].indexOf(i.className) == -1 && i.text!="table");
             items[1].className += " jse-last";
             return items;
         }
@@ -87,4 +83,4 @@ <h1 class="title">Configuration</h1>
     // use methods get, set, update, and onChange to get data in or out of the editor.
     // Use updateProps to update properties.
   </script>
-{% endblock %}
+{% endblock %}
diff --git a/webinterface/templates/rules_edit.html b/webinterface/templates/rules_edit.html
@@ -273,6 +273,7 @@ <h1 class="title">Edit Rule - {{rule}}</h1>
                         <div class="control">
                             <textarea name="processing_settings" id="processing_settings" class="textarea monofont"
                                 autocomplete='off' rows="10"
+                                data-json
                                 placeholder="Rule-specific module settings">{{processing_settings}}</textarea>
                         </div>
                     </div>
@@ -336,9 +337,7 @@ <h1 class="title">Edit Rule - {{rule}}</h1>
                             <textarea name="notification_payload" id="notification_payload" class="textarea textarea_scroll"
                                 autocomplete="off" rows="6"
                                 data-json
-                                placeholder="JSON Payload for REST call">{
-{{rules[rule]['notification_payload']}} 
-}</textarea>
+                                placeholder="JSON Payload for REST call">{{rules[rule]['notification_payload']}}</textarea>
                         </div>
                     </div>                    
                     <div class="field is-grouped is-grouped-right">
@@ -517,14 +516,16 @@ <h1 class="title">Edit Rule - {{rule}}</h1>
     function validate() {
         var field = "";
         try {
+            field = "Processing > Settings";
             if ($('#processing_settings').val() == "") {
                 $('#processing_settings').val("{}");
             }
-            field = "Processing > Settings";
             JSON.parse($('#processing_settings').val());
             field = "Notification > Payload";
-            str = $('#notification_payload').val();
-            JSON.parse(str);
+            if ($('#notification_payload').val() == "") {
+                $('#notification_payload').val("{}");
+            }
+            JSON.parse($('#notification_payload').val());
         } catch (e) {
             $('#erroralert').html('<i class="fas fa-bug"></i>&nbsp;&nbsp;Invalid content in field "' + field + '". Please check for correct syntax.');
             $('#erroralert').show();