@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/collection/components/stzh-upload/stzh-upload.js

@@ -1,8 +1,9 @@
-import { h, Host } from "@stencil/core";
-import { hasSlot, isStzhElement } from "../../utils/utils";
+import { Fragment, h, Host, } from "@stencil/core";
+import { getStzhEnvironment, hasSlot, isStzhElement } from "../../utils/utils";
 import { tc } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
 import "../../libraries/dropzone/dropzone";
+import QRCode from "qrcode";
 window.Dropzone.autoDiscover = false;
 const ATTR_NAME = "data-dz-name";
 const ATTR_TYPE = "data-dz-type";
@@ -25,9 +26,35 @@ let previewCounter = 0;
 export class StzhUpload {
   constructor() {
     this._existingFiles = [];
+    this.PHOTOGRAPHING_BASE_URL = "/appl/mobiscan/rs";
+    this.PHOTOGRAPHING_ENDPOINTS = {
+      PING: "/ping",
+      URL: "/url",
+      IMAGE: "/image",
+      CONFIG: "/config",
+      AUTH: "/auth",
+    };
     this.handleReset = () => {
       this.removeAllFiles(true);
     };
+    this.closePhotographingWebsocketConnection = () => {
+      this.photographingWebsocket.close();
+    };
+    this.onButtonScanClick = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.photographingOverlayElement.show().then();
+      if (this.isPhotographingAvailable) {
+        this.startPhotographingUserSession()
+          .then()
+          .catch(photographingUserSessionException => {
+          console.error("photographingUserSessionException", photographingUserSessionException);
+        });
+      }
+    };
+    this.closePhotographingOverlay = async () => {
+      this.photographingOverlayElement.hide().catch();
+    };
     this.filesize = function (size) {
       let selectedSize = 0;
       let selectedUnit = "b";
@@ -55,6 +82,8 @@ export class StzhUpload {
     this.heading = "";
     this.description = "";
     this.button = "";
+    this.buttonScan = "";
+    this.photographingEnabled = false;
     this.url = "";
     this.method = "post";
     this.withCredentials = false;
@@ -89,6 +118,13 @@ export class StzhUpload {
     this.hiddenInputContainer = undefined;
     this.preventHiddenInputClear = false;
     this.localization = undefined;
+    this.environment = undefined;
+    this.isPhotographingAvailable = false;
+    this.photographingUrlDetails = undefined;
+    this.photographingHost = undefined;
+    this.photographingConfig = undefined;
+    this.photographingWebsocket = undefined;
+    this.photographingToken = undefined;
   }
   resetListener(event) {
     if (event.target.contains(this.element)) {
@@ -159,6 +195,166 @@ export class StzhUpload {
   async removeAllFiles(cancelIfNecessary = false, force = false) {
     return this.dropzone.removeAllFiles(cancelIfNecessary, force);
   }
+  async getToken() {
+    if (this.photographingToken &&
+      this.photographingToken.access_token &&
+      Date.now() < this.photographingToken.expires_in) {
+      return this.photographingToken;
+    }
+    else {
+      return await this.requestPhotographingToken();
+    }
+  }
+  async requestPhotographingToken() {
+    try {
+      const response = await fetch(`${this.photographingHost}${this.PHOTOGRAPHING_BASE_URL}${this.PHOTOGRAPHING_ENDPOINTS.AUTH}`);
+      if (!response.ok) {
+        throw new Error("Token retrieval failed");
+      }
+      const parsedResponse = await response.json();
+      this.photographingToken = {
+        access_token: parsedResponse.access_token,
+        expires_in: Date.now() + parsedResponse.expires_in * 1000,
+      };
+      return this.photographingToken;
+    }
+    catch (error) {
+      console.error("Token retrieval failed", error);
+      throw new Error("Token retrieval failed");
+    }
+  }
+  async initializePhotographingWithEnvironment(environment) {
+    this.photographingHost = this.getPhotographingHostForEnvironment(environment);
+    await this.setPhotographingConfig();
+    if (this.photographingConfig) {
+      await this.checkPhotographingAvailability();
+    }
+  }
+  async startPhotographingUserSession() {
+    try {
+      const response = await fetch(`${this.photographingConfig.publicEndpoint}${this.PHOTOGRAPHING_ENDPOINTS.URL}`, await this.getPhotographingHttpOptionsWithToken());
+      if (!response.ok) {
+        // Nothing to do here. Just don't show the photographing button.
+      }
+      else {
+        const url = await response.json();
+        const urlObject = new URL(url.url);
+        const params = new URLSearchParams(urlObject.search);
+        this.photographingUrlDetails = {
+          url: url.url,
+          userId: params.get("id"),
+        };
+        try {
+          await QRCode.toCanvas(this.photographingQrcodeElement, url.url);
+        }
+        catch (error) {
+          console.error("Error generating QR code:", error);
+        }
+        await this.establishPhotographingWebsocketConnection();
+      }
+    }
+    catch (startPhotographingUserSessionException) {
+      console.error(`StzhUpload.startPhotographingUserSession() - startPhotographingUserSessionException:`, startPhotographingUserSessionException);
+    }
+  }
+  async retreivePhotographingPdf() {
+    try {
+      const response = await fetch(`${this.photographingConfig.publicEndpoint}${this.PHOTOGRAPHING_ENDPOINTS.IMAGE}/retreive-pdf?id=${this.photographingUrlDetails.userId}`, await this.getPhotographingHttpOptionsWithToken());
+      if (!response.ok) {
+        console.error(`StzhUpload.retreivePhotographingPdf() - HTTP error! status: ${response.status}`);
+      }
+      else {
+        const parsedResponse = await response.json();
+        const file = await this.fetchFile(parsedResponse.downloadLink);
+        this.dropzone.addFile(file);
+        await this.closePhotographingOverlay();
+      }
+    }
+    catch (retreivePhotographingPdfException) {
+      console.error(`StzhUpload.retreivePhotographingPdf() - retreivePhotographingPdfException:`, retreivePhotographingPdfException);
+    }
+  }
+  async fetchFile(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const fileName = url.split("/").pop();
+    const cleanFileName = fileName.split("?")[0];
+    if (blob.type === "application/octet-stream") {
+      return new File([blob], cleanFileName, { type: "application/pdf" });
+    }
+    return new File([blob], cleanFileName, { type: blob.type });
+  }
+  async establishPhotographingWebsocketConnection() {
+    this.photographingWebsocket = new WebSocket(`${this.photographingConfig.wsClientUrl}${this.photographingUrlDetails.userId}`, ["chat", (await this.getToken()).access_token]);
+    this.photographingWebsocket.onopen = () => {
+      setInterval(() => {
+        this.sendPhotographingWebsocketMessage("Ping");
+      }, 20000);
+    };
+    this.photographingWebsocket.onmessage = async (event) => {
+      const message = event.data;
+      if (message === "retreivePdf") {
+        await this.retreivePhotographingPdf();
+      }
+    };
+    this.photographingWebsocket.onerror = error => {
+      console.error("WebSocket error: ", error);
+    };
+  }
+  sendPhotographingWebsocketMessage(message) {
+    this.photographingWebsocket.send(message);
+  }
+  async getPhotographingHttpOptionsWithToken() {
+    const token = await this.getToken();
+    return {
+      headers: {
+        Authorization: `Bearer ${token.access_token}`,
+      },
+    };
+  }
+  async checkPhotographingAvailability() {
+    try {
+      const response = await fetch(`${this.photographingConfig.publicEndpoint}${this.PHOTOGRAPHING_ENDPOINTS.PING}`, await this.getPhotographingHttpOptionsWithToken());
+      if (!response.ok) {
+        console.error(`StzhUpload.isAvailable() - HTTP error! status: ${response.status}`);
+        this.isPhotographingAvailable = false;
+      }
+      else {
+        this.isPhotographingAvailable = true;
+      }
+    }
+    catch (isAvailableException) {
+      console.error(`StzhUpload.isAvailable() - isAvailableException:`, isAvailableException);
+      this.isPhotographingAvailable = false;
+    }
+  }
+  async setPhotographingConfig() {
+    try {
+      const response = await fetch(`${this.photographingHost}${this.PHOTOGRAPHING_BASE_URL}${this.PHOTOGRAPHING_ENDPOINTS.CONFIG}`);
+      if (!response.ok) {
+        console.error(`StzhUpload.getConfig() - HTTP error! status: ${response.status}`);
+      }
+      else {
+        this.photographingConfig = await response.json();
+      }
+    }
+    catch (getConfigException) {
+      console.error(`StzhUpload.getConfig() - getConfigException:`, getConfigException);
+    }
+  }
+  getPhotographingHostForEnvironment(environment) {
+    switch (environment) {
+      case "DEV":
+        return "https://www.test.stadt-zuerich.loc";
+      case "UAT":
+        return "https://www.integ.stadt-zuerich.ch";
+      case "PROD":
+        return "https://www.stadt-zuerich.ch";
+      case "UNKNOWN":
+        this.PHOTOGRAPHING_BASE_URL = `/stzh-components/assets/mock${this.PHOTOGRAPHING_BASE_URL}`;
+        return `${window.location.origin}`;
+    }
+  }
   async componentWillLoad() {
     this.uploadId = `stzh-upload-${uploadCounter++}`;
     this.existingFilesWatcher(this.existingFiles);
@@ -166,6 +362,12 @@ export class StzhUpload {
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "upload");
     }
+    this.environment = getStzhEnvironment();
+    if (this.photographingEnabled) {
+      this.initializePhotographingWithEnvironment(this.environment).catch(initializePhotographingWithEnvironmentException => {
+        console.error("initializePhotographingWithEnvironmentException", initializePhotographingWithEnvironmentException);
+      });
+    }
   }
   componentDidRender() {
     if (this.dropzone) {
@@ -226,6 +428,24 @@ export class StzhUpload {
       dictResponseError: this.localization.responseError,
       dictInvalidFileType: this.localization.invalidFileType,
       dictFileTooBig: this.localization.fileTooBig,
+      // Called when a file is dropped to the dropzone
+      // Receives `event`
+      drop: e => {
+        var _a;
+        // Merge files in hidden input.
+        if (this.preventHiddenInputClear) {
+          const hiddenFileInput = (_a = this.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+          const dataTransfer = new DataTransfer();
+          for (let i = 0; i < hiddenFileInput.files.length; i++) {
+            dataTransfer.items.add(hiddenFileInput.files[i]);
+          }
+          for (const file of e.dataTransfer.files) {
+            dataTransfer.items.add(file);
+          }
+          hiddenFileInput.files = dataTransfer.files;
+        }
+        return this.element.classList.remove("dz-drag-hover");
+      },
       // Called when a file is added to the queue
       // Receives `file`
       // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L594
@@ -531,7 +751,10 @@ export class StzhUpload {
       "stzh-upload--has-error": errorUsed,
       "stzh-upload--has-instructions": !!this.description || !!this.localization.description,
     };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { ref: el => (this.hiddenInputContainerElement = el) }), h("div", { id: `${this.uploadId}-label` }, this.label && h("div", { class: "stzh-upload__label" }, this.label)), h("div", { class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__heading-wrapper" }, h("div", { class: "stzh-upload__heading-inner-wrapper" }, h("div", { class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { class: "stzh-upload__button-wrapper" }, h("span", null, this.localization.buttonIntro), h("stzh-link", { class: "stzh-upload__button", ref: el => (this.linkElement = el), size: "inherit", variant: "secondary", a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, this.button ? this.button : tc(this.localization.button, this.maxFiles)))), h("stzh-icon", { class: "stzh-upload__heading-icon", name: "upload" })), h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : tc(this.localization.description, this.maxFiles))), ((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error })), h("div", { id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { class: "stzh-upload__previews-inner-wrapper" }, h("div", { class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) }))))));
+    const description = this.description ? this.description : this.localization.description;
+    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { ref: el => (this.hiddenInputContainerElement = el) }), h("div", { id: `${this.uploadId}-label` }, this.label && h("div", { class: "stzh-upload__label" }, this.label)), h("div", { class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__heading-wrapper" }, h("div", { class: "stzh-upload__heading-inner-wrapper" }, h("div", { class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : tc(this.localization.button, this.maxFiles), a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : tc(this.localization.buttonScan, this.maxFiles), onClick: this.onButtonScanClick }, h("stzh-icon", { slot: "icon", name: "camera" })))), h("div", { class: "stzh-upload__hint-wrapper" }, h("span", null, this.localization.buttonIntro)))), h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, description
+      .replace("{{fileformats}}", this.acceptedFiles ? this.acceptedFiles : "Alle")
+      .replace("{{filesize}}", `${this.maxFilesize}`))), ((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error })), h("div", { id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { class: "stzh-upload__previews-inner-wrapper" }, h("div", { class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), h("stzh-dialog", { ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection }, h("stzh-button", { class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, null, h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle1), h("div", { class: "stzh-upload-photographing__text-qrcode" }, h("div", null, h("stzh-text", null, this.localization.photographingText1), !!this.photographingUrlDetails && (h("stzh-link", { class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url, target: "_blank" }, this.photographingUrlDetails.url))), h("canvas", { class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) }))), h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle2), h("stzh-text", null, this.localization.photographingText2)))))));
   }
   static get is() { return "stzh-upload"; }
   static get originalStyleUrls() {
@@ -660,6 +883,42 @@ export class StzhUpload {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "buttonScan": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Scan Button text"
+        },
+        "attribute": "button-scan",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "photographingEnabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Scan Button text"
+        },
+        "attribute": "photographing-enabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "url": {
         "type": "string",
         "mutable": false,
@@ -1204,7 +1463,7 @@ export class StzhUpload {
         "mutable": false,
         "complexType": {
           "original": "StzhUploadLocalizedText",
-          "resolved": "StzhLocaleComponent & { heading: string; description: string; buttonIntro: string; button: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; deleteFile: string; downloadFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; }",
+          "resolved": "StzhLocaleComponent & { heading: string; description: string; buttonIntro: string; button: string; buttonScan: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; deleteFile: string; downloadFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; photographingTitle1: string; photographingText1: string; photographingTitle2: string; photographingText2: string; back: string; }",
           "references": {
             "StzhUploadLocalizedText": {
               "location": "import",
@@ -1222,6 +1481,17 @@ export class StzhUpload {
       }
     };
   }
+  static get states() {
+    return {
+      "environment": {},
+      "isPhotographingAvailable": {},
+      "photographingUrlDetails": {},
+      "photographingHost": {},
+      "photographingConfig": {},
+      "photographingWebsocket": {},
+      "photographingToken": {}
+    };
+  }
   static get events() {
     return [{
         "method": "stzhFileAdded",