From 172733106f9406d4caf9f7265d69b59b7a05c393 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <habpanel@schaus.net>
Date: Wed, 26 Sep 2018 02:23:38 +0200
Subject: [PATCH] Manifest precaching, SW in dev mode, UI fixes

Card deck filters: menu was not always appearing in Firefox
Use a web app manifest in statics to precache (prevent asking for credentials)
JSON Editor in card designer was broken
Fix suggestion chip at start of chat (also it is now dynamic)
Make the SW work again in dev mode
Consider all colored cards dark (temp. fix for https://github.com/quasarframework/quasar/issues/2546#issuecomment-420980689, should/will add an option)

Signed-off-by: Yannick Schaus <habpanel@schaus.net>
---
 web/quasar.conf.js                      | 35 ++++++++++++------------
 web/src/components/HbCard.vue           |  2 +-
 web/src/index.template.html             |  5 ++--
 web/src/layouts/designer/JsonEditor.vue |  4 +--
 web/src/pages/CardDeck.vue              | 24 +++++------------
 web/src/pages/Chat.vue                  | 14 ++++++----
 web/src/statics/manifest.json           | 36 +++++++++++++++++++++++++
 7 files changed, 74 insertions(+), 46 deletions(-)
 create mode 100644 web/src/statics/manifest.json

diff --git a/web/quasar.conf.js b/web/quasar.conf.js
index 0fd3a06..fc4e29e 100644
--- a/web/quasar.conf.js
+++ b/web/quasar.conf.js
@@ -25,25 +25,26 @@ module.exports = function (ctx) {
       // extractCSS: false,
       // useNotifier: false,
       chainWebpack (chain, { isServer, isClient }) {
-        chain.plugin('manifest-crossorigin').use(class ManifestCrossoriginPlugin {
-          apply (compiler) {
-            compiler.hooks.compilation.tap('webpack-plugin-manifest-crossorigin', compilation => {
-              compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('webpack-plugin-manifest-crossorigin', (data, callback) => {
-                if (data.head) {
-                  for (let tag of data.head) {
-                    // console.log('adding crossorigin to ' + JSON.stringify(tag))
-                    if (tag.tagName === 'link' && tag.attributes.rel === 'manifest') {
-                      tag.attributes.crossorigin = 'use-credentials'
-                      // console.log('done!' + JSON.stringify(tag))
+        if (!ctx.dev) {
+          chain.plugin('manifest-crossorigin').use(class ManifestCrossoriginPlugin {
+            apply (compiler) {
+              compiler.hooks.compilation.tap('webpack-plugin-manifest-crossorigin', compilation => {
+                compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('webpack-plugin-manifest-crossorigin', (data, callback) => {
+                  if (data.head) {
+                    for (let tag of data.head) {
+                      if (tag.tagName === 'link' && tag.attributes.rel === 'manifest') {
+                        tag.attributes.crossorigin = 'use-credentials'
+                        tag.attributes.href = '/habot/statics/manifest.json'
+                      }
                     }
                   }
-                }
-                // finally, inform Webpack that we're ready
-                callback(null, data)
+                  // finally, inform Webpack that we're ready
+                  callback(null, data)
+                })
               })
-            })
-          }
-        }, [])
+            }
+          }, [])
+        }
       },
       extendWebpack (cfg) {
         cfg.module.rules.push({
@@ -188,7 +189,7 @@ module.exports = function (ctx) {
     ],
     pwa: {
       workboxPluginMode: 'InjectManifest',
-      workboxOptions: {
+      workboxOptions: (ctx.dev) ? {} : {
         importWorkboxFrom: 'local'
       },
       manifest: {
diff --git a/web/src/components/HbCard.vue b/web/src/components/HbCard.vue
index 2199e89..4b20285 100644
--- a/web/src/components/HbCard.vue
+++ b/web/src/components/HbCard.vue
@@ -1,5 +1,5 @@
 <template>
-<q-card inline v-if="model" class="hb-card" :class="{ bigger: model.config && model.config.bigger, 'highlight-and-fade': this.model.highlight }" :color="color" :text-color="textColor">
+<q-card inline v-if="model" class="hb-card" :class="{ bigger: model.config && model.config.bigger, 'highlight-and-fade': this.model.highlight }" :color="color" :text-color="textColor" :dark="color">
   <q-card-media v-if="model.slots && model.slots.media">
     <component v-for="(component, idx) in model.slots.media" :key="'card-media-' + idx" :is="component.component" :model="component"></component>
   </q-card-media>
diff --git a/web/src/index.template.html b/web/src/index.template.html
index 1141750..73e73a8 100644
--- a/web/src/index.template.html
+++ b/web/src/index.template.html
@@ -7,9 +7,8 @@
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
     <title><%= htmlWebpackPlugin.options.productName %></title>
 
-    <link rel="icon" href="statics/quasar-logo.png" type="image/x-icon">
-    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png" crossorigin="use-credentials">
+    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png" crossorigin="use-credentials">
   </head>
   <body>
     <% if (!htmlWebpackPlugin.options.ctx.mode.electron) { %>
diff --git a/web/src/layouts/designer/JsonEditor.vue b/web/src/layouts/designer/JsonEditor.vue
index 8635d56..b97570e 100644
--- a/web/src/layouts/designer/JsonEditor.vue
+++ b/web/src/layouts/designer/JsonEditor.vue
@@ -15,9 +15,9 @@
       <q-btn flat round icon="done" @click="validate(false)"><q-tooltip :disable="$q.platform.has.touch">Validate</q-tooltip></q-btn>
       <q-btn flat round icon="system_update_alt" @click="update"><q-tooltip :disable="$q.platform.has.touch">Update</q-tooltip></q-btn>
     </q-toolbar>
-    <q-scroll-area class="fit q-pt-md q-px-sm">
+    <div class="fit">
       <q-input class="json-editor" v-model="json" hide-underline type="textarea" />
-    </q-scroll-area>
+    </div>
     <q-modal position="top" v-model="showValidationReport" :content-css="{padding: '20px'}">
       <div class="q-display-1 q-mb-md">Validation Report</div>
       <p>
diff --git a/web/src/pages/CardDeck.vue b/web/src/pages/CardDeck.vue
index 4ed459d..4a265b4 100644
--- a/web/src/pages/CardDeck.vue
+++ b/web/src/pages/CardDeck.vue
@@ -3,12 +3,8 @@
     <div class="row bg-grey-2 shadow-2">
       <q-checkbox class="multiple-toggle" color="secondary" v-model="multiple" unchecked-icon="done" checked-icon="done_all"></q-checkbox>
       <div :class="['filters', 'row', (multiple) ? 'multiple' : 'single']">
-        <div class="col-12 col-sm-6">
-          <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" clearable chips color="secondary" v-model="objects" :options="objectSet" float-label="Objects"></q-select>
-        </div>
-        <div class="col-12 col-sm-6">
-          <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" clearable chips color="secondary" v-model="locations" :options="locationSet" float-label="Locations"></q-select>
-        </div>
+        <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" class="col-12 col-sm-6" clearable chips color="secondary" v-model="objects" :options="objectSet" float-label="Objects"></q-select>
+        <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" class="col-12 col-sm-6" clearable chips color="secondary" v-model="locations" :options="locationSet" float-label="Locations"></q-select>
       </div>
       <!-- <q-search v-model="search" color="none" class="col"></q-search> -->
     </div>
@@ -70,19 +66,11 @@
   padding 10px
   width 100%
   margin-right 50px
-  &.single .q-if-inner
-    //min-height 43px !important
-    // margin-top 2px !important
-    // margin-left 3px !important
-    .q-input-target
-      margin-top 2px !important
-      margin-left 10px !important
-    // margin-bottom 3px !important  padding 10px
   .q-select
-    .q-if-label
-        //top 21px
-        &.q-if-label-above
-          //transform scale(0.75) translate(0, -28px)
+    padding-top 13px
+  .q-if-label
+    width 100%
+    cursor pointer !important
 
 .hb-cards
   padding 10px
diff --git a/web/src/pages/Chat.vue b/web/src/pages/Chat.vue
index e82a0e3..14093b1 100644
--- a/web/src/pages/Chat.vue
+++ b/web/src/pages/Chat.vue
@@ -51,7 +51,7 @@
 
         <div v-if="chat.greetingSuggestions" class="suggestion-chips">
           <q-btn rounded outline no-caps v-if="bookmarksCount" color="secondary" icon="bookmark" @click="$router.push('/cards/bookmarks')">Bookmarks</q-btn>
-          <q-btn rounded outline no-caps v-if="suggestionsCount" color="secondary" icon="star" @click="$router.push('/cards/suggestions')">Suggestions
+          <q-btn class="q-ml-sm" rounded outline no-caps v-if="suggestionsCount" color="secondary" icon="star" @click="$router.push('/cards/suggestions')">Suggestions
             <q-chip floating small dense color="red">{{suggestionsCount}}</q-chip>
           </q-btn>
         </div>
@@ -147,7 +147,7 @@ export default {
       showPWAPrompt: false,
       inputPlaceholder: 'Ask me about your home',
       stickToBottom: false,
-      suggestionsCount: 0,
+      // suggestionsCount: 0,
       bookmarksCount: 0
     }
   },
@@ -204,11 +204,15 @@ export default {
       this.showPWAPrompt = true
     }
 
-    this.$store.dispatch('cards/computeSuggestions').then((cards) => {
-      this.suggestionsCount = cards.length
-    })
     this.bookmarksCount = this.$store.getters['cards/bookmarked'].length
   },
+  asyncComputed: {
+    suggestionsCount () {
+      return this.$store.dispatch('cards/computeSuggestions').then((cards) => {
+        return cards.length
+      })
+    }
+  },
   mounted () {
     // if (this.$q.platform.is.iphone) {
     //   (new MutationObserver(this.scrollToBottom)).observe(this.$el, {childList: true, subtree: true})
diff --git a/web/src/statics/manifest.json b/web/src/statics/manifest.json
new file mode 100644
index 0000000..63420e3
--- /dev/null
+++ b/web/src/statics/manifest.json
@@ -0,0 +1,36 @@
+{
+  "name": "HABot",
+  "short_name": "HABot",
+  "description": "Chatbot for openHAB",
+  "display": "standalone",
+  "start_url": "/habot/",
+  "background_color": "#ffffff",
+  "theme_color": "#ff6600",
+  "icons": [
+    {
+      "src": "/habot/statics/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
\ No newline at end of file