small refactor
This commit is contained in:
@@ -41,7 +41,7 @@ let inputsB = {
|
|||||||
angle: null
|
angle: null
|
||||||
};
|
};
|
||||||
|
|
||||||
function highlightError(errorFieldIndex, add = true) {
|
function highlightErrorElement(errorFieldIndex, add = true) {
|
||||||
let fields = [
|
let fields = [
|
||||||
elements.equalSideLength,
|
elements.equalSideLength,
|
||||||
elements.baseAngle,
|
elements.baseAngle,
|
||||||
@@ -69,7 +69,7 @@ function setErrTooltip(errorFieldIndex, tooltip) {
|
|||||||
elements.outputValuesErr
|
elements.outputValuesErr
|
||||||
][errorFieldIndex];
|
][errorFieldIndex];
|
||||||
if (errElem) {
|
if (errElem) {
|
||||||
highlightError(errorFieldIndex, tooltip !== "");
|
highlightErrorElement(errorFieldIndex, tooltip !== "");
|
||||||
|
|
||||||
if (tooltip !== "") {
|
if (tooltip !== "") {
|
||||||
errElem.classList.remove("hidden");;
|
errElem.classList.remove("hidden");;
|
||||||
@@ -146,7 +146,7 @@ function updateCalculateButton() {
|
|||||||
elements.calculateButton.disabled = !ret;
|
elements.calculateButton.disabled = !ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
function switchAppearance(selectA) {
|
function switchInputs(selectA) {
|
||||||
if (selectA) {
|
if (selectA) {
|
||||||
elements.imageA.classList.remove("hidden");
|
elements.imageA.classList.remove("hidden");
|
||||||
elements.imageB.classList.add("hidden");
|
elements.imageB.classList.add("hidden");
|
||||||
@@ -190,7 +190,7 @@ function displayTable(calcResults) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearInputs() {
|
function clearCurrentInputs() {
|
||||||
if (currentModeIsA) {
|
if (currentModeIsA) {
|
||||||
elements.equalSideLength.value = null;
|
elements.equalSideLength.value = null;
|
||||||
elements.baseAngle.value = null;
|
elements.baseAngle.value = null;
|
||||||
@@ -215,7 +215,7 @@ function clearInputs() {
|
|||||||
updateCalculateButton()
|
updateCalculateButton()
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkAngle(angleString) {
|
function check180Angle(angleString) {
|
||||||
let angle = parseFloat(angleString);
|
let angle = parseFloat(angleString);
|
||||||
if (isNaN(angle)) {
|
if (isNaN(angle)) {
|
||||||
return "Введите корректное число";
|
return "Введите корректное число";
|
||||||
@@ -229,6 +229,20 @@ function checkAngle(angleString) {
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function check90Angle(angleString) {
|
||||||
|
let angle = parseFloat(angleString);
|
||||||
|
if (isNaN(angle)) {
|
||||||
|
return "Введите корректное число";
|
||||||
|
}
|
||||||
|
if (angle <= 0) {
|
||||||
|
return "Угол должен быть больше 0";
|
||||||
|
}
|
||||||
|
if (angle >= 90) {
|
||||||
|
return "Угол должен быть меньше 90";
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
function checkLength(lengthString) {
|
function checkLength(lengthString) {
|
||||||
let length = parseFloat(lengthString);
|
let length = parseFloat(lengthString);
|
||||||
if (!isFinite(length)) {
|
if (!isFinite(length)) {
|
||||||
@@ -240,72 +254,63 @@ function checkLength(lengthString) {
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
elements.outputsFieldset.addEventListener('change', function (event) {
|
|
||||||
if (event.target.type === 'checkbox') {
|
|
||||||
updateCheckboxes();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
elements.inputsForm.addEventListener('change', handleInputEvent);
|
|
||||||
elements.inputsForm.addEventListener('input', handleInputEvent);
|
|
||||||
|
|
||||||
function handleSwitchInputs(event) {
|
function handleSwitchInputs(event) {
|
||||||
if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") {
|
if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") {
|
||||||
currentModeIsA = true;
|
currentModeIsA = true;
|
||||||
switchAppearance(true);
|
switchInputs(true);
|
||||||
console.log("Switching inputs to A");
|
console.log("Switching inputs to A");
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
currentModeIsA = false;
|
currentModeIsA = false;
|
||||||
switchAppearance(false);
|
switchInputs(false);
|
||||||
console.log("Switching inputs to B");
|
console.log("Switching inputs to B");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function HandleInputsUpdate(event) {
|
function handleInputsUpdate(event) {
|
||||||
switch (event.target.id) {
|
switch (event.target.id) {
|
||||||
case "equalSideLength":
|
case "equalSideLength":
|
||||||
{
|
{
|
||||||
const err = checkLength(event.target.value);
|
const err = checkLength(event.target.value);
|
||||||
setErrTooltip(0, err);
|
setErrTooltip(0, err);
|
||||||
if (err !== "") {
|
if (err === "") {
|
||||||
|
inputsA.l = parseFloat(event.target.value);
|
||||||
|
} else {
|
||||||
inputsA.l = null;
|
inputsA.l = null;
|
||||||
return
|
|
||||||
}
|
}
|
||||||
inputsA.l = parseFloat(event.target.value);
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "baseAngle":
|
case "baseAngle":
|
||||||
{
|
{
|
||||||
const err = checkAngle(event.target.value);
|
const err = check180Angle(event.target.value);
|
||||||
setErrTooltip(1, err);
|
setErrTooltip(1, err);
|
||||||
if (err !== "") {
|
if (err === "") {
|
||||||
|
inputsA.angle = parseFloat(event.target.value);
|
||||||
|
} else {
|
||||||
inputsA.angle = null;
|
inputsA.angle = null;
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
inputsA.angle = parseFloat(event.target.value);
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "baseSideLength":
|
case "baseSideLength":
|
||||||
{
|
{
|
||||||
const err = checkLength(event.target.value);
|
const err = checkLength(event.target.value);
|
||||||
setErrTooltip(2, err);
|
setErrTooltip(2, err);
|
||||||
if (err !== "") {
|
if (err === "") {
|
||||||
|
inputsB.l = parseFloat(event.target.value);
|
||||||
|
} else {
|
||||||
inputsB.l = null;
|
inputsB.l = null;
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
inputsB.l = parseFloat(event.target.value);
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "baseAdjacentAngle":
|
case "baseAdjacentAngle":
|
||||||
{
|
{
|
||||||
const err = checkAngle(event.target.value);
|
const err = check90Angle(event.target.value);
|
||||||
setErrTooltip(3, err);
|
setErrTooltip(3, err);
|
||||||
if (err !== "") {
|
if (err === "") {
|
||||||
|
inputsB.angle = parseFloat(event.target.value);
|
||||||
|
} else {
|
||||||
inputsB.angle = null;
|
inputsB.angle = null;
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
inputsB.angle = parseFloat(event.target.value);
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@@ -316,28 +321,33 @@ function HandleInputsUpdate(event) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleInputEvent(event) {
|
function handleFieldsetEvent(event) {
|
||||||
if (event.target.type === 'radio') {
|
if (event.target.type === 'radio') {
|
||||||
handleSwitchInputs(event);
|
handleSwitchInputs(event);
|
||||||
} else if (event.target.type === 'number') {
|
} else if (event.target.type === 'number') {
|
||||||
HandleInputsUpdate(event);
|
handleInputsUpdate(event);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
elements.inputsForm.addEventListener('change', handleFieldsetEvent);
|
||||||
|
elements.inputsForm.addEventListener('input', handleFieldsetEvent);
|
||||||
|
|
||||||
|
elements.outputsFieldset.addEventListener('change', (event) => {
|
||||||
|
if (event.target.type === 'checkbox') {
|
||||||
|
updateCheckboxes();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
elements.clearButton.addEventListener('click', (event) => {
|
elements.clearButton.addEventListener('click', (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
clearInputs()
|
clearCurrentInputs()
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
elements.calculateButton.addEventListener('click', (event) => {
|
elements.calculateButton.addEventListener('click', (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
displayTable(getCalculations());
|
displayTable(getCalculations());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// чтобы не сконфузило
|
// чтобы не сконфузило
|
||||||
updateCheckboxes();
|
updateCheckboxes();
|
||||||
switchAppearance(elements.radioA.checked);
|
switchInputs(elements.radioA.checked);
|
||||||
Reference in New Issue
Block a user