Skip to content

Commit

Permalink
Merge branch 'master' into maximize-minimize-button-sergion
Browse files Browse the repository at this point in the history
  • Loading branch information
@egekorkan
egekorkan authored Dec 11, 2023
2 parents cd66c50 + 0525001 commit b68593a
Show file tree
Hide file tree
Showing 11 changed files with 120 additions and 104 deletions.
9 changes: 6 additions & 3 deletions packages/web-new/src/scripts/console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
import { textIcon } from './main.js'

Expand Down Expand Up @@ -67,7 +67,6 @@ minMaxBtn.addEventListener("click", () => {
}, 50);

}

})

/**
Expand All @@ -81,6 +80,10 @@ export function clearConsole() {
option.checked = false
})

//reset to the default validation view
validationView.classList.remove("hidden")
validationTab.checked = true
resetValidationStatus()
clearVisualizationEditors()
}

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
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
23 changes: 11 additions & 12 deletions packages/web-new/src/styles/_console.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
justify-content: space-between;
border-bottom: 2px solid var(--clr-primary-500);
padding: 0 1rem;
height: fit-content;

.console-controllers {
display: flex;
Expand Down Expand Up @@ -61,10 +60,8 @@
input[type=radio] {
appearance: none;
width: fit-content;
padding: .5rem 1rem;
padding: 1rem;
background-color: var(--clr-neutral-50);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: var(--clr-neutral-300);
font-family: var(--ff-primary);
font-size: var(--fs-p);
Expand Down Expand Up @@ -100,7 +97,7 @@
&:nth-child(5)::before {
content: 'Defaults';
}

// &:nth-child(5)::before{
// content: 'Linting';
// }
Expand Down Expand Up @@ -198,6 +195,8 @@
margin-bottom: 1rem;

summary {
user-select: none;

.show-icon {
transform: rotate(0);
transition: transform 250ms ease-in-out;
Expand Down Expand Up @@ -245,10 +244,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);
Expand Down Expand Up @@ -289,6 +284,10 @@
}
}

details.disabled {
pointer-events: none;
}

}
}

Expand Down Expand Up @@ -330,7 +329,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);
Expand Down Expand Up @@ -382,7 +381,7 @@
}
}

.view-download{
.view-download {
width: 100%;
height: 100%;
min-height: 3.25rem;
Expand Down Expand Up @@ -422,7 +421,7 @@
svg {
text {
font-size: 1.2rem;
font-family: var(--ff-secundary);
font-family: var(--ff-secondary);
fill: var(--clr-neutral-900);
}
}
Expand Down
32 changes: 18 additions & 14 deletions packages/web-new/src/styles/_examples-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,24 +322,26 @@
background-color: var(--clr-neutral-50);
border-radius: 5px;
width: fit-content;
padding: 2rem;
padding: .5rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;

&__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
gap: 1rem;

&--name {
width: 100%;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2rem;
gap: 1rem;
margin: 0 1rem;
cursor: pointer;
transition: all 250ms ease-in-out 250ms;
transition: all 250ms ease-in-out;

.example-icon{
width: 1.8rem;
Expand All @@ -361,7 +363,7 @@
background-color: transparent;
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;

i {
Expand All @@ -378,13 +380,19 @@
}
}

&:hover{
box-shadow: 0px 0px 10px 0px var(--clr-shadow);
}

&__content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
padding: 0 1rem;
transition: padding 250ms ease-in-out 250ms;
}

&__description {
Expand All @@ -406,7 +414,7 @@
gap: 2rem;
height: 0;
opacity: 0;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms, ;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms;

button {
width: 100%;
Expand Down Expand Up @@ -458,14 +466,10 @@

.example.open {

.example__name {
border-bottom: 2px solid var(--clr-primary-500);
padding-bottom: 2rem;
transition: all 250ms ease-in-out 0s;
}

.example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
transition: padding 250ms ease-in-out 0s;
}

.example__description {
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/styles/_jsonld-vis.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit b68593a

Please sign in to comment.