ui/src/components/Clock.vue

@@ -11,8 +11,8 @@ export default class Clock extends Vue {
   private formatted = "";
   private interval?: number;
 
-  @Prop({ required: true })
-  private readonly format!: string;
+  @Prop()
+  public format!: string;
 
   private update(): void {
     this.formatted = DateTime.now()
@@ -30,3 +30,6 @@ export default class Clock extends Vue {
   }
 }
 </script>
+
+<style>
+</style>

ui/src/components/THWLogo.vue

@@ -23,11 +23,11 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class THWLogo extends Vue {
-  @Prop({ required: true })
-  private readonly above!: string;
+  @Prop()
+  public above!: string;
 
-  @Prop({ required: true })
-  private readonly below!: string;
+  @Prop()
+  public below!: string;
 }
 </script>
 

ui/src/components/TickerBar.vue

@@ -15,8 +15,8 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class TickerBar extends Vue {
-  @Prop({ required: true })
-  private readonly content!: string;
+  @Prop()
+  public content!: string;
 
   get marqueeDuration(): string {
     // 10 seconds + another second per 7 chars

ui/src/components/TitleBar.vue

@@ -41,17 +41,17 @@ export default class TitleBar extends Vue {
   @Prop({
     default: "Technisches Hilfswerk",
   })
-  private readonly logo_above!: string;
+  public logo_above!: string;
 
   @Prop({
     default: "OV Musterstadt",
   })
-  private readonly logo_below!: string;
+  public logo_below!: string;
 
   @Prop({
     default: "TITLE",
   })
-  private readonly title!: string;
+  public title!: string;
 }
 </script>