Merge e9e905e into eb7596c

openhab · Mar 10, 2021 · f4fc2a8 · f4fc2a8
2 parents eb7596c + e9e905e
commit f4fc2a8
Show file tree

Hide file tree

Showing 33 changed files with 281 additions and 356 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/location-picker-popup.vue b/bundles/org.openhab.ui/web/src/components/config/controls/location-picker-popup.vue
@@ -0,0 +1,70 @@
+<template>
+  <f7-popup ref="mapPicker" class="mappicker-popup" @popup:open="mapPickerOpen" @popup:closed="mapPickerClosed">
+    <f7-page>
+      <f7-navbar>
+        <f7-nav-left>
+          <f7-link icon-ios="f7:arrow_left" icon-md="material:arrow_back" icon-aurora="f7:arrow_left" popup-close />
+        </f7-nav-left>
+        <f7-nav-title>{{ title }}</f7-nav-title>
+        <f7-nav-right>
+          <f7-link class="popup-close" @click="updateValue(currentPosition)">
+            Done
+          </f7-link>
+        </f7-nav-right>
+      </f7-navbar>
+
+      <location-picker v-if="showMap" :value="currentPosition" @input="updatePosition" />
+    </f7-page>
+  </f7-popup>
+</template>
+
+<style lang="stylus">
+.mappicker-popup .oh-map-picker-lmap
+  background-color var(--f7-page-bg-color)
+  &.leaflet-grab
+    cursor crosshair
+.leaflet-dragging .oh-map-picker-lmap.leaflet-grab
+  cursor grabbing !important
+</style>
+
+<script>
+export default {
+  props: ['value', 'title'],
+  components: {
+    'location-picker': () => import(/* webpackChunkName: "location-picker" */ './location-picker.vue')
+  },
+  data () {
+    return {
+      showMap: false,
+      currentPosition: null
+    }
+  },
+  watch: {
+    value (val) {
+      this.currentPosition = val
+    }
+  },
+  methods: {
+    updateValue () {
+      if (this.currentPosition) {
+        this.$f7.emit('locationUpdate', this.currentPosition)
+      }
+    },
+    updatePosition (event) {
+      if (event.lat && event.lng) {
+        this.currentPosition = [event.lat, event.lng].join(',')
+      }
+    },
+    mapPickerClosed () {
+      this.showMap = false
+      this.$f7.emit('locationPickerClosed')
+    },
+    mapPickerOpen () {
+      this.currentPosition = this.value
+      this.$nextTick(() => {
+        this.showMap = true
+      })
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/location-picker.vue b/bundles/org.openhab.ui/web/src/components/config/controls/location-picker.vue
@@ -1,43 +1,19 @@
 <template>
-  <f7-popup ref="mapPicker" class="mappicker-popup" @popup:opened="mapPickerOpened" @popup:closed="mapPickerClosed">
-    <f7-page>
-      <f7-navbar>
-        <f7-nav-left>
-          <f7-link icon-ios="f7:arrow_left" icon-md="material:arrow_back" icon-aurora="f7:arrow_left" popup-close />
-        </f7-nav-left>
-        <f7-nav-title>{{ title }}</f7-nav-title>
-        <f7-nav-right>
-          <f7-link class="popup-close" @click="updateValue(marker)">
-            Done
-          </f7-link>
-        </f7-nav-right>
-      </f7-navbar>
-
-      <l-map
-        v-if="showMap"
-        :zoom="zoom"
-        :center="center"
-        :options="mapOptions"
-        @click="mapClicked"
-        class="oh-map-picker-lmap">
-        <l-tile-layer
-          :url="url"
-          :attribution="attribution" />
-        <l-marker v-if="marker" :lat-lng="marker" />
-      </l-map>
-    </f7-page>
-  </f7-popup>
+  <l-map
+    v-if="showMap"
+    :zoom="zoom"
+    :center="center"
+    :options="mapOptions"
+    @click="mapClicked"
+    ref="map"
+    class="oh-map-picker-lmap">
+    <l-tile-layer
+      :url="url"
+      :attribution="attribution" />
+    <l-marker v-if="marker" :lat-lng="marker" />
+  </l-map>
 </template>
 
-<style lang="stylus">
-.mappicker-popup .oh-map-picker-lmap
-  background-color var(--f7-page-bg-color)
-  &.leaflet-grab
-    cursor crosshair
-.leaflet-dragging .oh-map-picker-lmap.leaflet-grab
-  cursor grabbing !important
-</style>
-
 <script>
 import { latLng, Icon } from 'leaflet'
 import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
@@ -51,46 +27,38 @@ Icon.Default.mergeOptions({
 })
 
 export default {
-  props: ['value', 'title'],
+  props: ['value'],
   components: {
     LMap,
     LTileLayer,
     LMarker
   },
   data () {
     return {
+      showMap: false,
       zoom: 4,
       center: latLng(48, 6),
       // url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       url: `https://a.basemaps.cartocdn.com/${this.$f7.data.themeOptions.dark}_all/{z}/{x}/{y}.png`,
       attribution: '&copy; <a class="external" target="_blank" href="http://osm.org/copyright">OpenStreetMap</a>, &copy; <a class="external" target="_blank" href="https://carto.com/attribution/">CARTO</a>',
       marker: null,
-      showMap: false,
       mapOptions: {
         zoomSnap: 0.5
       }
     }
   },
+  mounted () {
+    this.$nextTick(() => {
+      this.zoom = (this.value) ? 13 : 4
+      this.marker = (this.value) ? latLng(this.value.split(',')) : null
+      this.center = (this.value) ? latLng(this.value.split(',')) : latLng(48, 6)
+      this.showMap = true
+    })
+  },
   methods: {
-    updateValue (marker) {
-      if (marker.lat && marker.lng) {
-        this.$f7.emit('locationUpdate', marker)
-      }
-    },
-    mapPickerClosed () {
-      this.showMap = false
-      this.$f7.emit('locationPickerClosed')
-    },
     mapClicked (evt) {
       this.marker = latLng(evt.latlng)
-    },
-    mapPickerOpened () {
-      this.$nextTick(() => {
-        this.zoom = (this.value) ? 13 : 4
-        this.marker = (this.value) ? latLng(this.value.split(',')) : null
-        this.center = (this.value) ? latLng(this.value.split(',')) : latLng(48, 6)
-        this.showMap = true
-      })
+      this.$emit('input', this.marker)
     }
   }
 }

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue
@@ -19,12 +19,10 @@
         {{ translation }}
       </div>
     </f7-list-input>
-    <!-- <cron-editor :value="value" :opened="popupOpened" :popup-id="`config-${configDescription.name}-fullscreen`" @closed="popupOpened = false" @input="(value) => { $emit('input', value) }" /> -->
   </ul>
 </template>
 
 <script>
-import CronEditorPopup from './cronexpression-editor.vue'
 import cronstrue from 'cronstrue'
 
 export default {
@@ -38,25 +36,27 @@ export default {
       this.$emit('input', value)
     },
     openPopup () {
-      const popup = {
-        component: CronEditorPopup
-      }
-
-      this.$f7router.navigate({
-        url: 'widget-code',
-        route: {
-          path: 'widget-code',
-          popup
+      import(/* webpackChunkName: "cronexpression-editor" */ '@/components/config/controls/cronexpression-editor.vue').then((c) => {
+        const popup = {
+          component: c.default
         }
-      }, {
-        props: {
-          value: this.value
-        }
-      })
 
-      this.$f7.once('cronEditorUpdate', this.updateValue)
-      this.$f7.once('cronEditorClosed', () => {
-        this.$f7.off('cronEditorUpdate', this.updateValue)
+        this.$f7router.navigate({
+          url: 'cron-edit',
+          route: {
+            path: 'cron-edit',
+            popup
+          }
+        }, {
+          props: {
+            value: this.value
+          }
+        })
+
+        this.$f7.once('cronEditorUpdate', this.updateValue)
+        this.$f7.once('cronEditorClosed', () => {
+          this.$f7.off('cronEditorUpdate', this.updateValue)
+        })
       })
     }
   },

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-location.vue b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-location.vue
@@ -8,7 +8,7 @@
       :placeholder="placeholder"
       :required="configDescription.required" validate
       :clear-button="!configDescription.required"
-      @input="updateValue"
+      @input="(ev) => updateValue(ev.target.value)"
       type="text">
       <div class="padding-left" slot="content-end">
         <f7-button slot="content-end" @click="openMapPicker">
@@ -23,21 +23,17 @@
 </style>
 
 <script>
-import LocationPicker from './location-picker.vue'
+import LocationPickerPopup from './location-picker-popup.vue'
 
 export default {
   props: ['configDescription', 'value', 'placeholder'],
   methods: {
-    updateValue (event) {
-      if (event.lat && event.lng) {
-        this.$emit('input', [event.lat, event.lng].join(','))
-      } else {
-        this.$emit('input', event.target.value)
-      }
+    updateValue (position) {
+      this.$emit('input', position)
     },
     openMapPicker () {
       const popup = {
-        component: LocationPicker
+        component: LocationPickerPopup
       }
 
       this.$f7router.navigate({

diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-code.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-code.vue
@@ -53,7 +53,7 @@ import dslUtil from './dslUtil'
 
 export default {
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   props: ['sitemap'],
   data () {

diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/widget-code-popup.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/widget-code-popup.vue
@@ -38,7 +38,7 @@ import YAML from 'yaml'
 export default {
   props: ['component', 'componentType'],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   data () {
     return {

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popup.vue b/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popup.vue
@@ -27,6 +27,9 @@
 import modal from './modal-mixin'
 
 export default {
-  mixins: [modal]
+  mixins: [modal],
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue b/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue
@@ -25,6 +25,9 @@
 import modal from './modal-mixin'
 
 export default {
-  mixins: [modal]
+  mixins: [modal],
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/js/app.js b/bundles/org.openhab.ui/web/src/js/app.js
@@ -8,7 +8,6 @@ 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 EmptyStatePlaceholder from '../components/empty-state-placeholder.vue'
 import GenericWidgetComponent from '../components/widgets/generic-widget-component.vue'
 
 // Import Framework7
@@ -80,5 +79,4 @@ 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('empty-state-placeholder', EmptyStatePlaceholder)
 Vue.component('generic-widget-component', GenericWidgetComponent)