Skip to content

Commit

Permalink
mocks results to render accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaovictor3g
joaovictor3g committed Apr 16, 2024
1 parent 9f88b4f commit cb91424
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 143 deletions.
8 changes: 6 additions & 2 deletions web/assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Expand All @@ -411,14 +414,15 @@ a {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}

.editor__output-result-accordion .result-arrow {
transition: transform 300ms;
}

.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"]
Expand Down
62 changes: 47 additions & 15 deletions web/assets/js/components/accordions/result.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `<div
style="display: flex; align-items: center; gap: 0.5rem; position:relative"
>
<i class="ph ph-caret-right ph-bold result-arrow"></i>
<div class="tooltip__container">
${
result.isError
? `<i class="ph ph-x-circle ph-fill" style="color: #e01e5a; z-index:999999" id="tooltip__trigger"></i>`
: ""
}
<div id="tooltip__content" class="tooltip" style="right:0; top:0">
<span class="tooltip__content--text">
Validation compilation failed.
</span>
</div>
</div>
<span>${name}[${i}]</span>
</div>`;
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 = `<span>${result.result}</span>`;

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);
}
32 changes: 22 additions & 10 deletions web/assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
// <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/encoding.min.js"></script>
Expand All @@ -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", () => {
Expand Down
120 changes: 4 additions & 116 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,122 +257,10 @@
placeholder="Loading Wasm…"
disabled
></textarea>
<ul class="editor__output-result" id="editor__output-result">
<li class="editor__output-result-accordion" data-open="false">
<div class="result-accordion-content">
<div
style="display: flex; align-items: center; gap: 0.5rem"
>
<i class="ph ph-caret-right ph-bold result-arrow"></i>
<i
class="ph ph-x-circle ph-fill"
style="color: #e01e5a"
></i>
<span>validations[0]</span>
</div>

<span>Cost: 12</span>
</div>
<div class="result-accordion-expansible-content">
<span>true</span>
</div>
</li>
<li class="editor__output-result-accordion" data-open="false">
<div class="result-accordion-content">
<div
style="display: flex; align-items: center; gap: 0.5rem"
>
<i class="ph ph-caret-right ph-bold result-arrow"></i>
<i
class="ph ph-x-circle ph-fill"
style="color: #e01e5a"
></i>
<span>validations[0]</span>
</div>

<span>Cost: 12</span>
</div>
<div class="result-accordion-expansible-content">
<span>true</span>
</div>
</li>
<li class="editor__output-result-accordion" data-open="false">
<div class="result-accordion-content">
<div
style="display: flex; align-items: center; gap: 0.5rem"
>
<i class="ph ph-caret-right ph-bold result-arrow"></i>
<i
class="ph ph-x-circle ph-fill"
style="color: #e01e5a"
></i>
<span>validations[0]</span>
</div>

<span>Cost: 12</span>
</div>
<div class="result-accordion-expansible-content">
<span>true</span>
</div>
</li>
<li class="editor__output-result-accordion" data-open="false">
<div class="result-accordion-content">
<div
style="display: flex; align-items: center; gap: 0.5rem"
>
<i class="ph ph-caret-right ph-bold result-arrow"></i>
<i
class="ph ph-x-circle ph-fill"
style="color: #e01e5a"
></i>
<span>validations[0]</span>
</div>

<span>Cost: 12</span>
</div>
<div class="result-accordion-expansible-content">
<span>true</span>
</div>
</li>
<li class="editor__output-result-accordion" data-open="false">
<div class="result-accordion-content">
<div
style="display: flex; align-items: center; gap: 0.5rem"
>
<i class="ph ph-caret-right ph-bold result-arrow"></i>
<i
class="ph ph-x-circle ph-fill"
style="color: #e01e5a"
></i>
<span>validations[0]</span>
</div>

<span>Cost: 12</span>
</div>
<div class="result-accordion-expansible-content">
<span>true</span>
</div>
</li>
<li class="editor__output-result-accordion" data-open="false">
<div class="result-accordion-content">
<div
style="display: flex; align-items: center; gap: 0.5rem"
>
<i class="ph ph-caret-right ph-bold result-arrow"></i>
<i
class="ph ph-x-circle ph-fill"
style="color: #e01e5a"
></i>
<span>validations[0]</span>
</div>

<span>Cost: 12</span>
</div>
<div class="result-accordion-expansible-content">
<span>true</span>
</div>
</li>
</ul>
<ul
class="editor__output-result"
id="editor__output-result"
></ul>
</div>
</div>
</div>
Expand Down

0 comments on commit cb91424

Please sign in to comment.