Merge pull request #135 from com-pas/gui-cim-conversion-alliander-api

Import from API plugin

Author: Rob Tjalma

.gitignore

@@ -19,3 +19,6 @@
 /_site/
 /build/
 /out-tsc/
+
+/public/cim/
+!/public/cim/README.md

public/cim/README.md

@@ -0,0 +1,8 @@
+Directory containing fixed files for the 'Import from API' plugin, namely:
+
+- cim-eq-hoorn-v3.xml
+- cim-eq-makkum.xml
+- cim-eq-winselingseweg-voorbeeld.xml
+- EQ-entsoe-voorbeeld.xml
+
+Without these files, the 'Import from API' doesn't work and the hardcoded files cannot be opened.

public/js/plugins.js

@@ -82,6 +82,15 @@ export const officialPlugins = [
     requireDoc: false,
     position: 'top'
   },
+  {
+    name: 'Import from API',
+    src: '/src/menu/CompasImportFromApi.js',
+    icon: 'cloud_download',
+    default: false,
+    kind: 'menu',
+    requireDoc: false,
+    position: 'top'
+  },
   {
     name: 'Save project',
     src: '/src/menu/CompasSave.js',

src/compas/CompasImportFromApi.ts

@@ -0,0 +1,66 @@
+import {customElement, html, LitElement, TemplateResult} from "lit-element";
+
+import '@material/mwc-button';
+
+import {newOpenDocEvent, newPendingStateEvent, newWizardEvent} from "../foundation.js";
+
+import {createLogEvent, handleError, handleResponse, parseXml} from "../compas-services/foundation.js";
+import {dispatchEventOnOpenScd} from "./foundation.js";
+
+import '../WizardDivider.js';
+import './CompasSclTypeList.js';
+import './CompasScl.js';
+import { CompasCimMappingService } from "../compas-services/CompasCimMappingService.js";
+
+@customElement('compas-import-from-api')
+export default class CompasImportFromApiElement extends LitElement {
+  private async processCimFile(name: string) {
+    const doc = await fetch('/public/cim/' + name + '.xml')
+    .catch(handleError)
+    .then(handleResponse)
+    .then(parseXml);
+    
+    await CompasCimMappingService().map({cimData: [{name: name + '.xml', doc: doc}]}).then(response => {
+      const sclName = name + ".ssd";
+
+      const sclElement = response.querySelectorAll("SCL").item(0);
+      const sclDocument = document.implementation.createDocument("", "", null);
+      sclDocument.getRootNode().appendChild(sclElement.cloneNode(true));
+
+      dispatchEventOnOpenScd(newOpenDocEvent(sclDocument, sclName));
+    }).catch(createLogEvent);
+
+    dispatchEventOnOpenScd(newWizardEvent());
+  }
+
+  render(): TemplateResult {
+    return html `
+    <filtered-list>
+    <mwc-list-item
+      @click=${() => dispatchEventOnOpenScd(newPendingStateEvent(
+        this.processCimFile('cim-eq-hoorn-v3')
+      ))}>
+      cim-eq-hoorn-v3
+    </mwc-list-item>
+    <mwc-list-item
+      @click=${() => dispatchEventOnOpenScd(newPendingStateEvent(
+        this.processCimFile('cim-eq-makkum')
+      ))}>
+      cim-eq-makkum
+    </mwc-list-item>
+    <mwc-list-item
+      @click=${() => dispatchEventOnOpenScd(newPendingStateEvent(
+        this.processCimFile('cim-eq-winselingseweg-voorbeeld')
+      ))}>
+      cim-eq-winselingseweg-voorbeeld
+    </mwc-list-item>
+    <mwc-list-item
+      @click=${() => dispatchEventOnOpenScd(newPendingStateEvent(
+        this.processCimFile('EQ-entsoe-voorbeeld')
+      ))}>
+      EQ-entsoe-voorbeeld
+    </mwc-list-item>
+  </filtered-list>
+    `
+  }
+}

src/compas/CompasSettings.ts

@@ -23,7 +23,7 @@ export function CompasSettings() {
         sclDataServiceUrl: this.getCompasSetting('sclDataServiceUrl'),
         sclValidatorServiceUrl: this.getCompasSetting('sclValidatorServiceUrl'),
         cimMappingServiceUrl: this.getCompasSetting('cimMappingServiceUrl'),
-        sclAutoAlignmentServiceUrl: this.getCompasSetting('sclAutoAlignmentServiceUrl'),
+        sclAutoAlignmentServiceUrl: this.getCompasSetting('sclAutoAlignmentServiceUrl')
       };
     },
 

