Things: Add copy channel functionality

bundles/org.openhab.ui/web/src/components/thing/channel-link.vue

@@ -44,7 +44,8 @@
       <f7-icon slot="media" color="green" aurora="f7:plus_circle_fill" ios="f7:plus_circle_fill" md="material:control_point" />
     </f7-list-item>
     <f7-list-button class="searchbar-ignore" color="blue" :title="(channelType.parameterGroups.length || channelType.parameters.length) ? 'Configure Channel' : 'Channel Details'" @click="configureChannel()" />
-    <f7-list-button class="searchbar-ignore" v-if="extensible" color="red" title="Remove Channel" @click="removeChannel()" />
+    <f7-list-button class="searchbar-ignore" v-if="extensible && thing.editable" color="blue" :title="(channelType.parameterGroups.length || channelType.parameters.length) ? 'Copy Channel' : ''" @click="copyChannel()" />
+    <f7-list-button class="searchbar-ignore" v-if="extensible && thing.editable" color="red" title="Remove Channel" @click="removeChannel()" />
   </f7-list>
 </template>
 
@@ -61,6 +62,8 @@
 import AddLinkPage from '@/pages/settings/things/link/link-add.vue'
 import ConfigureLinkPage from '@/pages/settings/things/link/link-edit.vue'
 import ConfigureChannelPage from '@/pages/settings/things/channel/channel-edit.vue'
+import AddChannelPage from '@/pages/settings/things/channel/channel-add.vue'
+import CopyChannelPage from '@/pages/settings/things/channel/channel-copy.vue'
 
 import ItemMixin from '@/components/item/item-mixin'
 
@@ -190,6 +193,39 @@ export default {
         }
       })
     },
+    copyChannel () {
+      const self = this
+      const path = 'channels/' + this.channelId + '/edit'
+      this.$f7router.navigate({
+        url: path,
+        route: {
+          component: CopyChannelPage,
+          path: path,
+          context: {
+            operation: 'copy-channel'
+          },
+          on: {
+            pageAfterOut (event, page) {
+              const context = page.route.route.context
+              const finalChannel = context.finalChannel
+              if (finalChannel) {
+                self.thing.channels.push(finalChannel)
+                self.$emit('channel-updated', true)
+              } else {
+                self.$emit('channel-updated', false)
+              }
+            }
+          }
+        }
+      }, {
+        props: {
+          thing: this.thing,
+          channel: this.channel,
+          channelType: this.channelType,
+          channelId: this.channelId
+        }
+      })
+    },
     removeChannel () {
       const self = this
 

bundles/org.openhab.ui/web/src/pages/settings/things/channel/channel-add.vue

@@ -1,6 +1,6 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" name="channel-add">
-    <f7-navbar title="Add Channel" back-link="Cancel">
+    <f7-navbar title="Add Channel" :subtitle="thing.label" back-link="Cancel">
       <f7-nav-right class="if-not-aurora">
         <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
         <f7-link @click="save()" v-if="!$theme.md">

bundles/org.openhab.ui/web/src/pages/settings/things/channel/channel-copy.vue

@@ -0,0 +1,95 @@
+<template>
+  <f7-page @page:afterin="onPageAfterIn" name="channel-copy">
+    <f7-navbar title="Copy channel" :subtitle="thing.label" back-link="Cancel">
+      <f7-nav-right>
+        <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
+        <f7-link @click="save()" v-if="!$theme.md">
+          Save
+        </f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+    <f7-block class="block-narrow">
+      <f7-col v-if="channel">
+        <f7-block-title>Channel</f7-block-title>
+        <channel-general-settings :channel="channel" :channelType="channelType" :createMode="true" />
+      </f7-col>
+      <f7-col v-if="channelType != null">
+        <f7-block-title v-if="configDescription.parameters">
+          Configuration
+        </f7-block-title>
+        <f7-block-footer v-else-if="noConfig" class="padding">
+          This channel has no configuration.<br><br><f7-link back>
+            Go Back
+          </f7-link>
+        </f7-block-footer>
+        <config-sheet
+          :parameter-groups="configDescription.parameterGroups"
+          :parameters="configDescription.parameters"
+          :configuration="config" />
+      </f7-col>
+    </f7-block>
+  </f7-page>
+</template>
+
+<script>
+import ChannelGeneralSettings from '@/pages/settings/things/channel/channel-general-settings.vue'
+import ConfigSheet from '@/components/config/config-sheet.vue'
+
+export default {
+  components: {
+    ChannelGeneralSettings,
+    ConfigSheet
+  },
+  props: ['thing', 'channel', 'channelType', 'channelId'],
+  data () {
+    return {
+      configDescription: {},
+      config: {},
+      noConfig: false
+    }
+  },
+  methods: {
+    onPageAfterIn (event) {
+      this.channel.id = this.channel.id + '_copy'
+      this.channel.uid = this.channel.uid + '_copy'
+      this.channel.label = this.channel.label + ' copy'
+      this.config = Object.assign({}, this.channel.configuration)
+      this.$oh.api.get(`/rest/config-descriptions/channel:${this.thing.UID}:${this.channelId.replace('#', '%23')}`).then((ct) => {
+        this.configDescription = ct
+      }).catch((err) => {
+        if (err === 'Not Found' || err === 404) {
+          this.noConfig = true
+        }
+      })
+    },
+    save () {
+      if (!this.channel.id) {
+        this.$f7.dialog.alert('Please give an unique identifier')
+        return
+      }
+      if (!this.channel.id.match(/^[a-zA-Z0-9_-]*$/)) {
+        this.$f7.dialog.alert('The identifier should only contain alphanumeric characters')
+        return
+      }
+      if (!this.channel.label) {
+        this.$f7.dialog.alert('Please give a label')
+        return
+      }
+
+      let finalChannel = Object.assign({}, this.channel, {
+        uid: this.thing.UID + ':' + this.channel.id,
+        channelTypeUID: this.channel.channelTypeUID,
+        kind: this.channel.kind,
+        itemType: this.channel.itemType,
+        linkedItems: [],
+        properties: this.channel.properties,
+        defaultTags: this.channel.defaultTags,
+        configuration: this.channel.configuration
+      })
+      this.$f7route.route.context.finalChannel = finalChannel
+      // this.$f7router.emit('complete', finalChannel)
+      this.$f7router.back()
+    }
+  }
+}
+</script>