From cc3e52c69df762f743d4e5ea5387e0960c649928 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Thu, 26 Nov 2020 00:26:10 +0100
Subject: [PATCH] Migrated ImageCarousel widget

---
 .../backend/http/app/routes/resources.py      |   4 +-
 .../widgets/Calendar/Index.vue                |   0
 .../widgets/DateTime/Index.vue                |   2 +-
 .../widgets/DateTimeWeather/Index.vue         |  18 +-
 .../widgets/ImageCarousel/Index.vue           | 292 ++++++++++++++++++
 .../{ => components}/widgets/Music/Index.vue  |   0
 .../src/{ => components}/widgets/Row.vue      |   7 +-
 .../widgets/Weather/Index.vue                 |  35 ++-
 .../src/{ => components}/widgets/Widget.vue   |  24 +-
 .../http/webapp/src/views/Dashboard.vue       |   7 +-
 10 files changed, 353 insertions(+), 36 deletions(-)
 rename platypush/backend/http/webapp/src/{ => components}/widgets/Calendar/Index.vue (100%)
 rename platypush/backend/http/webapp/src/{ => components}/widgets/DateTime/Index.vue (98%)
 rename platypush/backend/http/webapp/src/{ => components}/widgets/DateTimeWeather/Index.vue (90%)
 create mode 100644 platypush/backend/http/webapp/src/components/widgets/ImageCarousel/Index.vue
 rename platypush/backend/http/webapp/src/{ => components}/widgets/Music/Index.vue (100%)
 rename platypush/backend/http/webapp/src/{ => components}/widgets/Row.vue (83%)
 rename platypush/backend/http/webapp/src/{ => components}/widgets/Weather/Index.vue (75%)
 rename platypush/backend/http/webapp/src/{ => components}/widgets/Widget.vue (62%)

diff --git a/platypush/backend/http/app/routes/resources.py b/platypush/backend/http/app/routes/resources.py
index 83d3b654..e5803ca8 100644
--- a/platypush/backend/http/app/routes/resources.py
+++ b/platypush/backend/http/app/routes/resources.py
@@ -4,7 +4,7 @@ import re
 from flask import Blueprint, abort, send_from_directory
 
 from platypush.config import Config
-from platypush.backend.http.app import template_folder, static_folder
+from platypush.backend.http.app import template_folder
 
 
 img_folder = os.path.join(template_folder, 'img')
