AAS error handling

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

@@ -66,7 +66,7 @@ initAASEditor()
 AASDownload.addEventListener("click", () => {
     const editorData = getEditorData(window.AASEditor)
     const contentType = `application/${editorData[0]};charset=utf-8;`
-    const visualizationName = editorData[2]["submodelElements"][0]["value"][0]["value"]
+    const visualizationName = editorData[2]["description"][0]["text"]
 
     offerFileDownload(
         `${visualizationName}-AAS.${editorData[0]}`,

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

@@ -117,8 +117,9 @@ visualizationOptions.forEach(option => {
                                 break;
 
                             case "aas-tab":
-                                AASView.classList.remove("hidden")
+
                                 generateAAS(fileType, editorInstance)
+                                AASView.classList.remove("hidden")
 
                                 break;
 
@@ -172,10 +173,8 @@ visualizationOptions.forEach(option => {
  * @param {object} editor - currently active monaco editor
  */
 function enableAPIConversionWithProtocol(editorInstance) {
-    let td = editorInstance.getValue()
-    if (editorInstance["_domElement"].dataset.modeId === "yaml") {
-        td = convertTDYamlToJson(td)
-    }
+
+    let td = editorInstance["_domElement"].dataset.modeId === "yaml" ? convertTDYamlToJson(editorInstance.getValue()) : editorInstance.getValue()
 
     const protocolSchemes = detectProtocolSchemes(td)
 

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

@@ -41,7 +41,7 @@ import { clearConsole } from './console'
 const addTab = document.querySelector(".ide__tabs__add")
 const tabsLeftContainer = document.querySelector(".ide__tabs__left")
 const ideContainer = document.querySelector(".ide__container")
-let tabsLeft = document.querySelectorAll(".ide__tabs__left li:not(:last-child)")
+export let tabsLeft = document.querySelectorAll(".ide__tabs__left li:not(:last-child)")
 
 //Editor list array where all the generated editor will be added and referenced from
 export let editorList = []

packages/web-new/src/scripts/examples-menu.js

@@ -21,7 +21,7 @@
  * In the future the option to see short snipets of the most important part of the example, might also be implemented.
  */
 
-import { createIde, ideCount } from "./editor"
+import { createIde, ideCount, tabsLeft } from "./editor"
 
 /***********************************************************/
 /*                      Examples menu                      */
@@ -311,6 +311,9 @@ async function getAllExamples(categoryId, thingType) {
         quickButton.addEventListener('click', () => {
             getTemplateData(example[1]["path"])
             closeCards()
+            tabsLeft.forEach(tab => {
+                tab.children[3].classList.add("hidden")
+            })
         })
 
         //create example content
@@ -352,6 +355,9 @@ async function getAllExamples(categoryId, thingType) {
         exampleBtnUse.addEventListener('click', () => {
             getTemplateData(example[1]["path"])
             closeCards()
+            tabsLeft.forEach(tab => {
+                tab.children[3].classList.add("hidden")
+            })
         })
 
         //Listener to generate an editor with the examples information
@@ -411,11 +417,17 @@ filterForm.addEventListener("submit", (e) => {
                     clonedElement.children[0].children[1].addEventListener('click', () => {
                         example.querySelector(".example__btn--use").click()
                         closeCards()
+                        tabsLeft.forEach(tab => {
+                            tab.children[3].classList.add("hidden")
+                        })
                     })
                     //Opening the example when clicking on the apply button
                     clonedElement.querySelector(".example__btn--use").addEventListener('click', () => {
                         example.querySelector(".example__btn--use").click()
                         closeCards()
+                        tabsLeft.forEach(tab => {
+                            tab.children[3].classList.add("hidden")
+                        })
                     })
                     //Closing the card when clicking on the cancel btn
                     clonedElement.querySelector(".example__btn--cancel").addEventListener('click', () => {
@@ -450,15 +462,21 @@ filterForm.addEventListener("submit", (e) => {
                     clonedElement.children[0].children[0].addEventListener('click', () => {
                         clonedElement.classList.toggle("open")
                     })
-                    //Opning the example when clicking on the quick access button
+                    //Opening the example when clicking on the quick access button
                     clonedElement.children[0].children[1].addEventListener('click', () => {
                         example.querySelector(".example__btn--use").click()
                         closeCards()
+                        tabsLeft.forEach(tab => {
+                            tab.children[3].classList.add("hidden")
+                        })
                     })
                     //Opening the example when clicking on the apply button
                     clonedElement.querySelector(".example__btn--use").addEventListener('click', () => {
                         example.querySelector(".example__btn--use").click()
                         closeCards()
+                        tabsLeft.forEach(tab => {
+                            tab.children[3].classList.add("hidden")
+                        })
                     })
                     //Closing the card when clicking on the cancel btn
                     clonedElement.querySelector(".example__btn--cancel").addEventListener('click', () => {

packages/web-new/src/scripts/save-menu.js

@@ -35,8 +35,8 @@ const thingTypeText = document.querySelector('#thing-type-text')
 const shareUrlBtn = document.querySelector("#share-url-btn")
 const openEditdorBtn = document.querySelector('#open-editdor-btn')
 const downloadBtn = document.querySelector("#download-btn")
-const saveAsBtn = document.querySelector("#save-as-btn")
-const saveAsWarning = document.querySelector(".save-warning")
+// const saveAsBtn = document.querySelector("#save-as-btn")
+// const saveAsWarning = document.querySelector(".save-warning")
 const saveMenuContainer = document.querySelector(".save-menu__container")
 let fileHandle;
 openUrlTab.disabled = true
@@ -161,9 +161,9 @@ downloadBtn.addEventListener("click", () => {
 })
 
 /* Save as btn functionality */
-saveAsBtn.addEventListener("click", () => {
-  saveAsFile()
-})
+// saveAsBtn.addEventListener("click", () => {
+//   saveAsFile()
+// })
 
 /**
  * Saves the td as a file in the file system
@@ -175,56 +175,57 @@ async function saveFileInSystem(content) {
   await stream.close()
 }
 
+//TODO: Uncomment when https is implemented
 /**
  * Opens the file system allows the user to input a file
  * name and save it as json , jsonld or yaml
  * This function only works for chrome, edge and oper as of now (26.05.2023)
  */
-async function saveAsFile() {
-  try {
-    let fileName = ""
-    let editorContent = ""
-    let acceptOpts = {}
-    let acceptDesc = ""
-    editorList.forEach(editorInstance => {
-      if (editorInstance["_domElement"].classList.contains("active")) {
-        const editorValues = getEditorData(editorInstance)
-        fileName = `${editorValues[2]["title"]}.${editorValues[0]}`
-        editorContent = editorInstance.getValue()
-        acceptOpts = editorValues[0] === "json" ? { "text/plain": [".jsonld", ".json"] } : { "text/plain": [".yaml"] }
-        acceptDesc = editorValues[0] === "json" ? "json or jsonld files only" : "yaml files only"
-      }
-    })
-
-
-    const opts = {
-      suggestedName: fileName,
-      types: [
-        {
-          description: acceptDesc,
-          accept: acceptOpts,
-        },
-      ],
-      excludeAcceptAllOption: true,
-    }
-
-    fileHandle = await window.showSaveFilePicker(opts)
-
-    saveFileInSystem(editorContent)
-
-  } catch (err) {
-    const errTxt = `${err}`
-    if (errTxt === "AbortError: The user aborted a request.") {
-      console.error(err)
-    }
-    else {
-      saveAsWarning.classList.add("active")
-      setTimeout(() => {
-        saveAsWarning.classList.remove("active")
-      }, 1500)
-    }
-  }
-}
+// async function saveAsFile() {
+//   try {
+//     let fileName = ""
+//     let editorContent = ""
+//     let acceptOpts = {}
+//     let acceptDesc = ""
+//     editorList.forEach(editorInstance => {
+//       if (editorInstance["_domElement"].classList.contains("active")) {
+//         const editorValues = getEditorData(editorInstance)
+//         fileName = `${editorValues[2]["title"]}.${editorValues[0]}`
+//         editorContent = editorInstance.getValue()
+//         acceptOpts = editorValues[0] === "json" ? { "text/plain": [".jsonld", ".json"] } : { "text/plain": [".yaml"] }
+//         acceptDesc = editorValues[0] === "json" ? "json or jsonld files only" : "yaml files only"
+//       }
+//     })
+
+
+//     const opts = {
+//       suggestedName: fileName,
+//       types: [
+//         {
+//           description: acceptDesc,
+//           accept: acceptOpts,
+//         },
+//       ],
+//       excludeAcceptAllOption: true,
+//     }
+
+//     fileHandle = await window.showSaveFilePicker(opts)
+
+//     saveFileInSystem(editorContent)
+
+//   } catch (err) {
+//     const errTxt = `${err}`
+//     if (errTxt === "AbortError: The user aborted a request.") {
+//       console.error(err)
+//     }
+//     else {
+//       saveAsWarning.classList.add("active")
+//       setTimeout(() => {
+//         saveAsWarning.classList.remove("active")
+//       }, 1500)
+//     }
+//   }
+// }
 
 //TODO IMPORT FROM FILES
 /** Experimental file manager fucntion*/

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

@@ -174,11 +174,9 @@ export function generateAAS(fileType, editorInstance){
 
     const AASInstance = assetInterfaceDescriptionUtil.transformTD2SM(tdToConvert)
     try {
-        const content = fileType === "json" 
-            ? JSON.stringify(JSON.parse(AASInstance), undefined, 4)
-            : convertTDJsonToYaml(AASInstance)
+        const content = JSON.stringify(JSON.parse(AASInstance), undefined, 4)
 
-        editor.setModelLanguage(window.AASEditor.getModel(), fileType)
+        editor.setModelLanguage(window.AASEditor.getModel(), 'json')
         window.AASEditor.getModel().setValue(content)
     } catch (err) {
         console.error(err);

packages/web-new/src/styles/_console.scss

@@ -335,6 +335,14 @@
                 overflow-x: hidden;
                 gap: 1rem;
 
+                .warning-txt{
+                    font-size: var(--fs-p);
+                    font-family: var(--ff-primary);
+                    color: var(--clr-neutral-300);
+                    line-height: var(--lh-p);
+
+                }
+
                 button {
                     appearance: none;
                     border: none;

packages/web-new/src/styles/_save-menu.scss

@@ -163,6 +163,8 @@
             justify-content: space-between;
             gap: 1rem;
             margin-bottom: .5rem;
+            padding-top: 3rem;
+            border-top: 2px solid var(--clr-primary-500);
 
             & > *{
                 flex: 1;

packages/web-new/src/styles/styles.css

@@ -48,7 +48,7 @@
   --lh-h1: 4rem;
   --lh-h2: 4rem;
   --lh-h3: 3.5rem;
-  --lh-sub-header: 3.25rem;
+  --lh-sub-header: 3rem;
   --lh-p: 1.8rem;
   --lh-footer: 1.25rem;
   --lh-i: 2rem;
@@ -982,6 +982,36 @@ main .console {
   overflow-x: hidden;
   gap: 1rem;
 }
+.console__content .open-api-view .open-api-inputs .warning-txt,
+.console__content .open-api-view .async-api-inputs .warning-txt,
+.console__content .open-api-view .aas-inputs .warning-txt,
+.console__content .open-api-view .defaults-inputs .warning-txt,
+.console__content .open-api-view .visualize-inputs .warning-txt,
+.console__content .async-api-view .open-api-inputs .warning-txt,
+.console__content .async-api-view .async-api-inputs .warning-txt,
+.console__content .async-api-view .aas-inputs .warning-txt,
+.console__content .async-api-view .defaults-inputs .warning-txt,
+.console__content .async-api-view .visualize-inputs .warning-txt,
+.console__content .aas-view .open-api-inputs .warning-txt,
+.console__content .aas-view .async-api-inputs .warning-txt,
+.console__content .aas-view .aas-inputs .warning-txt,
+.console__content .aas-view .defaults-inputs .warning-txt,
+.console__content .aas-view .visualize-inputs .warning-txt,
+.console__content .defaults-view .open-api-inputs .warning-txt,
+.console__content .defaults-view .async-api-inputs .warning-txt,
+.console__content .defaults-view .aas-inputs .warning-txt,
+.console__content .defaults-view .defaults-inputs .warning-txt,
+.console__content .defaults-view .visualize-inputs .warning-txt,
+.console__content .visualize-view .open-api-inputs .warning-txt,
+.console__content .visualize-view .async-api-inputs .warning-txt,
+.console__content .visualize-view .aas-inputs .warning-txt,
+.console__content .visualize-view .defaults-inputs .warning-txt,
+.console__content .visualize-view .visualize-inputs .warning-txt {
+  font-size: var(--fs-p);
+  font-family: var(--ff-primary);
+  color: var(--clr-neutral-300);
+  line-height: var(--lh-p);
+}
 .console__content .open-api-view .open-api-inputs button,
 .console__content .open-api-view .async-api-inputs button,
 .console__content .open-api-view .aas-inputs button,
@@ -2230,6 +2260,8 @@ main .console {
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 0.5rem;
+  padding-top: 3rem;
+  border-top: 2px solid var(--clr-primary-500);
 }
 .save-menu__container .save-td > * {
   flex: 1;

packages/web-new/src/styles/styles.scss

@@ -56,7 +56,7 @@
     --lh-h1: 4rem;
     --lh-h2: 4rem;
     --lh-h3: 3.5rem;
-    --lh-sub-header: 3.25rem;
+    --lh-sub-header: 3rem;
     --lh-p: 1.8rem;
     --lh-footer: 1.25rem;
     --lh-i: 2rem;

packages/web-new/src/template.html

@@ -241,10 +241,6 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                             title="Conversion to Asset Administration Shell/Asset Interface Description">
                         <input type="radio" name="visualization-option" id="defaults-tab"
                             class="visualization__option defaults-tab-btn" title="Add or remove default values">
-                        <!-- <input type="radio" name="visualization-option" id="linting-tab" 
-                            class="visualization__option linting-tab-btn">
-                        <input type="radio" name="visualization-option" id="canonicalize-tab"
-                            class="visualization__option canonicalize-tab-btn"> -->
                         <input type="radio" name="visualization-option" id="visualize-tab"
                             class="visualization__option visualize-tab-btn" title="Tree or Graph TD visualizations">
                     </div>
@@ -443,6 +439,7 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                     <div class="console-view aas-view hidden" id="aas-view">
                         <div class="aas-container" id="aas-container"></div>
                         <div class="aas-inputs">
+                            <p class="warning-txt">*Protocols other than HTTP, MQTT and Modbus are not officially supported by AID, do not use the resulting AID in production*</p>
                             <div class="view-download">
                                 <button id="aas-download"><i class="fa-solid fa-download"></i>Download</button>
                             </div>
@@ -467,14 +464,6 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                         </div>
                     </div>
 
-                    <!-- <div class="console-view hidden" id="linting-view">
-
-                     </div>
-
-                     <div class="console-view hidden" id="canonicalize-view">
-
-                     </div> -->
-
                     <div class="console-view visualize-view hidden" id="visualize-view">
                         <div class="visualize-container" id="visualize-container">
                             <div id="visualized" class="visualized"></div>
@@ -661,16 +650,16 @@ <h3>Search Results</h3>
                 <div class="save-td">
                     <button type="button" title="Download your current TD/TM" class="save-td__download"
                         id="download-btn"><i class="fa-solid fa-file-arrow-down"></i>Download</button>
-                    <button type="button"
+                    <!-- <button type="button"
                         title="Save your current TD/TM in your file system with your name and location of preference"
                         class="save-td__save-as" id="save-as-btn"><i class="fa-solid fa-folder-open"></i>Save
-                        as</button>
+                        as</button> -->
                 </div>
 
-                <div class="save-warning">
+                <!-- <div class="save-warning">
                     <p>*The <span>Save as</span> function is currently only available for <span>Chrome, Edge and
                             Opera</span>*</p>
-                </div>
+                </div> -->
 
             </div>
         </div>