From 2d8a75c1f6f5b176d9b56b1438704fde73cf141d 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 18:08:04 +0000
Subject: [PATCH] ImageCarousel props

---
 ui/src/App.vue                      |  9 ++++++++-
 ui/src/components/ImageCarousel.vue | 17 ++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 16a009b..24cff8b 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -8,7 +8,12 @@
       />
       <Dashboard>
         <template slot="message">
-          <ImageCarousel :speed="image_speed" :image_urls="image_urls" />
+          <ImageCarousel
+            :speed="image_speed"
+            :height="image_height"
+            :contain="image_contain"
+            :urls="image_urls"
+          />
           <div v-html="message_html" />
         </template>
         <template slot="calendars">
@@ -55,6 +60,8 @@ export default class App extends Vue {
   private title_html = "<h1>changeme</h1>";
 
   private image_urls = require("@/assets/image_testdata.json");
+  private image_height = 300;
+  private image_contain = false;
   private image_speed = 10000;
   private message_html = "<p>changeme</p>";
 
diff --git a/ui/src/components/ImageCarousel.vue b/ui/src/components/ImageCarousel.vue
index a17fc50..77bb56d 100644
--- a/ui/src/components/ImageCarousel.vue
+++ b/ui/src/components/ImageCarousel.vue
@@ -2,12 +2,17 @@
   <v-carousel
     cycle
     :interval="speed"
-    height="300"
+    :height="height"
     :show-arrows="false"
     touchless
     hide-delimiters
   >
-    <v-carousel-item v-for="url in image_urls" :key="url" :src="url" />
+    <v-carousel-item
+      v-for="url in urls"
+      :key="url"
+      :src="url"
+      :contain="contain"
+    />
   </v-carousel>
 </template>
 
@@ -19,8 +24,14 @@ export default class ImageCarousel extends Vue {
   @Prop({ default: 10000 })
   private readonly speed!: number;
 
+  @Prop({ default: 300 })
+  private readonly height!: number;
+
+  @Prop({ default: false })
+  private readonly contain!: boolean;
+
   @Prop({ required: true })
-  private readonly image_urls!: Array<string>;
+  private readonly urls!: Array<string>;
 }
 </script>