@@ -24,7 +24,6 @@ __routes__ = [
 def resources_path(path):
     """ Custom static resources """
     path_tokens = path.split('/')
-    filename = path_tokens.pop(-1)
     http_conf = Config.get('backend.http')
     resource_dirs = http_conf.get('resource_dirs', {})
 
@@ -61,6 +60,7 @@ def serve_favicon():
     """ favicon.ico icon """
     return send_from_directory(template_folder, 'favicon.ico')
 
+
 @img.route('/img/<path:path>', methods=['GET'])
 def imgpath(path):
     """ Default static images """
diff --git a/platypush/backend/http/webapp/src/widgets/Calendar/Index.vue b/platypush/backend/http/webapp/src/components/widgets/Calendar/Index.vue
similarity index 100%
rename from platypush/backend/http/webapp/src/widgets/Calendar/Index.vue
rename to platypush/backend/http/webapp/src/components/widgets/Calendar/Index.vue
diff --git a/platypush/backend/http/webapp/src/widgets/DateTime/Index.vue b/platypush/backend/http/webapp/src/components/widgets/DateTime/Index.vue
similarity index 98%
rename from platypush/backend/http/webapp/src/widgets/DateTime/Index.vue
rename to platypush/backend/http/webapp/src/components/widgets/DateTime/Index.vue
index 6be4d955..335aaa66 100644
--- a/platypush/backend/http/webapp/src/widgets/DateTime/Index.vue
+++ b/platypush/backend/http/webapp/src/components/widgets/DateTime/Index.vue
@@ -68,7 +68,7 @@ export default {
 <style lang="scss" scoped>
 .date-time {
   .date {
-    font-size: 1.3em;
+    font-size: 1.1em;
   }
 
   .time {
diff --git a/platypush/backend/http/webapp/src/widgets/DateTimeWeather/Index.vue b/platypush/backend/http/webapp/src/components/widgets/DateTimeWeather/Index.vue
similarity index 90%
rename from platypush/backend/http/webapp/src/widgets/DateTimeWeather/Index.vue
rename to platypush/backend/http/webapp/src/components/widgets/DateTimeWeather/Index.vue
index 1d60000b..672604e4 100644
--- a/platypush/backend/http/webapp/src/widgets/DateTimeWeather/Index.vue
+++ b/platypush/backend/http/webapp/src/components/widgets/DateTimeWeather/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="date-time-weather">
     <div class="row date-time-container">
-      <DateTime :show-date="_showDate" :show-time="_showTime" :animate="animate"
+      <DateTime :show-date="_showDate" :show-time="_showTime" :show-seconds="_showSeconds" :animate="animate"
                 v-if="_showDate || _showTime" />
     </div>
 
@@ -30,8 +30,8 @@
 
 <script>
 import Utils from "@/Utils";
-import DateTime from "@/widgets/DateTime/Index";
-import Weather from "@/widgets/Weather/Index";
+import DateTime from "@/components/widgets/DateTime/Index";
+import Weather from "@/components/widgets/Weather/Index";
 import Sensor from "@/components/Sensor";
 
 // Widget to show date, time, weather and temperature information
@@ -44,7 +44,7 @@ export default {
     // Otherwise, it will be a static image.
     animate: {
       required: false,
-      default: false,
+      default: true,
     },
 
     // Size of the weather icon in pixels.
@@ -84,6 +84,12 @@ export default {
       default: true,
     },
 
+    // If false then don't display the seconds.
+    showSeconds: {
+      required: false,
+      default: true,
+    },
+
     // Name of the attribute on a received SensorDataChangeEvent that
     // represents the temperature value to be rendered.
     sensorTemperatureAttr: {
@@ -117,6 +123,10 @@ export default {
       return this.parseBoolean(this.showTime)
     },
 
+    _showSeconds() {
+      return this.parseBoolean(this.showSeconds)
+    },
+
     _showWeather() {
       return this.parseBoolean(this.showWeather)
     },
diff --git a/platypush/backend/http/webapp/src/components/widgets/ImageCarousel/Index.vue b/platypush/backend/http/webapp/src/components/widgets/ImageCarousel/Index.vue
new file mode 100644
index 00000000..58ae03b0
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/widgets/ImageCarousel/Index.vue
@@ -0,0 +1,292 @@
+<template>
+  <div class="image-carousel">
+    <Loading v-if="!images.length" />
+    <div ref="background" class="background" />
+    <img ref="img" :src="imgURL" alt="Your carousel images"
+         :style="{display: !images.length ? 'none' : 'block'}">
+
+    <div class="row info-container" v-if="_showDate || _showTime">
+      <div class="col-6 weather-container">
+        <span v-if="!_showWeather">&nbsp;</span>
+        <Weather :show-icon="_showWeatherIcon" :show-summary="_showWeatherSummary" :show-temperature="_showTemperature"
+                 :icon-color="weatherIconColor" :icon-size="weatherIconSize" :animate="_animateWeatherIcon" v-else />
+      </div>
+
+      <div class="col-6 date-time-container">
+        <DateTime :show-date="_showDate" :show-time="_showTime" :show-seconds="_showSeconds"
+                  v-if="_showTime || _showDate" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils";
+import Loading from "@/components/Loading";
+import DateTime from "@/components/widgets/DateTime/Index";
+import Weather from "@/components/widgets/Weather/Index";
+
+export default {
+  name: "ImageCarousel",
+  components: {Weather, DateTime, Loading},
+  mixins: [Utils],
+  props: {
+    // Images directory
+    imgDir: {
+      type: String,
+      required: true,
+    },
+
+    // Refresh interval in seconds.
+    refreshSeconds: {
+      type: Number,
+      required: false,
+      default: 15,
+    },
+
+    // Show the current date on top of the images
+    showDate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // Show the current time on top of the images
+    showTime: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // If false then don't display the seconds.
+    showSeconds: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // If false then don't display weather info.
+    showWeather: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // If false then temperature won't be displayed.
+    showTemperature: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the weather state icon.
+    showWeatherIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the weather summary text.
+    showWeatherSummary: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    // Weather con color.
+    weatherIconColor: {
+      type: String,
+      required: false,
+      default: 'white',
+    },
+
+    // Size of the weather icon in pixels.
+    weatherIconSize: {
+      type: Number,
+      required: false,
+      default: 40,
+    },
+
+    // If false then the weather icon will be animated.
+    // Otherwise, it will be a static image.
+    animateWeatherIcon: {
+      required: false,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      images: [],
+      currentImage: undefined,
+      loading: false,
+    }
+  },
+
+  computed: {
+    imgURL() {
+      let port = 8008
+      if ('backend.http' in this.$root.config && 'port' in this.$root.config['backend.http']) {
+        port = this.$root.config['backend.http'].port
+      }
+
+      return '//' + window.location.hostname + ':' + port + this.currentImage
+    },
+
+    _showDate() {
+      return this.parseBoolean(this.showDate)
+    },
+
+    _showTime() {
+      return this.parseBoolean(this.showTime)
+    },
+
+    _showSeconds() {
+      return this.parseBoolean(this.showSeconds)
+    },
+
+    _showTemperature() {
+      return this.parseBoolean(this.showTemperature)
+    },
+
+    _showWeather() {
+      return this.parseBoolean(this.showWeather)
+    },
+
+    _showWeatherIcon() {
+      return this.parseBoolean(this.showWeatherIcon)
+    },
+
+    _showWeatherSummary() {
+      return this.parseBoolean(this.showWeatherSummary)
+    },
+
+    _animateWeatherIcon() {
+      return this.parseBoolean(this.animateWeatherIcon)
+    }
+  },
+
+  methods: {
+    async refresh() {
+      if (!this.images.length) {
+        this.loading = true
+
+        try {
+          this.images = await this.request('utils.search_web_directory', {
+            directory: this.imgDir,
+            extensions: ['.jpg', '.jpeg', '.png'],
+          })
+
+          this.shuffleImages()
+        } finally {
+          this.loading = false
+        }
+      }
+
+      if (this.images.length) {
+        this.currentImage = this.images.pop()
+      }
+    },
+
+    onNewImage() {
+      if (!this.$refs.img)
+        return
+
+      this.$refs.background.style['background-image'] = 'url(' + this.imgURL + ')'
+      this.$refs.img.style.width = 'auto'
+
+      if (this.$refs.img.width > this.$refs.img.height) {
+        const ratio = this.$refs.img.width / this.$refs.img.height
+        if (4/3 <= ratio <= 16/9) {
+          this.$refs.img.style.width = '100%'
+        }
+
+        if (ratio <= 4/3) {
+          this.$refs.img.style.height = '100%'
+        }
+      }
+    },
+
+    shuffleImages() {
+      for (let i=this.images.length-1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i+1))
+        let x = this.images[i]
+        this.images[i] = this.images[j]
+        this.images[j] = x
+      }
+    },
+  },
+
+  mounted() {
+    this.$refs.img.addEventListener('load', this.onNewImage)
+    this.$refs.img.addEventListener('error', this.refresh)
+
+    this.refresh()
+    setInterval(this.refresh, Math.round(this.refreshSeconds * 1000))
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.image-carousel {
+  width: calc(100% + 1.5em);
+  height: calc(100% + 1.5em);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  margin: -0.75em 0.75em 0.75em -0.75em !important;
+
+  .background {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: black;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    filter: blur(13px);
+    -webkit-filter: blur(13px);
+  }
+
+  img {
+    position: absolute;
+    max-height: 100%;
+    z-index: 2;
+  }
+}
+
+.info-container {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  z-index: 10;
+  color: white;
+  text-shadow: 3px 3px 4px black;
+  font-size: 1.25em;
+  margin: 0.5em;
+  padding: 0 1em;
+
+  .date-time {
+    text-align: right;
+  }
+}
+</style>
+
+<style lang="scss">
+.info-container {
+  .weather-container {
+    margin-bottom: 0.5em;
+
+    h1 {
+      justify-content: left;
+      margin-bottom: -0.5em;
+      font-size: 0.8em;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/widgets/Music/Index.vue b/platypush/backend/http/webapp/src/components/widgets/Music/Index.vue
similarity index 100%
rename from platypush/backend/http/webapp/src/widgets/Music/Index.vue
rename to platypush/backend/http/webapp/src/components/widgets/Music/Index.vue
diff --git a/platypush/backend/http/webapp/src/widgets/Row.vue b/platypush/backend/http/webapp/src/components/widgets/Row.vue
similarity index 83%
rename from platypush/backend/http/webapp/src/widgets/Row.vue
rename to platypush/backend/http/webapp/src/components/widgets/Row.vue
index b16eadc5..e67c14c2 100644
--- a/platypush/backend/http/webapp/src/widgets/Row.vue
+++ b/platypush/backend/http/webapp/src/components/widgets/Row.vue
@@ -31,8 +31,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .row {
   width: 100%;
+  height: 49%;
+
+  &:not(:last-child) {
+    margin-bottom: 1%;
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/widgets/Weather/Index.vue b/platypush/backend/http/webapp/src/components/widgets/Weather/Index.vue
similarity index 75%
rename from platypush/backend/http/webapp/src/widgets/Weather/Index.vue
rename to platypush/backend/http/webapp/src/components/widgets/Weather/Index.vue
index 8a9ceef2..0a52f22b 100644
--- a/platypush/backend/http/webapp/src/widgets/Weather/Index.vue
+++ b/platypush/backend/http/webapp/src/components/widgets/Weather/Index.vue
@@ -3,8 +3,9 @@
     <Loading v-if="loading" />
 
     <h1 v-else>
-      <skycons :condition="weatherIcon" :paused="animate" :size="iconSize" v-if="weatherIcon" />
-      <span class="temperature" v-if="weather">
+      <skycons :condition="weatherIcon" :paused="!animate" :size="iconSize" :color="iconColor"
+               v-if="_showIcon && weatherIcon" />
+      <span class="temperature" v-if="_showTemperature && weather">
         {{ Math.round(parseFloat(weather.temperature)) + '&deg;' }}
       </span>
     </h1>
@@ -28,7 +29,7 @@ export default {
     // Otherwise, it will be a static image.
     animate: {
       required: false,
-      default: false,
+      default: true,
     },
 
     // Size of the weather icon in pixels.
@@ -38,12 +39,30 @@ export default {
       default: 50,
     },
 
+    // Icon color.
+    iconColor: {
+      type: String,
+      required: false,
+    },
+
+    // If false then the weather icon won't be displayed.
+    showIcon: {
+      required: false,
+      default: true,
+    },
+
     // If false then the weather summary won't be displayed.
     showSummary: {
       required: false,
       default: true,
     },
 
+    // If false then the temperature won't be displayed.
+    showTemperature: {
+      required: false,
+      default: true,
+    },
+
     // Refresh interval in seconds.
     refreshSeconds: {
       type: Number,
@@ -64,6 +83,14 @@ export default {
     _showSummary() {
       return this.parseBoolean(this.showSummary)
     },
+
+    _showIcon() {
+      return this.parseBoolean(this.showIcon)
+    },
+
+    _showTemperature() {
+      return this.parseBoolean(this.showTemperature)
+    },
   },
 
   methods: {
@@ -102,8 +129,8 @@ export default {
 
   h1 {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
   }
 
   .temperature {
diff --git a/platypush/backend/http/webapp/src/widgets/Widget.vue b/platypush/backend/http/webapp/src/components/widgets/Widget.vue
similarity index 62%
rename from platypush/backend/http/webapp/src/widgets/Widget.vue
rename to platypush/backend/http/webapp/src/components/widgets/Widget.vue
index b325dfac..8404df4e 100644
--- a/platypush/backend/http/webapp/src/widgets/Widget.vue
+++ b/platypush/backend/http/webapp/src/components/widgets/Widget.vue
@@ -25,13 +25,7 @@ export default {
 
   computed: {
     classes() {
-      let classes = ['widget', 'column']
-      if (this.class && this.class.length)
-        classes = classes.concat(this.class.split(' '))
-      else
-        classes = classes.concat('col-3')
-
-      return classes
+      return (this.class && this.class.length ? this.class.split(' ') : ['col-3']).concat(['widget', 'column'])
     },
   },
 }
@@ -39,9 +33,9 @@ export default {
 
 <style lang="scss" scoped>
 .widget {
+  height: calc(100% - 1em);
   background: $background-color;
   border-radius: 5px;
-  margin-bottom: 1em;
   display: flex;
   justify-content: center;
   align-content: center;
@@ -49,16 +43,4 @@ export default {
   overflow: hidden;
   box-shadow: 0 3px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
 }
-
-@media screen and (max-width: $tablet){
-  .widget {
-    height: calc(100% - 1em);
-  }
-}
-
-@media screen and (min-width: $desktop){
-  .widget {
-    height: calc(50% - 1em);
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/platypush/backend/http/webapp/src/views/Dashboard.vue b/platypush/backend/http/webapp/src/views/Dashboard.vue
index 61f24bff..b8a5f32f 100644
--- a/platypush/backend/http/webapp/src/views/Dashboard.vue
+++ b/platypush/backend/http/webapp/src/views/Dashboard.vue
@@ -16,8 +16,8 @@
 import { defineAsyncComponent } from 'vue'
 import Utils from '@/Utils'
 import Loading from "@/components/Loading";
-import Row from "@/widgets/Row";
-import Widget from "@/widgets/Widget";
+import Row from "@/components/widgets/Row";
+import Widget from "@/components/widgets/Widget";
 
 export default {
   name: 'Dashboard',
@@ -60,7 +60,7 @@ export default {
           class: row.attributes.class ? row.attributes.class.nodeValue : undefined,
           widgets: [...row.children].map((el) => {
             const component = defineAsyncComponent(
-                () => import(`@/widgets/${el.nodeName}/Index`)
+                () => import(`@/components/widgets/${el.nodeName}/Index`)
             )
 
             const style = el.attributes.style ? el.attributes.style.nodeValue : undefined
@@ -120,6 +120,7 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   margin: 0;
   padding: 1em 1em 0 1em;
   background: $dashboard-bg;