From 7330f85398395650a471aa8398a86ed61fffb9ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Thu, 15 Sep 2022 17:48:55 +0000
Subject: [PATCH] ImageCarousel component and necessary Layout tweaks

---
 ui/src/App.vue                      | 30 ++++++++++++++++------
 ui/src/components/Dashboard.vue     | 19 ++++++--------
 ui/src/components/ImageCarousel.vue | 39 +++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 19 deletions(-)
 create mode 100644 ui/src/components/ImageCarousel.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index f1c69ae..854c197 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -6,14 +6,20 @@
         :logo_below="logo_below"
         :title="title_html"
       />
-      <Dashboard :message="message_html">
-        <CalendarCarousel :data="calendar_data" />
-        <DashboardInfo
-          :server_host="server_host"
-          :server_name="server_name"
-          :version="dashboard_version"
-          :lan_ip="dashboard_ip"
-        />
+      <Dashboard>
+        <template slot="message">
+          <ImageCarousel :image_urls="image_urls" />
+          <div v-html="message_html" />
+        </template>
+        <template slot="calendars">
+          <CalendarCarousel :data="calendar_data" />
+          <DashboardInfo
+            :server_host="server_host"
+            :server_name="server_name"
+            :version="dashboard_version"
+            :lan_ip="dashboard_ip"
+          />
+        </template>
       </Dashboard>
       <TickerBar
         v-if="ticker_html !== ''"
@@ -29,6 +35,7 @@ import { Component, Vue } from "vue-property-decorator";
 import CalendarCarousel from "./components/calendar/CalendarCarousel.vue";
 import Dashboard from "./components/Dashboard.vue";
 import DashboardInfo from "./components/DashboardInfo.vue";
+import ImageCarousel from "./components/ImageCarousel.vue";
 import TitleBar from "./components/title_bar/TitleBar.vue";
 import TickerBar from "./components/TickerBar.vue";
 
@@ -37,6 +44,7 @@ import TickerBar from "./components/TickerBar.vue";
     CalendarCarousel,
     Dashboard,
     DashboardInfo,
+    ImageCarousel,
     TitleBar,
     TickerBar,
   },
@@ -51,6 +59,12 @@ export default class App extends Vue {
   private server_name = "OEKZident";
   private dashboard_version = "0.0.1";
   private dashboard_ip = "0.0.0.0";
+  private image_urls = [
+    "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg",
+    "https://cdn.vuetifyjs.com/images/carousel/sky.jpg",
+    "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
+    "https://cdn.vuetifyjs.com/images/carousel/planet.jpg",
+  ];
   private calendar_data = [
     {
       title: "Lorem Ipsum",
diff --git a/ui/src/components/Dashboard.vue b/ui/src/components/Dashboard.vue
index 6443381..951a2ba 100644
--- a/ui/src/components/Dashboard.vue
+++ b/ui/src/components/Dashboard.vue
@@ -1,24 +1,21 @@
 <template>
   <v-container fill-height>
     <v-layout>
-      <v-row>
-        <v-col cols="4" v-html="message" />
-        <v-col cols="8">
-          <slot>CALENDARS</slot>
-        </v-col>
-      </v-row>
+      <v-col cols="4">
+        <slot name="message">MESSAGE</slot>
+      </v-col>
+      <v-col cols="8">
+        <slot name="calendars">CALENDARS</slot>
+      </v-col>
     </v-layout>
   </v-container>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class Dashboard extends Vue {
-  @Prop({ default: "MESSAGE" })
-  private readonly message!: string;
-}
+export default class Dashboard extends Vue {}
 </script>
 
 <style>
diff --git a/ui/src/components/ImageCarousel.vue b/ui/src/components/ImageCarousel.vue
new file mode 100644
index 0000000..a17fc50
--- /dev/null
+++ b/ui/src/components/ImageCarousel.vue
@@ -0,0 +1,39 @@
+<template>
+  <v-carousel
+    cycle
+    :interval="speed"
+    height="300"
+    :show-arrows="false"
+    touchless
+    hide-delimiters
+  >
+    <v-carousel-item v-for="url in image_urls" :key="url" :src="url" />
+  </v-carousel>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class ImageCarousel extends Vue {
+  @Prop({ default: 10000 })
+  private readonly speed!: number;
+
+  @Prop({ required: true })
+  private readonly image_urls!: Array<string>;
+}
+</script>
+
+<style lang="scss" scoped>
+.v-window {
+  &-x-transition,
+  &-x-reverse-transition,
+  &-y-transition,
+  &-y-reverse-transition {
+    &-enter-active,
+    &-leave-active {
+      transition: 1.5s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+    }
+  }
+}
+</style>
\ No newline at end of file