Skip to content

Commit

Permalink
Settings page: Improve loading behaviour
Browse files Browse the repository at this point in the history 
Fixes #2323.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
  • Loading branch information
@florian-h05
florian-h05 committed Feb 9, 2024
1 parent 22a4b99 commit 9f51b65
Showing 1 changed file with 63 additions and 24 deletions.
87 changes: 63 additions & 24 deletions bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
search-in=".item-title"
:disable-button="!$theme.aurora" />
</f7-navbar>
<f7-block class="block-narrow after-big-title settings-menu" v-show="servicesLoaded && addonsLoaded">
<f7-block class="block-narrow after-big-title settings-menu">
<f7-row>
<f7-col :class="addonsLoaded && addonsInstalled.length > 0 ? 'settings-col' : ''" width="100" medium="50">
<f7-col :class="!addonsLoaded || (addonsLoaded && addonsInstalled.length > 0) ? 'settings-col' : ''" width="100" medium="50">
<f7-block-title>Configuration</f7-block-title>
<f7-list media-list class="search-list">
<f7-list-item
Expand Down Expand Up @@ -124,8 +124,8 @@
</f7-list-item>
</f7-list>
</f7-col>
<f7-col :class="addonsLoaded && addonsInstalled.length > 0 ? 'settings-col' : ''" width="100" medium="50">
<div v-if="$store.getters.apiEndpoint('services') && servicesLoaded">
<f7-col :class="!addonsLoaded || (addonsLoaded && addonsInstalled.length > 0) ? 'settings-col' : ''" width="100" medium="50">
<div v-if="servicesLoaded">
<f7-block-title>System Settings</f7-block-title>
<f7-list class="search-list">
<f7-list-item
Expand All @@ -138,13 +138,51 @@
</f7-list-button>
</f7-list>
</div>
<div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && addonsInstalled.length > 0 && $f7.width < 1450">
<addon-section class="add-on-section" :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
<!-- skeleton for not servicesLoaded -->
<div v-else-if="!servicesLoaded">
<f7-block-title>System Settings</f7-block-title>
<f7-list>
<f7-list-item

Check failure on line 145 in bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue

View workflow job for this annotation

GitHub Actions / checks 

Require self-closing on Vue.js custom components (<f7-list-item>)
v-for="n in 9"
:key="n"
:class="`skeleton-text skeleton-effect-blink`"
title="Service Label">
</f7-list-item>
</f7-list>
</div>
<div v-if="$f7.width < 1450">
<div v-if="addonsLoaded && addonsInstalled.length > 0">
<addon-section class="add-on-section" :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
</div>
<!-- skeleton for not addonsLoaded -->
<div v-else-if="!addonsLoaded">
<f7-block-title>Add-on Settings</f7-block-title>
<f7-list>
<f7-list-item

Check failure on line 161 in bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue

View workflow job for this annotation

GitHub Actions / checks 

Require self-closing on Vue.js custom components (<f7-list-item>)
v-for="n in 4"
:key="n"
:class="`skeleton-text skeleton-effect-blink`"
title="Service Label">
</f7-list-item>
</f7-list>
</div>
</div>
</f7-col>
<f7-col width="33" class="add-on-col" v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && addonsInstalled.length > 0 && $f7.width >= 1450">
<f7-col width="33" class="add-on-col" v-if="addonsLoaded && addonsInstalled.length > 0 && $f7.width >= 1450">
<addon-section :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
</f7-col>
<!-- skeleton for not addonsLoaded -->
<f7-col width="33" class="add-on-col" v-else-if="!addonsLoaded && $f7.width >= 1450">
<f7-block-title>Add-on Settings</f7-block-title>
<f7-list>
<f7-list-item

Check failure on line 178 in bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue

View workflow job for this annotation

GitHub Actions / checks 

Require self-closing on Vue.js custom components (<f7-list-item>)
v-for="n in 9"
:key="n"
:class="`skeleton-text skeleton-effect-blink`"
title="Service Label">
</f7-list-item>
</f7-list>
</f7-col>
</f7-row>
<f7-block-footer v-if="$t('home.overview.title') !== 'Overview'" class="margin text-align-center">
<small v-t="'admin.notTranslatedYet'" />
Expand Down Expand Up @@ -224,24 +262,25 @@ export default {
loadMenu () {
if (!this.apiEndpoints) return
const servicesPromise = (this.$store.getters.apiEndpoint('services')) ? this.$oh.api.get('/rest/services') : Promise.resolve([])
const addonsPromise = (this.$store.getters.apiEndpoint('addons')) ? this.$oh.api.get('/rest/addons?serviceId=all') : Promise.resolve([])
// can be done in parallel!
servicesPromise.then((data) => {
this.systemServices = data
.filter(s => (s.category === 'system') && (s.id !== 'org.openhab.persistence'))
.sort((s1, s2) => this.sortByLabel(s1, s2))
this.addonsServices = data.filter(s => s.category !== 'system').sort((s1, s2) => this.sortByLabel(s1, s2))
this.servicesLoaded = true
})
addonsPromise.then((data) => {
this.addonsInstalled = data
.filter(a => a.installed && !['application/vnd.openhab.ruletemplate', 'application/vnd.openhab.uicomponent;type=widget', 'application/vnd.openhab.uicomponent;type=blocks'].includes(a.contentType))
.sort((s1, s2) => this.sortByLabel(s1, s2))
this.persistenceAddonsInstalled = this.addonsInstalled.filter(a => a.installed && a.type === 'persistence')
this.addonsLoaded = true
})
if (this.$store.getters.apiEndpoint('services')) {
this.$oh.api.get('/rest/services').then((data) => {
this.systemServices = data
.filter(s => (s.category === 'system') && (s.id !== 'org.openhab.persistence'))
.sort((s1, s2) => this.sortByLabel(s1, s2))
this.addonsServices = data.filter(s => s.category !== 'system').sort((s1, s2) => this.sortByLabel(s1, s2))
this.servicesLoaded = true
})
}
if (this.$store.getters.apiEndpoint('addons')) {
this.$oh.api.get('/rest/addons?serviceId=all').then((data) => {
this.addonsInstalled = data
.filter(a => a.installed && !['application/vnd.openhab.ruletemplate', 'application/vnd.openhab.uicomponent;type=widget', 'application/vnd.openhab.uicomponent;type=blocks'].includes(a.contentType))
.sort((s1, s2) => this.sortByLabel(s1, s2))
this.persistenceAddonsInstalled = this.addonsInstalled.filter(a => a.installed && a.type === 'persistence')
this.addonsLoaded = true
})
}
},
sortByLabel (s1, s2) {
return s1.label.toLowerCase() > s2.label.toLowerCase() ? 1 : -1
Expand Down

0 comments on commit 9f51b65

Please sign in to comment.