From 27f8e7a07d098c1ca9b79eea7ecc6216dda8dc44 Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
<72516762+SergioCasCeb@users.noreply.github.com>
Date: Tue, 5 Dec 2023 22:03:44 +0100
Subject: [PATCH] Modified the default state of the console
Now instead of hiding all visualization views, the console now defaults to the validation view on its default state.
---
packages/web-new/src/scripts/console.js | 8 +++--
packages/web-new/src/scripts/editor.js | 16 +++++-----
packages/web-new/src/scripts/util.js | 36 ++++++++++++----------
packages/web-new/src/scripts/validation.js | 2 +-
packages/web-new/src/template.html | 13 ++++----
5 files changed, 41 insertions(+), 34 deletions(-)
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
index 7e7259a97..a26d40fed 100644
--- a/packages/web-new/src/scripts/console.js
+++ b/packages/web-new/src/scripts/console.js
@@ -24,9 +24,9 @@ import { asyncApiTab, asyncApiJsonBtn, asyncApiYamlBtn, asyncApiView } from './a
import { AASView } from './aas'
import { defaultsView, defaultsJsonBtn, defaultsYamlBtn, defaultsAddBtn } from './defaults'
import { visualize } from './visualize'
-import { validationView } from './validation'
+import { validationView, validationTab } from './validation'
import { convertTDYamlToJson, detectProtocolSchemes } from '../../../core/dist/web-bundle.min.js'
-import { generateOAP, generateAAP, addDefaultsUtil, validate, generateAAS } from './util'
+import { generateOAP, generateAAP, addDefaultsUtil, validate, generateAAS, resetValidationStatus } from './util'
import { editorList, getEditorData } from './editor'
/******************************************************************/
@@ -50,6 +50,10 @@ export function clearConsole() {
option.checked = false
})
+ //reset to the default validation view
+ validationView.classList.remove("hidden")
+ validationTab.checked = true
+ resetValidationStatus()
clearVisualizationEditors()
}
diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js
index a19be3e40..425d1f393 100644
--- a/packages/web-new/src/scripts/editor.js
+++ b/packages/web-new/src/scripts/editor.js
@@ -16,8 +16,8 @@
/**
* @file The `editor.js` contains the main functionality
* for the generated monaco editors and the surrounding elements
- * such as the tab functionality. It utilizes mutiple other files and dependncies
- * such as the monaco-editor dependencie, the monochrome-theme file to add the custom
+ * such as the tab functionality. It utilizes multiple other files and dependencies
+ * such as the monaco-editor dependency, the monochrome-theme file to add the custom
* theme, some util functions, the td and tm schemas from the core @thing-description-playground
* as well as the "Validators" and the "JsonSpellChecker" from the json-spell-checker dependency
*/
@@ -37,7 +37,7 @@ import { clearConsole } from './console'
/* Editor and tabs */
/***********************************************************/
-//Decalre all necessary item from the DOM
+//Declare all necessary item from the DOM
const addTab = document.querySelector(".ide__tabs__add")
const tabsLeftContainer = document.querySelector(".ide__tabs__left")
const ideContainer = document.querySelector(".ide__container")
@@ -57,7 +57,7 @@ validationTab.checked = true
validationView.classList.remove("hidden")
/**
- * Funtion which creates a tab for the respective editor
+ * Function which creates a tab for the respective editor
* and adds all other tab component such as the close button
* @param {Number} tabNumber - the "id" number for the tab
* @param {String} exampleName - the initial/default name shown in the tab
@@ -248,7 +248,7 @@ export function createIde(ideNumber, exampleValue) {
}
/**
- * Async funtion to initiate the editors
+ * Async function to initiate the editors
* @param {Number} ideNumber
* @param {Object} defaultValue
* @param {String} editorLanguage
@@ -268,7 +268,7 @@ async function initEditor(ideNumber, editorValue, editorLanguage) {
setFontSize(editorInstance)
})
- //Bind the reset button form the settings to the editor and assign the specied font size
+ //Bind the reset button form the settings to the editor and assign the specified font size
editorForm.addEventListener("reset", () => {
setFontSize(editorInstance)
})
@@ -410,7 +410,7 @@ tabsLeftContainer.addEventListener("click", (e) => {
})
//if the target element is the tab itself add the active class
- //else if the target element is a child of the element add the active calss to the parent element
+ //else if the target element is a child of the element add the active class to the parent element
if (selectedElement.id == "tab") {
selectedElement.classList.add("active")
}
@@ -444,7 +444,7 @@ tabsLeftContainer.addEventListener("click", (e) => {
})
/**
- * Find if active editor is json or yaml and change the json/yaml btns repectively
+ * Find if active editor is json or yaml and change the json/yaml btns respectively
*/
function findFileType() {
editorList.forEach(editor => {
diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js
index 2db6cd790..7e9b72531 100644
--- a/packages/web-new/src/scripts/util.js
+++ b/packages/web-new/src/scripts/util.js
@@ -25,7 +25,7 @@ import { convertTDJsonToYaml, convertTDYamlToJson, tdValidator, tmValidator, com
import tdToOpenAPI from '../../../td_to_openAPI/dist/web-bundle.min.js'
import tdToAsyncAPI from '../../../td_to_asyncapi/dist/web-bundle.min.js'
import { addDefaults, removeDefaults } from '../../../defaults/dist/web-bundle.min.js'
-import {AssetInterfaceDescriptionUtil} from '@node-wot/td-tools/dist/util/asset-interface-description.js'
+import { AssetInterfaceDescriptionUtil } from '@node-wot/td-tools/dist/util/asset-interface-description.js'
import { validateJsonLdBtn, tmConformanceBtn, sectionHeaders } from './validation'
@@ -165,7 +165,7 @@ export function generateAAP(fileType, editorInstance) {
* @param { String } fileType - JSON/YAML options
* @param { Monaco Object } editorInstance - Monaco editor object
*/
-export function generateAAS(fileType, editorInstance){
+export function generateAAS(fileType, editorInstance) {
const assetInterfaceDescriptionUtil = new AssetInterfaceDescriptionUtil()
const tdToConvert = fileType === "json"
@@ -175,7 +175,7 @@ export function generateAAS(fileType, editorInstance){
const AASInstance = assetInterfaceDescriptionUtil.transformTD2SM(tdToConvert)
try {
const content = JSON.stringify(JSON.parse(AASInstance), undefined, 4)
-
+
editor.setModelLanguage(window.AASEditor.getModel(), 'json')
window.AASEditor.getModel().setValue(content)
} catch (err) {
@@ -303,17 +303,27 @@ export function validate(thingType, editorContent) {
/**
* Resets the status of the validation headers, as well as the error message list
*/
-function resetValidationStatus() {
+export function resetValidationStatus() {
while (errorMessages.length > 0) {
errorMessages.pop()
}
+
sectionHeaders.forEach(header => {
const headerIcon = header.children[0]
if (!headerIcon.classList.contains("fa-circle")) {
- headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark", "fa-circle")
+ headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark")
headerIcon.classList.add("fa-circle")
}
})
+
+ document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => {
+ category.open = false
+ category.classList.add("disabled")
+ const categoryContainer = category.querySelector("ul.section-content")
+ while (categoryContainer.children.length > 0) {
+ categoryContainer.children[0].remove()
+ }
+ })
}
/**
@@ -324,7 +334,7 @@ function log(message) {
errorMessages.push(message)
}
-//TODO: This function should only be used for the moment being as it should be changed or adpated when the corresponding changes to the Validator have been finalized
+//TODO: This function should only be used for the moment being as it should be changed or adapted when the corresponding changes to the Validator have been finalized
/**
* Populates the error messages on the categories where the validation has failed or has a warning
* @param { Array } messagesList - Array of error messages
@@ -333,10 +343,7 @@ function populateCategory(messagesList) {
// console.log(messagesList);
document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => {
const categoryContainer = category.querySelector("ul.section-content")
- categoryContainer.classList.add("empty")
- while (categoryContainer.children.length > 0) {
- categoryContainer.children[0].remove()
- }
+ category.classList.remove("disabled")
if (category.children[0].children[0].classList.contains("fa-circle-xmark") || category.children[0].children[0].classList.contains("fa-circle-exclamation")) {
const noticePrompt = document.createElement("p")
noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*"
@@ -347,17 +354,14 @@ function populateCategory(messagesList) {
listElement.textContent = message
categoryContainer.append(listElement)
})
- categoryContainer.classList.remove("empty")
- } else if (category.children[0].children[0].classList.contains("fa-circle-check")){
+ } else if (category.children[0].children[0].classList.contains("fa-circle-check")) {
const successMessage = document.createElement("li")
successMessage.textContent = "Validated Successfully"
categoryContainer.append(successMessage)
- categoryContainer.classList.remove("empty")
- }else{
+ } else {
const nullMessage = document.createElement("li")
nullMessage.textContent = "A previous validation has failed or it is only available for Thing Descriptions"
categoryContainer.append(nullMessage)
- categoryContainer.classList.remove("empty")
}
})
}
@@ -435,7 +439,7 @@ const COMMA = ","
/**
* Looks for specific characters on the model to figure out the path of the position/search text
- * @param {ITextModel} textModel The text model of Monaco Edtior
+ * @param {ITextModel} textModel The text model of Monaco Editor
* @param {IPosition} position The position on Monaco editor which consists of column and line number
* @returns A string that is the path of the searched text. Search is done with the text's position on the editor
*/
diff --git a/packages/web-new/src/scripts/validation.js b/packages/web-new/src/scripts/validation.js
index 2e20f5adb..bb43f0c41 100644
--- a/packages/web-new/src/scripts/validation.js
+++ b/packages/web-new/src/scripts/validation.js
@@ -15,7 +15,7 @@
/**
* @file The `validation.js` contains the related html elements for the validation view, as
- * well as the behaviour for the validation button on the main navigation menu
+ * well as the behavior for the validation button on the main navigation menu
*/
export const validationView = document.querySelector("#validation-view")
diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html
index fb12a73ea..73dd06156 100644
--- a/packages/web-new/src/template.html
+++ b/packages/web-new/src/template.html
@@ -254,7 +254,7 @@ Thing Description Playground - BETA Version
JSON Validation
-
+
@@ -263,8 +263,7 @@ Thing Description Playground - BETA Version
JSON Schema Validation
-
+
@@ -273,7 +272,7 @@ Thing Description Playground - BETA Version
(With Defaults) JSON Schema Validation
-
+
@@ -282,7 +281,7 @@ Thing Description Playground - BETA Version
JSON-LD Validation
-
+
@@ -291,7 +290,7 @@ Thing Description Playground - BETA Version
Additional Checks
-
+