prop typing

ui/src/components/Clock.vue

@@ -11,8 +11,8 @@ export default class Clock extends Vue {
   private formatted = "";
   private interval?: number;
 
-  @Prop()
-  public format!: string;
+  @Prop({ required: true })
+  private readonly format!: string;
 
   private update(): void {
     this.formatted = DateTime.now()
@@ -30,6 +30,3 @@ 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()
-  public above!: string;
+  @Prop({ required: true })
+  private readonly above!: string;
 
-  @Prop()
-  public below!: string;
+  @Prop({ required: true })
+  private readonly below!: string;
 }
 </script>
 
@@ -52,4 +52,4 @@ div.flex-column > span:last-child {
   font-size: 15px;
   line-height: 15px;
 }
-</style>
+</style>

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()
-  public content!: string;
+  @Prop({ required: true })
+  private readonly content!: string;
 
   get marqueeDuration(): string {
     // 10 seconds + another second per 7 chars
@@ -55,4 +55,4 @@ export default class TickerBar extends Vue {
     margin: 0 !important;
   }
 }
-</style>
+</style>

ui/src/components/TitleBar.vue

@@ -41,17 +41,17 @@ export default class TitleBar extends Vue {
   @Prop({
     default: "Technisches Hilfswerk",
   })
-  public logo_above!: string;
+  private readonly logo_above!: string;
 
   @Prop({
     default: "OV Musterstadt",
   })
-  public logo_below!: string;
+  private readonly logo_below!: string;
 
   @Prop({
     default: "TITLE",
   })
-  public title!: string;
+  private readonly title!: string;
 }
 </script>
 
@@ -64,4 +64,4 @@ export default class TitleBar extends Vue {
 .container > div:last-child {
   max-width: 0;
 }
-</style>
+</style>