Implement fetching and viewing of web page elements

packages/knowledge-base-web-page-element-view/package.json

@@ -18,6 +18,7 @@
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "i18next": "^17.0.3",
     "lit-element": "^2.1.0",
+    "lit-html": "^1.1.1",
     "vpu-auth": "*",
     "vpu-common": "*"
   },

common @ 7c9e79d2

-Subproject commit 8786f24eb39e717995747fa291c9fb1c770d4506
+Subproject commit 7c9e79d20c319bb6a6154c1724f20eb2f67cfbeb

packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js

 import {i18n} from './i18n';
 import {html} from 'lit-element';
-import JSONLD from 'vpu-common/jsonld';
+// import JSONLD from 'vpu-common/jsonld';
 import VPULitElement from 'vpu-common/vpu-lit-element'
 import utils from "./utils";
+import commonUtils from "vpu-common/utils";
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 
 /**
  * KnowledgeBaseWebPageElementView web component
@@ -12,6 +14,7 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
         super();
         this.lang = 'de';
         this.value = '';
+        this.html = '';
     }
 
     /**
@@ -21,6 +24,7 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
         return {
             lang: { type: String },
             value: { type: String },
+            html: { type: String, attribute: false },
         };
     }
 
@@ -29,21 +33,29 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
         i18n.changeLanguage(this.lang);
         const that = this;
 
-        JSONLD.initialize(utils.getAPiUrl(), function (jsonld) {
-            // TODO: there is no entity url without "collectionOperations"
-            const apiUrl = jsonld.getApiUrlForEntityName("KnowledgeBaseWebPageElement") + '/' + that.value;
-            console.log(apiUrl);
+        // JSONLD.initialize(utils.getAPiUrl(), function (jsonld) {
+        //     const apiUrl = jsonld.getApiUrlForEntityName("KnowledgeBaseWebPageElement") + '/' + btoa(that.value);
+        // });
 
+        // sadly there there is no entity url without "collectionOperations" in entity KnowledgeBaseWebPageElement!
+        const apiUrl = utils.getAPiUrl("/web_page_elements/knowledge_base_web_page_elements/") + commonUtils.base64EncodeUnicode(that.value);
+
+        window.addEventListener("vpu-auth-init", function(e)
+        {
             fetch(apiUrl, {
                 headers: {
                     'Content-Type': 'application/ld+json',
-                    'Authorization': 'Bearer ' + that.token,
+                    'Authorization': 'Bearer ' + window.VPUAuthToken,
                 },
             })
-                .then(response => response.json())
-                .then((person) => {
-                    console.log(person);
-                });
+                .then(res => res.json())
+                .then(webPageElement => {
+                    if (webPageElement !== undefined && webPageElement.text !== undefined) {
+                        that.html = webPageElement.text;
+                    }
+                })
+                // catch e.g. 404 errors
+                .catch(error => console.error(error));
         });
 
         this.updateComplete.then(()=>{
@@ -61,6 +73,11 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
                     Hier kann man dann etwas aufklappen.
                 </div>
             </div>
+            <div class="columns">
+                <div class="column">
+                    ${unsafeHTML(this.html)}
+                </div>
+            </div>
         `;
     }
 }