src/menu/CompasImportFromApi.ts

@@ -0,0 +1,31 @@
+import { html, LitElement } from 'lit-element';
+import { get } from 'lit-translate';
+
+import '../filtered-list.js';
+import '../wizard-textfield.js';
+import {
+  newWizardEvent,
+  Wizard,
+} from '../foundation.js';
+
+import "../compas/CompasImportFromApi.js";
+
+export default class ImportFromApiPlugin extends LitElement {
+
+  private importFromApiWizard(): Wizard {
+    return [
+      {
+        title: get('compas.import.title'),
+        content: [
+          html`<compas-import-from-api></compas-import-from-api>`,
+        ],
+      },
+    ];
+  }
+
+  async run(): Promise<void> {
+    document
+      .querySelector('open-scd')
+      ?.dispatchEvent(newWizardEvent(this.importFromApiWizard()));
+  }
+}

src/translations/de.ts

@@ -578,6 +578,9 @@ export const de: Translations = {
       minor: '???',
       patch: '???',
     },
+    import: {
+      title: '???'
+    },
     open: {
       title: '???',
       localTitle: '???',
@@ -647,7 +650,7 @@ export const de: Translations = {
       sclDataServiceUrl: 'CoMPAS SCL Data Service URL',
       sclValidatorServiceUrl: 'CoMPAS SCL Validator Service URL',
       cimMappingServiceUrl: 'CoMPAS CIM Mapping Service URL',
-      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL',
+      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL'
     },
     session: {
       headingExpiring: '???',

src/translations/en.ts

@@ -573,6 +573,9 @@ export const en = {
       minor: 'Minor change',
       patch: 'Patch change',
     },
+    import: {
+      title: 'Import from API'
+    },
     open: {
       title: 'Open project',
       localTitle: 'Local',
@@ -642,7 +645,7 @@ export const en = {
       sclDataServiceUrl: 'CoMPAS SCL Data Service URL',
       sclValidatorServiceUrl: 'CoMPAS SCL Validator Service URL',
       cimMappingServiceUrl: 'CoMPAS CIM Mapping Service URL',
-      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL',
+      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL'
     },
     session: {
       headingExpiring: 'Your session is about to expire!',

test/integration/__snapshots__/open-scd.test.snap.js

@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["open-scd looks like its snapshot"] =
+snapshots["open-scd looks like its snapshot"] = 
 `<mwc-drawer
   class="mdc-theme--surface"
   hasheader=""
@@ -850,6 +850,21 @@ snapshots["open-scd looks like its snapshot"] =
       </mwc-icon>
       Project from CIM
     </mwc-check-list-item>
+    <mwc-check-list-item
+      aria-disabled="false"
+      class="official"
+      graphic="control"
+      hasmeta=""
+      left=""
+      mwc-list-item=""
+      tabindex="-1"
+      value="/src/menu/CompasImportFromApi.js"
+    >
+      <mwc-icon slot="meta">
+        cloud_download
+      </mwc-icon>
+      Import from API
+    </mwc-check-list-item>
     <mwc-check-list-item
       aria-disabled="false"
       class="official"

test/unit/compas/CompasImportFromApi.test.ts

@@ -0,0 +1,17 @@
+import {expect, fixtureSync, html} from '@open-wc/testing';
+import CompasImportFromApiElement from '../../../src/compas/CompasImportFromApi.js';
+
+import "../../../src/compas/CompasImportFromApi.js";
+
+describe('compas-import-from-api', () => {
+  let element: CompasImportFromApiElement;
+
+  beforeEach(async () => {
+    element = fixtureSync(html`<compas-import-from-api></compas-import-from-api>`);
+    await element;
+  });
+
+  it('looks like the latest snapshot', () => {
+    expect(element).shadowDom.to.equalSnapshot();
+  });
+});