From 09b254ac5df9689101d652d91015367c33c287c1 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Sat, 18 Feb 2023 12:33:49 +0000 Subject: [PATCH 01/35] Update App.js --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 6a24a0d..8fb50f4 100644 --- a/src/App.js +++ b/src/App.js @@ -38,7 +38,7 @@ class App extends Component {
logo

- Edit src/App.js and save to reload. + Hi Neil Edit src/App.js and save to reload.

From 63a4e6b0ccb1786d5b9c6c9cad01bcd602f9e7a4 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Sat, 18 Feb 2023 12:43:35 +0000 Subject: [PATCH 02/35] Update hello.js --- src/lambda/hello.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lambda/hello.js b/src/lambda/hello.js index affe921..4a84077 100644 --- a/src/lambda/hello.js +++ b/src/lambda/hello.js @@ -1,8 +1,10 @@ // this uses the callback syntax, however, we encourage you to try the async/await syntax shown in async-dadjoke.js export function handler(event, context, callback) { console.log('queryStringParameters', event.queryStringParameters) + let x = (Math.random(1,100) *100); + myMsg = 'Hello World, Your number is ' + x; callback(null, { statusCode: 200, - body: JSON.stringify({ msg: 'Hello, World!' }), + body: JSON.stringify({ msg: myMsg }), }) } From 1acc188be3c07e8bd5af8a0d7c40600d945ad98e Mon Sep 17 00:00:00 2001 From: JamFactory Date: Sun, 19 Feb 2023 11:43:46 +0000 Subject: [PATCH 03/35] Add constant to myMsg --- src/lambda/hello.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lambda/hello.js b/src/lambda/hello.js index 4a84077..ee6c096 100644 --- a/src/lambda/hello.js +++ b/src/lambda/hello.js @@ -2,7 +2,7 @@ export function handler(event, context, callback) { console.log('queryStringParameters', event.queryStringParameters) let x = (Math.random(1,100) *100); - myMsg = 'Hello World, Your number is ' + x; + const myMsg = 'Hello World, Your number is ' + x; callback(null, { statusCode: 200, body: JSON.stringify({ msg: myMsg }), From 322c18919c85b43825de61c1b697b47ec9757997 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 18:53:35 +0000 Subject: [PATCH 04/35] Update hello.js --- src/lambda/hello.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lambda/hello.js b/src/lambda/hello.js index ee6c096..2c57b6c 100644 --- a/src/lambda/hello.js +++ b/src/lambda/hello.js @@ -2,7 +2,7 @@ export function handler(event, context, callback) { console.log('queryStringParameters', event.queryStringParameters) let x = (Math.random(1,100) *100); - const myMsg = 'Hello World, Your number is ' + x; + const myMsg = 'Hello Cris, Your number is ' + x; callback(null, { statusCode: 200, body: JSON.stringify({ msg: myMsg }), From d2d1e265817ce1d174ddaa882d793281492a419a Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:13:38 +0000 Subject: [PATCH 05/35] TrainSimulator added --- src/App.js | 2 ++ src/TrainSimulator.js | 77 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 src/TrainSimulator.js diff --git a/src/App.js b/src/App.js index 8fb50f4..20415a7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from "react" import logo from "./logo.svg" import "./App.css" +import TrainSimulator from './TrainSimulator'; class LambdaDemo extends Component { constructor(props) { @@ -41,6 +42,7 @@ class App extends Component { Hi Neil Edit src/App.js and save to reload.

+ ) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js new file mode 100644 index 0000000..478f9af --- /dev/null +++ b/src/TrainSimulator.js @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; + +function TrainSimulator() { + const [speedValue, setSpeedValue] = useState(0); + const [throttleValue, setThrottleValue] = useState(0); + const [pressureValue, setPressureValue] = useState(0); + + const startSimulation = () => { + // Code to start simulation + }; + + const stopSimulation = () => { + // Code to stop simulation + }; + + return ( +
+

Train Simulator

+
+
+
+
+
Speed Dial
+

Value: {speedValue}

+
+
+
+
+
+
+
Throttle
+

Value: {throttleValue}

+
+
+
+
+
+
+
Pressure Gauge
+

Value: {pressureValue}

+
+
+
+
+
+
+
+ + setSpeedValue(e.target.value)} /> +

Value: {speedValue}

+
+
+
+
+ + setThrottleValue(e.target.value)} /> +

Value: {throttleValue}

+
+
+
+
+ + setPressureValue(e.target.value)} /> +

Value: {pressureValue}

