Skip to content

Commit

Permalink
New AAS/AID visualization view
Browse files Browse the repository at this point in the history
New conversion option to Asset Administration Shell/Asset Interface Description standard
  • Loading branch information
SergioCasCeb committed Oct 8, 2023
1 parent d585042 commit 32d9665
Show file tree
Hide file tree
Showing 10 changed files with 979 additions and 720 deletions.
69 changes: 58 additions & 11 deletions packages/web-new/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/web-new/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -51,4 +52,4 @@
"vega": "^5.22.1",
"vega-embed": "^6.21.0"
}
}
}
91 changes: 91 additions & 0 deletions packages/web-new/src/scripts/aas.js
Original file line number Diff line number Diff line change
@@ -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
)
})
45 changes: 29 additions & 16 deletions packages/web-new/src/scripts/console.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

/******************************************************************/
Expand Down Expand Up @@ -64,6 +65,7 @@ function clearVisualizationEditors() {
window.openApiEditor.getModel().setValue('')
window.asyncApiEditor.getModel().setValue('')
window.defaultsEditor.getModel().setValue('')
window.AASEditor.getModel().setValue('')
}


Expand All @@ -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;

Expand Down
1 change: 1 addition & 0 deletions packages/web-new/src/scripts/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import './examples-menu'
import './console'
import './open-api'
import './async-api'
import './aas'
import './defaults'
import './visualize'
import './validation'
Expand Down
Loading

0 comments on commit 32d9665

Please sign in to comment.