diff --git a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
index aa842ecf3697d7f3208aa8e075f19ab8d34ead23..5224368bd80ba3a0257d71d09cff2c65b7209b3a 100644
--- a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
+++ b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
@@ -37,12 +37,22 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement {
</div>
<div class="content">
<h2 class="subtitle">Deutsch</h2>
+ Ein Buch ausleihen...
<vpu-knowledge-base-web-page-element-view entry-point-url="${utils.getAPiUrl()}" lang="de" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
</div>
<div class="content">
<h2 class="subtitle">Englisch</h2>
+ Borrow a book...
<vpu-knowledge-base-web-page-element-view entry-point-url="${utils.getAPiUrl()}" lang="en" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
</div>
+ <hr>
+ <div class="content">
+ FAQ...
+ <vpu-knowledge-base-web-page-element-view lang="${this.lang}" value="abc/def/xyz"></vpu-knowledge-base-web-page-element-view>
+ <br>
+ Kontaktieren Sie uns unter...
+ <vpu-knowledge-base-web-page-element-view lang="${this.lang}" value="abc/def/klm"></vpu-knowledge-base-web-page-element-view>
+ </div>
</section>
`;
}
diff --git a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
index adbb7f659d3cf9a58c76fea2e4f554ae591f500c..cfcdc80c9fb1d4279b7f12970c6972d623595b9f 100644
--- a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
+++ b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
@@ -16,6 +16,11 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
this.value = '';
this.html = '';
this.entryPointUrl = utils.getAPiUrl();
+ this.error = '';
+ this.id = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
+ this.eyeClose = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1ElEQVQ4ja3SMU5CURCF4c+ejpiILe5DZAGyASuJS5CKEoMGKhdAwWKgMkriKjQWFkAkBizgmckNPEgeJ7nVuee/M3eGI2mCehFAHZ/Hgtygizd84wsjPOHsEMgUqx1njvtd4R7uAmSIMipo4SeAHtLwdTCbG8gHLsOdVlJN9LwEY4nSFsh5AhhHwGtinoY/ySDlPEAjMbvByyDDvBbgOZi/eNxUkrUTp9NJw3CCNhbJS0vcBshgWzjqAn28W899Zr1U1dBObR8kT9nGXhWFTIoA/vUHQydS/iUcHx4AAAAASUVORK5CYII=';
+ this.eyeOpen = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVQ4jc3SvS7EURAF8B+JioSsCokHUFgNiWewQqvzICRew2v4WLFUnoNS/msrazUaFOYm12RlVeIkk9ycM2fmztzLf8U02tiPaAc3EbM4Rh8fKfo4wdxP5nXcV4YhLnGO54p/wEY2b6akHhYqfR7dVHyriMt4qsQRWtiNaw+wFwWHaaQlcc161l4UblIyXKTcM7hL5FUk14tsgsvNumIhb2NG6ISxiXMrtJI3wErZwyHeK/E2DAWLuKn0F2xLOEgdRriOeK34sc9YsIpT37dd4hFHvj7bRMxElw52sIap3xj/Hp9rzGFBhiMSxAAAAABJRU5ErkJggg==';
+ //this.css = 'kb.css';
}
/**
@@ -27,6 +32,9 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
value: { type: String },
html: { type: String, attribute: false },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
+ id: { type: String, attribute: false},
+ error: { type: String, attribute: false},
+ //css: { type: String },
};
}
@@ -56,20 +64,45 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
encodeURIComponent(commonUtils.base64EncodeUnicode(encodeURIComponent(this.value))) +
"?lang=" + encodeURIComponent(this.lang);
+ var that = this;
fetch(apiUrl, {
headers: {
'Content-Type': 'application/ld+json',
'Authorization': 'Bearer ' + window.VPUAuthToken,
},
})
- .then(res => res.json())
- .then(webPageElement => {
- if (webPageElement !== undefined && webPageElement.text !== undefined) {
- this.html = webPageElement.text;
+ .then(function (res) {
+ if (!res.ok) {
+ let status_msg;
+ switch (res.status) {
+ case 403:
+ status_msg = that.lang === 'de' ? 'ist verboten' : 'is forbidden';
+ break;
+ case 404:
+ status_msg = that.lang === 'de' ? 'wurde nicht gefunden' : 'was not found';
+ break;
+ case 500:
+ status_msg = that.lang === 'de' ? 'macht Probleme am Server' : 'troubled server';
+ break;
+ default:
+ status_msg = that.lang === 'de' ? 'mit unbekanntem Problem' : 'with unknown problems';
}
- })
- // catch e.g. 404 errors
- .catch();
+ if (that.lang === 'de') {
+ that.error = html`<p>FEHLER: Information "<b>${that.value}</b>" ${status_msg} (${res.status}).</p>`;
+ } else {
+ that.error = html`<p>ERROR: information "<b>${that.value}</b>" ${status_msg} (${res.status}).</p>`;
+ }
+ throw new Error('HTTP error: ' +that.value + ' ' + status_msg + ', status = ' + res.status);
+ }
+ return res.json();
+ })
+ .then(webPageElement => {
+ if (webPageElement !== undefined && webPageElement.text !== undefined) {
+ that.html = webPageElement.text;
+ }
+ })
+ // catch e.g. 404 errors
+ .catch();
}
updated(changedProperties) {
@@ -77,7 +110,6 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
-
switch(propName) {
case "lang":
case "value":
@@ -88,21 +120,32 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
});
}
+ toggle(e) {
+ const id = this.id;
+ const element = this.shadowRoot.querySelector('#' + id);
+ const img = e.target;
+ const d = element.style.display;
+ if(d === '' || d === 'none') {
+ element.style.display = 'flex';
+ img.src = this.eyeClose;
+ } else {
+ element.style.display = 'none';
+ img.src = this.eyeOpen;
+ }
+ }
+
render() {
+ //<link rel="stylesheet" href="${this.css}">
+ const id = this.id;
return html`
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<style>
</style>
- <div class="columns">
- <div class="column">
- Hier kann man dann etwas aufklappen.
- </div>
- </div>
- <div class="columns">
- <div class="column">
- ${unsafeHTML(this.html)}
- </div>
+ <img src='${this.eyeOpen}' @click="${this.toggle}" alt="open/close">
+ <div class='kb' id="${id}">
+ ${unsafeHTML(this.html)}
+ ${this.error}
</div>
`;
}