Implement generic welcome activity (#3)

assets/vpu-signature.topic.metadata.json

 {
   "name": {
-    "de": "Amtssignatur",
-    "en": "Offical Signature"
+    "de": "Signaturservice",
+    "en": "Signatureservice"
   },
   "short_name": {
-    "de": "Amtssignatur",
-    "en": "Offical Signature"
+    "de": "Signaturservice",
+    "en": "Signatureservice"
   },
   "description": {
     "de": "",
@@ -13,7 +13,7 @@
   },
   "routing_name": "signature",
   "activities": [
-    {"path": "vpu-signature-welcome.metadata.json"},
+    {"path": "vpu-welcome.metadata.json"},
     {"path": "vpu-signature-pdf-upload.metadata.json"},
     {"path": "vpu-signature-profile.metadata.json",
      "visible": false}

assets/vpu-signature-welcome.metadata.json → assets/vpu-welcome.metadata.json

 {
-  "element": "vpu-signature-welcome",
-  "module_src": "vpu-signature-welcome.js",
+  "element": "vpu-welcome",
+  "module_src": "vpu-welcome.js",
   "routing_name": "welcome",
   "name": {
     "de": "Willkommen",

rollup.config.js

@@ -144,7 +144,7 @@ export default {
       'src/vpu-signature.js',
       'src/vpu-signature-pdf-upload.js',
       'src/vpu-signature-profile.js',
-      'src/vpu-signature-welcome.js',
+      'src/vpu-welcome.js',
     ] : glob.sync('test/**/*.js'),
     output: {
       dir: 'dist',

src/app/index.js

 import {createI18nInstance} from '../i18n.js';
-import {html, css, LitElement} from 'lit-element';
+import {html, css} from 'lit-element';
+import VPULitElement from 'vpu-common/vpu-lit-element'
 import 'vpu-language-select';
 import 'vpu-common/vpu-button.js';
 import 'vpu-auth';
@@ -44,7 +45,7 @@ const importNotify = async (promise) => {
 };
 
 
-class VPUApp extends LitElement {
+class VPUApp extends VPULitElement {
     constructor() {
         super();
         this.lang = i18n.language;
@@ -629,8 +630,15 @@ class VPUApp extends LitElement {
         if (!appHidden) {
             this.updateComplete.then(() => {
                 const slot = this.shadowRoot.querySelector("slot");
-                if (slot)
+                if (slot) {
                     slot.remove();
+                }
+
+                const welcomeActivity = this._("vpu-welcome");
+
+                if (welcomeActivity) {
+                    welcomeActivity.setMetaData(this.metadata, i18n.t('welcome.headline'), i18n.t('welcome.description'));
+                }
             });
         }
 

src/i18n/de/translation.json

@@ -19,7 +19,7 @@
     "re-upload-all-button-title": "Alle fehlgeschlagen Uploads erneut hochladen"
   },
   "welcome": {
-    "headline": "Willkommen beim Amtssignaturservice der TU Graz",
+    "headline": "Willkommen beim Signaturservice der TU Graz",
     "description": "Mit dieser Applikation können Sie, sofern Sie dazu berechtigt sind, PDF Dateien im Namen der TU Graz signieren"
   },
   "error-summary": "Ein Fehler ist aufgetreten",

src/i18n/en/translation.json

@@ -19,7 +19,7 @@
     "re-upload-all-button-title": "Upload all failed uploads again"
   },
   "welcome": {
-    "headline": "Welcome to the official signature service of the TU Graz",
+    "headline": "Welcome to the signature service of the TU Graz",
     "description": "With this application you can, provided you are authorized to do so, sign PDF files in the name of the TU Graz"
   },
   "error-summary": "An error occurred",

src/vpu-signature-welcome.js → src/vpu-welcome.js

@@ -11,15 +11,22 @@ class SignatureWelcome extends LitElement {
     constructor() {
         super();
         this.lang = i18n.language;
-
+        this.metadata = {};
     }
 
     static get properties() {
         return {
             lang: { type: String },
+            metadata: { type: Object, attribute: false },
         };
     }
 
+    setMetaData(metaData, headline, subHeadline) {
+        this.headline = headline || "Welcome";
+        this.subHeadline = subHeadline || "";
+        this.metadata = metaData;
+    }
+
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
@@ -35,16 +42,33 @@ class SignatureWelcome extends LitElement {
         return css`
             ${commonStyles.getThemeCSS()}
             ${commonStyles.getGeneralCSS()}
+
+            h2 { margin: inherit; }
+            p { margin: 0 0 10px 0; }
+            div.item { margin: 30px 0; }
         `;
     }
 
     render() {
+        let itemTemplates = [];
+
+        for (let [key, data] of Object.entries(this.metadata)) {
+
+            if (data['visible'] && (key !== "welcome")) {
+                itemTemplates.push(html`
+                    <div class="item">
+                        <h2>${data.name[this.lang]}</h2>
+                        ${data.description[this.lang]}
+                    </div>`);
+            }
+        }
+
         return html`
-            <p>${i18n.t('welcome.headline')}</p>
-            <br>
-            <p>${i18n.t('welcome.description')}</p>
+            <p>${this.headline}</p>
+            <p>${this.subHeadline}</p>
+            ${itemTemplates}
         `;
     }
 }
 
-commonUtils.defineCustomElement('vpu-signature-welcome', SignatureWelcome);
+commonUtils.defineCustomElement('vpu-welcome', SignatureWelcome);