advent22/ui/src/components/ConfigView.vue

<template>
  <BulmaDrawer header="Konfiguration">
    <div class="card-content">
      <div class="columns">
        <div class="column content">
          <h4>Rätsel</h4>
          <dl>
            <dt>Lösung</dt>
            <dd>ABCDEFGHIJKLMNOPQRSTUVWX</dd>

            <dt>Reihenfolge</dt>
            <dd>AGFCINBEWLKQMXDURPOSJVHT</dd>

            <dt>Offene Türchen</dt>
            <dd>10</dd>

            <dt>Nächstes Türchen in</dt>
            <dd>dd-hh-mm-ss</dd>

            <dt>Erstes Türchen</dt>
            <dd>01.12.2023</dd>

            <dt>Letztes Türchen</dt>
            <dd>24.12.2023</dd>

            <dt>Rätsel schließt</dt>
            <dd>01.04.2024</dd>

            <dt>Zufalls-Seed</dt>
            <dd>""</dd>
          </dl>
        </div>
        <div class="column content">
          <h4>Kalender</h4>
          <dl>
            <dt>Definition</dt>
            <dd>files/default.toml</dd>

            <dt>Hintergrundbild</dt>
            <dd>files/adventskalender.jpg</dd>

            <dt>Türchen</dt>
            <dd>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16</dd>
          </dl>

          <h4>Bilder</h4>
          <dl>
            <dt>Größe</dt>
            <dd>500 px</dd>

            <dt>Rand</dt>
            <dd>30 px</dd>

            <dt>Schriftarten</dt>
            <dd>files/Lena.ttf (Größe 50)</dd>
            <dd>files/foobar.ttf (Größe 33)</dd>
          </dl>
        </div>
        <div class="column content">
          <h4>WebDAV</h4>
          <dl>
            <dt>URL</dt>
            <dd>https://example.com/remote.php/webdav/advent22</dd>

            <dt>Zugangsdaten</dt>
            <dd>*** / ***</dd>

            <dt>Cache-Dauer</dt>
            <dd>30 s</dd>

            <dt>Konfigurationsdatei</dt>
            <dd>config.toml</dd>

            <dt>UI-Admin</dt>
            <dd>*** / ***</dd>
          </dl>
        </div>
      </div>
    </div>
  </BulmaDrawer>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

import BulmaDrawer from "./bulma/Drawer.vue";

@Options({
  components: {
    BulmaDrawer,
  },
})
export default class extends Vue {}
</script>

<style scoped>
div.card:not(:last-child) {
  margin-bottom: 1.5rem;
}
</style>