diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css index 3511b5d..6840cb2 100644 --- a/web/assets/css/styles.css +++ b/web/assets/css/styles.css @@ -394,7 +394,10 @@ a { background-color: #25282c; border-radius: 8px; cursor: pointer; - height: 54px; +} + +.editor__output-result .editor__output-result-accordion[data-open="false"] { + height: 24px; } .editor__output-result .editor__output-result-accordion[data-open="true"] { @@ -411,6 +414,7 @@ a { display: flex; align-items: center; justify-content: space-between; + position: relative; } .editor__output-result-accordion .result-arrow { @@ -418,7 +422,7 @@ a { } .editor__output-result-accordion .result-accordion-expansible-content { - transition: max-height 400ms, visibility 400ms; + transition: max-height 400ms, visibility 50ms; } .editor__output-result-accordion[data-open="false"] diff --git a/web/assets/js/components/accordions/result.js b/web/assets/js/components/accordions/result.js index 57a453c..463e1f4 100644 --- a/web/assets/js/components/accordions/result.js +++ b/web/assets/js/components/accordions/result.js @@ -16,22 +16,54 @@ const outputResultEl = document.getElementById("editor__output-result"); -const resultAccordionEl = document.querySelectorAll( - ".editor__output-result-accordion" -); +function createAccordionItemsByResults(results, name) { + results.forEach((result, i) => { + const listItem = document.createElement("li"); + listItem.className = "editor__output-result-accordion"; + listItem.setAttribute("data-open", "false"); + listItem.onclick = (e) => { + const isAccordionOpen = listItem.getAttribute("data-open") === "true"; + if (isAccordionOpen) listItem.setAttribute("data-open", "false"); + else listItem.setAttribute("data-open", "true"); + }; -resultAccordionEl.forEach((accordion) => { - accordion.addEventListener("click", () => { - const isAccordionOpen = accordion.getAttribute("data-open") === "true"; - if (isAccordionOpen) accordion.setAttribute("data-open", "false"); - else accordion.setAttribute("data-open", "true"); - }); -}); + const accordionContent = document.createElement("div"); + accordionContent.className = "result-accordion-content"; + accordionContent.innerHTML = `
+ +
+ ${ + result.isError + ? `` + : "" + } +
+ + Validation compilation failed. + +
+
+ + ${name}[${i}] +
`; + const costSpan = document.createElement("span"); + costSpan.innerHTML = `Cost: ${result.cost}`; + accordionContent.appendChild(costSpan); + + const expansibleContent = document.createElement("div"); + expansibleContent.className = "result-accordion-expansible-content"; + expansibleContent.innerHTML = `${result.result}`; + + listItem.appendChild(accordionContent); + listItem.appendChild(expansibleContent); -render(); + outputResultEl.appendChild(listItem); + }); +} -function render() { - const savedMode = localStorage.getItem(localStorageModeKey) ?? "cel"; - if (savedMode === "VAP") outputResultEl.style.display = "flex"; - else outputResultEl.style.display = "none"; +export function renderResultAccordions(results, name) { + outputResultEl.style.display = "flex"; + createAccordionItemsByResults(results, name); } diff --git a/web/assets/js/main.js b/web/assets/js/main.js index e7b2322..12f2e42 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -16,6 +16,7 @@ import { setCost } from "./utils/render-functions.js"; import { AceEditor } from "./editor.js"; +import { renderResultAccordions } from "./components/accordions/result.js"; // Add the following polyfill for Microsoft Edge 17/18 support: // @@ -40,19 +41,30 @@ function run() { output.value = "Evaluating..."; setCost(""); - const result = eval(expression, data); + // const result = eval(expression, data); + const result = { + output: { + validations: [ + { cost: 8, result: true, isError: false }, + { cost: 18, result: false, isError: false }, + { cost: 9, result: null, isError: true }, + ], + }, + isError: false, + }; const { output: resultOutput, isError } = result; - if (isError) { - output.value = resultOutput; - output.style.color = "red"; - } else { - const { result, cost } = JSON.parse(resultOutput); - output.value = JSON.stringify(result); - output.style.color = "white"; - setCost(cost); - } + // if (isError) { + // output.value = resultOutput; + // output.style.color = "red"; + // } else { + const [firstOutputKey] = Object.keys(resultOutput); + renderResultAccordions(result.output[firstOutputKey], firstOutputKey); + // output.value = JSON.stringify(result); + // output.style.color = "white"; + // setCost(cost); + // } } window.addEventListener("load", () => { diff --git a/web/index.html b/web/index.html index 7f4ae4a..47f4cce 100644 --- a/web/index.html +++ b/web/index.html @@ -257,122 +257,10 @@ placeholder="Loading Wasm…" disabled > - +