Merge pull request #48 from com-pas/load-cursor

Refactor code to show progress indicator (circle) using the event newPendingStateEvent

src/compas-editors/CompasVersions.ts

@@ -1,12 +1,10 @@
 import {css, html, LitElement, property, TemplateResult} from 'lit-element';
 import {get, translate} from 'lit-translate';
-
-import {OpenSCD} from "../open-scd.js";
 import {newWizardEvent, Wizard} from "../foundation.js";
 
-import {CompasSclDataService, SDS_NAMESPACE} from "../compas/CompasSclDataService.js";
+import {CompasSclDataService, SDS_NAMESPACE} from "../compas-services/CompasSclDataService.js";
 import {getTypeFromDocName, updateDocumentInOpenSCD} from "../compas/foundation.js";
-import { styles } from './foundation.js';
+import {getOpenScdElement, styles} from './foundation.js';
 
 /** An editor [[`plugin`]] for selecting the `Substation` section. */
 export default class CompasVersionsPlugin extends LitElement {
@@ -113,8 +111,7 @@ function openScl(docName: string, docId: string, version: string) {
       });
 
     // Close the Restore Dialog.
-    const openScd = <OpenSCD>document.querySelector('open-scd');
-    openScd.dispatchEvent(newWizardEvent());
+    getOpenScdElement().dispatchEvent(newWizardEvent());
 
     return [];
   }

src/compas-editors/foundation.ts

@@ -1,4 +1,9 @@
 import {css} from "lit-element";
