advent22/ui/src/components/ConfigView.vue

<template>
  <BulmaDrawer header="Konfiguration">
    <div class="card-content">
      <div class="columns">
        <div class="column is-one-third">
          <div class="content">
            <h4>Rätsel</h4>
            <dl>
              <dt>Titel</dt>
              <dd>Adventskalender 2023</dd>

              <dt>Lösung</dt>
              <dd>{{ admin_config_model.puzzle.solution }}</dd>

              <dt>Reihenfolge</dt>
              <dd>{{ admin_config_model.puzzle.shuffled }}</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>{{ admin_config_model.puzzle.begin }}</dd>

              <dt>Letztes Türchen</dt>
              <dd>{{ admin_config_model.puzzle.end }}</dd>

              <dt>Rätsel schließt</dt>
              <dd>{{ admin_config_model.puzzle.closing }}</dd>

              <dt>Zufalls-Seed</dt>
              <dd>{{ admin_config_model.puzzle.seed }}</dd>
            </dl>
          </div>
        </div>
        <div class="column is-one-third">
          <div class="content">
            <h4>Kalender</h4>
            <dl>
              <dt>Definition</dt>
              <dd>{{ admin_config_model.calendar.config_file }}</dd>

              <dt>Hintergrundbild</dt>
              <dd>{{ admin_config_model.calendar.background }}</dd>

              <dt>Türchen</dt>
              <dd>
                {{ admin_config_model.calendar.doors }}
                <span class="tag is-danger ml-2">
                  <span class="icon">
                    <font-awesome-icon icon="fa-solid fa-bolt" />
                  </span>
                </span>
              </dd>
            </dl>

            <h4>Bilder</h4>
            <dl>
              <dt>Größe</dt>
              <dd>{{ admin_config_model.image.size }} px</dd>

              <dt>Rand</dt>
              <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>
            </dl>
          </div>
        </div>
        <div class="column is-one-third">
          <div class="content">
            <h4>WebDAV</h4>
            <dl>
              <dt>URL</dt>
              <dd>{{ admin_config_model.webdav.url }}</dd>

              <dt>Zugangsdaten</dt>
              <dd>
                <span>***</span>
                <span class="tag button is-primary ml-2">
                  <span class="icon">
                    <font-awesome-icon icon="fa-solid fa-eye" />
                  </span>
                </span>
              </dd>

              <dt>Cache-Dauer</dt>
              <dd>{{ admin_config_model.webdav.cache_ttl }} s</dd>

              <dt>Konfigurationsdatei</dt>
              <dd>{{ admin_config_model.webdav.config_file }}</dd>

              <dt>UI-Admin</dt>
              <dd>
                <span>***</span>
                <span class="tag button is-primary ml-2">
                  <span class="icon">
                    <font-awesome-icon icon="fa-solid fa-eye" />
                  </span>
                </span>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </BulmaDrawer>
</template>

<script lang="ts">
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;
    doors: number[];
  };
  image: {
    size: number;
    border: number;
    fonts: (string | number)[];
  };
  webdav: {
    url: string;
    cache_ttl: number;
    config_file: string;
  };
}

@Options({
  components: {
    BulmaDrawer,
  },
})
export default class extends Vue {
  public admin_config_model: ConfigModel = {
    puzzle: {
      solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
      shuffled: "AGFCINBEWLKQMXDURPOSJVHT",
      begin: "01.12.2023",
      end: "24.12.2023",
      closing: "01.04.2024",
      seed: "",
    },
    calendar: {
      config_file: "default.toml",
      background: "adventskalender.jpg",
      doors: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    },
    image: {
      size: 500,
      border: 30,
      fonts: ["files/Lena.ttf", 50],
    },
    webdav: {
      url: "https://example.com/remote.php/webdav/advent22",
      cache_ttl: 30,
      config_file: "config.toml",
    },
  };

  public mounted(): void {
    this.$advent22
      .api_get<ConfigModel>("admin/config_model")
      .then((data) => (this.admin_config_model = data))
      .catch(console.log);
  }
}
</script>

<style scoped>
dd {
  overflow-x: auto;
}
</style>