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 { EventData } from "./components/calendar/EventModel";
import { CalendarData } from "./components/calendar/CalendarModel";

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: string[] = 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: CalendarData[] = 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 update(): void {
    // Update Logo Config
    type LogoConfig = {
      above: string;
      below: string;
    };

    this.$ovdashboard.api_get_object<LogoConfig>("misc/config/logo", (cfg) => {
      this.logo_above = cfg.above;
      this.logo_below = cfg.below;
    });

    // Update Title
    this.$ovdashboard.api_get_string("text/get/html/title", (title) => {
      this.title_html = title;
    });

    // Update Images
    this.$ovdashboard.api_get_list("image/list", (names) => {
      this.image_urls = names.map((name: string) =>
        this.$ovdashboard.api_url(`image/get/${name}`)
      );
    });

    // Update Image Config
    type ImageConfig = {
      height: number;
      contain: boolean;
      speed: number;
    };

    this.$ovdashboard.api_get_object<ImageConfig>("image/config", (cfg) => {
      this.image_height = cfg.height;
      this.image_contain = cfg.contain;
      this.image_speed = cfg.speed;
    });

    // Update Message
    this.$ovdashboard.api_get_string(
      "text/get/html/message",
      (data) => (this.message_html = data)
    );

    // Update Calendar Aggregates
    this.$ovdashboard.api_get_list("aggregate/list", (names) => {
      this.$ovdashboard.api_get_object_multi<EventData[]>(
        names.map((name) => `aggregate/get/${name}`),
        (calendars) => {
          this.calendar_data = [];

          for (let i = 0; i < names.length; i++) {
            this.calendar_data.push({
              title: names[i],
              events: calendars[i],
            });
          }
        }
      );
    });

    // Update Calendar Config
    type CalendarConfig = {
      speed: number;
    };

    this.$ovdashboard.api_get_object<CalendarConfig>(
      "calendar/config",
      (data) => {
        this.calendar_speed = data.speed;
      }
    );

    // Update Server Config
    type ServerConfig = {
      host: string;
      name: string;
    };

    this.$ovdashboard.api_get_object<ServerConfig>(
      "misc/config/server",
      (data) => {
        this.server_host = data.host;
        this.server_name = data.name;
      }
    );

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

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

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

    // Update Ticker Config
    type TickerConfig = {
      color: string;
    };

    this.$ovdashboard.api_get_object<TickerConfig>("ticker/config", (data) => {
      this.ticker_color = data.color;
    });
  }

  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>