OEKZident.de/ovdashboard
2
0
Fork 0
Code Releases 1 Packages Activity

Merge branch 'feature/ui_upgrade' into feature/python3.12

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-10-27 02:12:52 +02:00
commit 77a0eddfd8
40 changed files with 2266 additions and 2070 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
Dockerfile
View file

@ -2,41 +2,49 @@
# build ui # # build ui #
############ ############
FROM node:lts-alpine AS build-ui FROM node:lts AS build-ui
# some dir for our code
WORKDIR /app
# install dependencies
COPY ui/package*.json ui/yarn*.lock ./
RUN yarn --production=false
# copy code
COPY ui .
RUN yarn build
##############
# webservice #
##############
FROM antonapetrov/uvicorn-gunicorn:python3.9-alpine3.13 AS production
RUN set -ex; \
# prerequisites
apk add --no-cache \
libmagic \
;
# env setup # env setup
ENV \ WORKDIR /usr/local/src/ovdashboard_ui
# install ovdashboard_ui dependencies
COPY ui/package*.json ui/yarn*.lock ./
RUN yarn install --production false
# copy and build ovdashboard_ui
COPY ui ./
RUN yarn build --dest /tmp/ovdashboard_ui/html
###########
# web app #
###########
FROM tiangolo/uvicorn-gunicorn:python3.12-slim AS production
# add prepared ovdashboard_ui
COPY --from=build-ui /tmp/ovdashboard_ui /usr/local/share/ovdashboard_ui
# env setup
WORKDIR /usr/local/src/ovdashboard_api
ENV \
PRODUCTION_MODE="true" \ PRODUCTION_MODE="true" \
APP_MODULE="ovdashboard_api:app" PORT="8000" \
MODULE_NAME="ovdashboard_api.app"
EXPOSE 8000
# install API COPY api ./
COPY api /usr/src/ovdashboard_api
RUN set -ex; \ RUN set -ex; \
pip3 --no-cache-dir install /usr/src/ovdashboard_api; # install libs
export DEBIAN_FRONTEND=noninteractive; \
apt-get update; apt-get install --yes --no-install-recommends \
libmagic1 \
; rm -rf /var/lib/apt/lists/*; \
\
# remove example app
rm -rf /app; \
\
# install ovdashboard_api
python -m pip --no-cache-dir install ./
# install UI # run as unprivileged user
COPY --from=build-ui /app/dist /html USER nobody

2
api/ovdashboard_api/core/caldav.py
View file

@ -79,7 +79,7 @@ class CalDAV:
_logger.info(f"downloading {calendar_name!r} ...") _logger.info(f"downloading {calendar_name!r} ...")
dt_start = datetime.combine( dt_start = datetime.combine(
datetime.utcnow().date(), datetime.now().date(),
datetime.min.time(), datetime.min.time(),
) )
dt_end = dt_start + timedelta(days=cfg.calendar.future_days) dt_end = dt_start + timedelta(days=cfg.calendar.future_days)

4
api/ovdashboard_api/core/calevent.py
View file

@ -31,8 +31,8 @@ class CalEvent(BaseModel):
summary: StrippedStr = "" summary: StrippedStr = ""
description: StrippedStr = "" description: StrippedStr = ""
dtstart: datetime = datetime.utcnow() dtstart: datetime = datetime.now()
dtend: datetime = datetime.utcnow() dtend: datetime = datetime.now()
def __lt__(self, other: Self) -> bool: def __lt__(self, other: Self) -> bool:
""" """

2
api/ovdashboard_api/core/settings.py
View file

@ -25,7 +25,7 @@ class DAVSettings(BaseModel):
username: str | None = None username: str | None = None
password: str | None = None password: str | None = None
cache_ttl: int = 60 * 30 cache_ttl: int = 60 * 10
cache_size: int = 1024 cache_size: int = 1024
@property @property

4
api/ovdashboard_api/routers/v1/misc.py
View file

@ -31,8 +31,8 @@ async def get_lan_ip() -> str:
family=AF_INET, family=AF_INET,
type=SOCK_DGRAM, type=SOCK_DGRAM,
) as s: ) as s:
s.settimeout(0)
try: try:
s.settimeout(0)
s.connect((SETTINGS.ping_host, SETTINGS.ping_port)) s.connect((SETTINGS.ping_host, SETTINGS.ping_port))
IP = s.getsockname()[0] IP = s.getsockname()[0]
@ -44,7 +44,7 @@ async def get_lan_ip() -> str:
@router.get("/version") @router.get("/version")
async def get_server_api_version() -> str: async def get_server_api_version() -> str:
return importlib.metadata.version("ovdashboard-api") return importlib.metadata.version("ovdashboard_api")
@router.get("/config/server") @router.get("/config/server")

13
ui/.devcontainer/Dockerfile
View file

@ -1,11 +1,20 @@
# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
ARG VARIANT=16-bullseye ARG VARIANT=16-bookworm
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT} FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:1-${VARIANT}
# [Optional] Uncomment this section to install additional OS packages. # [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
# && apt-get -y install --no-install-recommends <your-package-list-here> # && apt-get -y install --no-install-recommends <your-package-list-here>
RUN set -ex; \
\
export DEBIAN_FRONTEND=noninteractive; \
apt-get update; apt-get install --yes --no-install-recommends \
git-flow \
git-lfs \
; rm -rf /var/lib/apt/lists/*; \
su node -c "git lfs install"
# [Optional] Uncomment if you want to install an additional version of node using nvm # [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10 # ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" # RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

21
ui/.devcontainer/devcontainer.json
View file

@ -1,28 +1,35 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node // https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
{ {
"name": "Node.js", "name": "OVD UI",
"build": { "build": {
"dockerfile": "Dockerfile", "dockerfile": "Dockerfile",
"context": "..",
// Update 'VARIANT' to pick a Node version: 18, 16, 14. // Update 'VARIANT' to pick a Node version: 18, 16, 14.
// Append -bullseye or -buster to pin to an OS version. // Append -bullseye or -buster to pin to an OS version.
// Use -bullseye variants on local arm64/Apple Silicon. // Use -bullseye variants on local arm64/Apple Silicon.
"args": { "args": {
"VARIANT": "18-bullseye" "VARIANT": "20-bookworm"
} }
}, },
// Set *default* container specific settings.json values on container create. "containerEnv": {
"settings": { "TZ": "Europe/Berlin"
"terminal.integrated.defaultProfile.linux": "zsh"
}, },
// Configure tool-specific properties. // Configure tool-specific properties.
"customizations": { "customizations": {
// Configure properties specific to VS Code. // Configure properties specific to VS Code.
"vscode": { "vscode": {
// Set *default* container specific settings.json values on container create.
"settings": {
"terminal.integrated.defaultProfile.linux": "zsh"
},
// Add the IDs of extensions you want installed when the container is created. // Add the IDs of extensions you want installed when the container is created.
"extensions": [ "extensions": [
"dbaeumer.vscode-eslint", "dbaeumer.vscode-eslint",
"octref.vetur" "esbenp.prettier-vscode",
"mhutchie.git-graph",
"Syler.sass-indented",
"Vue.volar"
] ]
} }
}, },
@ -30,7 +37,7 @@
// "forwardPorts": [], // "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created. // Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install", // "postCreateCommand": "yarn install",
"postStartCommand": "yarn install", "postStartCommand": "yarn install --production false",
// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "node" "remoteUser": "node"
} }

20
ui/.eslintrc.js
View file

@ -1,18 +1,18 @@
module.exports = { module.exports = {
root: true, root: true,
env: { env: {
node: true node: true,
}, },
'extends': [ extends: [
'plugin:vue/essential', "plugin:vue/essential",
'eslint:recommended', "eslint:recommended",
'@vue/typescript/recommended' "@vue/typescript/recommended",
], ],
parserOptions: { parserOptions: {
ecmaVersion: 2020 ecmaVersion: 2020,
}, },
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
} },
} };

15
ui/.vscode/settings.json vendored
View file

@ -1,8 +1,21 @@
{ {
"editor.formatOnSave": true, "editor.formatOnSave": true,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.organizeImports": true "source.organizeImports": true
}, },
"git.closeDiffOnOperation": true, "git.closeDiffOnOperation": true,
"editor.tabSize": 2 "editor.tabSize": 2,
"sass.disableAutoIndent": true,
"sass.format.convert": false,
"sass.format.deleteWhitespace": true,
"prettier.trailingComma": "all",
} }

6
ui/babel.config.js
View file

@ -1,5 +1,3 @@
module.exports = { module.exports = {
presets: [ presets: ["@vue/cli-plugin-babel/preset"],
'@vue/cli-plugin-babel/preset' };
]
}

37
ui/package.json
View file

@ -7,35 +7,34 @@
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": {
"axios": "^0.27.2",
"color": "^4.2.3",
"core-js": "^3.8.3",
"luxon": "^3.0.3",
"register-service-worker": "^1.7.2",
"vue": "^2.6.14",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
"vuetify": "^2.6.0"
},
"devDependencies": { "devDependencies": {
"@types/color": "^3.0.3", "@types/color": "^3.0.3",
"@types/luxon": "^3.0.1", "@types/luxon": "^3.0.1",
"@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/eslint-plugin": "^6.9.0",
"@typescript-eslint/parser": "^5.4.0", "@typescript-eslint/parser": "^6.9.0",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-pwa": "~5.0.0", "@vue/cli-plugin-pwa": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0", "@vue/eslint-config-typescript": "^12.0.0",
"eslint": "^7.32.0", "axios": "^1.6.0",
"eslint-plugin-vue": "^8.0.3", "color": "^4.2.3",
"sass": "~1.32.0", "core-js": "^3.8.3",
"sass-loader": "^10.0.0", "eslint": "^8.52.0",
"typescript": "~4.5.5", "eslint-plugin-vue": "^9.18.0",
"luxon": "^3.0.3",
"prettier": "^3.0.3",
"register-service-worker": "^1.7.2",
"sass": "~1.69.5",
"sass-loader": "^13.3.2",
"typescript": "~5.2.2",
"vue": "^2.7.15",
"vue-class-component": "^7.2.3",
"vue-cli-plugin-vuetify": "^2.5.5", "vue-cli-plugin-vuetify": "^2.5.5",
"vue-property-decorator": "^9.1.2",
"vue-template-compiler": "^2.6.14", "vue-template-compiler": "^2.6.14",
"vuetify": "^2.7.1",
"vuetify-loader": "^1.7.0" "vuetify-loader": "^1.7.0"
} }
} }

26
ui/public/index.html
View file

@ -1,17 +1,27 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> <link
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
/>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

3
ui/src/components/Dashboard.vue
View file

@ -18,5 +18,4 @@ import { Component, Vue } from "vue-property-decorator";
export default class Dashboard extends Vue {} export default class Dashboard extends Vue {}
</script> </script>
<style> <style></style>
</style>

12
ui/src/components/DashboardInfo.vue
View file

@ -18,10 +18,10 @@ import { Component, Vue } from "@/ovd-vue";
@Component @Component
export default class DashboardInfo extends Vue { export default class DashboardInfo extends Vue {
private server_host = "https://oekzident.de"; public server_host = "https://oekzident.de";
private server_name = "OEKZident"; public server_name = "OEKZident";
private version = "0.0.1"; public version = "0.0.1";
private lan_ip = "0.0.0.0"; public lan_ip = "0.0.0.0";
public created(): void { public created(): void {
super.created(); super.created();
@ -43,7 +43,7 @@ export default class DashboardInfo extends Vue {
(data) => { (data) => {
this.server_host = data.host; this.server_host = data.host;
this.server_name = data.name; this.server_name = data.name;
} },
); );
// Update Version // Update Version
@ -57,4 +57,4 @@ export default class DashboardInfo extends Vue {
}); });
} }
} }
</script> </script>

12
ui/src/components/ImageCarousel.vue
View file

@ -22,10 +22,10 @@ import { Component, Vue } from "@/ovd-vue";
@Component @Component
export default class ImageCarousel extends Vue { export default class ImageCarousel extends Vue {
private urls: string[] = require("@/assets/image_testdata.json"); public urls: string[] = require("@/assets/image_testdata.json");
private height = 300; public height = 300;
private contain = false; public contain = false;
private speed = 10000; public speed = 10000;
public created(): void { public created(): void {
super.created(); super.created();
@ -39,7 +39,7 @@ export default class ImageCarousel extends Vue {
// Update Images // Update Images
this.$ovdashboard.api_get_list("image/list", (names) => { this.$ovdashboard.api_get_list("image/list", (names) => {
this.urls = names.map((name: string) => this.urls = names.map((name: string) =>
this.$ovdashboard.api_url(`image/get/${name}`) this.$ovdashboard.api_url(`image/get/${name}`),
); );
}); });
@ -71,4 +71,4 @@ export default class ImageCarousel extends Vue {
} }
} }
} }
</style> </style>

6
ui/src/components/Message.vue
View file

@ -7,7 +7,7 @@ import { Component, Vue } from "@/ovd-vue";
@Component @Component
export default class Message extends Vue { export default class Message extends Vue {
private html = require("@/assets/message_testdata.json"); public html = require("@/assets/message_testdata.json");
public created(): void { public created(): void {
super.created(); super.created();
@ -21,7 +21,7 @@ export default class Message extends Vue {
// Update Message // Update Message
this.$ovdashboard.api_get_string( this.$ovdashboard.api_get_string(
"text/get/html/message", "text/get/html/message",
(data) => (this.html = data) (data) => (this.html = data),
); );
} }
} }
@ -59,4 +59,4 @@ div:deep() {
font-weight: bold; font-weight: bold;
} }
} }
</style> </style>

2
ui/src/components/Model.ts
View file

@ -5,7 +5,7 @@ export class Model {
// source: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2775538#gistcomment-2775538 // source: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2775538#gistcomment-2775538
let hash = 0; let hash = 0;
for (let i = 0; i < str.length; i++) for (let i = 0; i < str.length; i++)
hash = Math.imul(31, hash) + str.charCodeAt(i) | 0; hash = (Math.imul(31, hash) + str.charCodeAt(i)) | 0;
return new Uint32Array([hash])[0].toString(36); return new Uint32Array([hash])[0].toString(36);
} }

11
ui/src/components/TickerBar.vue
View file

@ -15,23 +15,20 @@ import Color from "color";
@Component @Component
export default class TickerBar extends Vue { export default class TickerBar extends Vue {
private content = "<p>changeme</p>"; public content = "<p>changeme</p>";
private color = "primary"; public color = "primary";
@Ref("content")
private readonly _content!: HTMLDivElement;
@Ref("marquee") @Ref("marquee")
private readonly _marquee!: HTMLSpanElement; private readonly _marquee!: HTMLSpanElement;
private get is_dark(): boolean { public get is_dark(): boolean {
return this.footer_color.isDark(); return this.footer_color.isDark();
} }
private get footer_color(): Color { private get footer_color(): Color {
// try getting from vuetify theme // try getting from vuetify theme
let color = this.$vuetify.theme.themes.light[this.color]; const color = this.$vuetify.theme.themes.light[this.color];
if (typeof color === "string") { if (typeof color === "string") {
return Color(color); return Color(color);

12
ui/src/components/calendar/Calendar.vue
View file

@ -4,11 +4,11 @@
{{ title }} {{ title }}
</span> </span>
<template v-for="(event, index) in events"> <template v-for="(event, index) in events">
<EventItem :event="event" :key="event.hash" /> <EventItem :event="event" :key="`event-${index}`" />
<v-divider <v-divider
v-if="index < events.length - 1" v-if="index < events.length - 1"
class="mx-5" class="mx-5"
:key="`${event.hash}-div`" :key="`event-div-${index}`"
/> />
</template> </template>
</v-list> </v-list>
@ -16,8 +16,8 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { EventData } from "./EventModel";
import EventItem from "./EventItem.vue"; import EventItem from "./EventItem.vue";
import { EventData } from "./EventModel";
@Component({ @Component({
components: { components: {
@ -26,10 +26,10 @@ import EventItem from "./EventItem.vue";
}) })
export default class Calendar extends Vue { export default class Calendar extends Vue {
@Prop({ default: "CALENDAR" }) @Prop({ default: "CALENDAR" })
private readonly title!: string; public readonly title!: string;
@Prop({ default: () => [] }) @Prop({ default: () => [] })
private readonly events!: EventData[]; public readonly events!: EventData[];
} }
</script> </script>
@ -37,4 +37,4 @@ export default class Calendar extends Vue {
.v-list .v-divider { .v-list .v-divider {
border-color: rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.25);
} }
</style> </style>

12
ui/src/components/calendar/CalendarCarousel.vue
View file

@ -29,7 +29,7 @@ export default class CalendarCarousel extends Vue {
private interval?: number; private interval?: number;
private data: CalendarData[] = require("@/assets/calendar_testdata.json"); private data: CalendarData[] = require("@/assets/calendar_testdata.json");
private speed = 10000; public speed = 10000;
@Ref("main") @Ref("main")
private readonly _main?: Vue; private readonly _main?: Vue;
@ -57,7 +57,7 @@ export default class CalendarCarousel extends Vue {
events: calendars[i], events: calendars[i],
}); });
} }
} },
); );
}); });
@ -70,7 +70,7 @@ export default class CalendarCarousel extends Vue {
"calendar/config", "calendar/config",
(data) => { (data) => {
this.speed = data.speed; this.speed = data.speed;
} },
); );
} }
@ -98,8 +98,8 @@ export default class CalendarCarousel extends Vue {
this.interval = setInterval(this.update_height, 10000); this.interval = setInterval(this.update_height, 10000);
} }
private get calendars(): CalendarModel[] { public get calendars(): CalendarModel[] {
let arr = []; const arr = [];
for (const json_data of this.data) { for (const json_data of this.data) {
arr.push(new CalendarModel(json_data)); arr.push(new CalendarModel(json_data));
@ -131,4 +131,4 @@ export default class CalendarCarousel extends Vue {
} }
} }
} }
</style> </style>

6
ui/src/components/calendar/CalendarModel.ts
View file

@ -13,11 +13,11 @@ export class CalendarModel extends Model {
public constructor(json_data: CalendarData) { public constructor(json_data: CalendarData) {
super(); super();
this.title = json_data.title this.title = json_data.title;
this.events = []; this.events = [];
for (const event_data of json_data.events) { for (const event_data of json_data.events) {
this.events.push(new EventModel(event_data)) this.events.push(new EventModel(event_data));
} }
} }
} }

10
ui/src/components/calendar/EventDate.vue
View file

@ -17,23 +17,23 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class EventDate extends Vue { export default class EventDate extends Vue {
@Prop() @Prop()
private readonly date!: DateTime; private readonly date!: DateTime;
private get day(): string { public get day(): string {
return this.date.toFormat("dd."); return this.date.toFormat("dd.");
} }
private get month(): string { public get month(): string {
return this.date.toFormat("MM."); return this.date.toFormat("MM.");
} }
private get time(): string { public get time(): string {
return this.date.toLocaleString(DateTime.TIME_24_SIMPLE); return this.date.toLocaleString(DateTime.TIME_24_SIMPLE);
} }
} }
@ -49,4 +49,4 @@ export default class EventDate extends Vue {
min-width: 130px; min-width: 130px;
} }
} }
</style> </style>

25
ui/src/components/calendar/EventItem.vue
View file

@ -12,15 +12,7 @@
{{ event.description }} {{ event.description }}
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-subtitle <v-list-item-subtitle
class=" class="d-inline-block text-truncate thw-heading-font blue-grey--text text--darken-1 font-weight-bold ma-0"
d-inline-block
text-truncate
thw-heading-font
blue-grey--text
text--darken-1
font-weight-bold
ma-0
"
> >
{{ data_string }} {{ data_string }}
</v-list-item-subtitle> </v-list-item-subtitle>
@ -29,10 +21,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { DateTime, DurationLikeObject } from "luxon"; import { DateTime, DurationLikeObject } from "luxon";
import { EventModel } from "./EventModel"; import { Component, Prop, Vue } from "vue-property-decorator";
import EventDate from "./EventDate.vue"; import EventDate from "./EventDate.vue";
import { EventModel } from "./EventModel";
@Component({ @Component({
components: { components: {
@ -41,15 +33,15 @@ import EventDate from "./EventDate.vue";
}) })
export default class EventItem extends Vue { export default class EventItem extends Vue {
@Prop() @Prop()
private readonly event!: EventModel; public readonly event!: EventModel;
private get data_string(): string { public get data_string(): string {
const locale_string = this.event.start.toLocaleString( const locale_string = this.event.start.toLocaleString(
DateTime.DATETIME_MED_WITH_WEEKDAY DateTime.DATETIME_MED_WITH_WEEKDAY,
); );
// decide which duration units to include // decide which duration units to include
let units: (keyof DurationLikeObject)[] = ["hours"]; const units: (keyof DurationLikeObject)[] = ["hours"];
if (this.event.duration.as("days") >= 1) { if (this.event.duration.as("days") >= 1) {
// include days if duration is at least one day // include days if duration is at least one day
@ -72,5 +64,4 @@ export default class EventItem extends Vue {
} }
</script> </script>
<style> <style></style>
</style>

12
ui/src/components/calendar/EventModel.ts
View file

@ -19,13 +19,11 @@ export class EventModel extends Model {
this.summary = json_data.summary; this.summary = json_data.summary;
this.description = json_data.description; this.description = json_data.description;
this.start = DateTime this.start = DateTime.fromISO(json_data.dtstart).setLocale(
.fromISO(json_data.dtstart) navigator.language,
.setLocale(navigator.language); );
const end = DateTime const end = DateTime.fromISO(json_data.dtend).setLocale(navigator.language);
.fromISO(json_data.dtend)
.setLocale(navigator.language);
this.duration = end.diff(this.start); this.duration = end.diff(this.start);
} }
} }

4
ui/src/components/title/Clock.vue
View file

@ -3,12 +3,12 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class Clock extends Vue { export default class Clock extends Vue {
private formatted = ""; public formatted = "";
private interval?: number; private interval?: number;
@Prop({ required: true }) @Prop({ required: true })

6
ui/src/components/title/THWLogo.vue
View file

@ -23,10 +23,10 @@ import { Component, Vue } from "@/ovd-vue";
@Component @Component
export default class THWLogo extends Vue { export default class THWLogo extends Vue {
private above = "Technisches Hilfswerk"; public above = "Technisches Hilfswerk";
private below = "OV Musterstadt"; public below = "OV Musterstadt";
private get logo_url(): string { public get logo_url(): string {
return this.$ovdashboard.api_url("file/get/logo"); return this.$ovdashboard.api_url("file/get/logo");
} }

2
ui/src/components/title/TitleBar.vue
View file

@ -38,7 +38,7 @@ import THWLogo from "./THWLogo.vue";
}, },
}) })
export default class TitleBar extends Vue { export default class TitleBar extends Vue {
private title = "<h1>TITLE</h1>"; public title = "<h1>TITLE</h1>";
public created(): void { public created(): void {
super.created(); super.created();

5
ui/src/d.ts/shims-ovdashboard.d.ts vendored
View file

@ -1,10 +1,9 @@
import { OVDashboardPlugin } from "@/plugins/ovdashboard"; import { OVDashboardPlugin } from "@/plugins/ovdashboard";
declare module 'vue/types/vue' { declare module "vue/types/vue" {
interface Vue { interface Vue {
$ovdashboard: OVDashboardPlugin; $ovdashboard: OVDashboardPlugin;
} }
} }
export { }; export {};

4
ui/src/d.ts/shims-tsx.d.ts vendored
View file

@ -1,11 +1,11 @@
import Vue, { VNode } from 'vue' import Vue, { VNode } from "vue";
declare global { declare global {
namespace JSX { namespace JSX {
interface Element extends VNode {} interface Element extends VNode {}
interface ElementClass extends Vue {} interface ElementClass extends Vue {}
interface IntrinsicElements { interface IntrinsicElements {
[elem: string]: any [elem: string]: any;
} }
} }
} }

6
ui/src/d.ts/shims-vue.d.ts vendored
View file

@ -1,4 +1,4 @@
declare module '*.vue' { declare module "*.vue" {
import Vue from 'vue' import Vue from "vue";
export default Vue export default Vue;
} }

6
ui/src/d.ts/shims-vuetify.d.ts vendored
View file

@ -1,4 +1,4 @@
declare module 'vuetify/lib/framework' { declare module "vuetify/lib/framework" {
import Vuetify from 'vuetify' import Vuetify from "vuetify";
export default Vuetify export default Vuetify;
} }

20
ui/src/main.ts
View file

@ -1,16 +1,16 @@
import Vue from "vue" import Vue from "vue";
import "@/registerServiceWorker" import "@/registerServiceWorker";
import "@/sass/fonts.scss" import "@/sass/fonts.scss";
import App from "@/App.vue" import App from "@/App.vue";
import ovdashboard from "@/plugins/ovdashboard" import ovdashboard from "@/plugins/ovdashboard";
import vuetify from "@/plugins/vuetify" import vuetify from "@/plugins/vuetify";
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(ovdashboard) Vue.use(ovdashboard);
new Vue({ new Vue({
vuetify, vuetify,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");

22
ui/src/plugins/ovdashboard.ts
View file

@ -1,5 +1,5 @@
import axios, { AxiosInstance, AxiosPromise } from 'axios'; import axios, { AxiosInstance, AxiosPromise } from "axios";
import Vue from 'vue'; import Vue from "vue";
export class OVDashboardPlugin { export class OVDashboardPlugin {
private axios: AxiosInstance; private axios: AxiosInstance;
@ -28,7 +28,6 @@ export class OVDashboardPlugin {
private get api_baseurl(): string { private get api_baseurl(): string {
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === "production") {
return `//${window.location.host}/api`; return `//${window.location.host}/api`;
} else if (process.env.NODE_ENV !== "development") { } else if (process.env.NODE_ENV !== "development") {
console.warn("Unexpected NODE_ENV value"); console.warn("Unexpected NODE_ENV value");
} }
@ -52,10 +51,7 @@ export class OVDashboardPlugin {
return this.axios.get<T>(this.api_url(endpoint)); return this.axios.get<T>(this.api_url(endpoint));
} }
private api_get<T>( private api_get<T>(endpoint: string, on_success: (data: T) => void): void {
endpoint: string,
on_success: (data: T) => void
): void {
this.api_get_prepare<T>(endpoint) this.api_get_prepare<T>(endpoint)
.then((response) => on_success(response.data)) .then((response) => on_success(response.data))
.catch(this.fail(endpoint)); .catch(this.fail(endpoint));
@ -63,7 +59,7 @@ export class OVDashboardPlugin {
public api_get_string( public api_get_string(
endpoint: string, endpoint: string,
on_success: (data: string) => void on_success: (data: string) => void,
): void { ): void {
this.api_get<string>(endpoint, (data) => { this.api_get<string>(endpoint, (data) => {
if (typeof data !== "string") { if (typeof data !== "string") {
@ -84,7 +80,7 @@ export class OVDashboardPlugin {
public api_get_list( public api_get_list(
endpoint: string, endpoint: string,
on_success: (data: string[]) => void on_success: (data: string[]) => void,
): void { ): void {
this.api_get(endpoint, (data) => { this.api_get(endpoint, (data) => {
if (!this.check_array<string>(data)) { if (!this.check_array<string>(data)) {
@ -105,7 +101,7 @@ export class OVDashboardPlugin {
public api_get_object<Type extends object>( public api_get_object<Type extends object>(
endpoint: string, endpoint: string,
on_success: (data: Type) => void on_success: (data: Type) => void,
): void { ): void {
this.api_get<Type>(endpoint, (data) => { this.api_get<Type>(endpoint, (data) => {
if (!this.check_object(data)) { if (!this.check_object(data)) {
@ -119,9 +115,11 @@ export class OVDashboardPlugin {
public api_get_object_multi<Type extends object>( public api_get_object_multi<Type extends object>(
endpoints: string[], endpoints: string[],
on_success: (data: Type[]) => void on_success: (data: Type[]) => void,
): void { ): void {
const promises = endpoints.map((endpoint) => this.api_get_prepare<Type>(endpoint)); const promises = endpoints.map((endpoint) =>
this.api_get_prepare<Type>(endpoint),
);
Promise.all(promises) Promise.all(promises)
.then((responses) => { .then((responses) => {

4
ui/src/plugins/vuetify.ts
View file

@ -1,5 +1,5 @@
import Vue from 'vue'; import Vue from "vue";
import Vuetify from 'vuetify/lib/framework'; import Vuetify from "vuetify/lib/framework";
Vue.use(Vuetify); Vue.use(Vuetify);

42
ui/src/registerServiceWorker.ts
View file

@ -1,32 +1,34 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
import { register } from 'register-service-worker' import { register } from "register-service-worker";
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === "production") {
register(`${process.env.BASE_URL}service-worker.js`, { register(`${process.env.BASE_URL}service-worker.js`, {
ready () { ready() {
console.log( console.log(
'App is being served from cache by a service worker.\n' + "App is being served from cache by a service worker.\n" +
'For more details, visit https://goo.gl/AFskqB' "For more details, visit https://goo.gl/AFskqB",
) );
}, },
registered () { registered() {
console.log('Service worker has been registered.') console.log("Service worker has been registered.");
}, },
cached () { cached() {
console.log('Content has been cached for offline use.') console.log("Content has been cached for offline use.");
}, },
updatefound () { updatefound() {
console.log('New content is downloading.') console.log("New content is downloading.");
}, },
updated () { updated() {
console.log('New content is available; please refresh.') console.log("New content is available; please refresh.");
}, },
offline () { offline() {
console.log('No internet connection found. App is running in offline mode.') console.log(
"No internet connection found. App is running in offline mode.",
);
}, },
error (error) { error(error) {
console.error('Error during service worker registration:', error) console.error("Error during service worker registration:", error);
} },
}) });
} }

98
ui/src/sass/fonts.scss
View file

@ -1,11 +1,17 @@
@font-face { @font-face {
font-family: "Lubalin Graph"; font-family: "Lubalin Graph";
src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot"); src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot");
src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot?#iefix") format("embedded-opentype"), src:
url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot?#iefix")
url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff") format("woff"), format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff2")
url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.svg#Lubalin BQ") format("svg"); format("woff2"),
url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.svg#Lubalin BQ")
format("svg");
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@ -13,11 +19,17 @@
@font-face { @font-face {
font-family: "Lubalin Graph"; font-family: "Lubalin Graph";
src: url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot"); src: url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot");
src: url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot?#iefix") format("embedded-opentype"), src:
url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot?#iefix")
url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff") format("woff"), format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff2")
url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.svg#LubalinGraph-Book") format("svg"); format("woff2"),
url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.svg#LubalinGraph-Book")
format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -25,11 +37,17 @@
@font-face { @font-face {
font-family: "Neue Praxis"; font-family: "Neue Praxis";
src: url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot"); src: url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot");
src: url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot?#iefix") format("embedded-opentype"), src:
url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot?#iefix")
url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff") format("woff"), format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff2")
url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.svg#PraxisEF") format("svg"); format("woff2"),
url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.svg#PraxisEF")
format("svg");
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@ -37,11 +55,17 @@
@font-face { @font-face {
font-family: "Neue Praxis"; font-family: "Neue Praxis";
src: url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot"); src: url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot");
src: url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot?#iefix") format("embedded-opentype"), src:
url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot?#iefix")
url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff") format("woff"), format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff2")
url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.svg#PraxisEF") format("svg"); format("woff2"),
url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.svg#PraxisEF")
format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -49,11 +73,17 @@
@font-face { @font-face {
font-family: "Neue Demos"; font-family: "Neue Demos";
src: url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot"); src: url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot");
src: url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot?#iefix") format("embedded-opentype"), src:
url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot?#iefix")
url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff") format("woff"), format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff2")
url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.svg#DemosEF") format("svg"); format("woff2"),
url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.svg#DemosEF")
format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -61,11 +91,17 @@
@font-face { @font-face {
font-family: "Neue Demos"; font-family: "Neue Demos";
src: url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot"); src: url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot");
src: url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot?#iefix") format("embedded-opentype"), src:
url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot?#iefix")
url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff") format("woff"), format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff2")
url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.svg#DemosEF") format("svg"); format("woff2"),
url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.svg#DemosEF")
format("svg");
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@ -91,4 +127,4 @@
@extend .thw-text-font; @extend .thw-text-font;
font-style: italic !important; font-style: italic !important;
} }

2
ui/src/sass/variables.scss
View file

@ -1,2 +1,2 @@
$heading-font-family: "Neue Praxis", "Roboto", sans-serif; $heading-font-family: "Neue Praxis", "Roboto", sans-serif;
$body-font-family: "Neue Demos", serif; $body-font-family: "Neue Demos", serif;

21
ui/tsconfig.json
View file

@ -16,20 +16,11 @@
"useDefineForClassFields": true, "useDefineForClassFields": true,
"sourceMap": true, "sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
"types": [ "types": ["webpack-env"],
"webpack-env"
],
"paths": { "paths": {
"@/*": [ "@/*": ["src/*"]
"src/*"
]
}, },
"lib": [ "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}, },
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",
@ -38,7 +29,5 @@
"tests/**/*.ts", "tests/**/*.ts",
"tests/**/*.tsx" "tests/**/*.tsx"
], ],
"exclude": [ "exclude": ["node_modules"]
"node_modules" }
]
}

9
ui/vue.config.js
View file

@ -1,6 +1,5 @@
const { defineConfig } = require('@vue/cli-service') const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: [ transpileDependencies: ["vuetify"],
'vuetify' });
]
})

3740
ui/yarn.lock
View file

File diff suppressed because it is too large Load diff