Setup wizard: Add separate step for persistence

bundles/org.openhab.ui/web/src/assets/i18n/setup-wizard/en.json

@@ -7,7 +7,7 @@
   "setupwizard.skipSetup.confirm.title": "Skip Setup",
   "setupwizard.skipSetup.confirm.message": "Are you sure? Setup saves you time by performing just a few basic configuration tasks. You should only skip it if you know what you're doing.",
   "setupwizard.location.title": "Set your Location",
-  "setupwizard.location.header1": "Would you like to share your home's location?",
+  "setupwizard.location.header1": "Would you like to set your home's location?",
   "setupwizard.location.header2": "It will help determining data dependent on your position, like sunrise/sunset times or the weather.",
   "setupwizard.location.parameterLabel": "Location of your home",
   "setupwizard.location.placeholder": "<latitude>,<longitude>[,<altitude>]",
@@ -18,12 +18,22 @@
   "setupwizard.location.footer": "This will ask your device for the permission to use its current location, only to help you fill in your current latitude and longitude above. You can revoke the permission afterwards.",
   "setupwizard.location.setLocation": "Set Location",
   "setupwizard.location.configureLater": "Configure in Settings Later",
+  "setupwizard.persistence.title": "Choose Persistence Add-ons",
+  "setupwizard.persistence.header1": "openHAB relies on persistence add-ons to store and retrieve historic states.",
+  "setupwizard.persistence.header2": "Select persistence add-ons to match the functionality you require.",
+  "setupwizard.addon.persistence-rrd4j.line1": "Stores state of numerical items. Does not grow in size by storing historical data on different levels of granularity.",
+  "setupwizard.addon.persistence-rrd4j.line2": "Recommended if you want to have charts of the historic state of numerical items.",
+  "setupwizard.addon.persistence-mapdb.line1": "Always stores the last state of an item. Allows restoring the state of all items on openHAB startup.",
+  "setupwizard.addon.persistence-mapdb.line2": "Recommended if you want openHAB to always remember the last state before shutdown.",
+  "setupwizard.persistence.footer": "Other advanced persistence services and configurations are possible and can be configured later.",
+  "setupwizard.persistence.install": "Install Selected Persistence Add-ons",
+  "setupwizard.persistence.installLater": "Install Persistence Add-ons Later",
   "setupwizard.addons.title": "Install Add-ons",
   "setupwizard.addons.header1": "Most of openHAB's functionality is provided by add-ons.",
   "setupwizard.addons.header2": "Choose which add-ons you would like to install now.",
   "setupwizard.addons.header3": "A recommended set of add-ons have been pre-selected.",
   "setupwizard.addons.browseAddonsOnWebsite": "Browse Add-ons on openhab.org",
-  "setupwizard.addons.selectAddons": "Select Add-ons to Install",
+  "setupwizard.addons.selectAddons": "Select More Add-ons to Install",
   "setupwizard.addons.selectAddons.placeholder": "Try: astro, mqtt, hue, knx...",
   "setupwizard.addons.footer": "To optimize your system resources, install only the add-ons you need! Installing add-ons can take a while. Please be patient and stay on this page until the operation finishes.",
   "setupwizard.addons.installAddons": "Install 1 add-on | Install {n} add-ons",
@@ -34,5 +44,6 @@
   "setupwizard.addons.pleaseWait": "Please Wait...",
   "setupwizard.addons.waitMessage": "It may take a few minutes to install the add-ons you selected.",
   "setupwizard.welcome.title": "Welcome to openHAB!",
+  "setupwizard.welcome.bindingsInstalled": "You have installed one or more bindings. Things provided by these bindings will appear in the Things Inbox. You can accept and further configure from there.",
   "setupwizard.welcome.getStarted": "Get Started"
 }

bundles/org.openhab.ui/web/src/components/addons/addons-setup-wizard.vue

@@ -0,0 +1,102 @@
+<template>
+  <f7-list media-list>
+    <f7-list-item v-for="addon in addons" :key="addon.uid" class="addons-setup-wizard">
+      <f7-block class="addon display-flex flex-direction-column">
+        <f7-row no-gap class="item-title">
+          <f7-col width="10">
+            <f7-checkbox :checked="selectedAddon(addon)" :disabled="addon.installed" @change="changeAddonSelection(addon, $event)" />
+          </f7-col>
+          <f7-col width="70">
+            {{ addon.label }}
+          </f7-col>
+          <f7-col v-if="addon.link" width="20" style="text-align: right">
+            <f7-link icon-f7="doc_text_search" :external="true" color="gray" target="_blank" :href="addon.link" />
+          </f7-col>
+        </f7-row>
+        <f7-row no-gap style="margin-top: 0.5rem; margin-bottom: 0">
+          <div class="addon-description">
+            <addon-logo class="logo-square" :addon="addon" size="54" />
+            <span class="text" v-html="description(addon)" />
+          </div>
+        </f7-row>
+      </f7-block>
+    </f7-list-item>/>
+  </f7-list>
+</template>
+
+<style lang="stylus">
+.addons-setup-wizard
+  .addon
+    margin-top: 0.5rem
+    margin-bottom: 0.5rem
+    padding: 0
+    .addon-description
+      width 100%
+      display flex
+      .logo-square
+        background white
+        border-radius 10%
+        width 64px
+        height 64px
+        margin-top 6.5px
+        display flex
+        justify-content center
+        align-items center
+        .logo
+          margin-left 0
+          max-height 54px
+          max-width 54px
+      .text
+        margin-left 0.5rem
+        max-width calc(100% - 64px - 0.5rem)
+</style>
+
+<script>
+import AddonLogo from '@/components/addons/addon-logo.vue'
+
+import { loadLocaleMessages } from '@/js/i18n'
+
+export default {
+  model: {
+    prop: 'selected',
+    event: 'update'
+  },
+  props: ['addons', 'selectedAddons'],
+  components: {
+    AddonLogo
+  },
+  data () {
+    return {
+      selected: []
+    }
+  },
+  i18n: {
+    messages: loadLocaleMessages(require.context('@/assets/i18n/setup-wizard'))
+  },
+  methods: {
+    selectedAddon (addon) {
+      if (typeof this.selectedAddons === 'undefined') return true
+      return this.selectedAddons.includes(addon)
+    },
+    changeAddonSelection (addon, event) {
+      if (event.target.checked) {
+        this.$set(this, 'selected', [...new Set(this.selected.concat(addon))])
+      } else {
+        this.$set(this, 'selected', this.selected.filter(a => (a.uid !== addon.uid)))
+      }
+      this.$emit('update', this.selected)
+    },
+    description (addon) {
+      const line1 = this.$t('setupwizard.addon.' + addon.uid + '.line1')
+      const line2 = this.$t('setupwizard.addon.' + addon.uid + '.line2')
+      const hasLine1 = (line1 !== 'setupwizard.addon.' + addon.uid + '.line1')
+      const hasLine2 = (line2 !== 'setupwizard.addon.' + addon.uid + '.line2')
+      let descr = (hasLine1 ? line1 : '') + (hasLine2 ? ('<br>' + line2) : '')
+      return descr || addon.description || (addon.uid + '<br>' + addon.version)
+    }
+  },
+  mounted () {
+    this.selected = this.addons
+  }
+}
+</script>