Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AAS error handling #514

Merged
merged 5 commits into from
Oct 23, 2023
Merged

AAS error handling #514

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6c8ae58
Adding error handling for AAS conversion
SergioCasCeb Oct 13, 2023
2224de1
Merge branch 'aas-error-handling' of https://github.com/SergioCasCeb/…
SergioCasCeb Oct 13, 2023
3fc9287
Minor fixes with the new close tab prompts
SergioCasCeb Oct 13, 2023
a3e60cf
Removed the "Save as" button
SergioCasCeb Oct 13, 2023
073b8d5
Removed the AAS AID protocol error msg
SergioCasCeb Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions packages/web-new/src/scripts/console.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

import { openApiTab, openApiJsonBtn, openApiYamlBtn, openApiView } from './open-api'
import { asyncApiTab, asyncApiJsonBtn, asyncApiYamlBtn, asyncApiView } from './async-api'
import { AASView } from './aas'
import { AASTab, AASView } from './aas'
import { defaultsView, defaultsJsonBtn, defaultsYamlBtn, defaultsAddBtn } from './defaults'
import { visualize } from './visualize'
import { validationView } from './validation'
Expand Down Expand Up @@ -117,8 +117,8 @@ visualizationOptions.forEach(option => {
break;

case "aas-tab":
AASView.classList.remove("hidden")
generateAAS(fileType, editorInstance)

enableAPIConversionWithProtocol(editorInstance)

break;

Expand Down Expand Up @@ -172,10 +172,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)

Expand All @@ -198,6 +196,15 @@ function enableAPIConversionWithProtocol(editorInstance) {
showConsoleError("Please insert a TD which uses MQTT!")
}
}

if (AASTab.checked === true) {
if (["mqtt", "mqtts", "http", "https", "coap", "modbus"].some(p => protocolSchemes.includes(p))) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this check there, we should not limit it to protocols we are aware of... makes it also difficult to maintain in the future.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea is to align them like other tabs (asyncapi, openapi). Ideally, all thr modules should have the same programming api to report back but it's not the case atm

generateAAS(editorInstance["_domElement"].dataset.modeId, editorInstance)
AASView.classList.remove("hidden")
} else {
showConsoleError("Please insert a TD which uses HTTP, MQTT, CoAP or Modbus!")
danielpeintner marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this should be changed since all protocols technically work. @SergioCasCeb could you remove the error and only display `Protocols other than HTTP, MQTT and Modbus are not officially supported by AID, do not use the resulting AID in production" on the bottom of the JSON button?

}
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/scripts/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = []
Expand Down
22 changes: 20 additions & 2 deletions packages/web-new/src/scripts/examples-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down
101 changes: 51 additions & 50 deletions packages/web-new/src/scripts/save-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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*/
Expand Down
6 changes: 2 additions & 4 deletions packages/web-new/src/scripts/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 2 additions & 0 deletions packages/web-new/src/styles/_save-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions packages/web-new/src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2230,6 +2230,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;
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/styles/styles.css.map
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 4 additions & 16 deletions packages/web-new/src/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -467,14 +463,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>
Expand Down Expand Up @@ -661,16 +649,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>
Expand Down
Loading