advent22/ui/src/components/ConfigView.vue

<template>
  <BulmaDrawer
    header="Konfiguration"
    :ready="is_loaded"
    @open="on_open"
    refreshable
  >
    <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>{{ config_model.puzzle.title }}</dd>

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

              <dt>Offene Türchen</dt>
              <dd>{{ num_user_doors }}</dd>

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

              <dt>Erstes Türchen</dt>
              <dd>{{ config_model.puzzle.begin }}</dd>

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

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

              <dt>Zufalls-Seed</dt>
              <dd class="is-family-monospace">
                "{{ 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>{{ config_model.calendar.config_file }}</dd>

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

              <dt>Türchen</dt>
              <dd>
                <template
                  v-for="(day_part, index) in day_parts"
                  :key="`door-${index}`"
                >
                  <span>
                    <template v-if="index > 0">, </template>
                    {{ day_part.day }}
                  </span>
                </template>
              </dd>
            </dl>

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

              <dt>Rand</dt>
              <dd>{{ config_model.image.border }} px</dd>

              <dt>Schriftarten</dt>
              <dd
                v-for="(font, index) in config_model.image.fonts"
                :key="`font-${index}`"
              >
                {{ font.file }} (Größe {{ font.size }})
              </dd>
            </dl>
          </div>
        </div>
        <div class="column is-one-third">
          <div class="content">
            <h4>WebDAV</h4>
            <dl>
              <dt>URL</dt>
              <dd>{{ config_model.webdav.url }}</dd>

              <dt>Zugangsdaten</dt>
              <dd class="is-family-monospace">
                <BulmaSecret @load="load_dav_credentials">
                  <span class="tag is-danger">user</span>
                  {{ dav_credentials.username }}
                  <br />
                  <span class="tag is-danger">pass</span>
                  {{ dav_credentials.password }}
                </BulmaSecret>
              </dd>

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

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

              <dt>UI-Admin</dt>
              <dd class="is-family-monospace">
                <BulmaSecret @load="load_ui_credentials">
                  <span class="tag is-danger">user</span>
                  {{ ui_credentials.username }}
                  <br />
                  <span class="tag is-danger">pass</span>
                  {{ ui_credentials.password }}
                </BulmaSecret>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </BulmaDrawer>
</template>

<script lang="ts">
import { ConfigModel, DayStrModel, DoorsSaved } from "@/lib/api";
import { Options, Vue } from "vue-class-component";

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

interface Credentials {
  username: string;
  password: string;
}

@Options({
  components: {
    BulmaDrawer,
    BulmaSecret,
  },
})
export default class extends Vue {
  public is_loaded = false;
  public config_model: ConfigModel = {
    puzzle: {
      title: "Advent22",
      solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
      begin: "01.12.2023",
      end: "24.12.2023",
      closing: "01.04.2024",
      seed: "",
    },
    calendar: {
      config_file: "default.toml",
      background: "adventskalender.jpg",
    },
    image: {
      size: 500,
      border: 30,
      fonts: [{ file: "files/Lena.ttf", size: 50 }],
    },
    webdav: {
      url: "https://example.com/remote.php/webdav/advent22",
      cache_ttl: 30,
      config_file: "config.toml",
    },
  };
  public day_parts: DayStrModel[] = [];
  public num_user_doors = 0;
  public dav_credentials: Credentials = { username: "", password: "" };
  public ui_credentials: Credentials = { username: "", password: "" };

  public on_open(): void {
    this.is_loaded = false;

    Promise.all([
      this.$advent22.api_get<ConfigModel>("admin/config_model"),
      this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
      this.$advent22.api_get<DoorsSaved>("user/doors"),
    ])
      .then(([config_model, day_parts, user_doors]) => {
        this.config_model = config_model;
        this.day_parts = day_parts;
        this.num_user_doors = user_doors.length;

        this.is_loaded = true;
      })
      .catch(console.error);
  }

  public load_dav_credentials(): void {
    this.$advent22
      .api_get<string[]>("admin/dav_credentials")
      .then(([username, password]) => {
        this.dav_credentials = {
          username: username,
          password: password,
        };
      })
      .catch(console.error);
  }

  public load_ui_credentials(): void {
    this.$advent22
      .api_get<string[]>("admin/ui_credentials")
      .then(([username, password]) => {
        this.ui_credentials = {
          username: username,
          password: password,
        };
      })
      .catch(console.error);
  }
}
</script>

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