New AAS/AID visualization view

packages/web-new/package.json

@@ -41,6 +41,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
+    "@node-wot/td-tools": "^0.8.8",
     "d3": "^3.5.17",
     "d3-tip": "^0.6.7",
     "express": "^4.18.2",
@@ -51,4 +52,4 @@
     "vega": "^5.22.1",
     "vega-embed": "^6.21.0"
   }
-}
+}

packages/web-new/src/scripts/aas.js

@@ -0,0 +1,91 @@
+/* 
+ *  Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *  
+ *  See the NOTICE file(s) distributed with this work for additional
+ *  information regarding copyright ownership.
+ *  
+ *  This program and the accompanying materials are made available under the
+ *  terms of the Eclipse Public License v. 2.0 which is available at
+ *  http://www.eclipse.org/legal/epl-2.0, or the W3C Software Notice and
+ *  Document License (2015-05-13) which is available at
+ *  https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document.
+ *  
+ *  SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
+ */
+
+/**
+ * @file The `aas.js` takes care of the main functionality for the 
+ * AAS/AID feature within the console. This include initializing the editor,
+ * connecting it to the local storage, as well as the main buttons within the AAS
+ * feature such as json, yaml conversion and the download option.
+ */
+
+import { editor } from 'monaco-editor'
+import { setFontSize, editorForm, fontSizeSlider } from './settings-menu'
+import { generateTD, offerFileDownload } from './util'
+import { getEditorData } from './editor'
+
+/******************************************************************/
+/*                    ASS functionality                       */
+/******************************************************************/
+
+//AAS Elements
+export const AASTab = document.querySelector(".aas-tab-btn")
+export const AASJsonBtn = document.querySelector("#aas-json")
+export const AASYamlBtn = document.querySelector("#aas-yaml")
+export const AASView = document.querySelector("#aas-view")
+const AASDownload = document.querySelector("#aas-download")
+
+/**
+ * Initialize the monaco editor for the AAS feature, sets it to an empty value,
+ * a default language of json and as a read only document. Also it connects the editor
+ * to the local storage to change the fontsize correspondingly
+ */
+async function initAASEditor() {
+    window.AASEditor = editor.create(document.getElementById('aas-container'), {
+        value: "",
+        language: "json",
+        automaticLayout: true,
+        readOnly: true,
+        formatOnPaste: true
+    })
+
+    document.onload = setFontSize(window.AASEditor)
+    fontSizeSlider.addEventListener("input", () => {
+        setFontSize(window.AASEditor)
+    })
+
+    //Bind the reset button form the settings to the editor and assign the specied font size
+    editorForm.addEventListener("reset", () => {
+        setFontSize(window.AASEditor)
+    })
+}
+
+initAASEditor()
+
+//Json conversion btn
+AASJsonBtn.addEventListener("click", () => {
+    generateTD("json", window.AASEditor)
+    AASJsonBtn.disabled = true
+    AASYamlBtn.disabled = false
+})
+
+//Yaml conversion btn
+AASYamlBtn.addEventListener("click", () => {
+    generateTD("yaml", window.AASEditor)
+    AASJsonBtn.disabled = false
+    AASYamlBtn.disabled = true
+})
+
+//Donwload btn
+AASDownload.addEventListener("click", () => {
+    const editorData = getEditorData(window.AASEditor)
+    const contentType = `application/${editorData[0]};charset=utf-8;`
+    const visualizationName = editorData[2]["submodels"][0]["submodelElements"][0]["value"][0]["value"]
+
+    offerFileDownload(
+        `${visualizationName}-AAS.${editorData[0]}`,
+        window.AASEditor.getModel().getValue(),
+        contentType
+    )
+})

packages/web-new/src/scripts/console.js

@@ -21,11 +21,12 @@
 
 import { openApiTab, openApiJsonBtn, openApiYamlBtn, openApiView } from './open-api'
 import { asyncApiTab, asyncApiJsonBtn, asyncApiYamlBtn, asyncApiView } from './async-api'
+import { AASJsonBtn, AASYamlBtn, AASView } from './aas'
 import { defaultsView, defaultsJsonBtn, defaultsYamlBtn, defaultsAddBtn } from './defaults'
 import { visualize } from './visualize'
 import { validationView } from './validation'
 import { convertTDYamlToJson, detectProtocolSchemes } from '../../../core/dist/web-bundle.min.js'
