diff --git a/public/zap_logo.png b/public/zap_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..75da264e2701e7069ab09b24c2f51d8c53d70e8a
Binary files /dev/null and b/public/zap_logo.png differ
diff --git a/src/components/ZCLToolbar.vue b/src/components/ZCLToolbar.vue
index aec91d3c50a908653bc2a465db41993e47a3c7a4..598406d7c03f009af91af96024a0347fe44a9a50 100644
--- a/src/components/ZCLToolbar.vue
+++ b/src/components/ZCLToolbar.vue
@@ -206,7 +206,7 @@ export default {
'.svg'
)
} else {
- return ''
+ return '/zap_logo.png'
}
},
},
@@ -267,7 +267,7 @@ export default {
},
},
mounted() {
- if(this.$onWebSocket) {
+ if (this.$onWebSocket) {
this.$onWebSocket(
dbEnum.wsCategory.notificationCount,
(notificationCount) => {
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 21bbf61adc05bb2ab1d4b6f07150303ea2b2ad12..9c4c3faef3912bdda1c7913f54eb9314b64e0e63 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -29,7 +29,7 @@ $warning: #f2c037;
background: transparent;
}
-.body--light{
+.body--light {
.bg-glass {
background-color: rgba(238, 238, 238, 0.61);
-webkit-backdrop-filter: blur(7px);
@@ -209,8 +209,8 @@ $warning: #f2c037;
}
}
-.body--dark{
- color:#cfcfcf !important;
+.body--dark {
+ color: #cfcfcf !important;
.bg-glass {
background-color: rgba(25, 25, 25, 0.61);
-webkit-backdrop-filter: blur(7px);
@@ -242,7 +242,8 @@ $warning: #f2c037;
.q-item {
transition: all 0.1s ease-out;
min-height: auto;
- background: linear-gradient(var(--q-dark), var(--q-dark)) padding-box,
+ background: linear-gradient(var(--q-dark), var(--q-dark))
+ padding-box,
linear-gradient(
90deg,
rgba(78, 143, 242, 1),
@@ -256,14 +257,14 @@ $warning: #f2c037;
transition: all 0.1s ease-in-out;
width: fit-content;
font-weight: 500;
- color: #cfcfcf;;
+ color: #cfcfcf;
}
}
}
}
.q-expansion-item__content {
transition: all 0.1s ease-in !important;
- background: linear-gradient(var(--q-dark),var(--q-dark)) padding-box,
+ background: linear-gradient(var(--q-dark), var(--q-dark)) padding-box,
linear-gradient(90deg, rgba(78, 143, 242, 1), rgba(118, 246, 207, 1))
border-box !important;
border: 2px solid white;
@@ -284,7 +285,7 @@ $warning: #f2c037;
min-height: auto;
padding-bottom: 0;
border: none;
- background: transparent !important;
+ background: transparent !important;
border-radius: 14px;
padding: 7px 14px;
&__section {
@@ -326,8 +327,9 @@ $warning: #f2c037;
.q-item {
transition: all 0.1s ease-out;
min-height: auto;
- background: linear-gradient(var(--q-dark), var(--q-dark)) padding-box,
- linear-gradient(90deg,var(--q-primary), rgba(0, 0, 0, 1))
+ background: linear-gradient(var(--q-dark), var(--q-dark))
+ padding-box,
+ linear-gradient(90deg, var(--q-primary), rgba(0, 0, 0, 1))
border-box !important;
border: 2px solid transparent;
border-radius: 14px;
@@ -343,7 +345,7 @@ $warning: #f2c037;
}
.q-expansion-item__content {
transition: all 0.1s ease-in !important;
- background: linear-gradient(#272821,#272821) padding-box,
+ background: linear-gradient(#272821, #272821) padding-box,
linear-gradient(90deg, var(--q-primary), rgba(0, 0, 0, 1))
border-box !important;
border: 2px solid white;
@@ -375,7 +377,7 @@ $warning: #f2c037;
margin-bottom: -1px;
margin-left: 3px;
background: var(--q-primary);
- color: #cfcfcf;;
+ color: #cfcfcf;
padding: 2px 16px;
width: fit-content;
border-radius: 5px 5px 0 0;
@@ -491,16 +493,19 @@ h2 {
}
}
-
.logo {
- width: 100%;
+ width: auto;
height: auto;
+ max-height: 40px;
max-width: 150px;
}
:root {
--q-transition-duration: 1s;
}
+.w-fit-content {
+ width: fit-content;
+}
@keyframes fadeInAnimation {
0% {
@@ -510,20 +515,18 @@ h2 {
opacity: 1;
}
}
-.text-h4{
+.text-h4 {
font-size: 2rem;
}
-.q-rounded-borders-xl{
+.q-rounded-borders-xl {
border-radius: 20px;
}
-.q-btn--rounded{
+.q-btn--rounded {
border-radius: 12px;
}
-.zigbeee{
- --q-color-primary: #C10015;
- --q-primary: #C10015;
-
-
+.zigbeee {
+ --q-color-primary: #c10015;
+ --q-primary: #c10015;
}
:root {
--q-transition-duration: 1s;
diff --git a/src/pages/ZapConfig.vue b/src/pages/ZapConfig.vue
index 8f64078443d85b7ee552c57a595ee52380f52c66..f9b085578739a27edaffb52d489a1cbdd15cf982 100644
--- a/src/pages/ZapConfig.vue
+++ b/src/pages/ZapConfig.vue
@@ -1,9 +1,5 @@
<template>
- <q-page
- padding
- class="row justify-center full-height"
- :class="{ zigbee: getuitheme === 'zigbee' }"
- >
+ <q-page padding class="row justify-center full-height" :class="getuitheme">
<Transition name="slide-up" mode="out-in" appear>
<q-card flat class="q-mt-lg q-rounded-borders-xl bg-glass col-10 column">
<q-scroll-area class="col q-px-xl">
@@ -11,16 +7,10 @@
<Transition name="slide-up" mode="out-in" appear>
<div class="column">
<img
- v-if="getuitheme === 'zigbee'"
+ v-if="getLogo"
height="40"
- class="mx-auto q-my-lg block"
- src="/zigbee_logo.svg"
- />
- <img
- v-else
- height="40"
- class="mx-auto q-my-lg block"
- src="/matter_logo.svg"
+ class="q-mx-auto q-my-lg block w-fit-content"
+ :src="getLogo"
/>
</div>
</Transition>
@@ -99,36 +89,57 @@
</q-td>
<q-td key="status" :props="props">
<div v-if="props.row.warning">
- <q-icon class="cursor-pointer" name="warning" color="orange" size="2.5em" @click="propertyDataDialog[props.row.id] = true">
+ <q-icon
+ class="cursor-pointer"
+ name="warning"
+ color="orange"
+ size="2.5em"
+ @click="propertyDataDialog[props.row.id] = true"
+ >
</q-icon>
- <q-dialog v-model="propertyDataDialog[props.row.id]" persistent>
+ <q-dialog
+ v-model="propertyDataDialog[props.row.id]"
+ persistent
+ >
<q-card>
<q-card-section>
- <div class="row items-center">
- <div class="col-1">
- <q-icon name="warning" color="orange" size="2em"/>
- </div>
- <div class="text-h6 col">{{ props.row.description }} </div>
- <div class="col-1 text-right">
+ <div class="row items-center">
+ <div class="col-1">
+ <q-icon
+ name="warning"
+ color="orange"
+ size="2em"
+ />
+ </div>
+ <div class="text-h6 col">
+ {{ props.row.description }}
+ </div>
+ <div class="col-1 text-right">
<q-btn dense flat icon="close" v-close-popup>
<q-tooltip>Close</q-tooltip>
</q-btn>
- </div>
</div>
- <ul>
- <li
- v-for="(notification, index) in props.row.notifications"
- :key="index"
- style="margin-bottom: 20px"
- >
- {{ notification }}
- </li>
- </ul>
+ </div>
+ <ul>
+ <li
+ v-for="(notification, index) in props.row
+ .notifications"
+ :key="index"
+ style="margin-bottom: 20px"
+ >
+ {{ notification }}
+ </li>
+ </ul>
</q-card-section>
</q-card>
</q-dialog>
</div>
- <q-icon v-else name="check_circle" color="green" size="2em" />
+ <q-icon
+ v-else
+ name="check_circle"
+ color="green"
+ size="2em"
+ />
</q-td>
</q-tr>
</template>
@@ -180,13 +191,23 @@
</q-td>
<q-td key="status" :props="props">
<div v-if="props.row.warning">
- <q-icon name="warning" color="orange" size="2.5em" @click="genDataDialog[props.row.id] = true">
+ <q-icon
+ name="warning"
+ color="orange"
+ size="2.5em"
+ @click="genDataDialog[props.row.id] = true"
+ >
</q-icon>
- <q-dialog v-model="genDataDialog[props.row.id]" persistent>
+ <q-dialog
+ v-model="genDataDialog[props.row.id]"
+ persistent
+ >
<q-card>
<q-bar>
- <q-icon name="warning" color="orange"/>
- <div class="text-h6">{{ props.row.description }}</div>
+ <q-icon name="warning" color="orange" />
+ <div class="text-h6">
+ {{ props.row.description }}
+ </div>
<q-space />
<q-btn dense flat icon="close" v-close-popup>
<q-tooltip>Close</q-tooltip>
@@ -194,11 +215,12 @@
</q-bar>
<q-card-section>
<ul>
- <li
- v-for="(notification, index) in props.row.notifications"
+ <li
+ v-for="(notification, index) in props.row
+ .notifications"
:key="index"
style="margin-bottom: 20px"
- >
+ >
{{ notification }}
</li>
</ul>
@@ -206,7 +228,12 @@
</q-card>
</q-dialog>
</div>
- <q-icon v-else name="check_circle" color="green" size="2em" />
+ <q-icon
+ v-else
+ name="check_circle"
+ color="green"
+ size="2em"
+ />
</q-td>
</q-tr>
</template>
@@ -308,8 +335,8 @@ const generateNewSessionCol = [
name: 'status',
label: 'status',
align: 'left',
- style: 'width: 15%'
- }
+ style: 'width: 15%',
+ },
]
const loadPreSessionCol = [
{
@@ -377,6 +404,21 @@ export default {
getuitheme: function () {
return this.selectedZclPropertiesData?.category
},
+ getLogo: {
+ get() {
+ if (this.selectedZclPropertiesData?.category) {
+ return (
+ '/' +
+ this.selectedZclPropertiesData?.category +
+ '_logo' +
+ (this.$q.dark.isActive ? '_white' : '') +
+ '.svg'
+ )
+ } else {
+ return '/zap_logo.png'
+ }
+ },
+ },
},
watch: {
@@ -474,33 +516,31 @@ export default {
id: item.sessionId,
})
})
-
+
this.$serverGet(restApi.uri.packageNotification)
.then((resp) => {
let messageMap = {}
resp.data.forEach((row) => {
- if(!(row.packageId in messageMap)) {
+ if (!(row.packageId in messageMap)) {
messageMap[row.packageId] = []
}
messageMap[row.packageId].push(row.message)
})
- this.zclPropertiesRow.forEach((row)=>{
- if(row.id in messageMap) {
+ this.zclPropertiesRow.forEach((row) => {
+ if (row.id in messageMap) {
row.warning = true
row.notifications = messageMap[row.id]
- }
- else {
+ } else {
row.warning = false
row.notifications = []
}
this.propertyDataDialog[row.id] = false
})
- this.zclGenRow.forEach((row, index)=>{
- if(row.id in messageMap) {
+ this.zclGenRow.forEach((row, index) => {
+ if (row.id in messageMap) {
row.warning = true
row.notifications = messageMap[row.id]
- }
- else {
+ } else {
row.warning = false
row.notifications = []
}