ZAPP-196 Add routing to a new cluster specific view, move some code that...

ZAPP-196 Add routing to a new cluster specific view, move some code that happens on mount to app.vue instead of zcllayout

src/App.vue

@@ -24,6 +24,16 @@ limitations under the License.
 import restApi from '../src-shared/rest-api.js'
 export default {
   name: 'App',
+  methods: {
+    setThemeMode(bodyElement) {
+      const theme = bodyElement.getAttribute('data-theme')
+      if (theme === 'com.silabs.ss.platform.theme.dark') {
+        this.$q.dark.set(true)
+      } else {
+        this.$q.dark.set(false)
+      }
+    },
+  },
   mounted() {
     // Parse the query string into the front end.
     const querystring = require('querystring')
@@ -41,6 +51,47 @@ export default {
     if (query['studioProject']) {
       this.$store.dispatch('zap/setStudioConfigPath', query['studioProject'])
     }
+
+    this.zclDialogTitle = 'ZCL tab!'
+    this.zclDialogText = 'Welcome to ZCL tab. This is just a test of a dialog.'
+    this.zclDialogFlag = false
+    var html = document.documentElement
+    this.setThemeMode(html)
+    new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'data-theme'
+        ) {
+          this.setThemeMode(html)
+        }
+      })
+    }).observe(html, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+      subtree: false,
+    })
+    this.$store.dispatch('zap/loadInitialData')
+    this.$store.dispatch('zap/loadOptions', {
+      key: 'defaultResponsePolicy',
+      type: 'string',
+    })
+    this.$store.dispatch('zap/loadOptions', {
+      key: 'manufacturerCodes',
+      type: 'object',
+    })
+    this.$serverOn('zcl-item-list', (event, arg) => {
+      if (arg.type === 'cluster') {
+        this.$store.dispatch('zap/updateClusters', arg.data)
+      }
+    })
+    this.$serverGet('/zcl/cluster/all')
+    this.$serverOn('zcl-item-list', (event, arg) => {
+      if (arg.type === 'device_type') {
+        this.$store.dispatch('zap/updateZclDeviceTypes', arg.data || [])
+      }
+    })
+    this.$serverGet('/zcl/deviceType/all')
   },
 }
 </script>

src/components/ZclDomainClusterView.vue

@@ -54,9 +54,13 @@ limitations under the License.
             />
           </q-td>
           <q-td key="configure" :props="props">
-            <q-icon
-              name="settings"
+            <q-btn
+              flat
               :color="isClusterEnabled(props.row.id) ? 'primary' : 'grey'"
+              dense
+              :disable="!isClusterEnabled(props.row.id)"
+              icon="settings"
+              to="/cluster"
             />
           </q-td>
         </q-tr>

src/components/ZclEndpointCard.vue