+import {OpenSCD} from "../open-scd.js";
+
+export function getOpenScdElement(): OpenSCD {
+  return <OpenSCD>document.querySelector('open-scd');
+}
 
 /** Common `CSS` styles used by Compas Editors subeditors */
 export const styles = css`

src/compas/CompasCimMappingService.ts → src/compas-services/CompasCimMappingService.ts

@@ -1,4 +1,4 @@
-import {CompasSettings} from "./CompasSettingsElement.js";
+import {CompasSettings} from "../compas/CompasSettingsElement.js";
 
 export const CMS_NAMESPACE = 'https://www.lfenergy.org/compas/CimMappingService/v1';
 

src/compas/CompasSclDataService.ts → src/compas-services/CompasSclDataService.ts

@@ -1,5 +1,5 @@
-import {CompasSettings} from "./CompasSettingsElement.js";
-import {ChangeSet} from "./CompasChangeSet.js";
+import {CompasSettings} from "../compas/CompasSettingsElement.js";
+import {ChangeSet} from "../compas/CompasChangeSet.js";
 
 export const SDS_NAMESPACE = 'https://www.lfenergy.org/compas/SclDataService/v1';
 

src/compas/CompasSaveTo.ts

@@ -2,13 +2,17 @@ import {customElement, html, LitElement, property, TemplateResult} from "lit-ele
 import {get, translate} from "lit-translate";
 import {TextFieldBase} from "@material/mwc-textfield/mwc-textfield-base";
 
-import {newLogEvent, newWizardEvent, Wizard, WizardInput} from "../foundation.js";
-import {OpenSCD} from "../open-scd.js";
+import {newLogEvent, newPendingStateEvent, newWizardEvent, Wizard, WizardInput} from "../foundation.js";
 
 import {CompasChangeSetRadiogroup} from "./CompasChangeSet.js";
 import {CompasScltypeRadiogroup} from "./CompasScltypeRadiogroup.js";
-import {CompasSclDataService} from "./CompasSclDataService.js";
-import {getTypeFromDocName, stripExtensionFromName, updateDocumentInOpenSCD} from "./foundation.js";
+import {CompasSclDataService} from "../compas-services/CompasSclDataService.js";
+import {
+  getOpenScdElement,
+  getTypeFromDocName,
+  stripExtensionFromName,
+  updateDocumentInOpenSCD
+} from "./foundation.js";
 
 import './CompasChangeSet.js';
 import './CompasScltypeRadiogroup.js';
@@ -42,88 +46,97 @@ export class CompasSaveTo extends LitElement {
     return this.getChangeSetRadiogroup().valid();
   }
 
-  render(): TemplateResult {
-    if (!this.docId) {
-      return html`
-        <mwc-textfield dialogInitialFocus id="name" label="${translate('scl.name')}"
-                       value="${this.docName}" required>
-        </mwc-textfield>
+  private async getSclDocument(type: string, id: string): Promise<void>{
+    await CompasSclDataService().getSclDocument(type, id)
+      .then(response => {
+        // Copy the SCL Result from the Response and create a new Document from it.
+        const sclElement = response.querySelectorAll("SCL").item(0);
+        const sclDocument = document.implementation.createDocument("", "", null);
+        sclDocument.getRootNode().appendChild(sclElement.cloneNode(true));
 
-        <compas-scltype-radiogroup .value="${getTypeFromDocName(this.docName)}"></compas-scltype-radiogroup>
-      `;
-    }
-    return html `
-      <compas-changeset-radiogroup></compas-changeset-radiogroup>
-    `;
+        updateDocumentInOpenSCD(sclDocument);
+      });
   }
-}
-
-function getSclDocument(type: string, id: string): void {
-  CompasSclDataService().getSclDocument(type, id)
-    .then(response => {
-      // Copy the SCL Result from the Response and create a new Document from it.
-      const sclElement = response.querySelectorAll("SCL").item(0);
-      const sclDocument = document.implementation.createDocument("", "", null);
-      sclDocument.getRootNode().appendChild(sclElement.cloneNode(true));
-
-      updateDocumentInOpenSCD(sclDocument);
-    });
-}
 
-function addSclToCompas(wizard: Element, compasSaveTo: CompasSaveTo, doc: XMLDocument) {
-  const name = stripExtensionFromName(compasSaveTo.getNameField().value);
-  const docType = compasSaveTo.getSclTypeRadioGroup().getSelectedValue() ?? '';
+  private async addSclToCompas(wizard: Element, doc: XMLDocument): Promise<void> {
+    const name = stripExtensionFromName(this.getNameField().value);
+    const docType = this.getSclTypeRadioGroup().getSelectedValue() ?? '';
 
-  CompasSclDataService().addSclDocument(docType, {sclName: name, doc: doc})
-    .then(xmlResponse => {
-      const id = Array.from(xmlResponse.querySelectorAll('*|Id') ?? [])[0]
+    await CompasSclDataService().addSclDocument(docType, {sclName: name, doc: doc})
+      .then(xmlResponse => {
+        const id = Array.from(xmlResponse.querySelectorAll('*|Id') ?? [])[0]
 
-      // Retrieve the document to fetch server-side updates.
-      getSclDocument(docType, id.textContent ?? '');
+        // Retrieve the document to fetch server-side updates.
+        this.getSclDocument(docType, id.textContent ?? '');
 
-      const openScd = <OpenSCD>document.querySelector('open-scd');
-      openScd.dispatchEvent(
+        const openScd = getOpenScdElement();
+        openScd.dispatchEvent(
           newLogEvent({
             kind: 'info',
-            title: get('compas.saveTo.addSuccess')}));
-
-      // Close the Save Dialog.
-      openScd.dispatchEvent(newWizardEvent());
-    })
-    .catch(() => {
-      const openScd = <OpenSCD>document.querySelector('open-scd');
-      openScd.dispatchEvent(
+            title: get('compas.saveTo.addSuccess')
+          }));
+
+        // Close the Save Dialog.
+        openScd.dispatchEvent(newWizardEvent());
+      }).catch(() => {
+        const openScd = getOpenScdElement();
+        openScd.dispatchEvent(
           newLogEvent({
             kind: 'error',
-            title: get('compas.saveTo.addError')}));
+            title: get('compas.saveTo.addError')
+          }));
     });
-}
+  }
 
-function updateSclInCompas(wizard: Element, compasSaveTo: CompasSaveTo, docId: string, docName: string, doc: XMLDocument) {
-  const changeSet = compasSaveTo.getChangeSetRadiogroup().getSelectedValue();
-  const docType = getTypeFromDocName(docName);
+  private async updateSclInCompas(wizard: Element, docId: string, docName: string, doc: XMLDocument): Promise<void> {
+    const changeSet = this.getChangeSetRadiogroup().getSelectedValue();
+    const docType = getTypeFromDocName(docName);
 
-  CompasSclDataService().updateSclDocument(docType.toUpperCase(), docId, {changeSet: changeSet!, doc: doc})
-    .then(() => {
-      // Retrieve the document to fetch server-side updates.
-      getSclDocument(docType, docId);
+    await CompasSclDataService().updateSclDocument(docType.toUpperCase(), docId, {changeSet: changeSet!, doc: doc})
+      .then(() => {
+        // Retrieve the document to fetch server-side updates.
+        this.getSclDocument(docType, docId);
 
-      const openScd = <OpenSCD>document.querySelector('open-scd');
-      openScd.dispatchEvent(
+        const openScd = getOpenScdElement();
+        openScd.dispatchEvent(
           newLogEvent({
             kind: 'info',
             title: get('compas.saveTo.updateSuccess')}));
 
-      // Close the Save Dialog.
-      openScd.dispatchEvent(newWizardEvent());
-    })
-    .catch(() => {
-      const openScd = <OpenSCD>document.querySelector('open-scd');
-      openScd.dispatchEvent(
+        // Close the Save Dialog.
+        openScd.dispatchEvent(newWizardEvent());
+      }).catch(() => {
+        const openScd = getOpenScdElement();
+        openScd.dispatchEvent(
           newLogEvent({
             kind: 'error',
             title: get('compas.saveTo.updateError')}));
-    });
+      });
+  }
+
+  async saveToCompas(wizard: Element, docId: string, docName: string, doc: XMLDocument): Promise<void> {
+    if (!docId) {
+      await this.addSclToCompas(wizard, doc);
+    } else {
+      await this.updateSclInCompas(wizard, docId, docName, doc);
+    }
+  }
+
+  render(): TemplateResult {
+    if (!this.docId) {
+      return html`
+        <mwc-textfield dialogInitialFocus id="name" label="${translate('scl.name')}"
+                       value="${this.docName}" required>
+        </mwc-textfield>
+
+        <compas-scltype-radiogroup .value="${getTypeFromDocName(this.docName)}"></compas-scltype-radiogroup>
+      `;
+    }
+
+    return html `
+      <compas-changeset-radiogroup></compas-changeset-radiogroup>
+    `;
+  }
 }
 
 function saveToCompas(docId: string, docName: string, doc: XMLDocument) {
@@ -133,11 +146,7 @@ function saveToCompas(docId: string, docName: string, doc: XMLDocument) {
       return [];
     }
 
-    if (!docId) {
-      addSclToCompas(wizard, compasSaveTo, doc);
-    } else {
-      updateSclInCompas(wizard, compasSaveTo, docId, docName, doc);
-    }
+    getOpenScdElement().dispatchEvent(newPendingStateEvent(compasSaveTo.saveToCompas(wizard, docId, docName, doc)));
     return [];
   };
 }

src/compas/CompasScl.ts

@@ -4,9 +4,9 @@ import {get, translate} from "lit-translate";
 import {newPendingStateEvent, newWizardEvent, Wizard} from "../foundation.js";
 import {SingleSelectedEvent} from "@material/mwc-list/mwc-list-foundation";
 
-import {CompasSclDataService, SDS_NAMESPACE} from "./CompasSclDataService.js";
+import {CompasSclDataService, SDS_NAMESPACE} from "../compas-services/CompasSclDataService.js";
 import {compasSclTypeListWizardActor} from "./CompasScltypeList.js";
-import {updateDocumentInOpenSCD} from "./foundation.js";
+import {getOpenScdElement, updateDocumentInOpenSCD} from "./foundation.js";
 
 @customElement('compas-scl-list')
 export class CompasScl extends LitElement {
@@ -28,7 +28,7 @@ export class CompasScl extends LitElement {
   }
 
   openScl(id?: string) {
-    this.dispatchEvent(newPendingStateEvent(this.getSclDocument(id)));
+    getOpenScdElement().dispatchEvent(newPendingStateEvent(this.getSclDocument(id)));
   }
 
   private async getSclDocument(id?: string): Promise<void> {

src/compas/CompasScltypeList.ts

@@ -2,7 +2,7 @@ import {customElement, html, LitElement, property, TemplateResult} from "lit-ele
 import {get, translate} from "lit-translate";
 import {SingleSelectedEvent} from "@material/mwc-list/mwc-list-foundation";
 import {newWizardEvent, Wizard, WizardActor} from '../foundation.js';
-import {CompasSclDataService, SDS_NAMESPACE} from "./CompasSclDataService.js";
+import {CompasSclDataService, SDS_NAMESPACE} from "../compas-services/CompasSclDataService.js";
 import {listSclsWizard} from "./CompasScl.js";
 
 @customElement('compas-scltype-list')

src/compas/CompasScltypeRadiogroup.ts

@@ -1,6 +1,6 @@
 import {customElement, html, LitElement, property, TemplateResult} from "lit-element";
-import {get, translate} from "lit-translate";
-import {CompasSclDataService, SDS_NAMESPACE} from "./CompasSclDataService.js";
+import {translate} from "lit-translate";
+import {CompasSclDataService, SDS_NAMESPACE} from "../compas-services/CompasSclDataService.js";
 import {ListItemBase} from "@material/mwc-list/mwc-list-item-base";
 
 @customElement('compas-scltype-radiogroup')

src/compas/CompasSettingsElement.ts

@@ -2,8 +2,8 @@ import {css, customElement, html, LitElement, property, TemplateResult} from 'li
 import {get, translate} from 'lit-translate';
 
 import {newWizardEvent, Wizard, WizardInput} from '../foundation.js';
-import {OpenSCD} from "../open-scd.js";
 import {TextFieldBase} from "@material/mwc-textfield/mwc-textfield-base";
+import {getOpenScdElement} from "./foundation.js";
 
 export type CompasSettingsRecord = {
   sclDataServiceUrl: string;
@@ -77,7 +77,7 @@ export class CompasSettingsElement extends LitElement {
 
   close(): void {
     // Close the Save Dialog.
-    const openScd = <OpenSCD>document.querySelector('open-scd');
+    const openScd = getOpenScdElement();
     openScd.dispatchEvent(newWizardEvent());
   }
 

src/compas/foundation.ts

@@ -1,5 +1,6 @@
-import {newOpenDocEvent} from "../foundation.js";
 import {get} from "lit-translate";
+import {newOpenDocEvent} from "../foundation.js";
+import {OpenSCD} from "../open-scd.js";
 
 const FILE_EXTENSION_LENGTH = 3;
 
@@ -19,6 +20,10 @@ export function stripExtensionFromName(docName: string): string {
   return name
 }
 
+export function getOpenScdElement(): OpenSCD {
+  return <OpenSCD>document.querySelector('open-scd');
+}
+
 export function updateDocumentInOpenSCD(doc: Document): void {
   const id = (doc.querySelectorAll(':root > Header') ?? []).item(0).getAttribute('id') ?? '';
   const version = (doc.querySelectorAll(':root > Header') ?? []).item(0).getAttribute('version') ?? '';
@@ -31,7 +36,5 @@ export function updateDocumentInOpenSCD(doc: Document): void {
   }
   docName += '-' + version + '.' + type?.toLowerCase();
 
-  document
-    .querySelector('open-scd')!
-    .dispatchEvent(newOpenDocEvent(doc, docName, {detail: {docId: id}}));
+  getOpenScdElement().dispatchEvent(newOpenDocEvent(doc, docName, {detail: {docId: id}}));
 }

src/menu/CompasCimMapping.ts

@@ -1,8 +1,9 @@
 import {css, html, LitElement, query, TemplateResult} from 'lit-element';
 
-import {newOpenDocEvent} from "../foundation.js";
-import {stripExtensionFromName} from "../compas/foundation.js";
-import {CimData, CompasCimMappingService} from "../compas/CompasCimMappingService.js";
+import {newLogEvent, newOpenDocEvent, newPendingStateEvent} from "../foundation.js";
+import {getOpenScdElement, stripExtensionFromName} from "../compas/foundation.js";
+import {CimData, CompasCimMappingService} from "../compas-services/CompasCimMappingService.js";
+import {get} from "lit-translate";
 
 export default class OpenProjectPlugin extends LitElement {
   @query('#cim-mapping-input') pluginFileUI!: HTMLInputElement;
@@ -20,7 +21,7 @@ export default class OpenProjectPlugin extends LitElement {
       cimData.push({name: cimName, doc: cimDocument})
     }
 
-    CompasCimMappingService().map({cimData: cimData}).then(response => {
+    await CompasCimMappingService().map({cimData: cimData}).then(response => {
       // We will use the first filename as the basis of the new filename.
       const sclName = stripExtensionFromName(cimData[0].name) + ".ssd";
 
@@ -29,9 +30,14 @@ export default class OpenProjectPlugin extends LitElement {
       const sclDocument = document.implementation.createDocument("", "", null);
       sclDocument.getRootNode().appendChild(sclElement.cloneNode(true));
 
-      document
-        .querySelector('open-scd')!
-        .dispatchEvent(newOpenDocEvent(sclDocument, sclName));
+      const openScd = getOpenScdElement();
+      openScd.dispatchEvent(newOpenDocEvent(sclDocument, sclName));
+    }).catch(() => {
+      const openScd = getOpenScdElement();
+      openScd.dispatchEvent(
+          newLogEvent({
+            kind: 'error',
+            title: get('compas.cim.mapError')}));
     });
     this.pluginFileUI.onchange = null;
   }
@@ -41,10 +47,10 @@ export default class OpenProjectPlugin extends LitElement {
   }
 
   render(): TemplateResult {
-    return html`<input @click=${(event: MouseEvent) =>
-      ((<HTMLInputElement>event.target).value = '')} @change=${
-      this.convertCimFile
-    } id="cim-mapping-input" accept=".xml" type="file" multiple></input>`;
+    return html`<input
+       @click=${(event: MouseEvent) => ((<HTMLInputElement>event.target).value = '')}
+       @change=${(event: MouseEvent) => getOpenScdElement().dispatchEvent(newPendingStateEvent(this.convertCimFile(event)))}
+       id="cim-mapping-input" accept=".xml" type="file" multiple></input>`;
   }
 
   static styles = css`

src/translations/de.ts

@@ -398,6 +398,9 @@ export const de: Translations = {
       updateError: '???',
       updateSuccess: '???',
     },
+    cim:  {
+      mapError: '???',
+    },
     versions: {
       title: '???',
       noVersions: "???",