|
@@ -1,6 +1,5 @@
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
|
import DataGrid, {Column} from "devextreme-react/data-grid";
|
|
|
-import {Alert} from "./AlertDialog.js";
|
|
|
import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen, handleKeyDown} from "./helpers.js";
|
|
|
import "./App.css";
|
|
|
|
|
@@ -15,11 +14,12 @@ function Addition() {
|
|
|
const [carryArr, setCarryArr] = useState([]); // array of carries ["1","0"]
|
|
|
const [commaIdx, setCommaIdx] = useState(0); // int: comma position
|
|
|
const [numbers, setNumbers] = useState(0); // array of arrays with input numbers
|
|
|
- const [showAlert, setShowAlert] = useState(false);
|
|
|
const [numbersGrid, setNumbersGrid] = useState([{id: 1, number: ""}]);
|
|
|
const [resultsGrid, setResultsGrid] = useState([{id: 1, number: ""}]);
|
|
|
const [stepsGrid, setStepsGrid] = useState([{id: 1, step: ""}]);
|
|
|
|
|
|
+ const [showSteps, setShowSteps] = useState(true);
|
|
|
+
|
|
|
// focus the input field
|
|
|
let calculationInput = useRef(null);
|
|
|
useEffect(()=>{
|
|
@@ -63,8 +63,12 @@ function Addition() {
|
|
|
}
|
|
|
|
|
|
if(nosLeft === 0){
|
|
|
- createIdmtResults(carryArrCopy);
|
|
|
- setShowAlert(true);
|
|
|
+ if(showSteps){
|
|
|
+ showIdmtResults(carryArrCopy);
|
|
|
+ addButtonsToImdtSteps();
|
|
|
+ }else{
|
|
|
+ finishCalculation();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -173,34 +177,26 @@ function Addition() {
|
|
|
}
|
|
|
|
|
|
const addButtonsToImdtSteps = () => {
|
|
|
- if(stepsGrid[0]["step"]!==""){
|
|
|
- // workaround to access DOM td after grid values are set
|
|
|
- setTimeout(() => {
|
|
|
- let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
|
|
|
- let trs = table.getElementsByTagName("tr");
|
|
|
- for(let trIdx in trs){
|
|
|
- let tr = trs[trIdx];
|
|
|
- if(tr instanceof HTMLElement && trIdx < trs.length-1){
|
|
|
- let td = tr.getElementsByTagName("td")[0];
|
|
|
- let btn = document.createElement("button");
|
|
|
- btn.innerHTML = "hier starten";
|
|
|
- btn.classList = "btn btn-secondary btn-sm";
|
|
|
- btn.id = "btn-" + trIdx;
|
|
|
- btn.addEventListener("click", () => startOver(trIdx));
|
|
|
- td.appendChild(btn);
|
|
|
- }
|
|
|
+ // workaround to access DOM td after grid values are set
|
|
|
+ setTimeout(() => {
|
|
|
+ let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
|
|
|
+ let trs = table.getElementsByTagName("tr");
|
|
|
+ for(let trIdx in trs){
|
|
|
+ let tr = trs[trIdx];
|
|
|
+ if(tr instanceof HTMLElement && trIdx < trs.length-1){
|
|
|
+ let td = tr.getElementsByTagName("td")[0];
|
|
|
+ let btn = document.createElement("button");
|
|
|
+ btn.innerHTML = "hier starten";
|
|
|
+ btn.classList = "btn btn-secondary btn-sm";
|
|
|
+ btn.id = "btn-" + trIdx;
|
|
|
+ btn.addEventListener("click", () => startOver(trIdx));
|
|
|
+ td.appendChild(btn);
|
|
|
}
|
|
|
- }, 100);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const showIdmtResults = () => {
|
|
|
- setShowAlert(false);
|
|
|
- document.getElementById("idmtResultSteps").style.display = "inline-block";
|
|
|
- addButtonsToImdtSteps();
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
}
|
|
|
|
|
|
- const createIdmtResults = (carryArrCopy) => {
|
|
|
+ const showIdmtResults = (carryArrCopy) => {
|
|
|
let realResArr = realResult.toString().split("");
|
|
|
while(realResArr.length < resArr.length){
|
|
|
realResArr.unshift(" "); // add " " before
|
|
@@ -283,10 +279,9 @@ function Addition() {
|
|
|
btnSubmit2.id = "btnSubmitSteps2";
|
|
|
document.getElementById("idmtResultSteps").appendChild(btnSubmit2);
|
|
|
|
|
|
+ document.getElementById("idmtResultSteps").style.display = "inline-block";
|
|
|
document.getElementById("idmtResultSteps").tabIndex = 0;
|
|
|
document.getElementById("idmtResultSteps").focus();
|
|
|
-
|
|
|
- document.getElementById("idmtResultSteps").style.display = "none";
|
|
|
}
|
|
|
|
|
|
const startOver = (idx) => {
|
|
@@ -319,7 +314,6 @@ function Addition() {
|
|
|
}
|
|
|
|
|
|
const finishCalculation = () => {
|
|
|
- setShowAlert(false);
|
|
|
document.getElementById("idmtResultSteps").innerHTML = "";
|
|
|
let resCalc = resArr.filter(n => n !== " ").join("");
|
|
|
setResultsGrid([{number: resCalc}]);
|
|
@@ -400,12 +394,6 @@ function Addition() {
|
|
|
</DataGrid>
|
|
|
</div>
|
|
|
|
|
|
- <Alert
|
|
|
- showAlert={showAlert}
|
|
|
- finishCalc={finishCalculation}
|
|
|
- showIdmtResults={showIdmtResults}
|
|
|
- />
|
|
|
-
|
|
|
</main>
|
|
|
);
|
|
|
}
|