ui/src/App.vue

@@ -6,20 +6,14 @@
         :logo_below="logo_below"
         :title="title_html"
       />
-      <Dashboard>
+      <Dashboard :message="message_html">
-        <template slot="message">
+        <CalendarCarousel :data="calendar_data" />
-          <ImageCarousel :image_urls="image_urls" />
+        <DashboardInfo
-          <div v-html="message_html" />
+          :server_host="server_host"
-        </template>
+          :server_name="server_name"
-        <template slot="calendars">
+          :version="dashboard_version"
-          <CalendarCarousel :data="calendar_data" />
+          :lan_ip="dashboard_ip"
-          <DashboardInfo
+        />
-            :server_host="server_host"
-            :server_name="server_name"
-            :version="dashboard_version"
-            :lan_ip="dashboard_ip"
-          />
-        </template>
       </Dashboard>
       <TickerBar
         v-if="ticker_html !== ''"
@@ -35,7 +29,6 @@ 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";
 
@@ -44,7 +37,6 @@ import TickerBar from "./components/TickerBar.vue";
     CalendarCarousel,
     Dashboard,
     DashboardInfo,
-    ImageCarousel,
     TitleBar,
     TickerBar,
   },
@@ -59,12 +51,6 @@ 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,21 +1,24 @@
 <template>
   <v-container fill-height>
     <v-layout>
-      <v-col cols="4">
+      <v-row>
-        <slot name="message">MESSAGE</slot>
+        <v-col cols="4" v-html="message" />
-      </v-col>
+        <v-col cols="8">
-      <v-col cols="8">
+          <slot>CALENDARS</slot>
-        <slot name="calendars">CALENDARS</slot>
+        </v-col>
-      </v-col>
+      </v-row>
     </v-layout>
   </v-container>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
-export default class Dashboard extends Vue {}
+export default class Dashboard extends Vue {
+  @Prop({ default: "MESSAGE" })
+  private readonly message!: string;
+}
 </script>
 
 <style>

ui/src/components/ImageCarousel.vue

@@ -1,39 +0,0 @@
-<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>

ui/src/components/calendar/CalendarCarousel.vue

@@ -79,16 +79,4 @@ export default class CalendarCarousel extends Vue {
 .v-carousel:deep() > div {
   max-height: 500px;
 }
-
-.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>