From aa4e218961592a59e3ca51c51c73dc71cd2a5ecd Mon Sep 17 00:00:00 2001
From: JustinGeorgi <77952587+JustinGeorgi@users.noreply.github.com>
Date: Fri, 31 May 2024 10:53:08 -0700
Subject: [PATCH] Add a "Add from template" page for the semantic model (#2105)

This adds a button and new sub page to the semantic model.
On that sub-page the user can select from a few different basic templates for
semantic locations which can then be automatically created and added to the model.

There are a few options for customization:
1) The user can select a custom prefix that will be applied to all the items to fit or establish a desired naming scheme.
2) The user can optionally deselect extra pieces of the model that are not appropriate to their needs.

---------

Also-by: Florian Hotze <florianh_dev@icloud.com>
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 .../settings/model/add-from-template.vue      | 640 ++++++++++++++++++
 .../web/src/pages/settings/model/model.vue    |  27 +-
 2 files changed, 665 insertions(+), 2 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue
new file mode 100644
index 0000000000..7836fe707d
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue
@@ -0,0 +1,640 @@
+<template>
+  <f7-page>
+    <f7-navbar title="Add Locations from Template" back-link="Back">
+      <f7-nav-right class="if-not-aurora">
+        <f7-link @click="add()" v-if="$theme.md" icon-md="material:save" icon-only />
+        <f7-link @click="add()" v-if="!$theme.md">
+          Add
+        </f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+
+    <f7-block class="block-narrow">
+      <f7-col>
+        <f7-block class="no-padding">
+          <f7-block-title class="padding-horizontal">
+            Location Template
+          </f7-block-title>
+          <f7-list>
+            <f7-list-item radio value="0" @change="onSelectTemplate(0)" title="One Bedroom Apartment" name="select-template" />
+            <f7-list-item radio value="1" @change="onSelectTemplate(1)" title="One Story House" name="select-template" />
+            <f7-list-item radio value="2" @change="onSelectTemplate(2)" title="Two Story House" name="select-template" />
+          </f7-list>
+          <f7-block-footer class="padding-left padding-right">
+            Select the template that best matches the description of your property.
+          </f7-block-footer>
+        </f7-block>
+        <f7-block class="no-padding">
+          <f7-block-title class="padding-horizontal">
+            Item Name Prefix
+          </f7-block-title>
+          <f7-list>
+            <f7-list-input label="Prefix" type="text" placeholder="item prefix"
+                           @input="onPrefixInput" clear-button :error-message="prefixErrorMessage"
+                           :error-message-force="!!prefixErrorMessage" />
+          </f7-list>
+          <f7-block-footer class="padding-horizontal">
+            Add a prefix to each created item's name (optional, default is 'l')
+          </f7-block-footer>
+        </f7-block>
+        <f7-block v-if="selectedTemplate !== null" class="semantic-tree-wrapper">
+          <f7-block-footer class="padding-left padding-right">
+            Select the locations to add to your model (you may add others from the model page at a later time).
+          </f7-block-footer>
+          <f7-block class="semantic-tree">
+            <model-treeview class="model-picker-treeview" :rootNodes="rootLocations"
+                            :selected-item="selectedItem" @selected="selectItem" @checked="checkItem" />
+          </f7-block>
+        </f7-block>
+      </f7-col>
+    </f7-block>
+
+    <div v-if="selectedTemplate !== null && (checkedItems.length > 0)" class="if-aurora display-flex justify-content-center margin padding">
+      <div class="flex-shrink-0">
+        <f7-button class="padding-left padding-right" style="width: 150px" color="blue" large raised fill @click="add">
+          Add to Model
+        </f7-button>
+      </div>
+    </div>
+  </f7-page>
+</template>
+
+<style lang="stylus">
+.semantic-tree-wrapper
+  padding 0
+  margin-bottom 0
+.semantic-tree
+  padding 0
+  border-top 1px solid var(--f7-block-strong-border-color)
+  border-bottom 1px solid var(--f7-block-strong-border-color)
+  background: var(--f7-list-bg-color)
+  .treeview
+    --f7-treeview-item-height 40px
+    .treeview-item-label
+      font-size 10pt
+      white-space nowrap
+      overflow-x hidden
+    .semantic-class
+      font-size 8pt
+      color var(--f7-list-item-footer-text-color)
+@media (min-width: 768px)
+  .semantic-tree-wrapper
+    height calc(100% - var(--f7-navbar-height))
+    .row
+      height 100%
+      .col-100
+        height 100%
+        overflow auto
+        .semantic-tree
+          min-height 100%
+          margin 0
+          height auto
+
+@media (max-width: 767px)
+  .semantic-tree-wrapper.sheet-opened
+    margin-bottom var(--f7-sheet-height)
+</style>
+
+<script>
+import ModelTreeview from '@/components/model/model-treeview.vue'
+
+import { compareItems } from '@/components/widgets/widget-order'
+
+function compareModelItems (o1, o2) {
+  return compareItems(o1.item || o1, o2.item || o2)
+}
+
+export default {
+  props: ['itemList'],
+  components: {
+    ModelTreeview
+  },
+  data () {
+    return {
+      selectedItem: null,
+      previousSelection: null,
+      checkedItems: [],
+      selectedTemplate: null,
+      currentModel: null, // cache for computed rootLocations
+      prefix: null,
+      prefixErrorMessage: null
+    }
+  },
+  computed: {
+    locations () {
+      const floor1 = (this.selectedTemplate === 0) ? 'lApartment' : (this.selectedTemplate === 1) ? 'lHouse' : 'lFloor_Ground'
+      const floor2 = (this.selectedTemplate === 0) ? 'lApartment' : (this.selectedTemplate === 1) ? 'lHouse' : 'lFloor_Second'
+
+      return [
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_Bathroom',
+              'config': {
+                'isPartOf': floor2
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lBathroom2',
+          'label': 'Bathroom',
+          'category': 'bath',
+          'tags': [
+            'Bathroom'
+          ],
+          'groupNames': [
+            floor2
+          ],
+          'templates': 4
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Building',
+              'config': {
+                'isPartOf': 'lProperty'
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lApartment',
+          'label': 'Apartment',
+          'category': 'corridor',
+          'tags': [
+            'Building'
+          ],
+          'groupNames': [
+            'lProperty'
+          ],
+          'templates': 1
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Building',
+              'config': {
+                'isPartOf': 'lProperty'
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lHouse',
+          'label': 'House',
+          'category': 'house',
+          'tags': [
+            'Building'
+          ],
+          'groupNames': [
+            'lProperty'
+          ],
+          'templates': 6
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location'
+            }
+          },
+          'type': 'Group',
+          'name': 'lProperty',
+          'label': 'Property',
+          'category': 'none',
+          'tags': [
+            'Location'
+          ],
+          'groupNames': [],
+          'templates': 7
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_Kitchen',
+              'config': {
+                'isPartOf': floor1
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lKitchen',
+          'label': 'Kitchen',
+          'category': 'kitchen',
+          'tags': [
+            'Kitchen'
+          ],
+          'groupNames': [
+            floor1
+          ],
+          'templates': 7
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Building_Garage',
+              'config': {
+                'isPartOf': floor1
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lGarage',
+          'label': 'Garage',
+          'category': 'garage',
+          'tags': [
+            'Garage'
+          ],
+          'groupNames': [
+            floor1
+          ],
+          'templates': 6
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location',
+              'config': {
+                'isPartOf': 'lProperty'
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lBackYard',
+          'label': 'Back Yard',
+          'category': 'garden',
+          'tags': [
+            'Location'
+          ],
+          'groupNames': [
+            'lProperty'
+          ],
+          'templates': 6
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_Entry',
+              'config': {
+                'isPartOf': floor1
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lEntry',
+          'label': 'Entry',
+          'category': 'corridor',
+          'tags': [
+            'Entry'
+          ],
+          'groupNames': [
+            floor1
+          ],
+          'templates': 7
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_LivingRoom',
+              'config': {
+                'isPartOf': floor1
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lLivingRoom',
+          'label': 'Living Room',
+          'category': 'sofa',
+          'tags': [
+            'LivingRoom'
+          ],
+          'groupNames': [
+            floor1
+          ],
+          'templates': 7
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Floor',
+              'config': {
+                'isPartOf': 'lHouse'
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lFloor_Ground',
+          'label': 'Ground Floor',
+          'category': 'groundfloor',
+          'tags': [
+            'Floor'
+          ],
+          'groupNames': [
+            'lHouse'
+          ],
+          'templates': 4
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_DiningRoom',
+              'config': {
+                'isPartOf': floor1
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lDiningRoom',
+          'label': 'Dining Room',
+          'category': 'none',
+          'tags': [
+            'DiningRoom'
+          ],
+          'groupNames': [
+            floor1
+          ],
+          'templates': 6
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_Office',
+              'config': {
+                'isPartOf': floor2
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lOffice',
+          'label': 'Office',
+          'category': 'office',
+          'tags': [
+            'Office'
+          ],
+          'groupNames': [
+            floor2
+          ],
+          'templates': 4
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location',
+              'config': {
+                'isPartOf': 'lProperty'
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lFrontYard',
+          'label': 'Front Yard',
+          'category': 'lawnmower',
+          'tags': [
+            'Location'
+          ],
+          'groupNames': [
+            'lProperty'
+          ],
+          'templates': 6
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_Bedroom',
+              'config': {
+                'isPartOf': floor2
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lBedroom1',
+          'label': 'Main Bedroom',
+          'category': 'bedroom_blue',
+          'tags': [
+            'Bedroom'
+          ],
+          'groupNames': [
+            floor2
+          ],
+          'templates': 7
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_Bedroom',
+              'config': {
+                'isPartOf': floor2
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lBedroom2',
+          'label': 'Second Bedroom',
+          'category': 'bedroom_red',
+          'tags': [
+            'Bedroom'
+          ],
+          'groupNames': [
+            floor2
+          ],
+          'templates': 6
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Room_Bathroom',
+              'config': {
+                'isPartOf': floor1
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lBathroom1',
+          'label': 'Bathroom',
+          'category': 'bath',
+          'tags': [
+            'Bathroom'
+          ],
+          'groupNames': [
+            floor1
+          ],
+          'templates': 7
+        },
+        {
+          'metadata': {
+            'semantics': {
+              'value': 'Location_Indoor_Floor',
+              'config': {
+                'isPartOf': 'lHouse'
+              }
+            }
+          },
+          'type': 'Group',
+          'name': 'lFloor_Second',
+          'label': 'Upstairs',
+          'category': 'firstfloor',
+          'tags': [
+            'Floor'
+          ],
+          'groupNames': [
+            'lHouse'
+          ],
+          'templates': 4
+        }
+      ]
+    },
+    rootLocations () {
+      if (this.currentModel) {
+        return this.currentModel
+      }
+      const newModel = this.locations
+        .filter((i) => (!i.metadata.semantics.config || !i.metadata.semantics.config.isPartOf) && (i.templates & (1 << this.selectedTemplate)))
+        .map(this.modelItem).sort(compareModelItems)
+      newModel.forEach(this.getChildren)
+      this.currentModel = newModel // eslint-disable-line vue/no-side-effects-in-computed-properties
+
+      return newModel
+    }
+  },
+  methods: {
+    modelItem (item) {
+      const modelItem = {
+        item: item,
+        opened: true,
+        checked: true,
+        checkable: true,
+        class: (item.metadata && item.metadata.semantics) ? item.metadata.semantics.value : '',
+        children: {
+          locations: [],
+          equipment: [],
+          points: [],
+          groups: [],
+          items: []
+        }
+      }
+      if (this.previousSelection && item.name === this.previousSelection.item.name) {
+        this.selectedItem = parent
+        this.previousSelection = null
+        this.selectItem(modelItem)
+      }
+      this.checkedItems.push(modelItem)
+
+      return modelItem
+    },
+    getChildren (parent) {
+      // restore previous selection
+      if (this.previousSelection && parent.item.name === this.previousSelection.item.name) {
+        this.selectedItem = parent
+        this.previousSelection = null
+        this.selectItem(parent)
+      }
+
+      parent.children.locations = this.locations
+        .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPartOf === parent.item.name && (i.templates & (1 << this.selectedTemplate)))
+        .map(this.modelItem).sort(compareModelItems)
+      parent.children.locations.forEach(this.getChildren)
+    },
+    selectItem (item) {
+      if (item.children && item.opened !== undefined) {
+        item.opened = !item.opened
+      }
+    },
+    findLocation (searchNode, name) {
+      if (searchNode.item.name === name) {
+        return searchNode
+      } else if (searchNode.children.locations != null) {
+        let foundNode = null
+        const childList = searchNode.children.locations
+        for (let i = 0; i < childList.length; i++) {
+          foundNode = this.findLocation(childList[i], name)
+          if (foundNode) {
+            return foundNode
+          }
+        }
+        return null
+      }
+      return null
+    },
+    checkItem (item, check) {
+      if (check) {
+        this.checkedItems.push(item)
+        if (item.item.groupNames.length > 0) {
+          const parentNode = this.findLocation(this.rootLocations[0], item.item.groupNames[0])
+          if (parentNode && !parentNode.checked) {
+            parentNode.checked = true
+            this.checkItem(parentNode, true)
+          }
+        }
+      } else {
+        this.checkedItems.splice(this.checkedItems.indexOf(item), 1)
+        item.children.locations.forEach((i) => {
+          if (i.checked) {
+            i.checked = false
+            this.checkItem(i, false)
+          }
+        })
+      }
+    },
+    onSelectTemplate (template) {
+      this.$set(this, 'checkedItems', [])
+      this.currentModel = null
+      this.selectedTemplate = template
+    },
+    add () {
+      if (this.prefixErrorMessage) {
+        this.$f7.dialog.alert('Invalid prefix for item names')
+        return
+      }
+      if (this.prefix) {
+        this.checkedItems.forEach((i) => {
+          i.item.name = this.prefix + i.item.name.substr(1)
+          if (i.item.groupNames.length > 0) {
+            i.item.groupNames[0] = this.prefix + i.item.groupNames[0].substr(1)
+          }
+        })
+      }
+      const existingNames = this.itemList.map((i) => i.name)
+      if (this.checkedItems.length === 0) {
+        this.$f7.dialog.alert('Please select some locations')
+      } else if (this.checkedItems.some((i) => existingNames.includes(i.item.name))) {
+        this.$f7.dialog.confirm('Some Item names already exist. Continuing will overwrite those Items. Continue?',
+          'Warning',
+          () => { this.doAdd() }
+        )
+      } else {
+        this.doAdd()
+      }
+    },
+    doAdd () {
+      const dialog = this.$f7.dialog.progress('Creating template...')
+      const payload = this.checkedItems.map((i) => i.item)
+
+      this.$oh.api.put('/rest/items/', payload).then((data) => {
+        dialog.setText('Creating Items...')
+        dialog.setProgress(50)
+      }).catch((err) => {
+        dialog.close()
+        console.error(err)
+        this.$f7.dialog.alert('An error occurred while creating the model items: ' + err)
+      }).then((data) => {
+        dialog.setProgress(100)
+        this.$f7.toast.create({
+          text: 'Model created',
+          destroyOnClose: true,
+          closeTimeout: 2000
+        }).open()
+        dialog.close()
+        this.$f7router.back()
+      })
+    },
+    onPrefixInput (event) {
+      this.prefix = event.target.value
+      this.validatePrefix(this.prefix)
+    },
+    validatePrefix (prefix) {
+      if (prefix && (!/^[A-Za-z0-9_]+$/.test(prefix))) {
+        this.prefixErrorMessage = 'A-Z,a-z,0-9,_ only'
+      } else {
+        this.prefixErrorMessage = ''
+      }
+    }
+  }
+}
+</script>
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 08602a53dc..f4c0632f82 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
@@ -61,7 +61,15 @@
     <f7-block v-else class="semantic-tree-wrapper" :class="{ 'sheet-opened' : detailsOpened }">
       <f7-row>
         <f7-col width="100" medium="50">
-          <empty-state-placeholder v-if="empty" icon="list_bullet_indent" title="model.title" text="model.text" />
+          <f7-block v-if="empty">
+            <empty-state-placeholder icon="list_bullet_indent" title="model.title" text="model.text" />
+            <f7-row class="display-flex justify-content-center">
+              <f7-button color="blue" large raised fill @click="addFromLocationTemplate()">
+                Add Locations from Template
+              </f7-button>
+            </f7-row>
+          </f7-block>
+
           <f7-block v-show="!empty" strong class="semantic-tree" no-gap @click.native="clearSelection">
             <!-- <empty-state-placeholder v-if="empty" icon="list_bullet_indent" title="model.title" text="model.text" /> -->
             <f7-treeview>
@@ -227,6 +235,7 @@
 <script>
 import ModelDetailsPane from '@/components/model/details-pane.vue'
 import AddFromThing from './add-from-thing.vue'
+import AddFromTemplate from './add-from-template.vue'
 
 import ItemStatePreview from '@/components/item/item-state-preview.vue'
 import ItemDetails from '@/components/model/item-details.vue'
@@ -567,7 +576,6 @@ export default {
       this.load()
     },
     addFromThing (createEquipment) {
-      const self = this
       this.$f7router.navigate({
         url: 'add-thing',
         route: {
@@ -586,6 +594,21 @@ export default {
           createEquipment
         }
       })
+    },
+    addFromLocationTemplate () {
+      this.$f7router.navigate({
+        url: 'add-template',
+        route: {
+          component: AddFromTemplate,
+          path: 'add-template',
+          props: {
+          }
+        }
+      }, {
+        props: {
+          itemList: this.items
+        }
+      })
     }
   }
 }