Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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);