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

@@ -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()
 }
 

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 => {

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
  */

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")

packages/web-new/src/template.html

@@ -254,7 +254,7 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                     <p class="title">JSON Validation</p>
                                     <i class="show-icon fa-solid fa-caret-down"></i>
                                 </summary>
-                                <ul class="section-content empty"></ul>
+                                <ul class="section-content"></ul>
                             </details>
 
                             <details class="json-schema-validation-section" id="spot-schema">
@@ -263,8 +263,7 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                     <p class="title">JSON Schema Validation</p>
                                     <i class="show-icon fa-solid fa-caret-down"></i>
                                 </summary>
-                                <ul class="section-content empty">
-                                </ul>
+                                <ul class="section-content"></ul>
                             </details>
 
                             <details class="json-schema-defaults-section" id="spot-defaults">
@@ -273,7 +272,7 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                     <p class="title">(With Defaults) JSON Schema Validation</p>
                                     <i class="show-icon fa-solid fa-caret-down"></i>
                                 </summary>
-                                <ul class="section-content empty"></ul>
+                                <ul class="section-content"></ul>
                             </details>
 
                             <details class="jsonls-validation-section" id="spot-jsonld">
@@ -282,7 +281,7 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                     <p class="title">JSON-LD Validation</p>
                                     <i class="show-icon fa-solid fa-caret-down"></i>
                                 </summary>
-                                <ul class="section-content empty"></ul>
+                                <ul class="section-content"></ul>
                             </details>
 
                             <details class="additional-checks-section" id="spot-additional">
@@ -291,7 +290,7 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                     <p class="title">Additional Checks</p>
                                     <i class="show-icon fa-solid fa-caret-down"></i>
                                 </summary>
-                                <ul class="section-content empty"></ul>
+                                <ul class="section-content"></ul>
                                 <div class="section-additional">
                                     <details class="enumConst-section" id="enumConst-section">
                                         <summary class="section-header">
@@ -631,7 +630,7 @@ <h3>Search Results</h3>
                 </div>
 
                 <div class="save-menu-title">
-                    <p>Share this <span id="thing-type-text">TD</span> by creating a link or donwload it to your device!
+                    <p>Share this <span id="thing-type-text">TD</span> by creating a link or download it to your device!
                     </p>
                 </div>