@@ -145,12 +145,6 @@ export default {
           },
         })
         .then(() => {
-          console.log('asdfa')
-          console.log(endpointReference)
-          console.log('asdfasdf')
-          console.log(this.endpointType)
-          console.log('asdfasdfdd')
-          console.log(this.endpointType[endpointReference])
           let context = {
             action: RestApi.action.delete,
             context: {

src/layouts/ZclClusterLayout.vue

@@ -14,41 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div class="q-pa-md bg-grey-10 text-white">
-    <q-splitter
-      v-model="splitterModel"
-      separator-class="bg-orange"
-      separator-style="width: 3px"
-      style="height: 600px;"
-    >
-      <template v-slot:before>
-        <div class="q-pa-md">
-          <ZclEndpointTypeConfig class="bg-grey-10 text-white" />
-          <ZclEndpointConfig class="bg-grey-10 text-white" />
-          <ZclClusterList class="bg-grey-10 text-white" />
-        </div>
-      </template>
-      <template v-slot:after>
-        <div class="q-pa-md">
-          <ZclClusterDetails class="bg-grey-10 text-white" />
-        </div>
-      </template>
-    </q-splitter>
+  <div class="q-pa-md">
+    Individual Cluster Data
+    <q-btn to="/" label="goback" />
   </div>
 </template>
 <script>
-import ZclEndpointConfig from '../components/ZclEndpointConfig.vue'
-import ZclEndpointTypeConfig from '../components/ZclEndpointTypeConfig.vue'
-import ZclClusterList from '../components/ZclClusterList.vue'
-import ZclClusterDetails from '../components/ZclClusterDetail.vue'
 export default {
   name: 'ZclClusterLayout',
-  components: {
-    ZclEndpointConfig,
-    ZclClusterList,
-    ZclEndpointTypeConfig,
-    ZclClusterDetails,
-  },
   data() {
     return {
       splitterModel: 50,

src/layouts/ZclLayout.vue

@@ -67,7 +67,7 @@ limitations under the License.
               </q-expansion-item>
             </q-tab-panel>
             <q-tab-panel :name="restApi.uiMode.OLD">
-              <ZclClusterLayout />
+              <ZclOldClusterLayout />
             </q-tab-panel>
             <q-tab-panel :name="restApi.uiMode.ZIGBEE">
               <zcl-configurator-layout />
@@ -231,7 +231,7 @@ limitations under the License.
 import UcComponentSetup from '../components/UcComponentSetup.vue'
 import ZclApplicationSetup from '../components/ZclApplicationSetup.vue'
 import ZclInformationSetup from '../components/ZclInformationSetup.vue'
-import ZclClusterLayout from './ZclClusterLayout.vue'
+import ZclOldClusterLayout from './ZclOldClusterLayout.vue'
 import ZclConfiguratorLayout from './ZclConfiguratorLayout.vue'
 import SqlQuery from '../components/SqlQuery.vue'
 const restApi = require(`../../src-shared/rest-api.js`)
@@ -252,16 +252,6 @@ export default {
         })
         .catch((err) => console.log('Server Get:' + err))
     },
-
-    setThemeMode(bodyElement) {
-      const theme = bodyElement.getAttribute('data-theme')
-      if (theme === 'com.silabs.ss.platform.theme.dark') {
-        this.$q.dark.set(true)
-      } else {
-        this.$q.dark.set(false)
-      }
-    },
-
     onScroll(info) {
       this.scrollInfo = info
       const scrollArea = this.$refs.generationScroll
@@ -287,7 +277,7 @@ export default {
     UcComponentSetup,
     ZclApplicationSetup,
     ZclInformationSetup,
-    ZclClusterLayout,
+    ZclOldClusterLayout,
     ZclConfiguratorLayout,
     SqlQuery,
   },
@@ -310,47 +300,6 @@ export default {
       maxIndex: 0,
     }
   },
-  mounted() {
-    this.zclDialogTitle = 'ZCL tab!'
-    this.zclDialogText = 'Welcome to ZCL tab. This is just a test of a dialog.'
-    this.zclDialogFlag = false
-    var html = document.documentElement
-    this.setThemeMode(html)
-    new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'data-theme'
-        ) {
-          this.setThemeMode(html)
-        }
-      })
-    }).observe(html, {
-      attributes: true,
-      attributeFilter: ['data-theme'],
-      subtree: false,
-    })
-    this.$store.dispatch('zap/loadInitialData')
-    this.$store.dispatch('zap/loadOptions', {
-      key: 'defaultResponsePolicy',
-      type: 'string',
-    })
-    this.$store.dispatch('zap/loadOptions', {
-      key: 'manufacturerCodes',
-      type: 'object',
-    })
-    this.$serverOn('zcl-item-list', (event, arg) => {
-      if (arg.type === 'cluster') {
-        this.$store.dispatch('zap/updateClusters', arg.data)
-      }
-    })
-    this.$serverGet('/zcl/cluster/all')
-    this.$serverOn('zcl-item-list', (event, arg) => {
-      if (arg.type === 'device_type') {
-        this.$store.dispatch('zap/updateZclDeviceTypes', arg.data || [])
-      }
-    })
-    this.$serverGet('/zcl/deviceType/all')
-  },
+  mounted() {},
 }
 </script>

src/layouts/ZclOldClusterLayout.vue

+<!--
+Copyright (c) 2008,2020 Silicon Labs.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<template>
+  <div class="q-pa-md bg-grey-10 text-white">
+    <q-splitter
+      v-model="splitterModel"
+      separator-class="bg-orange"
+      separator-style="width: 3px"
+      style="height: 600px;"
+    >
+      <template v-slot:before>
+        <div class="q-pa-md">
+          <ZclEndpointTypeConfig class="bg-grey-10 text-white" />
+          <ZclEndpointConfig class="bg-grey-10 text-white" />
+          <ZclClusterList class="bg-grey-10 text-white" />
+        </div>
+      </template>
+      <template v-slot:after>
+        <div class="q-pa-md">
+          <ZclClusterDetails class="bg-grey-10 text-white" />
+        </div>
+      </template>
+    </q-splitter>
+  </div>
+</template>
+<script>
+import ZclEndpointConfig from '../components/ZclEndpointConfig.vue'
+import ZclEndpointTypeConfig from '../components/ZclEndpointTypeConfig.vue'
+import ZclClusterList from '../components/ZclClusterList.vue'
+import ZclClusterDetails from '../components/ZclClusterDetail.vue'
+export default {
+  name: 'ZclOldClusterLayout',
+  components: {
+    ZclEndpointConfig,
+    ZclClusterList,
+    ZclEndpointTypeConfig,
+    ZclClusterDetails,
+  },
+  data() {
+    return {
+      splitterModel: 50,
+    }
+  },
+}
+</script>

src/router/routes.js

@@ -23,6 +23,10 @@ const routes = [
       { path: '', component: () => import('layouts/ZclLayout.vue') }, // Consider making this a "New Project" page
     ],
   },
+  {
+    path: '/cluster',
+    component: () => import('layouts/ZclClusterLayout.vue'),
+  },
   {
     path: '/preference',
     component: () => import('pages/Preference.vue'),