Grid layout designer.

ironmansoftware · May 20, 2019 · 58eb48b · 58eb48b
1 parent 8ca07d1
commit 58eb48b
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 16 deletions.
diff --git a/src/UniversalDashboard.Materialize/Components/ud-designer.jsx b/src/UniversalDashboard.Materialize/Components/ud-designer.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import UdIcon from './ud-icon.jsx';
 import UdTerminal from './ud-terminal';
 import M from 'materialize-css';
+import * as clipboard from "clipboard-polyfill"
 
 export default class UDDesigner extends React.Component {
 
@@ -15,12 +16,16 @@ export default class UDDesigner extends React.Component {
 
     componentDidMount() {
         this.modalInstance = M.Modal.init(this.modal);
+
+        var elems = document.querySelectorAll('.fixed-action-btn');
+        this.fabInstance = M.FloatingActionButton.init(elems);
     }
 
     componentWillUnmount() {
         this.modalInstance.destroy();
+        this.fabInstance.destroy();
     }
-
+    
     toggleTerminal() {
         if (this.state.open) {
             this.modalInstance.close();
@@ -29,17 +34,52 @@ export default class UDDesigner extends React.Component {
         }
     }
 
+    getFromLS(key) {
+        let ls = {};
+        if (global.localStorage) {
+            try {
+            ls = JSON.parse(global.localStorage.getItem("rgl-8")) || {};
+            } catch (e) {
+            /*Ignore*/
+            }
+        }
+        return ls[key];
+    }
+
+    copyLayout() {
+
+        var layout = this.getFromLS("uddesign");
+
+        if (layout == null || layout.lg == null) {
+            M.toast({html: "No layout saved. Make sure you are using New-UDGridLayout."});
+        } 
+
+        layout.lg.forEach(x => {
+            x.static = true
+        });
+
+        var stringLayout = JSON.stringify(layout);
+
+        clipboard.writeText(stringLayout).then(x => {
+            M.toast({ html: "Layout copied to clipboard!"});
+        });
+    }
+
     render() {
         return (
             [
                 <div className="fixed-action-btn">
-                    <a className="btn-floating btn-large red" onClick={this.toggleTerminal.bind(this)} id='btnDesignTerminal'>
-                        <i className="large fa fa-terminal"></i>
+                    <a className="btn-floating btn-large red">
+                        <UdIcon icon="Edit" />
                     </a>
+                    <ul>
+                        <li><a className="btn-floating green" title="Copy Layout" onClick={this.copyLayout.bind(this)}><UdIcon icon="Copy" /></a></li>                        
+                        <li><a className="btn-floating blue" onClick={this.toggleTerminal.bind(this)} id='btnDesignTerminal' title="Open Design Terminal"><UdIcon icon="Terminal" /></a></li>                        
+                    </ul>
                 </div>,
                 <div ref={modal => this.modal = modal} className="modal bottom-sheet">
                     <div className="modal-content">
-                        <h4><UdIcon icon={'terminal'}/>  Design Terminal</h4>
+                        <h4><UdIcon icon={'Terminal'}/>  Design Terminal</h4>
                         <UdTerminal />
                     </div>
                 </div>

diff --git a/src/UniversalDashboard.Materialize/package-lock.json b/src/UniversalDashboard.Materialize/package-lock.json
diff --git a/src/UniversalDashboard.Materialize/package.json b/src/UniversalDashboard.Materialize/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "chart.js": "2.7.3",
     "classnames": "^2.2.6",
+    "clipboard-polyfill": "^2.8.0",
     "griddle-react": "1.13.1",
     "jquery": "^3.4.1",
     "materialize-css": "1.0.0",

diff --git a/src/UniversalDashboard/Controls/src/grid-layout.ps1 b/src/UniversalDashboard/Controls/src/grid-layout.ps1
@@ -7,9 +7,7 @@ function New-UDGridLayout {
         [Parameter()]
         [scriptblock]$Content,
         [Parameter()]
-        [Hashtable[]]$Layout,
-        [Parameter()]
-        [string]$LayoutJson,
+        [string]$Layout,
         [Parameter()]
         [int]$LargeColumns = 12,
         [Parameter()]
@@ -62,7 +60,6 @@ function New-UDGridLayout {
             rowHeight = $RowHeight
             content = $Content.Invoke()
             layout = $Layout
-            layoutJson = $LayoutJson
             cols = $Columns
             breakpoints = $Breakpoints
             isDraggable = $Draggable.IsPresent

diff --git a/src/client/src/app/services/universal-dashboard-service.jsx b/src/client/src/app/services/universal-dashboard-service.jsx
@@ -14,6 +14,7 @@ export const UniversalDashboardService = {
             component
         });
     },
+    design: false,
     get: fetchGet,
     post: fetchPost,
     postRaw: fetchPostRaw,

diff --git a/src/client/src/app/ud-dashboard.jsx b/src/client/src/app/ud-dashboard.jsx
@@ -214,6 +214,8 @@ export default class UdDashboard extends React.Component {
 
             this.connectWebSocket(json.sessionId);
 
+            UniversalDashboard.design = dashboard.design;
+
             this.setState({
                 dashboard: dashboard,
                 loading: false,

diff --git a/src/client/src/app/ud-grid-layout.jsx b/src/client/src/app/ud-grid-layout.jsx
@@ -11,14 +11,16 @@ export default class UDGridLayout extends React.Component {
         super(props);
 
         var layouts = null;
-        if (props.layoutJson) {
-          layouts = JSON.parse(props.layoutJson)
-        } else {
-          layouts = props.layout.map(x => {
-            x.i = "grid-element-" + x.i;
-            return x;
-          });
-        }
+        if (props.layout) {
+          layouts = JSON.parse(props.layout)
+
+          if (!Array.isArray) {
+            layouts = []
+          } else {
+            saveToLS("uddesign", layouts)
+          }
+
+        } 
 
         if (props.persist) {
             var jsonLayouts = getFromLS("layouts");
@@ -27,6 +29,19 @@ export default class UDGridLayout extends React.Component {
             }
         };
 
+        if (UniversalDashboard.design) {
+            var jsonLayouts = getFromLS("uddesign");
+            if (jsonLayouts != null) {
+                layouts = JSON.parse(JSON.stringify(jsonLayouts))
+
+                if (layouts.lg != null) {
+                  layouts.lg.forEach(x => {
+                    x.static = false
+                  });
+                }
+            }
+        }
+
         this.state = {
             layouts, 
             content: props.content
@@ -38,6 +53,11 @@ export default class UDGridLayout extends React.Component {
           saveToLS("layouts", layouts);
           this.setState({ layouts });
       }
+
+      if (UniversalDashboard.design) {
+          saveToLS("uddesign", layouts);
+          this.setState({ layouts });
+      }
     }
 
     render() {