freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Display config values in header and footer.

Browse source
This commit is contained in:
baldo 2022-05-19 13:33:48 +02:00
parent 59f7897d8e
commit fde340ead0
13 changed files with 344 additions and 80 deletions

1
frontend/package.json
View file

@ -11,6 +11,7 @@
},
"dependencies": {
"pinia": "^2.0.14",
"sparkson": "^1.3.6",
"vue": "^3.2.34",
"vue-router": "^4.0.15"
},

13
frontend/src/App.vue
View file

@ -14,4 +14,15 @@ import PageFooter from "@/components/PageFooter.vue";
<PageFooter />
</template>
<style lang="scss" scoped></style>
<style lang="scss">
@import "scss/variables";
body {
background-color: $page-background-color;
color: $page-text-color;
}
a {
color: $link-color;
}
</style>

29
frontend/src/components/PageFooter.vue
View file

@ -1,9 +1,12 @@
<script setup lang="ts">
import { useConfigStore } from "@/stores/config";
import { useVersionStore } from "@/stores/version";
const config = useConfigStore();
const version = useVersionStore();
function refresh(): void {
config.refresh();
version.refresh();
}
@ -11,9 +14,29 @@ refresh();
</script>
<template>
<footer>
{{ version.getVersion }}
<footer v-if="config.getConfig">
ffffng ({{ version.getVersion }})
<a href="https://github.com/freifunkhamburg/ffffng" target="_blank">Source Code</a>
<a href="https://github.com/freifunkhamburg/ffffng/issues" target="_blank">Fehler melden</a>
<a
v-if="config.getConfig.legal.privacyUrl"
:href="config.getConfig.legal.privacyUrl"
target="_blank">Datenschutz</a>
<a
v-if="config.getConfig.legal.imprintUrl"
:href="config.getConfig.legal.imprintUrl"
target="_blank">Impressum</a>
</footer>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "../scss/variables";
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
</style>

40
frontend/src/components/PageHeader.vue
View file

@ -1,15 +1,39 @@
<script setup lang="ts">
import { useConfigStore } from "@/stores/config";
const config = useConfigStore();
function refresh(): void {
config.refresh();
}
refresh();
</script>
<template>
<header>
<div class="wrapper">
<nav>
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/admin">Admin</RouterLink>
</nav>
</div>
<header v-if="config.getConfig">
<nav>
<RouterLink to="/">
<img src="icon.svg" alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"/>
{{ config.getConfig.community.name }} – Knotenverwaltung
</RouterLink>
<RouterLink to="/admin">Admin-Panel</RouterLink>
</nav>
</header>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "../scss/variables";
header {
position: absolute;
top: 0;
left: 0;
right: 0;
img {
width: 2em;
height: 2em;
}
}
</style>

20
frontend/src/scss/_variables.scss Normal file
View file

@ -0,0 +1,20 @@
// Grays
$gray-darker: #333333;
$gray-dark: #444444;
$gray: #666666;
$gray-light: #d6d6d6;
$gray-lighter: #ededed;
// Colors
$color-primary: #e5287a;
$color-success: #449d44;
$color-warning: #fdbc41;
$color-danger: #c9302c;
$color-info: #009ee0;
// Page
$page-background-color: $gray-darker;
$page-text-color: $gray-lighter;
// Links
$link-color: $color-primary;

29
frontend/src/stores/config.ts Normal file
View file

@ -0,0 +1,29 @@
import {defineStore} from "pinia";
import {type ClientConfig, isClientConfig} from "@/types";
import {api} from "@/utils/Api";
interface ConfigStoreState {
config: ClientConfig | null;
}
export const useConfigStore = defineStore({
id: "config",
state(): ConfigStoreState {
return {
config: null,
};
},
getters: {
getConfig(state: ConfigStoreState): ClientConfig | null {
return state.config;
},
},
actions: {
async refresh(): Promise<void> {
this.config = await api.get<ClientConfig>(
"config",
isClientConfig
);
},
},
});

6
frontend/src/views/HomeView.vue
View file

@ -2,7 +2,11 @@
</script>
<template>
Home
<div>
<h1>Willkommen!</h1>
<p>Du hast einen neuen Freifunk Hamburg Router (Knoten), den Du in Betrieb nehmen möchtest? Du hast schon einen Knoten in Betrieb und möchtest seine Daten ändern? Oder Du möchtest einen Knoten, der nicht mehr in Betrieb ist löschen? Dann bist Du hier richtig!</p>
</div>
</template>
<style lang="scss" scoped></style>

6
frontend/tsconfig.json
View file

@ -5,8 +5,10 @@
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
"@/*": ["./src/*"],
},
"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
"emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
},
"references": [

24
frontend/yarn.lock
View file

@ -1269,6 +1269,16 @@ lodash.merge@^4.6.2:
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.times@4.3.2:
version "4.3.2"
resolved "https://registry.yarnpkg.com/lodash.times/-/lodash.times-4.3.2.tgz#3e1f2565c431754d54ab57f2ed1741939285ca1d"
integrity sha1-Ph8lZcQxdU1Uq1fy7RdBk5KFyh0=
lodash.zip@4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.zip/-/lodash.zip-4.2.0.tgz#ec6662e4896408ed4ab6c542a3990b72cc080020"
integrity sha1-7GZi5IlkCO1KtsVCo5kLcswIACA=
lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@ -1506,6 +1516,11 @@ readdirp@~3.6.0:
dependencies:
picomatch "^2.2.1"
reflect-metadata@0.1.12:
version "0.1.12"
resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.12.tgz#311bf0c6b63cd782f228a81abe146a2bfa9c56f2"
integrity sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==
regexpp@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@ -1611,6 +1626,15 @@ sourcemap-codec@^1.4.8:
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
sparkson@^1.3.6:
version "1.3.6"
resolved "https://registry.yarnpkg.com/sparkson/-/sparkson-1.3.6.tgz#c165748898053344e4a36d4b6c4ba51abe65e079"
integrity sha512-hn75TVt4lHgVIe367YZqrprYrsVDb9DHzBbFLeDH3U0BqOH47jL6X0OzkqtcQ16G0gJn8D69Ev4Vnj/rvxNV4g==
dependencies:
lodash.times "4.3.2"
lodash.zip "4.2.0"
reflect-metadata "0.1.12"
strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"