fix width bug
parent
2e9159d1c3
commit
1a6c185074
13
src/App.js
13
src/App.js
|
@ -66,11 +66,11 @@ function App() {
|
||||||
const [acceleration, setAcceleration] = useState(0);
|
const [acceleration, setAcceleration] = useState(0);
|
||||||
const [direction, setDirection] = useState(0);
|
const [direction, setDirection] = useState(0);
|
||||||
|
|
||||||
const remainingTimeRef = useRef(0);
|
const remainingTimeRef = useRef(null);
|
||||||
const [processStatus, setProcessStatus] = useState("");
|
const [processStatus, setProcessStatus] = useState("");
|
||||||
|
|
||||||
const setRemainingTimeProgress = (time) => {
|
const setRemainingTimeProgress = (time) => {
|
||||||
remainingTimeRef.current = time;
|
remainingTimeRef.current = time * 1000;
|
||||||
};
|
};
|
||||||
|
|
||||||
const showErrorMessage = () => {
|
const showErrorMessage = () => {
|
||||||
|
@ -120,6 +120,8 @@ function App() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (remainingTimeRef.current === null) return;
|
||||||
|
|
||||||
let elem = document.getElementById("progress-bar");
|
let elem = document.getElementById("progress-bar");
|
||||||
let width = 1;
|
let width = 1;
|
||||||
let currentProgress = 0;
|
let currentProgress = 0;
|
||||||
|
@ -136,7 +138,9 @@ function App() {
|
||||||
if (processStatus !== "Angehalten" && processStatus !== "")
|
if (processStatus !== "Angehalten" && processStatus !== "")
|
||||||
setProcessStatus("Fertig");
|
setProcessStatus("Fertig");
|
||||||
} else {
|
} else {
|
||||||
width = (100 / remainingTimeRef.current) * currentProgress + 1;
|
width = (100 / remainingTimeRef.current) * currentProgress;
|
||||||
|
|
||||||
|
if (width > 100) width = 100;
|
||||||
|
|
||||||
currentProgress += PROGRES_BAR_INTERVAL_TIME;
|
currentProgress += PROGRES_BAR_INTERVAL_TIME;
|
||||||
elem.style.width = width + "%";
|
elem.style.width = width + "%";
|
||||||
|
@ -181,7 +185,7 @@ function App() {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
showErrorMessage();
|
showErrorMessage();
|
||||||
setProcessStatus("");
|
setProcessStatus("");
|
||||||
setRemainingTimeProgress(0);
|
setRemainingTimeProgress(10);
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch((err) => console.error(err));
|
.catch((err) => console.error(err));
|
||||||
|
@ -397,7 +401,6 @@ function App() {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
showErrorMessage();
|
showErrorMessage();
|
||||||
setProcessStatus("Angehalten");
|
setProcessStatus("Angehalten");
|
||||||
|
|
||||||
setRemainingTimeProgress(0);
|
setRemainingTimeProgress(0);
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
|
|
Loading…
Reference in New Issue