Skip to content

Commit

Permalink
Merge branch 'master' into new-examples-feel-sergio
Browse files Browse the repository at this point in the history
  • Loading branch information
@egekorkan
egekorkan authored Dec 11, 2023
2 parents 1b023b0 + 1b83a3b commit 1ee98da
Show file tree
Hide file tree
Showing 12 changed files with 162 additions and 105 deletions.
43 changes: 36 additions & 7 deletions packages/web-new/src/scripts/console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 => {
Expand All @@ -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('')
Expand Down
16 changes: 8 additions & 8 deletions packages/web-new/src/scripts/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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")
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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)
})
Expand Down Expand Up @@ -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")
}
Expand Down Expand Up @@ -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 => {
Expand Down
28 changes: 23 additions & 5 deletions packages/web-new/src/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
/***********************************************************/
Expand All @@ -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")

Expand Down Expand Up @@ -163,9 +162,18 @@ function onmousemoveY(e) {
// DOWN
if (deltaY > 0) {
const h = Math.round(parseInt(getComputedStyle(b).height) - deltaY)
b.style.flex = `0 ${h < 55 ? 50 : h}px`
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")
})
Expand All @@ -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")
Expand Down
36 changes: 20 additions & 16 deletions packages/web-new/src/scripts/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'


Expand Down Expand Up @@ -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"
Expand All @@ -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) {
Expand Down Expand Up @@ -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()
}
})
}

/**
Expand All @@ -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
Expand All @@ -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*"
Expand All @@ -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")
}
})
}
Expand Down Expand Up @@ -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
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/scripts/validation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down
Loading

0 comments on commit 1ee98da

Please sign in to comment.