Merge pull request #72 from flowforge/clean-config

Improve ui-config payload

docs/.vitepress/theme/index.js

@@ -1,5 +1,6 @@
 import DefaultTheme from 'vitepress/theme'
-import { onMounted } from 'vue';
+import { onMounted, watch, nextTick } from 'vue';
+import { useRoute } from 'vitepress';
 import mediumZoom from 'medium-zoom';
 // override options: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 import './dashboard.css'
@@ -11,12 +12,20 @@ import ControlsTable from '../../components/ControlsTable.vue'
 export default {
     extends: DefaultTheme,
     setup() {
-        onMounted(() => {
+        const route = useRoute();
+        const initZoom = () => {
             mediumZoom('[data-zoomable]', {
                 background: 'black',
                 margin: 24
             });
-        })
+        };
+        onMounted(() => {
+            initZoom();
+        });
+        watch(
+            () => route.path,
+            () => nextTick(() => initZoom())
+        );
     },
     enhanceApp(ctx) {
         // register your custom global components

docs/contributing/guides/events.md

@@ -10,9 +10,9 @@ An important part of the Dashboard is how Node-RED and the Dashboard communicate
 This is a comprehensive list of all events that are sent between Node-RED and the Dashboard via socket.io.
 
 ### `ui-config`
-- Payload: `object{ pages, dashboard, widgets }`
+- Payload: `object{ dashboards, theme, pages, groups, widgets }`
 
-Used to transport dashboard/page/[widget](#widget) layout data.
+Used to transport dashboard/theme/page/groups/[widget](#widget) layout data, each mapped by their respective id's.
 
 ### `msg-input:<node-id>`
 - Payload: `<msg>`

nodes/config/ui_base.js

@@ -169,30 +169,30 @@ module.exports = function(RED) {
             // map themes by their ID
             if (!node.ui.themes.has(page.theme)) {
                 const theme = RED.nodes.getNode(page.theme)
-                node.ui.themes.set(page.theme, theme)
+                // eslint-disable-next-line no-unused-vars
+                const { _wireCount, _inputCallback, _inputCallbacks, _closeCallbacks, wires, type, ...t } = theme
+                node.ui.themes.set(page.theme, t)
             }
 
             // map pages by their ID
             if (!node.ui.pages.has(page.id)) {
-                node.ui.pages.set(page.id, page)
+                // eslint-disable-next-line no-unused-vars
+                const { _user, type, ...p } = page
+                node.ui.pages.set(page.id, p)
             }
 
             // map groups on a page-by-page basis
-            if (!node.ui.groups.has(page.id)) {
-                node.ui.groups.set(page.id, {})
+            if (!node.ui.groups.has(group.id)) {
+                // eslint-disable-next-line no-unused-vars
+                const { _user, type, ...g } = group
+                node.ui.groups.set(group.id, g)
             }
 
             // map widgets on a group-by-group basis
-            if (!node.ui.widgets.has(group.id)) {
-                node.ui.widgets.set(group.id, {})
+            if (!node.ui.widgets.has(widget.id)) {
+                node.ui.widgets.set(widget.id, widget)
             }
 
-            // add the widget to the page-mapping
-            node.ui.groups.get(page.id)[group.id] = group
-
-            // add the widget to the page-mapping
-            node.ui.widgets.get(group.id)[widget.id] = widget
-
             // add Node-RED listener to the widget for when it's corresponding node receives a msg in Node-RED
             widgetNode.on('input', async function (msg, send, done) {
                 // send a message to the UI to let it know we've received a msg

ui/src/App.vue

@@ -48,12 +48,11 @@ export default {
 
             // loop over the widgets defined in Node-RED,
             // map their respective Vue component for rendering on a page
-            Object.keys(payload.widgets).forEach(page => {
-                Object.values(payload.widgets[page]).forEach(widget => {
-                    console.log("adding widget", widget.type)
-                    // widget.component = 'hello world'
-                    widget.component = markRaw(widgetComponents[widget.type])
-                })
+            Object.keys(payload.widgets).forEach(id => {
+                const widget = payload.widgets[id]
+                console.log("adding widget", widget.type)
+                // widget.component = 'hello world'
+                widget.component = markRaw(widgetComponents[widget.type])
             })
 
             // store this data in our VueX store for access across the app
@@ -62,6 +61,7 @@ export default {
             this.$store.commit('ui/groups', payload.groups)
             this.$store.commit('ui/widgets', payload.widgets)
             this.$store.commit('ui/themes', payload.themes)
+            console.log('all stored')
         })
     },
     methods: {

ui/src/layouts/Flex.vue

@@ -8,7 +8,7 @@
                     </template>
                     <template #text>
                         <div class="nr-db-layout-group--grid" :style="`grid-template-columns: repeat(${ g.width }, 1fr); grid-template-rows: repeat(${g.height}, minmax(${rowHeight}px, auto)); `">
-                            <div v-for="w in widgets[g.id]" :key="w.id" style="display: grid" :style="`grid-template-rows: repeat(${w.props.height}, ${rowHeight}px); grid-column-end: span ${ w.props.width || g.width }`">
+                            <div v-for="w in widgetsByGroup(g.id)" :key="w.id" style="display: grid" :style="`grid-template-rows: repeat(${w.props.height}, ${rowHeight}px); grid-column-end: span ${ w.props.width || g.width }`">
                                 <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`"/>
                             </div>
                         </div>
@@ -21,14 +21,15 @@
 
 <script>
     import BaselineLayout from './Baseline.vue'
-    import { mapState } from 'vuex';
+    import { mapState, mapGetters } from 'vuex';
 
     export default {
         name: 'LayoutFlex',
         computed: {
             ...mapState('ui', ['groups', 'widgets']),
+            ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup']),
             orderedGroups: function () {
-                const groups = this.groups[this.$route.meta.id]
+                const groups = this.groupsByPage(this.$route.meta.id)
                 const ordered = Object.values(groups).sort((a, b) => {
                     // if order = 0, prioritise groups where order _is_ set
                     const aOrder = a.order || Number.MAX_SAFE_INTEGER

ui/src/layouts/Grid.vue

@@ -1,14 +1,14 @@
 <template>
     <BaselineLayout :page-title="$route.name">
-        <div class="nrdb-layout--grid" v-if="groups && groups[$route.meta.id]">
+        <div class="nrdb-layout--grid" v-if="gridGroups">
             <div v-for="g in gridGroups" :key="g.id" :style="`grid-column-end: span ${ g.width }`">
                 <v-card variant="outlined" class="bg-group-background">
                     <template #title v-if="g.disp">
                         {{ g.name }}
                     </template>
                     <template #text>
                         <div class="nr-db-layout-group--grid" :style="`grid-template-columns: repeat(${ g.width }, 1fr); grid-template-rows: repeat(${g.height}, minmax(${rowHeight}, auto)); `">
-                            <div v-for="w in widgets[g.id]" :key="w.id" style="display: grid" :style="`grid-template-rows: repeat(${w.props.height}, ${rowHeight}); grid-column-end: span ${ w.props.width || g.width }`">
+                            <div v-for="w in widgetsByGroup(g.id)" :key="w.id" style="display: grid" :style="`grid-template-rows: repeat(${w.props.height}, ${rowHeight}); grid-column-end: span ${ w.props.width || g.width }`">
                                 <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`"/>
                             </div>
                         </div>
@@ -21,15 +21,16 @@
 
 <script>
     import BaselineLayout from './Baseline.vue'
-    import { mapState } from 'vuex';
+    import { mapState, mapGetters } from 'vuex';
 
     export default {
         name: 'LayoutGrid',
         computed: {
             ...mapState('ui', ['groups', 'widgets']),
+            ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup']),
             gridGroups: function () {
-                const groups = this.groups[this.$route.meta.id]
-                const ordered = Object.values(groups).sort((a, b) => {
+                const groups = this.groupsByPage(this.$route.meta.id)
+                const ordered = groups.sort((a, b) => {
                     // if order = 0, prioritise groups where order _is_ set
                     const aOrder = a.order || Number.MAX_SAFE_INTEGER
                     const bOrder = b.order || Number.MAX_SAFE_INTEGER

ui/src/store/ui.js

@@ -21,6 +21,24 @@ const getters = {
     },
     widgets (state) {
         return state.widgets
+    },
+    groupsByPage: (state) => (pageId) => {
+        if (state.groups) {
+            var groupsOnPage = Object.values(state.groups).filter((p) => {
+                return p.page === pageId;
+            });
+            return groupsOnPage
+        }
+        return
+    },
+    widgetsByGroup: (state) => (groupId) => {
+        if (state.widgets) {
+            var widgetsInGroup = Object.values(state.widgets).filter((w) => {
+                return w.props.group === groupId;
+            });
+            return widgetsInGroup
+        }
+        return
     }
 }
 
@@ -40,6 +58,7 @@ const mutations = {
     widgetState (state, data) {
         // TODO: Assumed widget is on the current page
         const pageId = router.currentRoute.value.meta.id
+
         const wId = data.widgetId
         console.log('widgetState', pageId, wId, data)