ConfigView rendering

api/advent22_api/routers/admin.py

@@ -34,9 +34,13 @@ class ConfigModel(BaseModel):
         doors: list[int]
 
     class __Image(BaseModel):
+        class __Font(BaseModel):
+            file: str
+            size: int
+
         size: int
         border: int
-        fonts: list[tuple[str, int]]
+        fonts: list[__Font]
 
     class __WebDAV(BaseModel):
         url: str
@@ -61,9 +65,9 @@ async def get_config_model(
             "puzzle": {
                 "solution": cfg.puzzle.solution,
                 "shuffled": shuffled_solution,
-                "begin": date.today(),
-                "end": date.today(),
-                "closing": date.today(),
+                "begin": date.today(),  # TODO
+                "end": date.today(),  # TODO
+                "closing": date.today(),  # TODO
                 "seed": cfg.puzzle.random_seed,
             },
             "calendar": {
@@ -72,9 +76,9 @@ async def get_config_model(
                 "doors": [door.day for door in cal_cfg.doors],
             },
             "image": {
-                "size": 500,
-                "border": 30,
-                "fonts": [(cfg.server.font, 50)],
+                "size": 500,  # TODO
+                "border": 30,  # TODO
+                "fonts": [{"file": cfg.server.font, "size": 50}],
             },
             "webdav": {
                 "url": SETTINGS.webdav.url,

ui/src/components/ConfigView.vue

@@ -31,7 +31,9 @@
               <dd>{{ admin_config_model.puzzle.closing }}</dd>
 
               <dt>Zufalls-Seed</dt>
-              <dd>{{ admin_config_model.puzzle.seed }}</dd>
+              <dd class="is-family-monospace">
+                "{{ admin_config_model.puzzle.seed }}"
+              </dd>
             </dl>
           </div>
         </div>
@@ -47,7 +49,7 @@
 
               <dt>Türchen</dt>
               <dd>
-                {{ admin_config_model.calendar.doors }}
+                <span>{{ admin_config_model.calendar.doors.join(", ") }}</span>
                 <span class="tag is-danger ml-2">
                   <span class="icon">
                     <font-awesome-icon icon="fa-solid fa-bolt" />
@@ -65,8 +67,12 @@
               <dd>{{ admin_config_model.image.border }} px</dd>
 
               <dt>Schriftarten</dt>
-              <dd>{{ admin_config_model.image.fonts }}</dd>
-              <dd>files/foobar.ttf (Größe 33)</dd>
+              <dd
+                v-for="(font, idx) in admin_config_model.image.fonts"
+                :key="`font-${idx}`"
+              >
+                {{ font.file }} (Größe {{ font.size }})
+              </dd>
             </dl>
           </div>
         </div>
@@ -132,7 +138,7 @@ interface ConfigModel {
   image: {
     size: number;
     border: number;
-    fonts: (string | number)[];
+    fonts: { file: string; size: number }[];
   };
   webdav: {
     url: string;
@@ -164,7 +170,7 @@ export default class extends Vue {
     image: {
       size: 500,
       border: 30,
-      fonts: ["files/Lena.ttf", 50],
+      fonts: [{ file: "files/Lena.ttf", size: 50 }],
     },
     webdav: {
       url: "https://example.com/remote.php/webdav/advent22",