From 7378685e71101d76c3f0ec880a9f211c8a5f5265 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 9 Apr 2020 15:33:49 +0200
Subject: [PATCH] Add an autogenerated welcome page
---
.../assets/example.topic.metadata.json | 4 +-
.../app-shell/src/i18n/de/translation.json | 5 +-
.../app-shell/src/i18n/en/translation.json | 3 +
packages/app-shell/src/index.js | 8 +-
.../app-shell/src/vpu-app-shell-welcome.js | 90 +++++++++++++++++++
5 files changed, 105 insertions(+), 5 deletions(-)
create mode 100644 packages/app-shell/src/vpu-app-shell-welcome.js
diff --git a/packages/app-shell/assets/example.topic.metadata.json b/packages/app-shell/assets/example.topic.metadata.json
index 6ccda29d..b50437bc 100644
--- a/packages/app-shell/assets/example.topic.metadata.json
+++ b/packages/app-shell/assets/example.topic.metadata.json
@@ -8,8 +8,8 @@
"en": "Example"
},
"description": {
- "de": "",
- "en": ""
+ "de": "Ich bin eine Beschreibung der Applikation",
+ "en": "I am a description of this application"
},
"routing_name": "example",
"activities": [
diff --git a/packages/app-shell/src/i18n/de/translation.json b/packages/app-shell/src/i18n/de/translation.json
index 798379d6..513078a3 100644
--- a/packages/app-shell/src/i18n/de/translation.json
+++ b/packages/app-shell/src/i18n/de/translation.json
@@ -8,5 +8,8 @@
"page-updated-needs-reload": "Die Applikation wurde aktualisiert. Bitte laden Sie die Seite neu.",
"activity-example": {
"hello-world": "Hallo Welt"
+ },
+ "welcome": {
+ "headline": "Willkommen bei der Applikation '{{appname}}'"
}
-}
+}
\ No newline at end of file
diff --git a/packages/app-shell/src/i18n/en/translation.json b/packages/app-shell/src/i18n/en/translation.json
index 173eb134..22757e70 100644
--- a/packages/app-shell/src/i18n/en/translation.json
+++ b/packages/app-shell/src/i18n/en/translation.json
@@ -8,5 +8,8 @@
"page-updated-needs-reload": "The application has been updated. Please reload the page.",
"activity-example": {
"hello-world": "Hello World"
+ },
+ "welcome": {
+ "headline": "Welcome to the '{{appname}}' application"
}
}
diff --git a/packages/app-shell/src/index.js b/packages/app-shell/src/index.js
index b6ccf8e0..dae8484d 100644
--- a/packages/app-shell/src/index.js
+++ b/packages/app-shell/src/index.js
@@ -14,6 +14,7 @@ import './build-info.js';
import './tugraz-logo.js';
import {send as notify} from 'vpu-notification';
import {userProfileMeta} from './vpu-app-shell-user-profile.js';
+import {appWelcomeMeta} from './vpu-app-shell-welcome.js';
const i18n = createI18nInstance();
@@ -120,11 +121,14 @@ class VPUApp extends LitElement {
}
}
- // Inject the user profile activity
+ // Inject the user profile and welcome activity
routes.push("user-profile");
+ routes.unshift("welcome");
metadata = Object.assign(metadata, {
- "user-profile": userProfileMeta
+ "user-profile": userProfileMeta,
+ "welcome": appWelcomeMeta,
});
+ customElements.get("vpu-app-shell-welcome").app = this;
// this also triggers a rebuilding of the menu
this.metadata = metadata;
diff --git a/packages/app-shell/src/vpu-app-shell-welcome.js b/packages/app-shell/src/vpu-app-shell-welcome.js
new file mode 100644
index 00000000..7f2c3efa
--- /dev/null
+++ b/packages/app-shell/src/vpu-app-shell-welcome.js
@@ -0,0 +1,90 @@
+import {createI18nInstance} from './i18n.js';
+import {css, html, LitElement} from 'lit-element';
+import * as commonUtils from 'vpu-common/utils';
+import * as commonStyles from 'vpu-common/styles';
+
+const i18n = createI18nInstance();
+
+class AppShellWelcome extends LitElement {
+
+ constructor() {
+ super();
+ this.lang = i18n.language;
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ };
+ }
+
+ static set app(app) {
+ this._app = app;
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ if (propName === "lang") {
+ i18n.changeLanguage(this.lang);
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getThemeCSS()}
+ ${commonStyles.getGeneralCSS()}
+
+ h2 { margin: inherit; }
+ p { margin: 0 0 10px 0; }
+ div.item { margin: 30px 0; }
+ `;
+ }
+
+ render() {
+ const app = AppShellWelcome._app;
+ let metadata = app.metadata;
+ let itemTemplates = [];
+
+ for (let [key, data] of Object.entries(metadata)) {
+
+ if (data['visible'] && (key !== "welcome")) {
+ itemTemplates.push(html`
+ <div class="item">
+ <h2>${data.name[this.lang]}</h2>
+ ${data.description[this.lang]}
+ </div>`);
+ }
+ }
+ console.log(app.topic.name);
+ return html`
+ <p>${i18n.t('welcome.headline', {appname: app.topic.name[this.lang]})}</p>
+ <p>${app.topic.description[this.lang]}</p>
+ ${itemTemplates}
+ `;
+ }
+}
+
+export const appWelcomeMeta = {
+ "element": "vpu-app-shell-welcome",
+ "module_src": "",
+ "routing_name": "welcome",
+ "name": {
+ "de": "Willkommen",
+ "en": "Welcome"
+ },
+ "short_name": {
+ "de": "Willkommen",
+ "en": "Welcome"
+ },
+ "description": {
+ "de": "",
+ "en": ""
+ },
+ visible: true
+};
+
+commonUtils.defineCustomElement('vpu-app-shell-welcome', AppShellWelcome);
--
GitLab