From 58eb48b6b8d2c2c4486e6292916b4cadb56faf95 Mon Sep 17 00:00:00 2001 From: Adam Driscoll Date: Sun, 19 May 2019 19:29:34 -0600 Subject: [PATCH] Grid layout designer. --- .../Components/ud-designer.jsx | 48 +++++++++++++++++-- .../package-lock.json | 5 ++ .../package.json | 1 + .../Controls/src/grid-layout.ps1 | 5 +- .../services/universal-dashboard-service.jsx | 1 + src/client/src/app/ud-dashboard.jsx | 2 + src/client/src/app/ud-grid-layout.jsx | 36 ++++++++++---- 7 files changed, 82 insertions(+), 16 deletions(-) diff --git a/src/UniversalDashboard.Materialize/Components/ud-designer.jsx b/src/UniversalDashboard.Materialize/Components/ud-designer.jsx index ecb2c80f..388fb6af 100644 --- 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 ( [
- - + + +
,
this.modal = modal} className="modal bottom-sheet">
-

Design Terminal

+

Design Terminal

diff --git a/src/UniversalDashboard.Materialize/package-lock.json b/src/UniversalDashboard.Materialize/package-lock.json index 6db4637a..6438ddcd 100644 --- a/src/UniversalDashboard.Materialize/package-lock.json +++ b/src/UniversalDashboard.Materialize/package-lock.json @@ -2080,6 +2080,11 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" }, + "clipboard-polyfill": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-2.8.0.tgz", + "integrity": "sha512-SFaifu0fi07We/RASUcE6uUgeV3AgGn09BaBpJlOoNPiMVS4peTy6eWtvn1yNYMdJWwF+L4AbUAuffTdT0xn5Q==" + }, "cliui": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", diff --git a/src/UniversalDashboard.Materialize/package.json b/src/UniversalDashboard.Materialize/package.json index a330847c..c37f650e 100644 --- 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 index 3dde1ca4..9436b226 100644 --- 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 index 75f17b28..1496cd55 100644 --- 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 index 6d694e24..1b21b6e6 100644 --- 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 index 82df0739..949518cf 100644 --- 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() {