ovdashboard/ui/src/App.vue

<template>
  <v-app>
    <v-layout column fill-height>
      <TitleBar />
      <Dashboard>
        <template slot="message">
          <div class="d-flex flex-column fill-height">
            <Message />
            <ImageCarousel class="mt-auto" />
          </div>
        </template>
        <template slot="calendars">
          <CalendarCarousel :speed="calendar_speed" :data="calendar_data" />
          <DashboardInfo
            :server_host="server_host"
            :server_name="server_name"
            :version="dashboard_version"
            :lan_ip="dashboard_ip"
          />
        </template>
      </Dashboard>
      <TickerBar />
    </v-layout>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "@/ovd-vue";
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 {
  // API data
  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";

  public created(): void {
    super.created();
  }

  public beforeDestroy(): void {
    super.beforeDestroy();
  }

  protected update(): void {
    // 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;
    });
  }
}
</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>