From 8d8e46ad5bbf5bb3db6f30dcaa43220f96e678ac Mon Sep 17 00:00:00 2001
From: Mark Herwege <mherwege@users.noreply.github.com>
Date: Sun, 22 Dec 2024 17:20:58 +0100
Subject: [PATCH] Import treeview items locally & Clean-up sitemap page
 components (#2915)

See https://github.com/openhab/openhab-webui/pull/2904#issuecomment-2537081847
and https://github.com/openhab/openhab-webui/pull/2904#issuecomment-2537277268

This moves the import from the treeview items for model and sitemap out
of app.js and removes the sitemap page elements as this was never used.

Signed-off-by: Mark Herwege <mark.herwege@telenet.be>
---
 .../org.openhab.ui/web/src/components/app.vue |   9 --
 .../src/components/model/model-treeview.vue   |   5 +
 .../src/components/model/treeview-item.vue    |   4 +
 .../pagedesigner/sitemap/treeview-item.vue    |   4 +
 .../src/components/sitemap/widget-generic.vue | 100 ------------------
 bundles/org.openhab.ui/web/src/js/app.js      |   6 --
 .../web/src/pages/page/sitemap-view.vue       |  67 ------------
 .../web/src/pages/settings/model/model.vue    |   4 +-
 .../settings/pages/sitemap/sitemap-edit.vue   |   4 +-
 9 files changed, 19 insertions(+), 184 deletions(-)
 delete mode 100644 bundles/org.openhab.ui/web/src/components/sitemap/widget-generic.vue
 delete mode 100644 bundles/org.openhab.ui/web/src/pages/page/sitemap-view.vue

diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
index cb6e743a0c..6acd7b240d 100644
--- a/bundles/org.openhab.ui/web/src/components/app.vue
+++ b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -17,12 +17,6 @@
           <f7-list-item v-if="$store.getters.apiEndpoint('ui') && (!pages || !pages.length)">
             <span><em>{{ $t('sidebar.noPages') }}</em></span>
           </f7-list-item>
-          <!-- <f7-list-item v-for="sitemap in sitemaps" :animate="false" :key="sitemap.name"
-                :class="{ currentsection: currentUrl.indexOf('/sitemap/' + sitemap.name) >= 0 }"
-                :link="'/sitemap/' + sitemap.name + '/' + sitemap.name"
-                :title="sitemap.label" view=".view-main" panel-close>
-          <f7-icon slot="media" ios="f7:menu" aurora="f7:menu" md="material:list"></f7-icon>
-        </f7-list-item> -->
           <f7-list-item v-for="page in pages" :animate="false" :key="page.uid"
                         :class="{ currentsection: currentUrl === '/page/' + page.uid || currentUrl.indexOf('/page/' + page.uid + '/') === 0 }"
                         :link="'/page/' + page.uid"
@@ -373,7 +367,6 @@ export default {
 
       user: null,
 
-      sitemaps: null,
       pages: null,
       showSidebar: true,
       visibleBreakpointDisabled: false,
@@ -538,8 +531,6 @@ export default {
     pageIcon (page) {
       if (page.config && page.config.icon) return page.config.icon
       switch (page.component) {
-        case 'Sitemap':
-          return 'f7:menu'
         case 'oh-layout-page':
           return 'f7:rectangle_grid_2x2'
         case 'oh-tabs-page':
diff --git a/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue b/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
index 61b28f3a97..0ab73959f2 100644
--- a/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
@@ -21,8 +21,13 @@
 </style>
 
 <script>
+import ModelTreeviewItem from '@/components/model/treeview-item.vue'
+
 export default {
   props: ['rootNodes', 'selectedItem', 'includeItemName', 'includeItemTags'],
+  components: {
+    ModelTreeviewItem
+  },
   methods: {
     nodeSelected (node) {
       this.$emit('selected', node)
diff --git a/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue b/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue
index 7d1d51398e..3a081861bf 100644
--- a/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue
@@ -36,8 +36,12 @@
 import ItemMixin from '@/components/item/item-mixin'
 
 export default {
+  name: 'model-treeview-item',
   mixins: [ItemMixin],
   props: ['model', 'selected', 'includeItemName', 'includeItemTags'],
+  components: {
+    ModelTreeviewItem: 'model-treeview-item'
+  },
   computed: {
     children () {
       return [this.model.children.locations,
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
index 7ed2e7312e..b9e861d5b9 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
@@ -32,8 +32,12 @@
 import SitemapMixin from '@/components/pagedesigner/sitemap/sitemap-mixin'
 
 export default {
+  name: 'sitemap-treeview-item',
   mixins: [SitemapMixin],
   props: ['includeItemName', 'widget', 'parentWidget', 'itemsList', 'selected'],
+  components: {
+    SitemapTreeviewItem: 'sitemap-treeview-item'
+  },
   methods: {
     subtitle () {
       return this.widgetTypeLabel() + this.widgetConfigDescription(this.includeItemName)
diff --git a/bundles/org.openhab.ui/web/src/components/sitemap/widget-generic.vue b/bundles/org.openhab.ui/web/src/components/sitemap/widget-generic.vue
deleted file mode 100644
index abafacb2f5..0000000000
--- a/bundles/org.openhab.ui/web/src/components/sitemap/widget-generic.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <f7-block v-if="model && !model.type">
-    <component v-for="widget in model.widgets" :name="widget.widgetId" :key="widget.widgetId" :is="componentType" :model="widget" :sitemap-id="sitemapId" :page-id="pageId" />
-  </f7-block>
-  <f7-block v-else-if="model && model.type === 'Frame'">
-    <f7-block-title>{{ model.label }}</f7-block-title>
-    <f7-list>
-      <!-- <f7-list-item v-for="widget in model.widgets" :name="widget.widgetId" :key="widget.widgetId" :title="widget.label" :model="widget" /> -->
-      <ul>
-        <component v-for="widget in model.widgets" :name="widget.widgetId" :key="widget.widgetId" :is="componentType" :model="widget" :sitemap-id="sitemapId" :page-id="pageId" />
-      </ul>
-    </f7-list>
-  </f7-block>
-  <f7-list-item v-else :title="title" :after="state" :link="link">
-    <oh-icon slot="media" :icon="model.icon" height="32" width="32" />
-    <f7-segmented round outline v-if="model.type === 'Rollershutter' || (model.item && model.item.type === 'Rollershutter')">
-      <f7-button round small outline icon-size="22" icon-f7="chevron_down" color="blue" style="text-overflow: inherit" />
-      <f7-button round small outline icon-size="22" icon-f7="multiply" color="blue" style="text-overflow: inherit" />
-      <f7-button round small outline icon-size="22" icon-f7="chevron_up" color="blue" style="text-overflow: inherit" />
-    </f7-segmented>
-    <f7-toggle style="margin-left: 10px" color="blue" v-else-if="model.type === 'Switch'" />
-    <f7-stepper class="sitemap-stepper"
-                style="margin-left: 10px"
-                v-if="model.type === 'Setpoint'"
-                color="blue" small
-                :value="parseFloat(state)" />
-    <f7-list-item-cell style="max-width: 40%" v-else-if="model.type === 'Slider'">
-      <f7-range
-        :min="0"
-        :max="100"
-        :step="1"
-        :value="state" />
-    </f7-list-item-cell>
-    <f7-list-item-cell style="max-width: 40%; text-align: right;" v-else-if="model.type === 'Colorpicker'">
-      <f7-list-input type="colorpicker" placeholder="Color" :value="state" hidden readonly
-                     :color-picker-params="{
-                       targetElSetBackgroundColor: true,
-                       targetEl: '#colorswatch-' + model.widgetId
-                     }" />
-      <i ref="colorcircle" style="background-color: black; width: 32px; height: 32px; border-radius: 6px; cursor: pointer" class="icon color-picker-target" :id="'colorswatch-' + model.widgetId" />
-    </f7-list-item-cell>
-  </f7-list-item>
-  <!-- <f7-list-item v-else :title="title" :after="state">
-    <img v-if="model.icon" slot="media" :src="'/icon/' + model.icon + '?format=svg'" width="32" />
-  </f7-list-item> -->
-</template>
-
-<style lang="stylus">
-.sitemap-stepper
-  .stepper-input-wrap input, .stepper-value
-    width 45px !important
-    color #007aff !important
-    font-size var(--f7-stepper-value-font-size) !important
-    height 22px !important
-.aurora .sitemap-stepper .stepper-input-wrap input, .stepper-value
-    margin-top -2px
-</style>
-
-<script>
-export default {
-  props: [
-    'model',
-    'sitemapId',
-    'pageId'
-  ],
-  data () {
-    return {
-      title: '',
-      state: '',
-      link: null
-    }
-  },
-  created () {
-    if (this.model && this.model.label) {
-      let splittedlabel = this.model.label.split(' [')
-      this.title = splittedlabel[0]
-      if (splittedlabel[1]) {
-        this.state = splittedlabel[1].replace(/\]$/, '')
-      }
-    }
-
-    if (this.model && this.model.linkedPage) {
-      this.link = '/sitemap/' + this.sitemapId + '/' + this.model.linkedPage.id
-    }
-
-    this.hasIcon = (this.model && this.model.icon)
-  },
-  computed: {
-    componentType () {
-      return 'sitemap-widget-generic'
-    }
-  },
-  asyncComputed: {
-    iconUrl () {
-      if (!this.model || !this.model.icon) return Promise.resolve('')
-      return this.$oh.media.getIcon(this.model.icon)
-    }
-  }
-}
-</script>
diff --git a/bundles/org.openhab.ui/web/src/js/app.js b/bundles/org.openhab.ui/web/src/js/app.js
index 296f346f47..490c6a644c 100644
--- a/bundles/org.openhab.ui/web/src/js/app.js
+++ b/bundles/org.openhab.ui/web/src/js/app.js
@@ -4,10 +4,7 @@ import './compatibility'
 import Vue from 'vue'
 
 // Import globally registered components
-import SitemapWidgetGeneric from '../components/sitemap/widget-generic.vue'
 import OHIconComponent from '../components/widgets/system/oh-icon.vue'
-import ModelTreeviewItem from '../components/model/treeview-item.vue'
-import SitemapTreeviewItem from '../components/pagedesigner/sitemap/treeview-item.vue'
 import GenericWidgetComponent from '../components/widgets/generic-widget-component.vue'
 import DeveloperDockIcon from '../components/developer/developer-dock-icon.vue'
 
@@ -77,9 +74,6 @@ const app = new Vue({
   }
 })
 
-Vue.component('sitemap-widget-generic', SitemapWidgetGeneric)
 Vue.component('oh-icon', OHIconComponent)
-Vue.component('model-treeview-item', ModelTreeviewItem)
-Vue.component('sitemap-treeview-item', SitemapTreeviewItem)
 Vue.component('generic-widget-component', GenericWidgetComponent)
 Vue.component('developer-dock-icon', DeveloperDockIcon)
diff --git a/bundles/org.openhab.ui/web/src/pages/page/sitemap-view.vue b/bundles/org.openhab.ui/web/src/pages/page/sitemap-view.vue
deleted file mode 100644
index f402898476..0000000000
--- a/bundles/org.openhab.ui/web/src/pages/page/sitemap-view.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <f7-page class="sitemap">
-    <f7-navbar :back-link="(!isRoot) ? 'Back' : null" :large="isRoot">
-      <f7-nav-left v-if="sitemapId === pageId">
-        <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left" />
-      </f7-nav-left>
-      <f7-nav-title-large v-if="isRoot">
-        {{ sitemap.title }}
-      </f7-nav-title-large>
-      <f7-nav-title>{{ sitemap.title }}</f7-nav-title>
-    </f7-navbar>
-    <f7-toolbar position="bottom">
-      <span class="text-color-red">Warning: sitemaps are not functional. Please use Basic UI.</span>
-    </f7-toolbar>
-    <f7-block class="block-narrow" v-if="sitemap.widgets && sitemap.widgets.length > 0">
-      <f7-row>
-        <f7-col>
-          <f7-list v-if="sitemap.widgets[0].type !== 'Frame'">
-            <ul>
-              <sitemap-widget-generic :model="sitemap" :sitemapId="sitemapId" :pageId="pageId" />
-            </ul>
-          </f7-list>
-          <sitemap-widget-generic v-else :model="sitemap" :sitemapId="sitemapId" :pageId="pageId" />
-        </f7-col>
-      </f7-row>
-    </f7-block>
-    <f7-block class="block-narrow" v-else>
-      <f7-row>
-        <f7-col>
-          <f7-block class="padding">
-            There are no widgets on this page.
-          </f7-block>
-        </f7-col>
-      </f7-row>
-    </f7-block>
-  </f7-page>
-</template>
-
-<script>
-
-export default {
-  props: ['sitemapId', 'pageId'],
-  data () {
-    return {
-      sitemap: { title: '' }
-    }
-  },
-  created () {
-    this.$oh.api.get('/rest/sitemaps/' + this.sitemapId + '/' + this.pageId).then(data => {
-      this.sitemap = data
-    })
-  },
-  computed: {
-    isRoot () {
-      return (this.pageId === this.sitemapId)
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.sitemap .block
-  padding 0
-  margin 0
-.sitemap .block-title
-  padding-left calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))
-</style>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
index c2ca04a47f..66bf32d9fc 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
@@ -241,6 +241,7 @@ import ItemStatePreview from '@/components/item/item-state-preview.vue'
 import ItemDetails from '@/components/model/item-details.vue'
 import MetadataMenu from '@/components/item/metadata/item-metadata-menu.vue'
 import LinkDetails from '@/components/model/link-details.vue'
+import ModelTreeviewItem from '@/components/model/treeview-item.vue'
 
 import ModelMixin from '@/pages/settings/model/model-mixin'
 
@@ -252,7 +253,8 @@ export default {
     ItemStatePreview,
     ItemDetails,
     MetadataMenu,
-    LinkDetails
+    LinkDetails,
+    ModelTreeviewItem
   },
   data () {
     if (!this.$f7.data.model) this.$f7.data.model = {}
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
index 591d4e5ec1..2c87c3c39e 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
@@ -282,6 +282,7 @@
 import SitemapCode from '@/components/pagedesigner/sitemap/sitemap-code.vue'
 import WidgetDetails from '@/components/pagedesigner/sitemap/widget-details.vue'
 import AttributeDetails from '@/components/pagedesigner/sitemap/attribute-details.vue'
+import SitemapTreeviewItem from '@/components/pagedesigner/sitemap/treeview-item.vue'
 import SitemapMixin from '@/components/pagedesigner/sitemap/sitemap-mixin'
 import DirtyMixin from '../../dirty-mixin'
 
@@ -290,7 +291,8 @@ export default {
   components: {
     SitemapCode,
     WidgetDetails,
-    AttributeDetails
+    AttributeDetails,
+    SitemapTreeviewItem
   },
   props: ['createMode', 'uid', 'itemsList'],
   data () {