Created the latest test component

2026-04-27 15:32:09 -05:00 · 2022-04-09 23:18:32 +02:00
parent de60d08d8e
commit c419b3dfdc
2 changed files with 133 additions and 0 deletions
@@ -0,0 +1,74 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faArrowDown, faArrowUp, faClockRotateLeft, faPingPongPaddleBall} from "@fortawesome/free-solid-svg-icons";
+import "../style/LatestTest.sass";
+import {generateRelativeTime, getIconBySpeed} from "../HelperFunctions";
+import {useContext, useEffect, useState} from "react";
+import {ConfigContext} from "../context/ConfigContext";
+
+function LatestTestComponent() {
+    const [latest, setLatest] = useState({});
+    const config = useContext(ConfigContext);
+
+    useEffect(() => {
+        let passwordHeaders = localStorage.getItem("password") ? {password: localStorage.getItem("password")} : {}
+        fetch("/api/speedtests/latest", {headers: passwordHeaders})
+            .then(res => res.json())
+            .then(latest => setLatest(latest));
+
+    }, [setLatest]);
+
+    if (Object.entries(config).length === 0) return (<></>)
+
+    return (
+        <div className="analyse-area">
+            {/* Ping */}
+            <div className="inner-container">
+                <div className="container-header">
+                    <FontAwesomeIcon icon={faPingPongPaddleBall}
+                                     className={"container-icon icon-" + getIconBySpeed(latest.ping, config.ping, false)}/>
+                    <h2 className="container-text">Ping<span className="container-subtext">ms</span></h2>
+                </div>
+                <div className="container-main">
+                    <h2>{latest.ping}</h2>
+                </div>
+            </div>
+
+            {/* Download */}
+            <div className="inner-container">
+                <div className="container-header">
+                    <FontAwesomeIcon icon={faArrowDown}
+                                     className={"container-icon icon-" + getIconBySpeed(latest.download, config.download, true)}/>
+                    <h2 className="container-text">Download<span className="container-subtext">Mbps</span></h2>
+                </div>
+                <div className="container-main">
+                    <h2>{latest.download}</h2>
+                </div>
+            </div>
+
+            {/* Upload */}
+            <div className="inner-container">
+                <div className="container-header">
+                    <FontAwesomeIcon icon={faArrowUp}
+                                     className={"container-icon icon-" + getIconBySpeed(latest.upload, config.upload, true)}/>
+                    <h2 className="container-text">Upload<span className="container-subtext">Mbps</span></h2>
+                </div>
+                <div className="container-main">
+                    <h2>{latest.upload}</h2>
+                </div>
+            </div>
+
+            {/* Latest update */}
+            <div className="inner-container">
+                <div className="container-header">
+                    <FontAwesomeIcon icon={faClockRotateLeft} className="container-icon icon-blue"/>
+                    <h2 className="container-text">Letztes Update<span className="container-subtext">vor</span></h2>
+                </div>
+                <div className="container-main">
+                    <h2>{generateRelativeTime(latest.created)}</h2>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default LatestTestComponent;
@@ -0,0 +1,59 @@
+.analyse-area
+  margin-top: 2rem
+  display: flex
+  padding: 3rem 2rem
+  border: #DFDFDF 1px solid
+  border-radius: 15px
+  width: 80rem
+  flex-wrap: wrap
+
+.inner-container
+  margin-left: 2rem
+  margin-right: 2rem
+
+.container-header
+  display: flex
+
+
+.container-text
+  margin: 0 0 0 25px
+  color: #DFDFDF
+  font-weight: 700
+  font-size: 24pt
+
+.container-subtext
+  color: #B0B0B0
+  font-size: 16pt
+
+.container-main
+  text-align: center
+  color: #C8C8C8
+  h2
+    font-size: 28pt
+    margin: 1rem
+
+@media (max-width: 1370px)
+  .analyse-area
+    flex-direction: column
+    width: 60rem
+
+@media (max-width: 1050px)
+  .analyse-area
+    width: 40rem
+
+@media (max-width: 730px)
+  .analyse-area
+    width: 32rem
+
+@media (max-width: 605px)
+  .analyse-area
+    width: 25rem
+
+@media (max-width: 475px)
+  .analyse-area
+    padding-left: 1rem
+    padding-bottom: 1rem
+    padding-top: 1rem
+    width: 15rem
+  .inner-container
+    margin: 0