ovdashboard/ui/src/App.vue

<template>
  <v-app>
    <v-layout column fill-height>
      <TitleBar
        :logo_above="logo_above"
        :logo_below="logo_below"
        :title="title_html"
      />
      <Dashboard>
        <template slot="message">
          <div class="d-flex flex-column fill-height pb-sm-12">
            <Message :html="message_html" />
            <ImageCarousel
              class="mt-auto"
              v-if="image_urls.length > 0"
              :speed="image_speed"
              :height="image_height"
              :contain="image_contain"
              :urls="image_urls"
            />
          </div>
        </template>
        <template slot="calendars">
          <CalendarCarousel :speed="calendar_speed" :data="calendar_data" />
          <DashboardInfo
            class="pb-12 pb-sm-0"
            :server_host="server_host"
            :server_name="server_name"
            :version="dashboard_version"
            :lan_ip="dashboard_ip"
          />
        </template>
      </Dashboard>
      <TickerBar
        v-if="ticker_html !== ''"
        :content="ticker_html"
        :color="ticker_color"
      />
    </v-layout>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import TitleBar from "./components/title/TitleBar.vue";
import Dashboard from "./components/Dashboard.vue";
import ImageCarousel from "./components/ImageCarousel.vue";
import Message from "./components/Message.vue";
import CalendarCarousel from "./components/calendar/CalendarCarousel.vue";
import DashboardInfo from "./components/DashboardInfo.vue";
import TickerBar from "./components/TickerBar.vue";

@Component({
  components: {
    TitleBar,
    Dashboard,
    ImageCarousel,
    Message,
    CalendarCarousel,
    DashboardInfo,
    TickerBar,
  },
})
export default class App extends Vue {
  private interval?: number;

  // API data
  private logo_above = "Technisches Hilfswerk";
  private logo_below = "OV Musterstadt";
  private title_html = "<h1>changeme</h1>";

  private image_urls = require("@/assets/image_testdata.json");
  private image_height = 300;
  private image_contain = false;
  private image_speed = 10000;
  private message_html = require("@/assets/lipsum.json");

  private calendar_data = require("@/assets/calendar_testdata.json");
  private calendar_speed = 10000;
  private server_host = "https://oekzident.de";
  private server_name = "OEKZident";
  private dashboard_version = "0.0.1";
  private dashboard_ip = "0.0.0.0";

  private ticker_html = "<p>changeme</p>";
  private ticker_color = "primary";

  private fail(name: string): (arg0: unknown) => void {
    return (reason: unknown) =>
      console.warn("Failed to query", name, "-", reason);
  }

  private api_query_simple(
    endpoint: string,
    on_success: (data: unknown) => void
  ): void {
    this.$axios
      .get(this.$ovdashboard.api_url(endpoint))
      .then((response) => on_success(response.data))
      .catch(this.fail(endpoint));
  }

  private api_query_simple_string(
    endpoint: string,
    on_success: (data: string) => void
  ): void {
    this.api_query_simple(endpoint, (data) => {
      if (typeof data !== "string") return;

      on_success(data);
    });
  }

  private api_query_simple_object(
    endpoint: string,
    on_success: (data: Record<string, unknown>) => void
  ): void {
    this.api_query_simple(endpoint, (data) => {
      if (typeof data !== "object") return;
      if (data === null) return;

      on_success(data as Record<string, unknown>);
    });
  }

  private update(): void {
    // Update Logo Config
    this.api_query_simple_object("misc/config/logo", (data) => {
      this.logo_above = data.above as string;
      this.logo_below = data.below as string;
    });

    // Update Title
    this.api_query_simple_string("text/get/html/title", (data) => {
      this.title_html = data;
    });

    // Update Images

    // Update Image Config
    this.api_query_simple_object("image/config", (data) => {
      this.image_height = data.height as number;
      this.image_contain = data.contain as boolean;
      this.image_speed = data.speed as number;
    });

    // Update Message
    this.api_query_simple_string("text/get/html/message", (data) => {
      this.message_html = data;
    });

    // Update Calendars

    // Update Calendar Config
    this.api_query_simple_object("calendar/config", (data) => {
      this.calendar_speed = data.speed as number;
    });

    // Update Server Config
    this.api_query_simple_object("misc/config/server", (data) => {
      this.server_host = data.host as string;
      this.server_name = data.name as string;
    });

    // Update Version
    this.api_query_simple_string("misc/version", (data) => {
      this.dashboard_version = data;
    });

    // Update IP
    this.api_query_simple_string("misc/lanip", (data) => {
      this.dashboard_ip = data;
    });

    // Update Ticker
    this.api_query_simple_string("ticker/html", (data) => {
      this.ticker_html = data;
    });

    // Update Ticker Config
    this.api_query_simple_object("ticker/config", (data) => {
      this.ticker_color = data.color as string;
    });
  }

  public created(): void {
    this.update();
    this.interval = setInterval(this.update, 30000);
  }

  public beforeDestroy(): void {
    clearInterval(this.interval);
  }
}
</script>

<style>
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
</style>