From a565125245f8e6eb86c659aed79c396e189703b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Mon, 19 Sep 2022 09:17:53 +0000
Subject: [PATCH] use Template strings

---
 ui/src/App.vue                                  | 4 ++--
 ui/src/components/TickerBar.vue                 | 2 +-
 ui/src/components/calendar/Calendar.vue         | 2 +-
 ui/src/components/calendar/CalendarCarousel.vue | 2 +-
 ui/src/components/calendar/EventItem.vue        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index d288d3d..87b5550 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -108,7 +108,7 @@ export default class App extends Vue {
     // Update Images
     this.$ovdashboard.api_get_list("image/list", (names) => {
       this.image_urls = names.map((name: string) =>
-        this.$ovdashboard.api_url("image/get/" + name)
+        this.$ovdashboard.api_url(`image/get/${name}`)
       );
     });
 
@@ -134,7 +134,7 @@ export default class App extends Vue {
     // Update Calendar Aggregates
     this.$ovdashboard.api_get_list("aggregate/list", (names) => {
       this.$ovdashboard.api_get_object_multi<EventData[]>(
-        names.map((name) => "aggregate/get/" + name),
+        names.map((name) => `aggregate/get/${name}`),
         (calendars) => {
           this.calendar_data = [];
 
diff --git a/ui/src/components/TickerBar.vue b/ui/src/components/TickerBar.vue
index 361d1b9..7a0da7c 100644
--- a/ui/src/components/TickerBar.vue
+++ b/ui/src/components/TickerBar.vue
@@ -50,7 +50,7 @@ export default class TickerBar extends Vue {
       // 10 seconds + another second per 40px
       const duration = 10 + Math.round(width / 40);
 
-      this._marquee.style.setProperty("animation-duration", duration + "s");
+      this._marquee.style.setProperty("animation-duration", `${duration}s`);
     });
   }
 }
diff --git a/ui/src/components/calendar/Calendar.vue b/ui/src/components/calendar/Calendar.vue
index 3613913..3327b8a 100644
--- a/ui/src/components/calendar/Calendar.vue
+++ b/ui/src/components/calendar/Calendar.vue
@@ -8,7 +8,7 @@
       <v-divider
         v-if="index < events.length - 1"
         class="mx-5"
-        :key="event.hash + '-div'"
+        :key="`${event.hash}-div`"
       />
     </template>
   </v-list>
diff --git a/ui/src/components/calendar/CalendarCarousel.vue b/ui/src/components/calendar/CalendarCarousel.vue
index 9c51a7c..ec1c0c0 100644
--- a/ui/src/components/calendar/CalendarCarousel.vue
+++ b/ui/src/components/calendar/CalendarCarousel.vue
@@ -52,7 +52,7 @@ export default class CalendarCarousel extends Vue {
       .getPropertyValue("height");
     const maxHeight = parseFloat(divHeightPX) - diff;
 
-    divElement.style.setProperty("max-height", maxHeight + "px");
+    divElement.style.setProperty("max-height", `${maxHeight}px`);
   }
 
   public mounted(): void {
diff --git a/ui/src/components/calendar/EventItem.vue b/ui/src/components/calendar/EventItem.vue
index 1bc6ac7..88d7813 100644
--- a/ui/src/components/calendar/EventItem.vue
+++ b/ui/src/components/calendar/EventItem.vue
@@ -67,7 +67,7 @@ export default class EventItem extends Vue {
       .mapUnits((x) => Math.round(x))
       .toHuman();
 
-    return locale_string + " (" + duration_string + ")";
+    return `${locale_string} (${duration_string})`;
   }
 }
 </script>