ImageCarousel component and necessary Layout tweaks

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",

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>

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>