+
+
+
+
+
+
+ +
+
+
+
)} + +export default TrainSimulator; From 251e9ffcbe6a47cc6a4ba2e60c32188e80099e20 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:17:15 +0000 Subject: [PATCH 06/35] Commented Ot Start Stop functions --- src/TrainSimulator.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 478f9af..074cdf0 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -5,14 +5,15 @@ function TrainSimulator() { const [throttleValue, setThrottleValue] = useState(0); const [pressureValue, setPressureValue] = useState(0); - const startSimulation = () => { + /* const startSimulation = () => { // Code to start simulation + alert('Starting ...') }; const stopSimulation = () => { - // Code to stop simulation + alert('Stoppinf ...') }; - +*/ return (

Train Simulator

From b9b45c6fa2a83635b83e5a87fe32f1ed10a2ecb2 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:19:44 +0000 Subject: [PATCH 07/35] Added Button --- src/TrainSimulator.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 074cdf0..0436c58 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -5,7 +5,7 @@ function TrainSimulator() { const [throttleValue, setThrottleValue] = useState(0); const [pressureValue, setPressureValue] = useState(0); - /* const startSimulation = () => { + const startSimulation = () => { // Code to start simulation alert('Starting ...') }; @@ -13,7 +13,7 @@ function TrainSimulator() { const stopSimulation = () => { alert('Stoppinf ...') }; -*/ + return (

Train Simulator

@@ -70,6 +70,7 @@ function TrainSimulator() {
+
From 6ee1f3b18c1cb223136c9ff6676489e7cb625fa5 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:27:32 +0000 Subject: [PATCH 08/35] added function to get values.. --- src/TrainSimulator.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 0436c58..353cd28 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -5,15 +5,24 @@ function TrainSimulator() { const [throttleValue, setThrottleValue] = useState(0); const [pressureValue, setPressureValue] = useState(0); - const startSimulation = () => { - // Code to start simulation - alert('Starting ...') - }; - - const stopSimulation = () => { - alert('Stoppinf ...') - }; - + function startSimulation() { + const intervalId = setInterval(() => { + const speedValue = parseInt(document.getElementById('speed-slider').value); + const throttleValue = parseInt(document.getElementById('throttle-slider').value); + const pressureValue = parseInt(document.getElementById('pressure-slider').value); + + const simulationData = { speed: speedValue, throttle: throttleValue, pressure: pressureValue }; + + console.log(simulationData); + }, 1000); + + function stopSimulation() { + clearInterval(intervalId); + } + } + + + return (

Train Simulator

From edda6cec8716592982545eb06c343c5e05ee5346 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:31:56 +0000 Subject: [PATCH 09/35] move stoped Simulation out of function --- src/TrainSimulator.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 353cd28..4935132 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -16,11 +16,12 @@ function TrainSimulator() { console.log(simulationData); }, 1000); - function stopSimulation() { - clearInterval(intervalId); - } + } + function stopSimulation() { + clearInterval(intervalId); + } return ( From 0a7d32aa211cce3a1984f53439546de23f8b3ad9 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:38:00 +0000 Subject: [PATCH 10/35] nm --- src/TrainSimulator.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 4935132..a7964fb 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -16,13 +16,13 @@ function TrainSimulator() { console.log(simulationData); }, 1000); + function stopSimulation() { + clearInterval(intervalId); + } } - function stopSimulation() { - clearInterval(intervalId); - } - + return (
@@ -80,7 +80,7 @@ function TrainSimulator() {
- +
From 4cb29958ff839291658cc477e212b2ac29a8df55 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:38:55 +0000 Subject: [PATCH 11/35] nm2 --- src/TrainSimulator.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index a7964fb..1b819b2 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -16,9 +16,9 @@ function TrainSimulator() { console.log(simulationData); }, 1000); - function stopSimulation() { - clearInterval(intervalId); - } + //function stopSimulation() { + // clearInterval(intervalId); + //} } From 381efef516d9f2d8dcbb1b5fda169362b6b35592 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 20:52:16 +0000 Subject: [PATCH 12/35] Code Change --- src/TrainSimulator.js | 115 +++++++++++++++++++++--------------------- 1 file changed, 57 insertions(+), 58 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 1b819b2..5fc4edd 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,89 +1,88 @@ import React, { useState } from 'react'; function TrainSimulator() { - const [speedValue, setSpeedValue] = useState(0); - const [throttleValue, setThrottleValue] = useState(0); - const [pressureValue, setPressureValue] = useState(0); + const [speed, setSpeed] = useState(0); + const [throttle, setThrottle] = useState(0); + const [pressure, setPressure] = useState(0); function startSimulation() { const intervalId = setInterval(() => { - const speedValue = parseInt(document.getElementById('speed-slider').value); - const throttleValue = parseInt(document.getElementById('throttle-slider').value); - const pressureValue = parseInt(document.getElementById('pressure-slider').value); - - const simulationData = { speed: speedValue, throttle: throttleValue, pressure: pressureValue }; - + const simulationData = { speed, throttle, pressure }; console.log(simulationData); }, 1000); - - //function stopSimulation() { - // clearInterval(intervalId); - //} - + + function stopSimulation() { + clearInterval(intervalId); + } + + return stopSimulation; + } + + function stopSimulationHandler() { + stopSimulation(); + } + + const stopSimulation = startSimulation(); + + function handleSpeedChange(event) { + setSpeed(parseInt(event.target.value)); + } + + function handleThrottleChange(event) { + setThrottle(parseInt(event.target.value)); + } + + function handlePressureChange(event) { + setPressure(parseInt(event.target.value)); } - - return ( -
-

Train Simulator

-
-
+
+

Train Simulator

+ +
+
-
Speed Dial
-

Value: {speedValue}

+
Speed
+ +

{speed}

-
+ +
-
Throttle
-

Value: {throttleValue}

+
Throttle
+ +

{throttle}

-
+ +
-
Pressure Gauge
-

Value: {pressureValue}

+
Pressure
+ +

{pressure}

-
-
-
- - setSpeedValue(e.target.value)} /> -

Value: {speedValue}

-
-
-
-
- - setThrottleValue(e.target.value)} /> -

Value: {throttleValue}

-
+ +
+
+
-
-
- - setPressureValue(e.target.value)} /> -

Value: {pressureValue}

-
+ +
+
-
-
-
- - -
-
-
-
)} +
+ ); +} -export default TrainSimulator; +export default TrainSimulator; \ No newline at end of file From cb5d67a21ea86a5df0f9ad5347a9d66a897bd839 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:14:08 +0000 Subject: [PATCH 13/35] updated scope --- src/TrainSimulator.js | 52 +++++++++++++++++++++++++++++++++---------- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 5fc4edd..71ab588 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,29 +1,25 @@ import React, { useState } from 'react'; -function TrainSimulator() { +function useSimulation() { const [speed, setSpeed] = useState(0); const [throttle, setThrottle] = useState(0); const [pressure, setPressure] = useState(0); + const [intervalId, setIntervalId] = useState(null); function startSimulation() { - const intervalId = setInterval(() => { + const newIntervalId = setInterval(() => { const simulationData = { speed, throttle, pressure }; console.log(simulationData); }, 1000); - function stopSimulation() { - clearInterval(intervalId); - } - - return stopSimulation; + setIntervalId(newIntervalId); } - function stopSimulationHandler() { - stopSimulation(); + function stopSimulation() { + clearInterval(intervalId); + setIntervalId(null); } - const stopSimulation = startSimulation(); - function handleSpeedChange(event) { setSpeed(parseInt(event.target.value)); } @@ -36,6 +32,36 @@ function TrainSimulator() { setPressure(parseInt(event.target.value)); } + return { + speed, + throttle, + pressure, + intervalId, + startSimulation, + stopSimulation, + handleSpeedChange, + handleThrottleChange, + handlePressureChange, + }; +} + +function TrainSimulator() { + const { + speed, + throttle, + pressure, + intervalId, + startSimulation, + stopSimulation, + handleSpeedChange, + handleThrottleChange, + handlePressureChange, + } = useSimulation(); + + function stopSimulationHandler() { + stopSimulation(); + } + return (

Train Simulator

@@ -78,10 +104,12 @@ function TrainSimulator() {
- +
+ + ); } From e750bb67d6fbaa3306c01c176cbb481b44d53861 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:17:19 +0000 Subject: [PATCH 14/35] added StartSimulation to sliders --- src/TrainSimulator.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 71ab588..7fb23e9 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -22,14 +22,17 @@ function useSimulation() { function handleSpeedChange(event) { setSpeed(parseInt(event.target.value)); + startSimulation(); } function handleThrottleChange(event) { setThrottle(parseInt(event.target.value)); + startSimulation(); } function handlePressureChange(event) { setPressure(parseInt(event.target.value)); + startSimulation(); } return { From 2d32a4cfef1ea2073461cf40f320f415f744c99c Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:17:20 +0000 Subject: [PATCH 15/35] added StartSimulation to sliders From cb9bd24bf27d84d1a2a6a42b4e75cd65519368f5 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:23:48 +0000 Subject: [PATCH 16/35] added ReasctuseEffect --- src/TrainSimulator.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 7fb23e9..d393120 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -22,17 +22,17 @@ function useSimulation() { function handleSpeedChange(event) { setSpeed(parseInt(event.target.value)); - startSimulation(); + } function handleThrottleChange(event) { setThrottle(parseInt(event.target.value)); - startSimulation(); + } function handlePressureChange(event) { setPressure(parseInt(event.target.value)); - startSimulation(); + } return { @@ -65,6 +65,13 @@ function TrainSimulator() { stopSimulation(); } + React.useEffect(() => { + if (intervalId) { + const simulationData = { speed, throttle, pressure }; + console.log(simulationData); + } + }, [speed, throttle, pressure, intervalId]); + return (

Train Simulator

From ef2a30eda766d4efe51af141f4bc655cbe1bdc2a Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:30:20 +0000 Subject: [PATCH 17/35] changed to functions --- src/TrainSimulator.js | 89 ++++++++++++------------------------------- 1 file changed, 25 insertions(+), 64 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index d393120..b6a9999 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,76 +1,37 @@ import React, { useState } from 'react'; -function useSimulation() { - const [speed, setSpeed] = useState(0); - const [throttle, setThrottle] = useState(0); - const [pressure, setPressure] = useState(0); +const Simulator = () => { + const [sliderValues, setSliderValues] = useState({ + speed: 0, + throttle: 0, + pressure: 0 + }); + const [intervalId, setIntervalId] = useState(null); - function startSimulation() { - const newIntervalId = setInterval(() => { - const simulationData = { speed, throttle, pressure }; - console.log(simulationData); - }, 1000); + const getSliderValues = () => { + const newValues = { ...sliderValues }; + for (const key in sliderValues) { + if (sliderValues.hasOwnProperty(key)) { + newValues[key] = document.getElementById(key).value; + } + } + setSliderValues(newValues); + console.log(newValues); + }; - setIntervalId(newIntervalId); - } + const startSimulation = () => { + if (intervalId !== null) { + clearInterval(intervalId); + } + const id = setInterval(getSliderValues, 1000); + setIntervalId(id); + }; - function stopSimulation() { + const stopSimulation = () => { clearInterval(intervalId); setIntervalId(null); - } - - function handleSpeedChange(event) { - setSpeed(parseInt(event.target.value)); - - } - - function handleThrottleChange(event) { - setThrottle(parseInt(event.target.value)); - - } - - function handlePressureChange(event) { - setPressure(parseInt(event.target.value)); - - } - - return { - speed, - throttle, - pressure, - intervalId, - startSimulation, - stopSimulation, - handleSpeedChange, - handleThrottleChange, - handlePressureChange, }; -} - -function TrainSimulator() { - const { - speed, - throttle, - pressure, - intervalId, - startSimulation, - stopSimulation, - handleSpeedChange, - handleThrottleChange, - handlePressureChange, - } = useSimulation(); - - function stopSimulationHandler() { - stopSimulation(); - } - - React.useEffect(() => { - if (intervalId) { - const simulationData = { speed, throttle, pressure }; - console.log(simulationData); - } - }, [speed, throttle, pressure, intervalId]); return (
From 5f117990f444770d65e43fe56ecf2eb48b7771ce Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:33:18 +0000 Subject: [PATCH 18/35] added slidervalues --- src/TrainSimulator.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index b6a9999..91f5f68 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -42,7 +42,7 @@ const Simulator = () => {
Speed
- +

{speed}

@@ -52,7 +52,7 @@ const Simulator = () => {
Throttle
- +

{throttle}

@@ -62,7 +62,7 @@ const Simulator = () => {
Pressure
- +

{pressure}

From 0e8292051d8723e0d18b2a328c59af2cb632babd Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:37:37 +0000 Subject: [PATCH 19/35] hh --- src/TrainSimulator.js | 129 ++++++++++++++++++++++-------------------- 1 file changed, 67 insertions(+), 62 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 91f5f68..0765092 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,34 +1,40 @@ -import React, { useState } from 'react'; - -const Simulator = () => { - const [sliderValues, setSliderValues] = useState({ - speed: 0, - throttle: 0, - pressure: 0 - }); +import React, { useState } from "react"; +function TrainSimulator() { + const [isPlaying, setIsPlaying] = useState(false); const [intervalId, setIntervalId] = useState(null); + const [speed, setSpeed] = useState(50); + const [throttle, setThrottle] = useState(50); + const [pressure, setPressure] = useState(50); + + const handleSpeedChange = (event, value) => { + setSpeed(value); + }; - const getSliderValues = () => { - const newValues = { ...sliderValues }; - for (const key in sliderValues) { - if (sliderValues.hasOwnProperty(key)) { - newValues[key] = document.getElementById(key).value; - } - } - setSliderValues(newValues); - console.log(newValues); + const handleThrottleChange = (event, value) => { + setThrottle(value); + }; + + const handlePressureChange = (event, value) => { + setPressure(value); }; const startSimulation = () => { - if (intervalId !== null) { - clearInterval(intervalId); - } - const id = setInterval(getSliderValues, 1000); - setIntervalId(id); + setIsPlaying(true); + setIntervalId( + setInterval(() => { + const data = { + speed, + throttle, + pressure, + }; + console.log(data); + }, 1000) + ); }; const stopSimulation = () => { + setIsPlaying(false); clearInterval(intervalId); setIntervalId(null); }; @@ -36,52 +42,51 @@ const Simulator = () => { return (

Train Simulator

- -
-
-
-
-
Speed
- -

{speed}

-
-
+
+
+

Speed

+ +

{speed}

- -
-
-
-
Throttle
- -

{throttle}

-
-
+
+

Throttle

+ +

{throttle}

- -
-
-
-
Pressure
- -

{pressure}

-
-
+
+

Pressure

+ +

{pressure}

- -
-
- -
- -
- -
+
+ +
- - ); } -export default TrainSimulator; \ No newline at end of file +export default TrainSimulator; From 3fb012df4eab515bcfd49c9dcc4438249e6de4f1 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:40:27 +0000 Subject: [PATCH 20/35] add slider nmp --- src/TrainSimulator.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 0765092..55be0f2 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { Slider } from 'react-bootstrap'; function TrainSimulator() { const [isPlaying, setIsPlaying] = useState(false); From 3c2bf19330cd0c96bd42d54e1ee912d44c88455e Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:49:32 +0000 Subject: [PATCH 21/35] add react range input to package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4904211..f93950d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "axios": "^0.19.0", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-scripts": "^3.0.1" + "react-scripts": "^3.0.1", + "react-input-range": "^1.3.1" }, "scripts": { "start": "react-scripts start", From 2e989e2537c88f496fa801f765e0ca032bb5d509 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 21:57:09 +0000 Subject: [PATCH 22/35] mm --- package.json | 3 +- src/TrainSimulator.js | 172 ++++++++++++++++++++++++------------------ 2 files changed, 101 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index f93950d..4904211 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,7 @@ "axios": "^0.19.0", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-scripts": "^3.0.1", - "react-input-range": "^1.3.1" + "react-scripts": "^3.0.1" }, "scripts": { "start": "react-scripts start", diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 55be0f2..503b92f 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,93 +1,121 @@ -import React, { useState } from "react"; -import { Slider } from 'react-bootstrap'; +import React, { useState } from 'react'; -function TrainSimulator() { - const [isPlaying, setIsPlaying] = useState(false); +function useSimulation() { + const [speed, setSpeed] = useState(0); + const [throttle, setThrottle] = useState(0); + const [pressure, setPressure] = useState(0); const [intervalId, setIntervalId] = useState(null); - const [speed, setSpeed] = useState(50); - const [throttle, setThrottle] = useState(50); - const [pressure, setPressure] = useState(50); - - const handleSpeedChange = (event, value) => { - setSpeed(value); - }; - const handleThrottleChange = (event, value) => { - setThrottle(value); - }; + function startSimulation() { + const newIntervalId = setInterval(() => { + const simulationData = { speed, throttle, pressure }; + console.log(simulationData); + }, 1000); - const handlePressureChange = (event, value) => { - setPressure(value); - }; - - const startSimulation = () => { - setIsPlaying(true); - setIntervalId( - setInterval(() => { - const data = { - speed, - throttle, - pressure, - }; - console.log(data); - }, 1000) - ); - }; + setIntervalId(newIntervalId); + } - const stopSimulation = () => { - setIsPlaying(false); + function stopSimulation() { clearInterval(intervalId); setIntervalId(null); + } + + function handleSpeedChange(event) { + setSpeed(parseInt(event.target.value)); + + } + + function handleThrottleChange(event) { + setThrottle(parseInt(event.target.value)); + + } + + function handlePressureChange(event) { + setPressure(parseInt(event.target.value)); + + } + + return { + speed, + throttle, + pressure, + intervalId, + startSimulation, + stopSimulation, + handleSpeedChange, + handleThrottleChange, + handlePressureChange, }; +} + +function TrainSimulator() { + const { + speed, + throttle, + pressure, + intervalId, + startSimulation, + stopSimulation, + handleSpeedChange, + handleThrottleChange, + handlePressureChange, + } = useSimulation(); + + function stopSimulationHandler() { + stopSimulation(); + } + + return (

Train Simulator

-
-
-

Speed

- -

{speed}

+ +
+
+
+
+
Speed
+ +

{speed}

+
+
-
-

Throttle

- -

{throttle}

+ +
+
+
+
Throttle
+ +

{throttle}

+
+
-
-

Pressure

- -

{pressure}

+ +
+
+
+
Pressure
+ +

{pressure}

+
+
-
- - + +
+
+ +
+ +
+ +
+ + ); } -export default TrainSimulator; +export default TrainSimulator; \ No newline at end of file From 77f1e8ff581af0f411871f6c340b9cffecdabf15 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:06:14 +0000 Subject: [PATCH 23/35] newstart --- src/TrainSimulator.js | 166 +++++++++++++++++------------------------- 1 file changed, 66 insertions(+), 100 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 503b92f..dfe93c9 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,121 +1,87 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; -function useSimulation() { +function TrainSimulator() { const [speed, setSpeed] = useState(0); const [throttle, setThrottle] = useState(0); const [pressure, setPressure] = useState(0); - const [intervalId, setIntervalId] = useState(null); + const [isRunning, setIsRunning] = useState(false); + const intervalRef = useRef(null); - function startSimulation() { - const newIntervalId = setInterval(() => { - const simulationData = { speed, throttle, pressure }; - console.log(simulationData); + const startSimulation = () => { + setIsRunning(true); + intervalRef.current = setInterval(() => { + console.log({ speed, throttle, pressure }); }, 1000); + }; - setIntervalId(newIntervalId); - } - - function stopSimulation() { - clearInterval(intervalId); - setIntervalId(null); - } - - function handleSpeedChange(event) { - setSpeed(parseInt(event.target.value)); - - } - - function handleThrottleChange(event) { - setThrottle(parseInt(event.target.value)); - - } - - function handlePressureChange(event) { - setPressure(parseInt(event.target.value)); - - } - - return { - speed, - throttle, - pressure, - intervalId, - startSimulation, - stopSimulation, - handleSpeedChange, - handleThrottleChange, - handlePressureChange, + const stopSimulation = () => { + setIsRunning(false); + clearInterval(intervalRef.current); }; -} -function TrainSimulator() { - const { - speed, - throttle, - pressure, - intervalId, - startSimulation, - stopSimulation, - handleSpeedChange, - handleThrottleChange, - handlePressureChange, - } = useSimulation(); + const handleSpeedChange = (event) => { + setSpeed(event.target.value); + }; - function stopSimulationHandler() { - stopSimulation(); - } + const handleThrottleChange = (event) => { + setThrottle(event.target.value); + }; - + const handlePressureChange = (event) => { + setPressure(event.target.value); + }; return (
-

Train Simulator

- -
-
-
-
-
Speed
- -

{speed}

-
-
-
- -
-
-
-
Throttle
- -

{throttle}

-
-
-
- -
-
-
-
Pressure
- -

{pressure}

-
-
-
+
+ + + {speed}
- -
-
- -
- -
- -
+
+ + + {throttle} +
+
+ + + {pressure} +
+
+ {isRunning ? ( + + ) : ( + + )}
- - ); } + export default TrainSimulator; \ No newline at end of file From dcaf4cba0b9ccc419af69d69231e208765144b72 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:11:25 +0000 Subject: [PATCH 24/35] handle change --- src/TrainSimulator.js | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index dfe93c9..7ec0f4c 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -19,17 +19,14 @@ function TrainSimulator() { clearInterval(intervalRef.current); }; - const handleSpeedChange = (event) => { - setSpeed(event.target.value); - }; - - const handleThrottleChange = (event) => { - setThrottle(event.target.value); - }; - - const handlePressureChange = (event) => { - setPressure(event.target.value); - }; + function handleChange(event) { + const { name, value } = event.target; + this.setState(prevState => { + const newState = { ...prevState }; + newState[name] = value; + return newState; + }); + } return (
@@ -42,7 +39,7 @@ function TrainSimulator() { min="0" max="100" value={speed} - onChange={handleSpeedChange} + onChange={handleChange} /> {speed}
@@ -55,7 +52,7 @@ function TrainSimulator() { min="0" max="100" value={throttle} - onChange={handleThrottleChange} + onChange={handleChange} /> {throttle}
@@ -68,7 +65,7 @@ function TrainSimulator() { min="0" max="100" value={pressure} - onChange={handlePressureChange} + onChange={handleChange} /> {pressure}
From 2f991f35fd8083af6b5dd0d0f5191f8775901f09 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:12:33 +0000 Subject: [PATCH 25/35] kl --- src/TrainSimulator.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 7ec0f4c..164de44 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,9 +1,7 @@ import React, { useState, useRef } from 'react'; function TrainSimulator() { - const [speed, setSpeed] = useState(0); - const [throttle, setThrottle] = useState(0); - const [pressure, setPressure] = useState(0); + const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); From 29b49d77002fe651a3a9be6de6f26e27496e387c Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:15:11 +0000 Subject: [PATCH 26/35] jj --- src/TrainSimulator.js | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 164de44..e46b1fa 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,7 +1,9 @@ import React, { useState, useRef } from 'react'; function TrainSimulator() { - + const [speed, setSpeed] = useState(0); + const [throttle, setThrottle] = useState(0); + const [pressure, setPressure] = useState(0); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); @@ -17,14 +19,25 @@ function TrainSimulator() { clearInterval(intervalRef.current); }; - function handleChange(event) { - const { name, value } = event.target; - this.setState(prevState => { - const newState = { ...prevState }; - newState[name] = value; - return newState; - }); - } + const handleSpeedChange = (event) => { + stopSimulation(); + setSpeed(event.target.value); + startSimulation(); + }; + + const handleThrottleChange = (event) => { + stopSimulation(); + setThrottle(event.target.value); + startSimulation(); + }; + + const handlePressureChange = (event) => { + stopSimulation(); + setPressure(event.target.value); + startSimulation(); + }; + + return (
@@ -37,7 +50,7 @@ function TrainSimulator() { min="0" max="100" value={speed} - onChange={handleChange} + onChange={handleSpeedChange} /> {speed}
@@ -50,7 +63,7 @@ function TrainSimulator() { min="0" max="100" value={throttle} - onChange={handleChange} + onChange={handleThrottleChange} /> {throttle}
@@ -63,7 +76,7 @@ function TrainSimulator() { min="0" max="100" value={pressure} - onChange={handleChange} + onChange={handlePressureChange} /> {pressure}
From 386aa05929453879f5120d2c1caa30641f9a991c Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:18:14 +0000 Subject: [PATCH 27/35] jjh --- src/TrainSimulator.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index e46b1fa..1d6a00f 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -20,21 +20,21 @@ function TrainSimulator() { }; const handleSpeedChange = (event) => { - stopSimulation(); + stopSimulation; setSpeed(event.target.value); - startSimulation(); + startSimulation; }; const handleThrottleChange = (event) => { - stopSimulation(); + stopSimulation; setThrottle(event.target.value); - startSimulation(); + startSimulation; }; const handlePressureChange = (event) => { - stopSimulation(); + stopSimulation; setPressure(event.target.value); - startSimulation(); + startSimulation; }; From 63091f6537024bbe8d97411353aaccfc4a2fad78 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:21:00 +0000 Subject: [PATCH 28/35] ... --- src/TrainSimulator.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 1d6a00f..bacac01 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -10,7 +10,7 @@ function TrainSimulator() { const startSimulation = () => { setIsRunning(true); intervalRef.current = setInterval(() => { - console.log({ speed, throttle, pressure }); + console.log({ ...speed, ...throttle, ...pressure }); }, 1000); }; @@ -20,21 +20,15 @@ function TrainSimulator() { }; const handleSpeedChange = (event) => { - stopSimulation; setSpeed(event.target.value); - startSimulation; }; const handleThrottleChange = (event) => { - stopSimulation; setThrottle(event.target.value); - startSimulation; }; const handlePressureChange = (event) => { - stopSimulation; setPressure(event.target.value); - startSimulation; }; From ac24b11d0b5a51edf0dfedac9831c34f606b1114 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:26:58 +0000 Subject: [PATCH 29/35] useEffect --- src/TrainSimulator.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index bacac01..3c32a3d 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -1,4 +1,4 @@ -import React, { useState, useRef } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; function TrainSimulator() { const [speed, setSpeed] = useState(0); @@ -7,16 +7,26 @@ function TrainSimulator() { const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); + useEffect(() => { + if (isRunning) { + intervalRef.current = setInterval(() => { + console.log({ speed, throttle, pressure }); + }, 1000); + } else { + clearInterval(intervalRef.current); + } + + return () => { + clearInterval(intervalRef.current); + }; + }, [isRunning, speed, throttle, pressure]); + const startSimulation = () => { setIsRunning(true); - intervalRef.current = setInterval(() => { - console.log({ ...speed, ...throttle, ...pressure }); - }, 1000); }; const stopSimulation = () => { setIsRunning(false); - clearInterval(intervalRef.current); }; const handleSpeedChange = (event) => { @@ -32,7 +42,6 @@ function TrainSimulator() { }; - return (
From 4a9bcb985329966e667750553ecbe15c24fb3658 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Mon, 20 Feb 2023 22:30:30 +0000 Subject: [PATCH 30/35] change to tenth second --- src/TrainSimulator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 3c32a3d..e7c6fbc 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -11,7 +11,7 @@ function TrainSimulator() { if (isRunning) { intervalRef.current = setInterval(() => { console.log({ speed, throttle, pressure }); - }, 1000); + }, 100); } else { clearInterval(intervalRef.current); } From 5d8b667a63128dcbc3ab07b803660c2aeb9663f0 Mon Sep 17 00:00:00 2001 From: JamFactory Date: Tue, 21 Feb 2023 10:38:47 +0000 Subject: [PATCH 31/35] Added Div insetad of console --- src/TrainSimulator.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index e7c6fbc..4025fc2 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -6,16 +6,35 @@ function TrainSimulator() { const [pressure, setPressure] = useState(0); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); + const logRef = useRef(null); useEffect(() => { if (isRunning) { intervalRef.current = setInterval(() => { - console.log({ speed, throttle, pressure }); - }, 100); + //console.log({ speed, throttle, pressure }); + const logElement = document.createElement('div'); + logElement.innerText = JSON.stringify(data); + logRef.current.appendChild(logElement); + + }, 1000); } else { clearInterval(intervalRef.current); } + + + const startSimulation = () => { + setIsRunning(true); + intervalRef.current = setInterval(() => { + const data = { speed, throttle, pressure }; + const logElement = document.createElement('div'); + logElement.innerText = JSON.stringify(data); + logRef.current.appendChild(logElement); + }, 1000); + }; + + + return () => { clearInterval(intervalRef.current); }; @@ -44,6 +63,8 @@ function TrainSimulator() { return (
+
+
Date: Tue, 21 Feb 2023 10:39:07 +0000 Subject: [PATCH 32/35] new --- src/TrainSimulator.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 4025fc2..196d56a 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -23,17 +23,6 @@ function TrainSimulator() { - const startSimulation = () => { - setIsRunning(true); - intervalRef.current = setInterval(() => { - const data = { speed, throttle, pressure }; - const logElement = document.createElement('div'); - logElement.innerText = JSON.stringify(data); - logRef.current.appendChild(logElement); - }, 1000); - }; - - return () => { clearInterval(intervalRef.current); From f626d59434b25df5da3d3ab19d73bb617c80a3ec Mon Sep 17 00:00:00 2001 From: JamFactory Date: Tue, 21 Feb 2023 10:40:48 +0000 Subject: [PATCH 33/35] changed to object --- src/TrainSimulator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index 196d56a..e72436f 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -13,7 +13,7 @@ function TrainSimulator() { intervalRef.current = setInterval(() => { //console.log({ speed, throttle, pressure }); const logElement = document.createElement('div'); - logElement.innerText = JSON.stringify(data); + logElement.innerText = JSON.stringify({ speed, throttle, pressure }); logRef.current.appendChild(logElement); }, 1000); From a1accf7df2ca0ab2106a7e367f1045f35770e88c Mon Sep 17 00:00:00 2001 From: JamFactory Date: Tue, 21 Feb 2023 10:49:13 +0000 Subject: [PATCH 34/35] auto scroll to bottom --- src/TrainSimulator.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index e72436f..c41074c 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -15,6 +15,7 @@ function TrainSimulator() { const logElement = document.createElement('div'); logElement.innerText = JSON.stringify({ speed, throttle, pressure }); logRef.current.appendChild(logElement); + logRef.scrollTop = logRef.scrollHeight; }, 1000); } else { From 1440fd09a70755fbecd976bbd5584f3a22e55cfa Mon Sep 17 00:00:00 2001 From: JamFactory Date: Tue, 21 Feb 2023 11:01:29 +0000 Subject: [PATCH 35/35] logRef scrollable --- src/TrainSimulator.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/TrainSimulator.js b/src/TrainSimulator.js index c41074c..710460f 100644 --- a/src/TrainSimulator.js +++ b/src/TrainSimulator.js @@ -15,14 +15,16 @@ function TrainSimulator() { const logElement = document.createElement('div'); logElement.innerText = JSON.stringify({ speed, throttle, pressure }); logRef.current.appendChild(logElement); - logRef.scrollTop = logRef.scrollHeight; + if (logRef.current) { + logRef.current.scrollTop = logRef.current.scrollHeight; + } }, 1000); } else { clearInterval(intervalRef.current); } - + return () => {