Merge branch 'feature/days-rework' into develop

api/advent22_api/core/depends.py

@@ -5,76 +5,95 @@ from fastapi import Depends
 from PIL import Image, ImageFont
 
 from .advent_image import _XY, AdventImage
+from .calendar_config import CalendarConfig, get_calendar_config
 from .config import Config, get_config
-from .image_helpers import list_images_auto, load_image
+from .helpers import Random, list_images_auto, load_image, set_len
-from .sequence_helpers import Random, set_len, shuffle
 from .webdav import WebDAV
 
 
-async def shuffle_solution(
+async def get_days(
+    cal_cfg: CalendarConfig = Depends(get_calendar_config),
+) -> list[int]:
+    """
+    Alle Tage, für die es ein Türchen gibt
+    """
+
+    return sorted(set(door.day for door in cal_cfg.doors))
+
+
+async def get_parts(
     cfg: Config = Depends(get_config),
-) -> str:
+    days: list[int] = Depends(get_days),
+) -> dict[int, str]:
     """
-    Lösung: Reihenfolge zufällig bestimmen
+    Lösung auf vorhandene Tage aufteilen
     """
 
-    return "".join(await shuffle(cfg.puzzle.solution))
+    solution_length = len(cfg.puzzle.solution)
+    num_days = len(days)
+
+    rnd = await Random.get()
+    solution_days = [
+        *rnd.shuffled(days * (solution_length // num_days)),
+        *rnd.sample(days, solution_length % num_days),
+    ]
+
+    result: dict[int, str] = {}
+    for day, letter in zip(solution_days, cfg.puzzle.solution):
+        result[day] = result.get(day, "")
+        result[day] += letter
+
+    return result
 
 
-async def shuffle_images_auto(
+async def get_day_part(
-    images: list[str] = Depends(list_images_auto),
-) -> list[str]:
-    """
-    Bilder: Reihenfolge zufällig bestimmen
-    """
-
-    ls = set_len(images, 24)
-    return await shuffle(ls)
-
-
-async def get_part(
     day: int,
-    shuffled_solution: str = Depends(shuffle_solution),
+    parts: dict[int, str] = Depends(get_parts),
 ) -> str:
     """
     Heute angezeigter Teil der Lösung
     """
 
-    return shuffled_solution[day]
+    return parts[day]
 
 
-async def get_random(
+async def get_auto_image_names(
-    day: int,
+    days: list[int] = Depends(get_days),
-) -> Random:
+    images: list[str] = Depends(list_images_auto),
+) -> dict[int, str]:
     """
-    Tagesabhängige Zufallszahlen
+    Bilder: Reihenfolge zufällig bestimmen
     """
 
-    return await Random.get(day)
+    rnd = await Random.get()
+    ls = set_len(images, len(days))
+
+    return dict(zip(days, rnd.shuffled(ls)))
 
 
-async def gen_auto_image(
+async def gen_day_auto_image(
     day: int,
-    auto_images: list[str] = Depends(shuffle_images_auto),
     cfg: Config = Depends(get_config),
-    rnd: Random = Depends(get_random),
+    auto_image_names: list[str] = Depends(get_auto_image_names),
-    part: str = Depends(get_part),
+    day_part: str = Depends(get_day_part),
 ) -> Image.Image:
     """
     Automatisch generiertes Bild erstellen
     """
 
     # Datei existiert garantiert!
-    img = await load_image(auto_images[day])
+    img = await load_image(auto_image_names[day])
     image = await AdventImage.from_img(img)
 
+    rnd = await Random.get(day)
+
     font = ImageFont.truetype(
         font=BytesIO(await WebDAV.read_bytes(f"files/{cfg.server.font}")),
         size=50,
     )
 
     # Buchstaben verstecken
-    for letter in part:
+    for letter in day_part:
         await image.hide_text(
             xy=cast(_XY, tuple(rnd.choices(range(30, 470), k=2))),
             text=letter,
@@ -84,12 +103,11 @@ async def gen_auto_image(
     return image.img
 
 
-async def get_image(
+async def get_day_image(
     day: int,
-    auto_images: list[str] = Depends(shuffle_images_auto),
     cfg: Config = Depends(get_config),
-    rnd: Random = Depends(get_random),
+    auto_image_names: list[str] = Depends(get_auto_image_names),
-    part: str = Depends(get_part),
+    day_part: str = Depends(get_day_part),
 ) -> Image.Image:
     """
     Bild für einen Tag abrufen
@@ -105,6 +123,6 @@ async def get_image(
 
     except RuntimeError:
         # Erstelle automatisch generiertes Bild
-        return await gen_auto_image(
+        return await gen_day_auto_image(
-            day=day, auto_images=auto_images, cfg=cfg, rnd=rnd, part=part
+            day=day, cfg=cfg, auto_image_names=auto_image_names, day_part=day_part
         )

api/advent22_api/core/helpers.py

@@ -1,11 +1,35 @@
+import itertools
+import random
 import re
 from io import BytesIO
+from typing import Any, Self, Sequence, TypeVar
 
 from fastapi.responses import StreamingResponse
 from PIL import Image
 
+from .config import get_config
 from .webdav import WebDAV
 
+T = TypeVar("T")
+
+
+class Random(random.Random):
+    @classmethod
+    async def get(cls, bonus_salt: Any = "") -> Self:
+        cfg = await get_config()
+        return cls(f"{cfg.puzzle.solution}{cfg.puzzle.random_seed}{bonus_salt}")
+
+    def shuffled(self, population: Sequence[T]) -> Sequence[T]:
+        return self.sample(population, k=len(population))
+
+
+def set_len(seq: Sequence[T], len: int) -> Sequence[T]:
+    # `seq` unendlich wiederholen
+    infinite = itertools.cycle(seq)
+
+    # Die ersten `length` einträge nehmen
+    return list(itertools.islice(infinite, len))
+
 
 async def list_images_auto() -> list[str]:
     """

api/advent22_api/core/sequence_helpers.py

@@ -1,28 +0,0 @@
-import itertools
-import random
-from typing import Any, Self, Sequence
-
-from .config import get_config
-
-
-class Random(random.Random):
-    @classmethod
-    async def get(cls, bonus_salt: Any = "") -> Self:
-        cfg = await get_config()
-        return cls(f"{cfg.puzzle.solution}{cfg.puzzle.random_seed}{bonus_salt}")
-
-
-async def shuffle(seq: Sequence, rnd: random.Random | None = None) -> list:
-    # Zufallsgenerator
-    rnd = rnd or await Random.get()
-
-    # Elemente mischen
-    return rnd.sample(seq, len(seq))
-
-
-def set_len(seq: Sequence, length: int) -> list:
-    # `seq` unendlich wiederholen
-    infinite = itertools.cycle(seq)
-
-    # Die ersten `length` einträge nehmen
-    return list(itertools.islice(infinite, length))

api/advent22_api/routers/__init__.py

@@ -1,10 +1,8 @@
 from fastapi import APIRouter
 
-from . import admin, days, general, user
+from . import admin, images
 
 router = APIRouter(prefix="/api")
 
 router.include_router(admin.router)
-router.include_router(days.router)
+router.include_router(images.router)
-router.include_router(general.router)
-router.include_router(user.router)

api/advent22_api/routers/_security.py

@@ -50,14 +50,14 @@ async def user_visible_doors() -> int:
     return 0
 
 
-async def user_can_view_door(
+async def user_can_view_day(
     day: int,
 ) -> bool:
     """
     True iff das Türchen von Tag `day` user-sichtbar ist
     """
 
-    if day < 0:
+    if day < 1:
         raise HTTPException(status.HTTP_422_UNPROCESSABLE_ENTITY)
 
-    return day < await user_visible_doors()
+    return day <= await user_visible_doors()

api/advent22_api/routers/admin.py

@@ -3,9 +3,9 @@ from datetime import date
 from fastapi import APIRouter, Depends
 from pydantic import BaseModel
 
-from ..core.calendar_config import CalendarConfig, get_calendar_config
+from ..core.calendar_config import CalendarConfig, DoorsSaved, get_calendar_config
 from ..core.config import Config, get_config
-from ..core.depends import shuffle_solution
+from ..core.depends import get_parts
 from ..core.settings import SETTINGS
 from ._security import require_admin, user_is_admin
 
@@ -22,7 +22,6 @@ async def is_admin(
 class ConfigModel(BaseModel):
     class __Puzzle(BaseModel):
         solution: str
-        shuffled: str
         begin: date
         end: date
         closing: date
@@ -57,13 +56,12 @@ async def get_config_model(
     _: None = Depends(require_admin),
     cfg: Config = Depends(get_config),
     cal_cfg: CalendarConfig = Depends(get_calendar_config),
-    shuffled_solution: str = Depends(shuffle_solution),
+    parts: dict[int, str] = Depends(get_parts),
 ) -> ConfigModel:
     return ConfigModel.model_validate(
         {
             "puzzle": {
                 "solution": cfg.puzzle.solution,
-                "shuffled": shuffled_solution,
                 "begin": date.today(),  # TODO
                 "end": date.today(),  # TODO
                 "closing": date.today(),  # TODO
@@ -85,3 +83,49 @@ async def get_config_model(
             },
         }
     )
+
+
+class DayPartModel(BaseModel):
+    day: int
+    part: str
+
+
+@router.get("/day_parts")
+async def get_day_parts(
+    _: None = Depends(require_admin),
+    parts: dict[int, str] = Depends(get_parts),
+) -> list[DayPartModel]:
+    return [
+        DayPartModel.model_validate({"day": day, "part": part})
+        for day, part in sorted(parts.items())
+    ]
+
+
+@router.get("/doors")
+async def get_doors(
+    _: None = Depends(require_admin),
+    cal_cfg: CalendarConfig = Depends(get_calendar_config),
+) -> DoorsSaved:
+    """
+    Türchen lesen
+    """
+
+    return cal_cfg.doors
+
+
+@router.put("/doors")
+async def put_doors(
+    doors: DoorsSaved,
+    _: None = Depends(require_admin),
+    cfg: Config = Depends(get_config),
+    cal_cfg: CalendarConfig = Depends(get_calendar_config),
+) -> None:
+    """
+    Türchen ändern
+    """
+
+    cal_cfg.doors = sorted(
+        doors,
+        key=lambda door: door.day,
+    )
+    await cal_cfg.change(cfg)

api/advent22_api/routers/days.py

@@ -1,71 +0,0 @@
-from datetime import date
-
-from fastapi import APIRouter, Depends, HTTPException, status
-from fastapi.responses import StreamingResponse
-from PIL import Image
-
-from ..core.config import get_config
-from ..core.depends import get_image, get_part, shuffle_solution
-from ..core.image_helpers import api_return_image
-from ._security import user_can_view_door, user_is_admin, user_visible_doors
-
-router = APIRouter(prefix="/days", tags=["days"])
-
-
-@router.on_event("startup")
-async def startup() -> None:
-    cfg = await get_config()
-    print(cfg.puzzle.solution)
-
-    shuffled_solution = await shuffle_solution(cfg)
-    print(shuffled_solution)
-
-
-@router.get("/date")
-async def get_date() -> str:
-    """
-    Aktuelles Server-Datum
-    """
-
-    return date.today().isoformat()
-
-
-@router.get("/visible_days")
-async def get_visible_days(
-    visible_doors: int = Depends(user_visible_doors),
-) -> int:
-    """
-    Sichtbare Türchen
-    """
-
-    return visible_doors
-
-
-@router.get("/part/{day}")
-async def get_part_for_day(
-    part: str = Depends(get_part),
-) -> str:
-    """
-    Heutiger Lösungsteil
-    """
-
-    return part
-
-
-@router.get(
-    "/image/{day}",
-    response_class=StreamingResponse,
-)
-async def get_image_for_day(
-    image: Image.Image = Depends(get_image),
-    can_view: bool = Depends(user_can_view_door),
-    is_admin: bool = Depends(user_is_admin),
-) -> StreamingResponse:
-    """
-    Bild für einen Tag erstellen
-    """
-
-    if not (can_view or is_admin):
-        raise HTTPException(status.HTTP_401_UNAUTHORIZED, "Wie unhöflich!!!")
-
-    return await api_return_image(image)

api/advent22_api/routers/general.py

@@ -1,50 +0,0 @@
-from fastapi import APIRouter, Depends
-from fastapi.responses import StreamingResponse
-
-from ..core.calendar_config import CalendarConfig, DoorsSaved, get_calendar_config
-from ..core.config import Config, get_config
-from ..core.image_helpers import api_return_image, load_image
-
-router = APIRouter(prefix="/general", tags=["general"])
-
-
-@router.get(
-    "/background",
-    response_class=StreamingResponse,
-)
-async def get_image_for_day(
-    cal_cfg: CalendarConfig = Depends(get_calendar_config),
-) -> StreamingResponse:
-    """
-    Hintergrundbild laden
-    """
-
-    return await api_return_image(await load_image(f"files/{cal_cfg.background}"))
-
-
-@router.get("/doors")
-async def get_doors(
-    cal_cfg: CalendarConfig = Depends(get_calendar_config),
-) -> DoorsSaved:
-    """
-    Türchen lesen
-    """
-
-    return cal_cfg.doors
-
-
-@router.put("/doors")
-async def put_doors(
-    doors: DoorsSaved,
-    cfg: Config = Depends(get_config),
-    cal_cfg: CalendarConfig = Depends(get_calendar_config),
-) -> None:
-    """
-    Türchen setzen
-    """
-
-    cal_cfg.doors = sorted(
-        doors,
-        key=lambda door: door.day,
-    )
-    await cal_cfg.change(cfg)

api/advent22_api/routers/images.py

@@ -0,0 +1,50 @@
+from fastapi import APIRouter, Depends, HTTPException, status
+from fastapi.responses import StreamingResponse
+from PIL import Image
+
+from ..core.calendar_config import CalendarConfig, get_calendar_config
+from ..core.config import get_config
+from ..core.depends import get_day_image
+from ..core.helpers import api_return_image, load_image
+from ._security import user_can_view_day, user_is_admin
+
+router = APIRouter(prefix="/images", tags=["images"])
+
+
+@router.on_event("startup")
+async def startup() -> None:
+    cfg = await get_config()
+    print(cfg.puzzle.solution)
+
+
+@router.get(
+    "/background",
+    response_class=StreamingResponse,
+)
+async def get_background(
+    cal_cfg: CalendarConfig = Depends(get_calendar_config),
+) -> StreamingResponse:
+    """
+    Hintergrundbild laden
+    """
+
+    return await api_return_image(await load_image(f"files/{cal_cfg.background}"))
+
+
+@router.get(
+    "/{day}",
+    response_class=StreamingResponse,
+)
+async def get_image_for_day(
+    image: Image.Image = Depends(get_day_image),
+    can_view: bool = Depends(user_can_view_day),
+    is_admin: bool = Depends(user_is_admin),
+) -> StreamingResponse:
+    """
+    Bild für einen Tag erstellen
+    """
+
+    if not (can_view or is_admin):
+        raise HTTPException(status.HTTP_401_UNAUTHORIZED, "Wie unhöflich!!!")
+
+    return await api_return_image(image)

api/advent22_api/routers/user.py

@@ -1,12 +0,0 @@
-from fastapi import APIRouter, Depends
-
-from ._security import require_admin
-
-router = APIRouter(prefix="/user", tags=["user"])
-
-
-@router.get("/admin")
-def check_admin(
-    _: None = Depends(require_admin),
-) -> bool:
-    return True

ui/src/components/Calendar.vue

@@ -3,7 +3,7 @@
 
   <figure>
     <div class="image is-unselectable">
-      <img :src="$advent22.api_url('general/background')" />
+      <img :src="$advent22.api_url('images/background')" />
       <ThouCanvas>
         <CalendarDoor
           v-for="(door, index) in doors"
@@ -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/CalendarAssistant.vue

@@ -1,37 +1,39 @@
 <template>
   <MultiModal ref="multi_modal" />
 
-  <BulmaDrawer header="Kalender-Assistent">
+  <BulmaDrawer
+    header="Kalender-Assistent"
+    :ready="is_loaded"
+    @open="on_open"
+    refreshable
+  >
     <div class="card-content">
       <div class="content">
         <h4>Alle Türchen</h4>
         <div class="tags are-medium">
-          <span
+          <BulmaButton
-            v-for="index in 24"
+            v-for="(day_part, index) in day_parts"
-            :key="index"
+            :key="`btn-${index}`"
             class="tag button is-primary"
-            @click.left="door_click(index - 1)"
+            icon="fa-solid fa-door-open"
-          >
+            :text="`${day_part.day}`"
-            <span class="icon">
+            @click.left="door_click(day_part.day)"
-              <font-awesome-icon icon="fa-solid fa-door-open" />
+          />
-            </span>
-            <span>{{ index }}</span>
-          </span>
         </div>
 
         <h4>Buchstaben-Zuordnung</h4>
         <div class="tags are-medium">
-          <span class="tag is-info">1: A</span>
+          <span
-          <span class="tag is-info">2: G</span>
+            v-for="(day_part, index) in day_parts"
-          <span class="tag is-info">3: F</span>
+            :key="`part-${index}`"
-          <span class="tag is-info">4: C</span>
+            class="tag is-info"
-          <span class="tag is-info">5: I</span>
+          >
-          <span class="tag is-info">6: N</span>
+            {{ day_part.day }}: {{ day_part.part.split("").join(", ") }}
-          <span class="tag is-info">7: B</span>
+          </span>
-          <span class="tag is-info">…</span>
         </div>
 
         <h4>Bilder-Zuordnung</h4>
+        <!-- TODO -->
         <div class="tags are-medium">
           <span class="tag is-primary">1: images_auto/1.jpg</span>
           <span class="tag is-primary">2: images_manual/1.jpg</span>
@@ -48,6 +50,7 @@
 </template>
 
 <script lang="ts">
+import { DayPartModel } from "@/lib/api";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaButton from "./bulma/Button.vue";
@@ -62,15 +65,29 @@ import MultiModal from "./calendar/MultiModal.vue";
   },
 })
 export default class extends Vue {
+  public is_loaded = true;
+  public day_parts: DayPartModel[] = [];
+
   declare $refs: {
     multi_modal: MultiModal;
   };
 
+  public on_open(): void {
+    this.is_loaded = false;
+
+    Promise.all([this.$advent22.api_get<DayPartModel[]>("admin/day_parts")])
+      .then(([day_parts]) => {
+        this.day_parts = day_parts;
+        this.is_loaded = true;
+      })
+      .catch(console.log);
+  }
+
   public door_click(day: number) {
     this.$refs.multi_modal.show_progress();
 
     this.$advent22
-      .api_get_blob(`days/image/${day}`)
+      .api_get_blob(`images/${day}`)
       .then((data) => this.$refs.multi_modal.show_image(data))
       .catch(() => this.$refs.multi_modal.set_active(false));
   }

ui/src/components/ConfigView.vue

@@ -1,5 +1,10 @@
 <template>
-  <BulmaDrawer header="Konfiguration">
+  <BulmaDrawer
+    header="Konfiguration"
+    :ready="is_loaded"
+    @open="on_open"
+    refreshable
+  >
     <div class="card-content">
       <div class="columns">
         <div class="column is-one-third">
@@ -7,32 +12,46 @@
             <h4>Rätsel</h4>
             <dl>
               <dt>Titel</dt>
+              <!-- TODO -->
               <dd>Adventskalender 2023</dd>
 
               <dt>Lösung</dt>
-              <dd>{{ admin_config_model.puzzle.solution }}</dd>
+              <dd>{{ config_model.puzzle.solution }}</dd>
 
               <dt>Reihenfolge</dt>
-              <dd>{{ admin_config_model.puzzle.shuffled }}</dd>
+              <dd>
+                <template
+                  v-for="(day_part, index) in day_parts"
+                  :key="`part-${index}`"
+                >
+                  <span>
+                    <template v-if="index > 0"> &ndash; </template>
+                    {{ day_part.day }}:
+                  </span>
+                  <span class="is-family-monospace">{{ day_part.part }}</span>
+                </template>
+              </dd>
 
               <dt>Offene Türchen</dt>
+              <!-- TODO -->
               <dd>10</dd>
 
               <dt>Nächstes Türchen in</dt>
+              <!-- TODO -->
               <dd>dd-hh-mm-ss</dd>
 
               <dt>Erstes Türchen</dt>
-              <dd>{{ admin_config_model.puzzle.begin }}</dd>
+              <dd>{{ config_model.puzzle.begin }}</dd>
 
               <dt>Letztes Türchen</dt>
-              <dd>{{ admin_config_model.puzzle.end }}</dd>
+              <dd>{{ config_model.puzzle.end }}</dd>
 
               <dt>Rätsel schließt</dt>
-              <dd>{{ admin_config_model.puzzle.closing }}</dd>
+              <dd>{{ config_model.puzzle.closing }}</dd>
 
               <dt>Zufalls-Seed</dt>
               <dd class="is-family-monospace">
-                "{{ admin_config_model.puzzle.seed }}"
+                "{{ config_model.puzzle.seed }}"
               </dd>
             </dl>
           </div>
@@ -42,35 +61,37 @@
             <h4>Kalender</h4>
             <dl>
               <dt>Definition</dt>
-              <dd>{{ admin_config_model.calendar.config_file }}</dd>
+              <dd>{{ config_model.calendar.config_file }}</dd>
 
               <dt>Hintergrundbild</dt>
-              <dd>{{ admin_config_model.calendar.background }}</dd>
+              <dd>{{ config_model.calendar.background }}</dd>
 
               <dt>Türchen</dt>
               <dd>
-                <!-- <span>{{ admin_config_model.calendar.doors.join(", ") }}</span> -->
+                <template
-                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
+                  v-for="(day_part, index) in day_parts"
-                <span class="tag is-danger ml-2">
+                  :key="`door-${index}`"
-                  <span class="icon">
+                >
-                    <font-awesome-icon icon="fa-solid fa-bolt" />
+                  <span>
+                    <template v-if="index > 0">, </template>
+                    {{ day_part.day }}
                   </span>
-                </span>
+                </template>
               </dd>
             </dl>
 
             <h4>Bilder</h4>
             <dl>
               <dt>Größe</dt>
-              <dd>{{ admin_config_model.image.size }} px</dd>
+              <dd>{{ config_model.image.size }} px</dd>
 
               <dt>Rand</dt>
-              <dd>{{ admin_config_model.image.border }} px</dd>
+              <dd>{{ config_model.image.border }} px</dd>
 
               <dt>Schriftarten</dt>
               <dd
-                v-for="(font, idx) in admin_config_model.image.fonts"
+                v-for="(font, index) in config_model.image.fonts"
-                :key="`font-${idx}`"
+                :key="`font-${index}`"
               >
                 {{ font.file }} (Größe {{ font.size }})
               </dd>
@@ -82,32 +103,30 @@
             <h4>WebDAV</h4>
             <dl>
               <dt>URL</dt>
-              <dd>{{ admin_config_model.webdav.url }}</dd>
+              <dd>{{ config_model.webdav.url }}</dd>
 
               <dt>Zugangsdaten</dt>
+              <!-- TODO -->
               <dd>
                 <span>***</span>
-                <span class="tag button is-primary ml-2">
+                <button class="tag button icon is-primary ml-2">
-                  <span class="icon">
+                  <font-awesome-icon icon="fa-solid fa-eye" />
-                    <font-awesome-icon icon="fa-solid fa-eye" />
+                </button>
-                  </span>
-                </span>
               </dd>
 
               <dt>Cache-Dauer</dt>
-              <dd>{{ admin_config_model.webdav.cache_ttl }} s</dd>
+              <dd>{{ config_model.webdav.cache_ttl }} s</dd>
 
               <dt>Konfigurationsdatei</dt>
-              <dd>{{ admin_config_model.webdav.config_file }}</dd>
+              <dd>{{ config_model.webdav.config_file }}</dd>
 
               <dt>UI-Admin</dt>
+              <!-- TODO -->
               <dd>
                 <span>***</span>
-                <span class="tag button is-primary ml-2">
+                <button class="tag button icon is-primary ml-2">
-                  <span class="icon">
+                  <font-awesome-icon icon="fa-solid fa-eye" />
-                    <font-awesome-icon icon="fa-solid fa-eye" />
+                </button>
-                  </span>
-                </span>
               </dd>
             </dl>
           </div>
@@ -118,45 +137,21 @@
 </template>
 
 <script lang="ts">
+import { ConfigModel, DayPartModel } from "@/lib/api";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaDrawer from "./bulma/Drawer.vue";
 
-interface ConfigModel {
-  puzzle: {
-    solution: string;
-    shuffled: string;
-    begin: string;
-    end: string;
-    closing: string;
-    seed: string;
-  };
-  calendar: {
-    config_file: string;
-    background: string;
-  };
-  image: {
-    size: number;
-    border: number;
-    fonts: { file: string; size: number }[];
-  };
-  webdav: {
-    url: string;
-    cache_ttl: number;
-    config_file: string;
-  };
-}
-
 @Options({
   components: {
     BulmaDrawer,
   },
 })
 export default class extends Vue {
-  public admin_config_model: ConfigModel = {
+  public is_loaded = false;
+  public config_model: ConfigModel = {
     puzzle: {
       solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
-      shuffled: "AGFCINBEWLKQMXDURPOSJVHT",
       begin: "01.12.2023",
       end: "24.12.2023",
       closing: "01.04.2024",
@@ -177,11 +172,20 @@ export default class extends Vue {
       config_file: "config.toml",
     },
   };
+  public day_parts: DayPartModel[] = [];
 
-  public mounted(): void {
+  public on_open(): void {
-    this.$advent22
+    this.is_loaded = false;
-      .api_get<ConfigModel>("admin/config_model")
+
-      .then((data) => (this.admin_config_model = data))
+    Promise.all([
+      this.$advent22.api_get<ConfigModel>("admin/config_model"),
+      this.$advent22.api_get<DayPartModel[]>("admin/day_parts"),
+    ])
+      .then(([config_model, day_parts]) => {
+        this.config_model = config_model;
+        this.day_parts = day_parts;
+        this.is_loaded = true;
+      })
       .catch(console.log);
   }
 }

ui/src/components/DoorMapEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <BulmaDrawer header="Türchen bearbeiten">
+  <BulmaDrawer header="Türchen bearbeiten" :ready="is_loaded" @open="on_open">
     <div class="is-flex is-align-items-center is-justify-content-space-between">
       <BulmaButton
         :disabled="current_step === 0"
@@ -46,7 +46,8 @@
 </template>
 
 <script lang="ts">
-import { Door, DoorsSaved } from "@/lib/door";
+import { DoorsSaved } from "@/lib/api";
+import { Door } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
 import Calendar from "./Calendar.vue";
@@ -67,6 +68,8 @@ import DoorPlacer from "./editor/DoorPlacer.vue";
   },
 })
 export default class extends Vue {
+  public is_loaded = true;
+
   public readonly steps: Step[] = [
     { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
     { label: "Ordnen", icon: "fa-solid fa-list-ol" },
@@ -76,7 +79,7 @@ export default class extends Vue {
   public doors: Door[] = [];
 
   private load_doors(): Promise<void | DoorsSaved> {
-    return this.$advent22.api_get<DoorsSaved>("general/doors").then((data) => {
+    return this.$advent22.api_get<DoorsSaved>("admin/doors").then((data) => {
       this.doors.length = 0;
 
       for (const value of data) {
@@ -89,14 +92,20 @@ export default class extends Vue {
     const data: DoorsSaved = [];
 
     for (const door of this.doors) {
-      if (door.day === -1) {
-        continue;
-      }
-
       data.push(door.save());
     }
 
-    return this.$advent22.api_put("general/doors", data);
+    return this.$advent22.api_put("admin/doors", data);
+  }
+
+  public on_open(): void {
+    this.is_loaded = false;
+
+    this.load_doors()
+      .then(() => (this.is_loaded = true))
+      .catch(([reason, endpoint]) => {
+        alert(`Fehler: ${reason} in ${endpoint}`);
+      });
   }
 
   public mounted(): void {

ui/src/components/bulma/Drawer.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="card">
-    <header
+    <header class="card-header has-background-grey-lighter is-unselectable">
-      class="card-header has-background-grey-lighter is-unselectable"
+      <p class="card-header-title" @click="toggle">{{ header }}</p>
-      @click="is_open = !is_open"
+      <p v-if="refreshable" class="card-header-icon px-0">
-    >
+        <button class="tag button icon is-info" @click="refresh">
-      <p class="card-header-title">{{ header }}</p>
+          <font-awesome-icon icon="fa-solid fa-arrows-rotate" />
-      <button class="card-header-icon">
+        </button>
+      </p>
+      <button class="card-header-icon" @click="toggle">
         <span class="icon">
           <font-awesome-icon
             :icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
@@ -14,7 +16,12 @@
       </button>
     </header>
 
-    <slot v-if="is_open" name="default" />
+    <template v-if="is_open">
+      <slot v-if="ready" name="default" />
+      <div v-else class="card-content">
+        <progress class="progress is-info" max="100" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -28,11 +35,31 @@ import { Options, Vue } from "vue-class-component";
       required: false,
       default: "",
     },
+    ready: Boolean,
+    refreshable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
+  emits: ["open"],
 })
 export default class extends Vue {
-  public is_open = false;
   public header!: string;
+  public ready!: boolean;
+  public refreshable!: boolean;
+
+  public is_open = false;
+
+  public toggle() {
+    this.is_open = !this.is_open;
+    if (this.is_open) this.$emit("open");
+  }
+
+  public refresh() {
+    this.is_open = false;
+    this.toggle();
+  }
 }
 </script>
 

ui/src/components/calendar/CalendarDoor.vue

@@ -25,7 +25,7 @@ export default class extends Vue {
     this.$emit("doorClick");
 
     this.$advent22
-      .api_get_blob(`days/image/${this.door.day}`)
+      .api_get_blob(`images/${this.door.day}`)
       .then((data) => this.$emit("doorSuccess", data))
       .catch(([reason]) => {
         let msg = "Unbekannter Fehler, bitte wiederholen!";

ui/src/components/editor/DoorChooser.vue

@@ -11,7 +11,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="$advent22.api_url('general/background')" />
+      <img :src="$advent22.api_url('images/background')" />
       <ThouCanvas>
         <PreviewDoor
           v-for="(_, index) in doors"

ui/src/components/editor/DoorPlacer.vue

@@ -9,7 +9,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="$advent22.api_url('general/background')" />
+      <img :src="$advent22.api_url('images/background')" />
       <RectangleCanvas
         :rectangles="rectangles"
         @draw="on_draw"

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/api.ts

@@ -0,0 +1,38 @@
+export interface ConfigModel {
+  puzzle: {
+    solution: string;
+    begin: string;
+    end: string;
+    closing: string;
+    seed: string;
+  };
+  calendar: {
+    config_file: string;
+    background: string;
+  };
+  image: {
+    size: number;
+    border: number;
+    fonts: { file: string; size: number }[];
+  };
+  webdav: {
+    url: string;
+    cache_ttl: number;
+    config_file: string;
+  };
+}
+
+export interface DayPartModel {
+  day: number;
+  part: string;
+}
+
+export interface DoorSaved {
+  day: number;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+export type DoorsSaved = DoorSaved[];

ui/src/lib/door.ts

@@ -1,23 +1,16 @@
+import { DoorSaved } from "./api";
 import { Rectangle } from "./rectangle";
 import { Vector2D } from "./vector2d";
 
-export interface DoorSaved {
-  day: number;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-
-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 +24,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);
     }
   }