UI: one-indexed days

ui/src/components/Calendar.vue

@@ -50,8 +50,8 @@ export default class extends Vue {
     multi_modal: MultiModal;
   };
 
-  public door_hover(index: number) {
+  public door_hover(day: number) {
-    this.figure_caption = `Türchen ${index + 1}`;
+    this.figure_caption = `Türchen ${day}`;
   }
 
   public door_unhover() {

ui/src/components/ConfigView.vue

@@ -16,11 +16,12 @@
               <dt>Reihenfolge</dt>
               <dd>
                 <template
-                  v-for="(day_part, idx) in admin_config_model.puzzle.day_parts"
+                  v-for="(day_part, index) in admin_config_model.puzzle
-                  :key="`part-${idx}`"
+                    .day_parts"
+                  :key="`part-${index}`"
                 >
                   <span>
-                    <template v-if="idx > 0"> &ndash; </template>
+                    <template v-if="index > 0"> &ndash; </template>
                     {{ day_part.day }}:
                   </span>
                   <span class="is-family-monospace">{{ day_part.part }}</span>
@@ -64,11 +65,12 @@
               <dt>Türchen</dt>
               <dd>
                 <template
-                  v-for="(day_part, idx) in admin_config_model.puzzle.day_parts"
+                  v-for="(day_part, index) in admin_config_model.puzzle
-                  :key="`door-${idx}`"
+                    .day_parts"
+                  :key="`door-${index}`"
                 >
                   <span>
-                    <template v-if="idx > 0">, </template>
+                    <template v-if="index > 0">, </template>
                     {{ day_part.day }}
                   </span>
                 </template>
@@ -85,8 +87,8 @@
 
               <dt>Schriftarten</dt>
               <dd
-                v-for="(font, idx) in admin_config_model.image.fonts"
+                v-for="(font, index) in admin_config_model.image.fonts"
-                :key="`font-${idx}`"
+                :key="`font-${index}`"
               >
                 {{ font.file }} (Größe {{ font.size }})
               </dd>

ui/src/components/DoorMapEditor.vue

@@ -89,10 +89,6 @@ export default class extends Vue {
     const data: DoorsSaved = [];
 
     for (const door of this.doors) {
-      if (door.day === -1) {
-        continue;
-      }
-
       data.push(door.save());
     }
 

ui/src/components/editor/PreviewDoor.vue

@@ -18,12 +18,12 @@
         ref="day_input"
         class="input is-large"
         type="number"
-        min="-1"
+        :min="MIN_DAY"
         placeholder="Tag"
         @keydown="on_keydown"
       />
-      <div v-else class="is-size-1 has-text-weight-bold">
+      <div v-else-if="door.day > 0" class="is-size-1 has-text-weight-bold">
-        <template v-if="door.day >= 0">{{ door.day }}</template>
+        {{ door.day }}
       </div>
     </div>
   </foreignObject>
@@ -46,6 +46,7 @@ import SVGRect from "../calendar/SVGRect.vue";
 })
 export default class extends Vue {
   public door!: Door;
+  public readonly MIN_DAY = Door.MIN_DAY;
 
   public day_str = "";
   public editing = false;

ui/src/lib/door.ts

@@ -12,12 +12,14 @@ export interface DoorSaved {
 export type DoorsSaved = DoorSaved[];
 
 export class Door {
-  private _day = -1;
+  public static readonly MIN_DAY = 1;
+
+  private _day = Door.MIN_DAY;
   public position: Rectangle;
 
   constructor(position: Rectangle);
   constructor(position: Rectangle, day: number);
-  constructor(position: Rectangle, day = -1) {
+  constructor(position: Rectangle, day = Door.MIN_DAY) {
     this.day = day;
     this.position = position;
   }
@@ -31,9 +33,9 @@ export class Door {
     const result = Number(day);
 
     if (isNaN(result)) {
-      this._day = -1;
+      this._day = Door.MIN_DAY;
     } else {
-      this._day = Math.max(Math.floor(result), -1);
+      this._day = Math.max(Math.floor(result), Door.MIN_DAY);
     }
   }