Merge pull request #537 from SergioCasCeb/console-default-state-sergio

Modified the default state of the console

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/styles/_console.scss

@@ -72,7 +72,7 @@
                 &:nth-child(5)::before {
                     content: 'Defaults';
                 }
-                
+
                 // &:nth-child(5)::before{
                 //     content: 'Linting';
                 // }
@@ -170,6 +170,8 @@
                     margin-bottom: 1rem;
 
                     summary {
+                        user-select: none;
+
                         .show-icon {
                             transform: rotate(0);
                             transition: transform 250ms ease-in-out;
@@ -217,10 +219,6 @@
                         list-style-position: inside;
                         list-style-type: disc;
 
-                        &.empty {
-                            padding: 0 0 1rem 0;
-                        }
-
                         .notice-prompt {
                             color: var(--clr-neutral-300);
                             font-size: var(--fs-footer);
@@ -261,6 +259,10 @@
                     }
                 }
 
+                details.disabled {
+                    pointer-events: none;
+                }
+
             }
         }
 
@@ -302,7 +304,7 @@
                 overflow-x: hidden;
                 gap: 1rem;
 
-                .warning-txt{
+                .warning-txt {
                     font-size: var(--fs-p);
                     font-family: var(--ff-primary);
                     color: var(--clr-neutral-300);
@@ -354,7 +356,7 @@
                     }
                 }
 
-                .view-download{
+                .view-download {
                     width: 100%;
                     height: 100%;
                     min-height: 3.25rem;
@@ -394,7 +396,7 @@
                     svg {
                         text {
                             font-size: 1.2rem;
-                            font-family: var(--ff-secundary);
+                            font-family: var(--ff-secondary);
                             fill: var(--clr-neutral-900);
                         }
                     }

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

@@ -31,7 +31,7 @@ svg {
 
 .d3-tip {
     font-size: var(--fs-p);
-    font-family: var(--ff-secundary);
+    font-family: var(--ff-secondary);
     color: var(--clr-neutral-900);
     border: 1px solid var(--clr-neutral-300);
     border-radius: 5px;

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

@@ -24,7 +24,7 @@
 :root {
   /*Fonts styles*/
   --ff-primary: "Roboto", sans-serif;
-  --ff-secundary: "Open Sans", sans-serif;
+  --ff-secondary: "Open Sans", sans-serif;
   /*Font weights*/
   --fw-light: 300;
   --fw-regular: 400;
@@ -810,6 +810,11 @@ main .console {
 .console__content .validation-view .validation-container details {
   margin-bottom: 1rem;
 }
+.console__content .validation-view .validation-container details summary {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
 .console__content .validation-view .validation-container details summary .show-icon {
   transform: rotate(0);
   transition: transform 250ms ease-in-out;
@@ -847,9 +852,6 @@ main .console {
   list-style-position: inside;
   list-style-type: disc;
 }
-.console__content .validation-view .validation-container details .section-content.empty {
-  padding: 0 0 1rem 0;
-}
 .console__content .validation-view .validation-container details .section-content .notice-prompt {
   color: var(--clr-neutral-300);
   font-size: var(--fs-footer);
@@ -873,6 +875,9 @@ main .console {
 .console__content .validation-view .validation-container details[open] summary .show-icon {
   transform: rotate(-90deg);
 }
+.console__content .validation-view .validation-container details.disabled {
+  pointer-events: none;
+}
 .console__content .open-api-view,
 .console__content .async-api-view,
 .console__content .aas-view,
@@ -1193,7 +1198,7 @@ main .console {
 }
 .console__content .visualize-view .visualize-container .visualized svg text {
   font-size: 1.2rem;
-  font-family: var(--ff-secundary);
+  font-family: var(--ff-secondary);
   fill: var(--clr-neutral-900);
 }
 .console__content .visualize-view .visualize-inputs {
@@ -2386,7 +2391,7 @@ svg g .link {
 
 .d3-tip {
   font-size: var(--fs-p);
-  font-family: var(--ff-secundary);
+  font-family: var(--ff-secondary);
   color: var(--clr-neutral-900);
   border: 1px solid var(--clr-neutral-300);
   border-radius: 5px;

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

@@ -26,7 +26,7 @@
 :root {
     /*Fonts styles*/
     --ff-primary: 'Roboto', sans-serif;
-    --ff-secundary: 'Open Sans', sans-serif;
+    --ff-secondary: 'Open Sans', sans-serif;
 
     /*Font weights*/
     --fw-light: 300;