Skip to content
Snippets Groups Projects
Commit a80a590f authored by Neuber, Eugen Ramon's avatar Neuber, Eugen Ramon :speech_balloon:
Browse files

Use lang attribute in consumer component

TODO: translate some untranslated strings
parent 0643e86a
No related branches found
No related tags found
1 merge request!28Observer test
Pipeline #15725 passed
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script type="module" src="dbp-provider.js"></script>
<script type="module" src="dbp-provider-demo.js"></script> <script type="module" src="dbp-provider-demo.js"></script>
<!-- <!--
This is for debugging only: This is for debugging only:
...@@ -16,9 +17,13 @@ ...@@ -16,9 +17,13 @@
</head> </head>
<body> <body>
<dbp-provider id="root"
<dbp-provider-demo lang="de"></dbp-provider-demo> root="1"
availability="global"
lang="de"
>
<dbp-provider-demo id="provider-demo" subscribe="lang:lang"></dbp-provider-demo>
</dbp-provider>
<p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p> <p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
</body> </body>
</html> </html>
...@@ -14,6 +14,10 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -14,6 +14,10 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this.lang = 'de';
this.subscribe = '';
this.deferSubscribe = false;
this.deferUnSubscribe = false;
} }
static get scopedElements() { static get scopedElements() {
...@@ -29,12 +33,96 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -29,12 +33,96 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
static get properties() { static get properties() {
return { return {
lang: { type: String }, lang: { type: String },
subscribe: { type: String }
}; };
} }
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
i18n.changeLanguage(this.lang); i18n.changeLanguage(this.lang);
if (this.deferUnSubscribe) {
const attrs = this.unsubscribe.split(',');
attrs.forEach(element => this.subscribeProviderFor(element));
this.deferSubscribe = false;
this.unsubscribe = '';
}
if (this.deferSubscribe) {
const attrs = this.subscribe.split(',');
attrs.forEach(element => this.subscribeProviderFor(element));
this.deferSubscribe = false;
}
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('ProviderDemo (' + this.id() + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
switch(name) {
case 'lang':
this.lang = newValue;
i18n.changeLanguage(this.lang);
break;
case 'subscribe':
if (this.subscribe && this.subscribe.length > 0) {
if (this.connected) {
const attrs = this.subscribe.split(',');
attrs.forEach(element => this.unSubscribeProviderFor(element));
} else {
this.deferUnSubscribe = this.subscribe.length > 0;
this.unsubscribe = this.subscribe;
}
}
if (newValue !== null) {
this.subscribe = newValue;
if (this.connected) {
const attrs = newValue.split(',');
attrs.forEach(element => this.subscribeProviderFor(element));
} else {
this.deferSubscribe = newValue && newValue.length > 0;
}
}
break;
default:
super.attributeChangedCallback(name, oldValue, newValue);
}
this.render();
}
subscribeProviderFor(element) {
console.log('ProviderDemo (' + this.id() + ') subscribeProviderFor( ' + element + ' )');
const pair = element.trim().split(':');
const global = pair[0];
const local = pair[1];
const that = this;
const event = new CustomEvent('subscribe',
{
bubbles: true,
composed: true,
detail: {
name: global,
callback: (value) => {
console.log('ProviderDemo (' + that.id() + ') sub/Callback ' + global + ' -> ' + local + ' = ' + value);
that.attributeChangedCallback(local, that[local], value);
},
sender: this,
}
});
this.parentElement.dispatchEvent(event);
}
unSubscribeProviderFor(element) {
console.log('ProviderDemo (' + this.id() + ') unSubscribeProviderFor( ' + element + ' )');
const pair = element.trim().split(':');
const global = pair[0];
const event = new CustomEvent('unsubscribe',
{
bubbles: true,
composed: true,
detail: {
name: global,
sender: this,
}
});
this.parentElement.dispatchEvent(event);
} }
static get styles() { static get styles() {
...@@ -51,18 +139,13 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -51,18 +139,13 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
render() { render() {
return html` return html`
<dbp-provider id="root" <section class="section">
root="1" <p>${i18n.t('demo.provider')} <em>"root"</em> is the top most in hierarchy:</p>
blah="777"
availability="global"
lang="de"
><section class="section">
<p>Provider <em>"root"</em> is the top most in hierarchy:</p>
<pre> <pre>
&lt;dbp-provider id="root" root="1" availability="global" >&lt;/dbp-provider&gt; &lt;dbp-provider id="root" root="1" availability="global" >&lt;/dbp-provider&gt;
</pre> </pre>
<div class="container"> <div class="container">
<h1 class="title">Provider-Demo</h1> <h1 class="title">${i18n.t('demo.provider')}-Demo</h1>
</div> </div>
<div class="container"> <div class="container">
<dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak> <dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
...@@ -77,39 +160,39 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -77,39 +160,39 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
bar="20" bar="20"
> >
<div class="container"> <div class="container">
<h2>Provider</h2> <h2>${i18n.t('demo.provider')}</h2>
<p>Provider <em>"demo"</em> has only <em>border-color</em> to offer:</p> <p>${i18n.t('demo.provider')} <em>"demo"</em> has only <em>border-color</em> to offer:</p>
<pre> <pre>
&lt;dbp-provider id="demo" bc="blue" &gt;&lt;/dbp-provider&gt; &lt;dbp-provider id="demo" bc="blue" &gt;&lt;/dbp-provider&gt;
</pre> </pre>
<p>Provider <em>"foo-bar"</em> has some values in its store:</p> <p>${i18n.t('demo.provider')} <em>"foo-bar"</em> has some values in its store:</p>
<pre> <pre>
&lt;dbp-provider id="foo-bar" foo="9" bar="20" &gt;&lt;/dbp-provider&gt; &lt;dbp-provider id="foo-bar" foo="9" bar="20" &gt;&lt;/dbp-provider&gt;
</pre> </pre>
<h2>Consumer</h2> <h2>${i18n.t('demo.consumer')}</h2>
<p>Consumer <em>"c1"</em> will only subscribe to <em>border-color</em></p> <p>${i18n.t('demo.consumer')} <em>"c1"</em> will only subscribe to <em>border-color</em></p>
<pre> <pre>
&lt;dbp-consumer id="c1" subscribe="bc:border-color" &gt;&lt;/dbp-consumer&gt; &lt;dbp-consumer id="c1" subscribe="bc:border-color" &gt;&lt;/dbp-consumer&gt;
</pre> </pre>
<dbp-consumer id="c1" <dbp-consumer id="c1"
subscribe="bc:border-color" subscribe="bc:border-color,lang:lang"
></dbp-consumer> ></dbp-consumer>
<p>Consumer <em>"c2"</em> subscribes to <em>foo</em></p> <p>${i18n.t('demo.consumer')} <em>"c2"</em> subscribes to <em>foo</em></p>
<pre> <pre>
&lt;dbp-consumer id="c2" subscribe="foo:foo" &gt;&lt;/dbp-consumer&gt; &lt;dbp-consumer id="c2" subscribe="foo:foo" &gt;&lt;/dbp-consumer&gt;
</pre> </pre>
<dbp-consumer id="c2" <dbp-consumer id="c2"
subscribe="foo:foo" subscribe="foo:foo,lang:lang"
></dbp-consumer> ></dbp-consumer>
<p>Consumer <em>"c3"</em> subscribes for <em>status</em> which is provided as <em>availability</em></p> <p>${i18n.t('demo.consumer')} <em>"c3"</em> subscribes for <em>status</em> which is provided as <em>availability</em></p>
<pre> <pre>
&lt;dbp-consumer id="c3" subscribe="availability:status" border-color="orange" &gt;&lt;/dbp-consumer&gt; &lt;dbp-consumer id="c3" subscribe="availability:status" border-color="orange" &gt;&lt;/dbp-consumer&gt;
</pre> </pre>
<dbp-consumer id="c3" <dbp-consumer id="c3"
subscribe="availability:status" subscribe="availability:status,lang:lang"
border-color="orange" border-color="orange"
></dbp-consumer> ></dbp-consumer>
<p>Consumer <em>"c4"</em> subscribes for <em>status</em> which is provided as <em>unknown-name</em> which does not exist...</p> <p>${i18n.t('demo.consumer')} <em>"c4"</em> subscribes for <em>status</em> which is provided as <em>unknown-name</em> which does not exist...</p>
<pre> <pre>
&lt;dbp-consumer id="c4" subscribe="unknown-name:status" border-color="darkgray" &gt;&lt;/dbp-consumer&gt; &lt;dbp-consumer id="c4" subscribe="unknown-name:status" border-color="darkgray" &gt;&lt;/dbp-consumer&gt;
</pre> </pre>
...@@ -121,9 +204,12 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -121,9 +204,12 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
</dbp-provider> </dbp-provider>
</dbp-provider> </dbp-provider>
</section> </section>
</dbp-provider>
`; `;
} }
id() {
return this.getAttribute('id');
}
} }
commonUtils.defineCustomElement('dbp-provider-demo', ProviderDemo); commonUtils.defineCustomElement('dbp-provider-demo', ProviderDemo);
...@@ -277,11 +363,11 @@ class Consumer extends HTMLElement { ...@@ -277,11 +363,11 @@ class Consumer extends HTMLElement {
} }
} }
class DemoConsumer extends Consumer class DemoConsumer extends Consumer {
{
constructor() { constructor() {
super(); super();
this.lang = 'de';
// default values // default values
this.foo = 100; this.foo = 100;
this.bar = 900; this.bar = 900;
...@@ -295,17 +381,29 @@ class DemoConsumer extends Consumer ...@@ -295,17 +381,29 @@ class DemoConsumer extends Consumer
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
i18n.changeLanguage(this.lang);
console.log('DemoConsumer(' + this.id() + ') connectedCallback()'); console.log('DemoConsumer(' + this.id() + ') connectedCallback()');
this.render(); this.render();
} }
static get observedAttributes() { static get observedAttributes() {
return [ ...Consumer.observedAttributes, 'foo', 'bar', 'gong', 'border-color', 'ping']; return [
...Consumer.observedAttributes,
'lang', 'foo', 'bar', 'gong', 'border-color', 'ping'
];
} }
attributeChangedCallback(name, oldValue, newValue) { attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) {
return;
}
console.log('DemoConsumer(' + this.id() + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')'); console.log('DemoConsumer(' + this.id() + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
switch(name) { switch(name) {
case 'lang':
this.lang = newValue;
i18n.changeLanguage(this.lang);
break;
case 'foo': case 'foo':
this.foo = parseInt(newValue); this.foo = parseInt(newValue);
break; break;
...@@ -335,12 +433,12 @@ class DemoConsumer extends Consumer ...@@ -335,12 +433,12 @@ class DemoConsumer extends Consumer
<div style="border: ${this['border-color']} dotted; padding: 10px;"> <div style="border: ${this['border-color']} dotted; padding: 10px;">
<table style="width:200px;"> <table style="width:200px;">
<tr style="background-color: #aaa;"> <tr style="background-color: #aaa;">
<th style="text-align: left;">Item</th> <th style="text-align: left;">${i18n.t('consumer.item')}</th>
<th style="text-align: right;">Price</th> <th style="text-align: right;">${i18n.t('consumer.price')}</th>
</tr> </tr>
<tr><td>foo</td><td style="text-align: right;">${this.foo}</td></tr> <tr><td>foo</td><td style="text-align: right;">${this.foo}</td></tr>
<tr><td>bar</td><td style="text-align: right;">${this.bar}</td></tr> <tr><td>bar</td><td style="text-align: right;">${this.bar}</td></tr>
<tr><td>sum</td><td style="text-align: right;">${sum}</td></tr> <tr><td>${i18n.t('consumer.sum')}</td><td style="text-align: right;">${sum}</td></tr>
</table> </table>
<p>Status: <b>${this.status}</b></p> <p>Status: <b>${this.status}</b></p>
</div> </div>
......
{ {
"provider": { "de": "Deutsch",
"en": "Englisch",
"demo": {
"provider": "Anbieter",
"consumer": "Verbraucher"
},
"consumer": {
"item": "Bezeichnung",
"price": "Preis",
"sum": "Summe"
} }
} }
\ No newline at end of file
{ {
"provider": { "de": "German",
"en": "English",
"demo": {
"provider": "Provider",
"consumer": "Consumer"
},
"consumer": {
"item": "Description",
"price": "Price",
"sum": "sum"
} }
} }
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment