diff --git a/index.html b/index.html index 684b0c2..12f7d29 100644 --- a/index.html +++ b/index.html @@ -130,8 +130,28 @@

Automata Simulation

Run + + +
+ + + + + + + + + + +
+ States +
+
+ + +

@@ -338,5 +358,6 @@

Collaborate

+ diff --git a/src/afd.js b/src/afd.js index 00211bc..5e4b48e 100644 --- a/src/afd.js +++ b/src/afd.js @@ -1,9 +1,17 @@ import { animateNode, renderError, renderOut } from "./animateNode.js"; +const header = document.querySelector("#table thead tr"); function verifyAFD(paper, graph, automata, string) { let i = 0; let state = automata.initialState; let symbol = string[i]; + const tableResult = document.getElementById("table"); + const principalRow = document.getElementById("body"); + const statesSaved = new Set(); + const statesIndex = new Array(); + const row = document.querySelector("tbody"); + row.innerHTML = ""; + reload(tableResult); const interval = setInterval(() => { animateNode( @@ -36,9 +44,69 @@ function verifyAFD(paper, graph, automata, string) { (el) => el.state === state && el.symbol.includes(symbol) ); + + if (symbol[0] && !statesSaved.has(isState.symbol[0])) { + + statesIndex.push(isState.symbol[0]); + const column = document.createElement("th"); + column.textContent = isState.symbol[0]; + column.classList.add("px-6", "py-3", "bg-gray-300"); + + + statesSaved.add(isState.symbol[0]); + + header.appendChild(column); + tableResult.appendChild(header); + } + + if (!statesSaved.has(isState.state)) { + statesSaved.add(isState.state); + + + const newRow = document.createElement("tr"); + const newRowState = document.createElement("th"); + newRowState.textContent = isState.state; + newRowState.classList.add( + "px-6", + "py-4", + "font-medium", + "text-gray-900", + "whitespace-nowrap" + ); + + newRow.appendChild(newRowState); + + const nextState = document.createElement("th"); + nextState.textContent = isState.nextState; + nextState.classList.add( + "px-6", + "py-4", + "font-medium", + "text-gray-900", + "whitespace-nowrap" + ); + let index = statesIndex.indexOf(isState.symbol[0]); + while (index > 0) { + const nextState = document.createElement("th"); + nextState.textContent = "{}"; + nextState.classList.add( + "px-6", + "py-4", + "font-medium", + "text-gray-900", + "whitespace-nowrap" + ); + newRow.appendChild(nextState); + index--; + } + + newRow.appendChild(nextState); + principalRow.appendChild(newRow); + tableResult.appendChild(principalRow); + } + if (!isState) { clearInterval(interval); - renderOut("INVALID"); return; } @@ -50,3 +118,14 @@ function verifyAFD(paper, graph, automata, string) { } export { verifyAFD }; + + +function reload(tableResult){ + header.innerHTML = ""; + const column = document.createElement("th"); + column.textContent = "States"; + column.classList.add("px-6", "py-3", "bg-gray-300"); + header.appendChild(column); + tableResult.appendChild(header); +}; + diff --git a/src/main.js b/src/main.js index fb295c7..a4e5ad2 100644 --- a/src/main.js +++ b/src/main.js @@ -16,7 +16,7 @@ const inputLabel = document.querySelector("#input-label-name"); const inputState = document.querySelector("#input-state-name"); const btnClearAll = document.querySelector("#btn-clear-all"); const btnDownload = document.querySelector("#btn-download"); - +const header = document.querySelector("#table thead tr"); const automata = createAutomata(); function run() { @@ -28,6 +28,13 @@ function run() { const string = inputString.value; const statesArr = []; const transitions = {}; + const tableResult = document.getElementById("table"); + + const principalRow = document.getElementById("body"); + const row = document.querySelector("tbody"); + const symbolIndex = new Array(); + + // clear errors renderError(null); @@ -84,7 +91,109 @@ function run() { automata.finalStates = finalStates; automata.transitions = transitions; - console.log(automata); + + + + + //Transition table + row.innerHTML = ""; + reload(tableResult, header); + + //console.log(automata.alphabet); + automata.alphabet.forEach((x) => { + if(symbolIndex.indexOf(x) == -1){ + symbolIndex.push(x); + const column = document.createElement("th"); + column.textContent = x; + column.classList.add("px-6", "py-3", "bg-gray-300"); + header.appendChild(column); + tableResult.appendChild(header); + } + }); + + let index = 0; + + + //Add States in a Row + //automata.states.forEach((x) => { + for(let i = 0; i < automata.states.length; i++){ + const newRow = document.createElement("tr"); + const newRowState = document.createElement("th"); + newRowState.textContent = automata.states[i]; + newRowState.classList.add( + "px-6", + "py-4", + "font-medium", + "text-gray-900", + "whitespace-nowrap" + ); + + //State in column State + newRow.appendChild(newRowState); + const infoStates = [] + + + //Get nextState + const states = Object.values(automata.transitions); + console.log(states[index], index); + let stateNumber = states[index].length; + + //Iterate States + let elements; + + + for(let i=0; i < stateNumber; i++){ + let info = states[index][i][0]; + console.log("Info", info); + let found = symbolIndex.indexOf(states[index][i][1]); + console.log("Simbolo", states[index][i][1]); + //console.log("Simbolo ", found); + if(infoStates[found]){ + infoStates[found] += "," + info; + elements = infoStates[found]; + }else{ + infoStates[found] = info; + } + } + + if(elements){automata.states.push(elements);} + //console.log("Elementos", elements) + + index++; + + let count = 0; + infoStates.forEach((x) => { + const newRowState1 = document.createElement("th"); + newRowState1.textContent = x; + newRowState1.classList.add( + "px-6", + "py-4", + "font-medium", + "text-gray-900", + "whitespace-nowrap" + ); + + let size = infoStates.length; + let indexState = infoStates.indexOf(x); + console.log(x); + while (size--) { + const aux = document.createElement("th"); + if(count == indexState){ + newRow.appendChild(newRowState1); + count++; + break; + }else{ + newRow.appendChild(aux); + } + count++; + } + principalRow.appendChild(newRow); + tableResult.appendChild(principalRow); + }); + // }); + } + + renderOut("Loading ..."); renderOutString(string); @@ -122,6 +231,15 @@ function changeStateName() { MicroModal.close("modal-state-name"); } +function reload(tableResult, header){ + header.innerHTML = ""; + const column = document.createElement("th"); + column.textContent = "States"; + column.classList.add("px-6", "py-3", "bg-gray-300"); + header.appendChild(column); + tableResult.appendChild(header); +}; + window.addEventListener("DOMContentLoaded", () => { MicroModal.init(); Split(["#paper", "#split-1"], { sizes: [80, 20], minSize: 300 });