-import { generateOAP, generateAAP, addDefaultsUtil, validate } from './util'
+import { generateOAP, generateAAP, addDefaultsUtil, validate, generateAAS } from './util'
 import { editorList, getEditorData } from './editor'
 
 /******************************************************************/
@@ -64,6 +65,7 @@ function clearVisualizationEditors() {
     window.openApiEditor.getModel().setValue('')
     window.asyncApiEditor.getModel().setValue('')
     window.defaultsEditor.getModel().setValue('')
+    window.AASEditor.getModel().setValue('')
 }
 
 
@@ -77,58 +79,69 @@ visualizationOptions.forEach(option => {
 
         editorList.forEach(editorInstance => {
             if (editorInstance["_domElement"].classList.contains("active")) {
-                const editorValue = editorInstance["_domElement"].dataset.modeId === "yaml" ? convertTDYamlToJson(editorInstance.getValue()) : editorInstance.getValue()
+                const fileType = editorInstance["_domElement"].dataset.modeId
+                const editorValue = fileType === "yaml" ? convertTDYamlToJson(editorInstance.getValue()) : editorInstance.getValue()
+
                 try {
                     let td = JSON.parse(editorValue)
                     hideConsoleError()
 
-                    if ((td["@type"] === "tm:ThingModel" && option.id === "open-api-tab") || (td["@type"] === "tm:ThingModel" && option.id === "async-api-tab") || (td["@type"] === "tm:ThingModel" && option.id === "defaults-tab")) {
+                    if ((td["@type"] === "tm:ThingModel" && option.id === "open-api-tab") || (td["@type"] === "tm:ThingModel" && option.id === "async-api-tab") || (td["@type"] === "tm:ThingModel" && option.id === "defaults-tab") || (td["@type"] === "tm:ThingModel" && option.id === "aas-tab")) {
                         showConsoleError("This function is only allowed for Thing Descriptions!")
                     } else {
                         switch (option.id) {
                             case "open-api-tab":
-                                if (editorInstance["_domElement"].dataset.modeId === "yaml") {
+                                if (fileType === "yaml") {
                                     openApiJsonBtn.disabled = false
                                     openApiYamlBtn.disabled = true
                                 } else {
                                     openApiJsonBtn.disabled = true
                                     openApiYamlBtn.disabled = false
                                 }
 
-                                if (td["@type"] !== "tm:ThingModel") {
-                                    enableAPIConversionWithProtocol(editorInstance)
-                                }
+                                enableAPIConversionWithProtocol(editorInstance)
 
                                 break;
 
                             case "async-api-tab":
-                                if (editorInstance["_domElement"].dataset.modeId === "yaml") {
+                                if (fileType === "yaml") {
                                     asyncApiJsonBtn.disabled = false
                                     asyncApiYamlBtn.disabled = true
                                 } else {
                                     asyncApiJsonBtn.disabled = true
                                     asyncApiYamlBtn.disabled = false
                                 }
 
-                                if (td["@type"] !== "tm:ThingModel") {
-                                    enableAPIConversionWithProtocol(editorInstance)
+                                enableAPIConversionWithProtocol(editorInstance)
+
+                                break;
+
+                            case "aas-tab":
+                                if (fileType === "yaml") {
+                                    AASJsonBtn.disabled = false
+                                    AASYamlBtn.disabled = true
+                                } else {
+                                    AASJsonBtn.disabled = true
+                                    AASYamlBtn.disabled = false
                                 }
 
+                                AASView.classList.remove("hidden")
+                                generateAAS(fileType, editorInstance)
+
                                 break;
 
                             case "defaults-tab":
-                                if (editorInstance["_domElement"].dataset.modeId === "yaml") {
+                                if (fileType === "yaml") {
                                     defaultsJsonBtn.disabled = false
                                     defaultsYamlBtn.disabled = true
                                 } else {
                                     defaultsJsonBtn.disabled = true
                                     defaultsYamlBtn.disabled = false
                                 }
-                                if (td["@type"] !== "tm:ThingModel") {
-                                    addDefaultsUtil(editorInstance)
-                                    defaultsAddBtn.disabled = true
-                                    defaultsView.classList.remove("hidden")
-                                }
+
+                                addDefaultsUtil(editorInstance)
+                                defaultsAddBtn.disabled = true
+                                defaultsView.classList.remove("hidden")
 
                                 break;
 

packages/web-new/src/scripts/main.js

@@ -29,6 +29,7 @@ import './examples-menu'
 import './console'
 import './open-api'
 import './async-api'
+import './aas'
 import './defaults'
 import './visualize'
 import './validation'