feat: New 'slideshow' or 'image' dashboard panel type

Merge pull request simwrapper#113 from simwrapper/slideshow

Slideshow panel

package.json

@@ -87,6 +87,7 @@
     "vue-slide-bar": "^1.2.0",
     "vue-slider-component": "^3.1.2",
     "vue-video-player": "^5.0.2",
+    "vueperslides": "^2.15.2",
     "vuera": "^0.2.7",
     "vuex": "^3.1.3",
     "yaml": "^1.7.2"

src/charts/allCharts.ts

@@ -11,6 +11,7 @@ import line from './line.vue'
 import pie from './pie.vue'
 import sankey from './sankey.vue'
 import scatter from './scatter.vue'
+import slideshow from './slideshow.vue'
 import text from './text.vue'
 import transit from './transit.vue'
 import vega from './vega.vue'
@@ -31,9 +32,11 @@ export const plotlyCharts = {
   bubble,
   heatmap,
   hexagons,
+  image: slideshow, // both 'image' and 'slideshow' types work for images
   line,
   pie,
   sankey,
+  slideshow,
   text,
   transit,
   scatter,

src/charts/slideshow.vue

@@ -0,0 +1,95 @@
+<template>
+  <vueper-slides v-bind="options" style="padding-bottom: 34px">
+    <vueper-slide v-for="(slide, i) in slides" :key="i" v-bind="slide">
+      <template #content>
+        <div
+          v-if="slide.content"
+          class="vueperslide__content-wrapper"
+          style="flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 10px"
+        >
+          <h3>{{ slide.title }}</h3>
+          <span>{{ slide.content }}</span>
+        </div>
+      </template>
+    </vueper-slide>
+  </vueper-slides>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+import { VueperSlides, VueperSlide } from 'vueperslides'
+import 'vueperslides/dist/vueperslides.css'
+
+import { FileSystemConfig } from '@/Globals'
+import HTTPFileSystem from '@/js/HTTPFileSystem'
+import { hasOwnProperty } from 'vega'
+
+@Component({ components: { VueperSlides, VueperSlide } })
+export default class VueComponent extends Vue {
+  @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
+  @Prop({ required: true }) subfolder!: string
+  @Prop({ required: true }) files!: string[]
+  @Prop({ required: true }) config!: any
+
+  private options: { [key: string]: any } = {
+    'slide-content-outside': 'bottom',
+    'fixed-height': '100%',
+    class: 'no-shadow',
+    bullets: false,
+  }
+  private slides: any[] = []
+
+  // true for absolute URLs
+  private r: RegExp = new RegExp('^(?:[a-z]+:)?//', 'i')
+
+  private mounted() {
+    const fileApi = new HTTPFileSystem(this.fileSystemConfig)
+
+    if (this.config != null) Object.assign(this.options, this.config)
+
+    // Delete slide property because this is only used in the loop
+    if (hasOwnProperty(this.options, 'slides')) {
+      delete this.options.slides
+    }
+
+    this.slides = []
+    // Check if defined and iterable
+    // TODO: throw
+    if (this.config.slides != null && typeof this.config.slides[Symbol.iterator] === 'function') {
+      // Resolve relative URLs
+      for (const data of this.config.slides) {
+        if (hasOwnProperty(data, 'image')) {
+          if (!this.r.test(data.image))
+            data.image = fileApi.cleanURL(`${this.subfolder}/${data.image}`)
+        }
+
+        if (hasOwnProperty(data, 'video')) {
+          if (!this.r.test(data.video))
+            data.video = fileApi.cleanURL(`${this.subfolder}/${data.video}`)
+        }
+
+        this.slides.push(data)
+      }
+    }
+
+    this.$emit('isLoaded')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.dash-element {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>

src/shims-vue.d.ts

@@ -47,6 +47,7 @@ declare module 'shallow-equal'
 declare module 'vue-slide-bar'
 declare module 'vue-table-component'
 declare module 'vue-video-player'
+declare module 'vueperslides'
 declare module 'vuera'
 declare module 'zip-loader'
 declare module 'react-toggle'