Merge branch 'master' into console-tab-interaction-sergio

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

@@ -24,10 +24,11 @@ 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'
+import { textIcon } from './main.js'
 
 /******************************************************************/
 /*                    Console functionality                       */
@@ -36,16 +37,40 @@ import { editorList, getEditorData } from './editor'
 //Main console elements
 const errorContainer = document.querySelector(".console__content #console-error")
 const errorTxt = document.querySelector(".console-error__txt")
-const eraseConsole = document.querySelector(".console__tabs .trash")
+export const minMaxBtn = document.querySelector(".min-max")
 export const visualizationOptions = document.querySelectorAll(".visualization__option")
 export const visualizationContainers = document.querySelectorAll(".console-view")
+const consoleElement = document.querySelector(".console")
+const mainContentElement = document.querySelector(".main-content")
 
-eraseConsole.addEventListener("click", () => {
-    clearConsole()
+minMaxBtn.addEventListener("click", () => {
+
+    if (minMaxBtn.children[0].classList.contains("fa-down-left-and-up-right-to-center")) {
+        mainContentElement.style.flex = "1 0"
+        consoleElement.style.flex = `0 40px`
+        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
+        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+
+        textIcon.forEach(text => {
+            text.classList.remove("hiddenV")
+        })
+    } else {
+        textIcon.forEach(text => {
+            text.classList.add("hiddenV")
+        })
+
+        setTimeout(() => {
+            mainContentElement.style.flex = "0 200px"
+            consoleElement.style.flex = `1 0`
+            minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
+            minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+        }, 50);
+
+    }
 })
 
 /**
- * Unchecks all visualizatin btns and hiddes all visualization containers
+ * Unchecks all visualization btns and hides all visualization containers
  */
 export function clearConsole() {
     visualizationContainers.forEach(container => {
@@ -55,11 +80,15 @@ export function clearConsole() {
         option.checked = false
     })
 
+    //reset to the default validation view
+    validationView.classList.remove("hidden")
+    validationTab.checked = true
+    resetValidationStatus()
     clearVisualizationEditors()
 }
 
 /**
- * Clear the value of all the viisualization monaco editor
+ * Clear the value of all the monaco editors
  */
 function clearVisualizationEditors() {
     window.openApiEditor.getModel().setValue('')

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/examples-menu.js

@@ -18,7 +18,7 @@
  * for the examples menu, such as displaying all the TD and TM examples,
  * as well as filtering them by categories, a search function to find
  * specific examples and a use a template example to directly added to an editor where it can be utilized and modified.
- * In the future the option to see short snipets of the most important part of the example, might also be implemented.
+ * In the future the option to see short snippets of the most important part of the example, might also be implemented.
  */
 
 import { createIde, ideCount, tabsLeft } from "./editor"
@@ -262,6 +262,7 @@ async function getAllExamples(categoryId, thingType) {
         //create example title
         const exampleName = document.createElement('div')
         exampleName.classList.add("example__header--name")
+        exampleName.setAttribute("title", "Expand")
         const exampleNameIcon = document.createElement('div')
         exampleNameIcon.classList.add("example-icon")
 
@@ -287,19 +288,27 @@ async function getAllExamples(categoryId, thingType) {
         // Append the icon container to the name container
         exampleName.appendChild(exampleNameIcon)
 
-
+        //Create, populate and append the example title
         const exampleNameTitle = document.createElement('p')
         exampleNameTitle.innerText = example[1]["title"]
         exampleName.appendChild(exampleNameTitle)
+
+        // //Create, populate and append the example title toggle arrow
+        const exampleNameArrow = document.createElement('i')
+        exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow")
+        exampleName.appendChild(exampleNameArrow)
+
+        //Append the whole name component to the header component
         exampleHeader.appendChild(exampleName)
 
         //Create the example quick access button
-        const quickButton = document.createElement('button')
-        quickButton.classList.add("example__header--quick")
+        const quickBtn = document.createElement('button')
+        quickBtn.classList.add("example__header--quick")
+        quickBtn.setAttribute("title", "Use")
         const quickButtonIcon = document.createElement('i')
         quickButtonIcon.classList.add("fa-solid", "fa-file-import")
-        quickButton.appendChild(quickButtonIcon)
-        exampleHeader.appendChild(quickButton)
+        quickBtn.appendChild(quickButtonIcon)
+        exampleHeader.appendChild(quickBtn)
 
 
         //add event listener to show example information and interaction btns
@@ -308,7 +317,7 @@ async function getAllExamples(categoryId, thingType) {
         })
 
         //Importing example to the monaco editor with the quick buttons
-        quickButton.addEventListener('click', () => {
+        quickBtn.addEventListener('click', () => {
             getTemplateData(example[1]["path"])
             closeCards()
             tabsLeft.forEach(tab => {
@@ -369,7 +378,7 @@ async function getAllExamples(categoryId, thingType) {
 
 
 /**
- * Gets the example data to pupulate the monaco editor and allow the user to use it as a template
+ * Gets the example data to populate the monaco editor and allow the user to use it as a template
  */
 async function getTemplateData(path) {
     const res = await fetch(path)
@@ -380,7 +389,7 @@ async function getTemplateData(path) {
 
 /**
  * Listener when search input is used in the examples menu
- * Gets all the examples that match the inputed text to the title and
+ * Gets all the examples that match the inputted text to the title and
  * description of the examples, clones them and adds them to the
  * search result category
  * @param {event} e - submit event
@@ -405,15 +414,15 @@ filterForm.addEventListener("submit", (e) => {
         categories.forEach(category => {
             const examples = [...category.children[2].children]
             examples.forEach(example => {
-                //If value of the search input mataches the title or description
+                //If value of the search input matches the title or description
                 //clone it, append it and add the respective event listeners
                 if ((example.firstChild.children[0].children[1].innerText.toLowerCase()).includes(searchInput.value.toLowerCase()) || (example.children[1].children[0].innerText.toLowerCase()).includes(searchInput.value.toLowerCase())) {
                     let clonedElement = example.cloneNode(true)
                     //Open the card when clicking on the name
                     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()

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

@@ -26,15 +26,14 @@ import './json-yaml'
 import './settings-menu'
 import './save-menu'
 import './examples-menu'
-import './console'
+import {minMaxBtn} from './console'
 import './open-api'
 import './async-api'
 import './aas'
 import './defaults'
 import './visualize'
 import './validation'
 
-
 /***********************************************************/
 /*                          Loader                         */
 /***********************************************************/
@@ -50,7 +49,7 @@ let stateCheck = setInterval(() => {
 /***********************************************************/
 /*                Resizing functionality                   */
 /***********************************************************/
-const textIcon = document.querySelectorAll(".text-icon")
+export const textIcon = document.querySelectorAll(".text-icon")
 const resizerY = document.querySelector(".horizontal-divider")
 const resizerX = document.querySelector(".vertical-divider")
 
@@ -165,7 +164,16 @@ function onmousemoveY(e) {
       const h = Math.round(parseInt(getComputedStyle(b).height) - deltaY)
       b.style.flex = `0 ${h < 50 ? 40 : h}px`
       t.style.flex = "1 0"
-      if (Math.round(parseInt(getComputedStyle(t).height) + deltaY) > 290) {
+
+      if(h > 39){
+        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
+        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+      }else{
+        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
+        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+      }
+
+      if (h > 290) {
         textIcon.forEach(text => {
           text.classList.remove("hiddenV")
         })
@@ -176,6 +184,16 @@ function onmousemoveY(e) {
       const h = Math.round(parseInt(getComputedStyle(t).height) + deltaY)
       t.style.flex = `0 ${h < 210 ? 200 : h}px`
       b.style.flex = "1 0"
+
+      if(h < 713){
+        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
+        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+      }else{
+        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
+        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+      }
+
+
       if (h < 290) {
         textIcon.forEach(text => {
           text.classList.add("hiddenV")