Add open/close button for kb element

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>
         `;
     }

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>
         `;
     }