|
@@ -1,7 +1,7 @@
|
|
|
import React, {useState, useEffect, useRef} from "react";
|
|
|
import DataGrid, {Column} from "devextreme-react/data-grid";
|
|
|
import {Alert} from "./AlertDialog.js";
|
|
|
-import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen} from "./helpers.js";
|
|
|
+import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen, handleKeyDown} from "./helpers.js";
|
|
|
import "./App.css";
|
|
|
|
|
|
let imdtRes;
|
|
@@ -32,7 +32,7 @@ function Subtraction() {
|
|
|
setInput(e.target.value);
|
|
|
}
|
|
|
|
|
|
- const handleResChange = (e, nosLeft) => {
|
|
|
+ const handleResChange = (e) => {
|
|
|
if(typeof e === "string"){
|
|
|
imdtRes = e;
|
|
|
}else{
|
|
@@ -48,22 +48,24 @@ function Subtraction() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- const handleCarryChange = (e, noOfDigits, nosLeft) => {
|
|
|
- let carryArrCopy = [...carryArr];
|
|
|
- carryArrCopy.unshift(e.target.value);
|
|
|
- setCarryArr(carryArrCopy);
|
|
|
- let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined;
|
|
|
-
|
|
|
- if((nosLeft === 1 && noCarry) ||
|
|
|
-
|
|
|
- (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
|
|
|
- nosLeft = 0;
|
|
|
- handleResChange(" ", 0)
|
|
|
- }
|
|
|
+ const handleCarryChange = (e, nosLeft) => {
|
|
|
+ if(e.keyCode === 13){
|
|
|
+ let carryArrCopy = [...carryArr];
|
|
|
+ carryArrCopy.unshift(e.target.value);
|
|
|
+ setCarryArr(carryArrCopy);
|
|
|
+
|
|
|
+ let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined;
|
|
|
+ if((nosLeft === 1 && noCarry) ||
|
|
|
+
|
|
|
+ (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
|
|
|
+ nosLeft = 0;
|
|
|
+ handleResChange(" ")
|
|
|
+ }
|
|
|
|
|
|
- if(nosLeft === 0){
|
|
|
- createIdmtResults()
|
|
|
- setShowAlert(true);
|
|
|
+ if(nosLeft === 0){
|
|
|
+ createIdmtResults()
|
|
|
+ setShowAlert(true);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -83,7 +85,7 @@ function Subtraction() {
|
|
|
let afterComma = Math.max(...numbers.map(x => afterCommaLen(x)));
|
|
|
realRes = parseFloat(realRes.toFixed(afterComma));
|
|
|
setRealResult(realRes);
|
|
|
- console.log("real result: ", realRes);
|
|
|
+ console.log("real result:", realRes);
|
|
|
|
|
|
let [numbersArr, commaIdx] = numbersToArrOfArr(numbers);
|
|
|
setNumbers(numbersArr);
|
|
@@ -112,7 +114,7 @@ function Subtraction() {
|
|
|
|
|
|
if(imdtResIdx === commaIdx){
|
|
|
if(!resArr.includes(".")){
|
|
|
- handleResChange(".", nosLeft);
|
|
|
+ handleResChange(".");
|
|
|
}
|
|
|
imdtResIdx = imdtResIdx - 1;
|
|
|
nosLeft = nosLeft - 1;
|
|
@@ -165,7 +167,8 @@ function Subtraction() {
|
|
|
{labelText}
|
|
|
</label>
|
|
|
<input
|
|
|
- onChange={(e) => handleResChange(e, nosLeft)}
|
|
|
+ onKeyDown={(e) => handleKeyDown(e)}
|
|
|
+ onChange={(e) => handleResChange(e)}
|
|
|
type="text" id="input_result" size="2" maxLength="1"
|
|
|
aria-labelledby="input_result_label" aria-required="true"
|
|
|
ref={resInputField} autoFocus/>
|
|
@@ -174,7 +177,7 @@ function Subtraction() {
|
|
|
{carryText}
|
|
|
</label>
|
|
|
<input
|
|
|
- onChange={(e) => handleCarryChange(e, noOfDigits, nosLeft)}
|
|
|
+ onKeyDown={(e) => handleCarryChange(e, nosLeft)}
|
|
|
type="text" id="input_carry" size="2" maxLength="1"
|
|
|
aria-labelledby="input_carry_label" aria-required="true"
|
|
|
ref={carryInputField}/>
|
|
@@ -190,27 +193,30 @@ function Subtraction() {
|
|
|
|
|
|
const addButtonsToImdtSteps = () => {
|
|
|
if(stepsGrid[0]["step"]!==""){
|
|
|
- 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);
|
|
|
+
|
|
|
+ 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()
|
|
|
+ addButtonsToImdtSteps();
|
|
|
}
|
|
|
|
|
|
const createIdmtResults = () => {
|