diff --git a/lib/.utils.js.swp b/lib/.utils.js.swp new file mode 100644 index 0000000..991b1f0 Binary files /dev/null and b/lib/.utils.js.swp differ diff --git a/lib/comparisonView.js b/lib/comparisonView.js index 87b780b..f46809c 100644 --- a/lib/comparisonView.js +++ b/lib/comparisonView.js @@ -2,7 +2,7 @@ import Head from "next/head"; import React, { useState } from "react"; import { DrawGraph, removeOldSvg } from "./labeledGraph"; -import { SubmitSliderButton } from "./slider"; +import { InputBox } from "./inputBox"; import { DisplayElement } from "./displayElement"; import { DisplayAsMarkdown } from "./displayAsMarkdown"; import { CreateTable, buildRows } from "./findPaths"; @@ -68,7 +68,7 @@ export default function ComparisonView({ listOfElementsForView }) { initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1], ]; - let initialSliderValue = 1; + let initialInputValue = 1; let initialReasoning = ""; let initialBinaryComparisons = []; let initialQuantitativeComparisons = []; @@ -90,7 +90,7 @@ export default function ComparisonView({ listOfElementsForView }) { const [listOfElements, setListOfElements] = useState(initialListOfElements); const [posList, setPosList] = useState(initialPosList); const [toComparePair, setToComparePair] = useState(initialComparePair); - const [sliderValue, setSliderValue] = useState(initialSliderValue); + const [inputValue, setInputValue] = useState(initialInputValue); const [reasoning, setReasoning] = useState(initialReasoning); const [binaryComparisons, setBinaryComparisons] = useState( initialBinaryComparisons @@ -132,7 +132,7 @@ export default function ComparisonView({ listOfElementsForView }) { posList[posList.length - 2], posList[posList.length - 1], ]); - setSliderValue(initialSliderValue); + setInputValue(initialInputValue); setBinaryComparisons(initialBinaryComparisons2 || initialBinaryComparisons); setQuantitativeComparisons( initialQuantitativeComparisons2 || initialQuantitativeComparisons @@ -296,20 +296,20 @@ export default function ComparisonView({ listOfElementsForView }) { } }; - let nextStepSlider = async ({ + let nextStepInput = async ({ posList, binaryComparisons, - sliderValue, + inputValue, reasoning, element1, element2, }) => { if (!dontPushSubmitButtonAnyMore) { - if (sliderValue < 1 && sliderValue > 0) { - sliderValue = 1 / sliderValue; + if (inputValue < 1 && inputValue > 0) { + inputValue = 1 / inputValue; [element1, element2] = [element2, element1]; } - console.log(`posList@nextStepSlider:`); + console.log(`posList@nextStepInput:`); console.log(posList); let [successStatus, result] = nextStepSimple( posList, @@ -321,7 +321,7 @@ export default function ComparisonView({ listOfElementsForView }) { let newQuantitativeComparison = [ element1, element2, - sliderValue, + inputValue, reasoning, ]; let newQuantitativeComparisons = [ @@ -330,7 +330,7 @@ export default function ComparisonView({ listOfElementsForView }) { ]; setQuantitativeComparisons(newQuantitativeComparisons); - setSliderValue(DEFAULT_COMPARE()); + setInputValue(DEFAULT_COMPARE()); setReasoning(""); changeNumSteps(numSteps + 1); if (successStatus) { @@ -396,7 +396,7 @@ export default function ComparisonView({ listOfElementsForView }) { - {/* Comparison actuator (text, previously slider) */} + {/* Comparison actuator (text, previously input) */}

@@ -406,11 +406,11 @@ export default function ComparisonView({ listOfElementsForView }) { { //console.log(event) //console.log(event.target.value) - setSliderValue(event.target.value); + setInputValue(event.target.value); }} />
@@ -418,13 +418,13 @@ export default function ComparisonView({ listOfElementsForView }) {
-
@@ -450,19 +450,6 @@ export default function ComparisonView({ listOfElementsForView }) { />
-
- {/* Old slider element (previous actuator) - -
- (setSliderValue(event[0]))} - value={sliderValue} - displayFunction={displayFunctionSlider} - domain={domain} - /> -
- */}
{/* Results section */} diff --git a/lib/inputBox.js b/lib/inputBox.js new file mode 100644 index 0000000..9a4b287 --- /dev/null +++ b/lib/inputBox.js @@ -0,0 +1,50 @@ +/* Imports */ +import React, { useState } from "react"; + +export function InputBox({ + posList, + binaryComparisons, + inputValue, + reasoning, + toComparePair, + nextStepInput, + dontPushSubmitButtonAnyMore, +}) { + // This element didn't necessarily have to exist, but it made it easier for debugging purposes + let onClick = (event) => { + if (!dontPushSubmitButtonAnyMore) { + //event.preventDefault(); + let obj = { + posList, + binaryComparisons, + inputValue, + reasoning, + element1: toComparePair[1], + element2: toComparePair[0], + }; + // + console.log("input@SubmitInputButton"); + console.log(obj); + if (!!Number(inputValue) && inputValue >= 0) { + nextStepInput(obj); + } else if (!!Number(inputValue) && inputValue < 0) { + alert("Negative numbers not yet allowed"); + } else { + alert("Your input is not a number"); + } + } + }; + + return ( + + ); +} diff --git a/lib/slider.js b/lib/slider.js deleted file mode 100644 index 9baadf8..0000000 --- a/lib/slider.js +++ /dev/null @@ -1,179 +0,0 @@ -/* Imports */ -import { Slider, Rail, Handles, Tracks, Ticks } from "react-compound-slider"; -import React, { useState } from "react"; -// https://sghall.github.io/react-compound-slider/#/getting-started/tutorial - -/* Definitions */ - -const sliderStyle = { - // Give the slider some width - position: "relative", - width: "40em", - height: 40, - border: "5em", -}; - -const railStyle = { - position: "absolute", - width: "100%", - height: 15, - marginTop: 32.5, - borderRadius: 5, - backgroundColor: "lightgrey", -}; - -/* Support functions */ -function Handle({ - handle: { id, value, percent }, - getHandleProps, - displayFunction, - handleWidth, -}) { - return ( - <> -
- {displayFunction(value)} -
-
- - ); -} - -function Track({ source, target, getTrackProps }) { - return ( -
- ); -} - -/* Body */ -// Two functions, essentially identical. -export function SliderElement({ onChange, value, displayFunction, domain }) { - let toLogDomain = (arr) => [ - Math.log(arr[0]) / Math.log(10), - Math.log(arr[1]) / Math.log(10), - ]; - return ( - - - {({ getRailProps }) =>
} - - - {({ handles, getHandleProps }) => ( -
- {handles.map((handle) => ( - - ))} -
- )} -
- - {({ tracks, getTrackProps }) => ( -
- {tracks.map(({ id, source, target }) => ( - - ))} -
- )} -
- - ); -} - -export function SubmitSliderButton({ - posList, - binaryComparisons, - sliderValue, - reasoning, - toComparePair, - nextStepSlider, - dontPushSubmitButtonAnyMore, -}) { - // This element didn't necessarily have to exist, but it made it easier for debugging purposes - let onClick = (event) => { - if (!dontPushSubmitButtonAnyMore) { - //event.preventDefault(); - let obj = { - posList, - binaryComparisons, - sliderValue, - reasoning, - element1: toComparePair[1], - element2: toComparePair[0], - }; - // - console.log("input@SubmitSliderButton"); - console.log(obj); - if (!!Number(sliderValue) && sliderValue >= 0) { - nextStepSlider(obj); - } else if (!!Number(sliderValue) && sliderValue < 0) { - alert("Negative numbers not yet allowed"); - } else { - alert("Your input is not a number"); - } - } - }; - - return ( - - ); -} -