Skip to content
Snippets Groups Projects
Commit 00d9b2c9 authored by Aymeric Chaumont's avatar Aymeric Chaumont
Browse files

udpated waiting time component to be time-dependent

parent a71c9c50
No related branches found
No related tags found
2 merge requests!29Time dependence,!28improve front
Pipeline #43879 passed
...@@ -11,14 +11,28 @@ export default function Comments({ place }) { ...@@ -11,14 +11,28 @@ export default function Comments({ place }) {
setComments(res.data); setComments(res.data);
}) })
.catch((e) => console.log(e)); .catch((e) => console.log(e));
}); }, []);
return ( return (
<div style={{ width: "25%", overflowY: "scroll" }}> <div style={{ width: "25%", overflowY: "scroll" }}>
{comments.map((comment, index) => ( {comments.map((comment, index) => (
<div key={index} style={{ display: "flex", flexDirection: "column", border: "solid black 1px", borderRadius: "0.5rem", margin: "1rem", padding: "0.5rem" }}> <div
key={index}
style={{
display: "flex",
flexDirection: "column",
border: "solid black 1px",
borderRadius: "0.5rem",
margin: "1rem",
padding: "0.5rem",
}}
>
<div style={{ marginBottom: "0.5rem", textAlign: "left" }}>{comment.comment}</div> <div style={{ marginBottom: "0.5rem", textAlign: "left" }}>{comment.comment}</div>
<div style={{fontSize: "0.7rem", alignSelf: "flex-start", marginLeft: "0.2rem"}}>{comment.date.split("T").reduce((date, hours) => ${hours.substring(0,5)} le ${date}`)}</div> <div style={{ fontSize: "0.7rem", alignSelf: "flex-start", marginLeft: "0.2rem" }}>
{comment.date
.split("T")
.reduce((date, hours) => ${hours.substring(0, 5)} le ${date}`)}
</div>
</div> </div>
))} ))}
</div> </div>
......
...@@ -5,26 +5,30 @@ import "../styles/WaitingTime.css"; ...@@ -5,26 +5,30 @@ import "../styles/WaitingTime.css";
export default function WaitingTime({ place }) { export default function WaitingTime({ place }) {
const url = process.env.REACT_APP_BASE_URL_BACK + "/" + place + "/waiting_time"; const url = process.env.REACT_APP_BASE_URL_BACK + "/" + place + "/waiting_time";
const [post, setPost] = React.useState(null); const [post, setPost] = React.useState([null, null]);
React.useEffect(() => { React.useEffect(() => {
axios.get(url).then((response) => { axios.get(url).then((res) => {
if (response.data < 60) { setPost(res.data);
setPost(0);
} else {
setPost(Math.round(response.data / 60));
}
}); });
}, [url]); }, [url]);
return ( return (
<div className="parent"> <div className="parent">
{post ? ( {post[1] ? (
<div className="waiting-time">
Le RU ouvre aujourd&apos;hui à{" "}
<b>
{String(post[0]).padStart(2, "0")}h{String(post[1]).padStart(2, "0")}
</b>
.
</div>
) : post[0] ? (
<div className="waiting-time"> <div className="waiting-time">
Temps d&apos;attente estimé à <b>{post} minutes</b>. Le temps d&apos;attente est estimé à <b>{post[0]} minutes.</b>
</div> </div>
) : ( ) : (
<div>Pas de données...</div> <div className="waiting-time">Le RU est fermé pour aujourd&apos;hui.</div>
)} )}
</div> </div>
); );
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment