97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
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-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
|
|
: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="primary"
|
|
/>
|
|
</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 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>";
|
|
}
|
|
</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>
|