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 { AxiosResponse } from "axios";

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 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 update_logo(response: AxiosResponse): void {
    this.logo_above = response.data.above;
    this.logo_below = response.data.below;
  }

  private update(): void {
    this.$axios
      .get(this.$ovdashboard.api_url("misc/config/logo"))
      .then(this.update_logo);
  }

  public mounted(): void {
    this.update();
  }
}
</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>