Merge pull request #24 from gnmyt/features/site-improvements

🖌️ Verbesserungen am Design

client/package.json

@@ -8,14 +8,10 @@
  "@fortawesome/fontawesome-svg-core": "^6.1.2",
  "@fortawesome/free-solid-svg-icons": "^6.1.2",
  "@fortawesome/react-fontawesome": "^0.2.0",
- "@testing-library/jest-dom": "^5.16.4",
- "@testing-library/react": "^13.3.0",
- "@testing-library/user-event": "^14.4.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "^5.0.1",
- "sass": "^1.54.0",
- "web-vitals": "^2.1.4"
+ "sass": "^1.54.3"
  },
  "scripts": {
  "start": "react-scripts start",

client/public/index.html

@@ -4,7 +4,8 @@
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#2F3136" />
+ <meta name="theme-color" content="#232835" />
+ <meta property="og:image" content="%PUBLIC_URL%/logo.png" />
  <meta name="description"
  content="Eine deutschsprachige Speedtest Analyse-Software, welche das Internet der letzten 24 Stunden übersichtlich darstellt."
  />

client/public/manifest.json

@@ -1,6 +1,7 @@
 {
  "short_name": "MySpeed",
- "name": "Eine deutschsprachige Speedtest Analyse-Software, welche das Internet der letzten 24 Stunden übersichtlich darstellt.",
+ "name": "MySpeed - Speedtests",
+ "description": "Eine deutschsprachige Speedtest Analyse-Software, welche das Internet der letzten 24 Stunden übersichtlich darstellt.",
  "icons": [
  {
  "src": "favicon.ico",
@@ -15,5 +16,5 @@
  ],
  "start_url": ".",
  "display": "standalone",
- "theme_color": "#2F3136"
+ "theme_color": "#232835"
 }

client/src/App.sass

@@ -55,4 +55,12 @@ hr
  margin: 2rem
  width: 3rem
  border: 1px solid #727676
- border-radius: 25px
+ border-radius: 25px
+
+@keyframes fadeIn
+ 0%
+ opacity: 0
+ transform: scale(1.6)
+ filter: blur(5px)
+ 100%
+ opacity: 1

client/src/components/DropdownComponent.js

@@ -12,12 +12,13 @@ import {
  faServer, faWandMagicSparkles
 } from "@fortawesome/free-solid-svg-icons";
 import {DialogContext} from "../context/DialogContext";
+import {ConfigContext} from "../context/ConfigContext";
 
 let icon;
 
 export const toggleDropdown = (setIcon) => {
  if (setIcon) icon = setIcon;
- let classList = document.getElementsByClassName("dropdown")[0].classList;
+ let classList = document.getElementById("dropdown").classList;
  if (classList.contains("dropdown-invisible")) {
  classList.remove("dropdown-invisible");
  icon(faClose);
@@ -29,26 +30,59 @@ export const toggleDropdown = (setIcon) => {
 
 function DropdownComponent() {
 
+ const reloadConfig = useContext(ConfigContext)[1];
  const [setDialog] = useContext(DialogContext);
  const [pauseState, setPauseState] = useState(false);
 
- let headers = localStorage.getItem("password") ? {password: localStorage.getItem("password")} : {}
- headers['content-type'] = 'application/json'
+ let headers = localStorage.getItem("password") ? {password: localStorage.getItem("password")} : {};
+ headers['content-type'] = 'application/json';
 
- const updatePing = async () => {
- toggleDropdown();
- fetch("/api/config/ping", {headers: headers}).then(res => res.json())
- .then(ping => setDialog({
- title: "Optimalen Ping setzen (ms)",
- placeholder: "Ping",
- value: ping.value,
+ useEffect(() => {
+ const onPress = event => {
+ if (event.code === "Escape" && !document.getElementById("dropdown").classList.contains("dropdown-invisible"))
+ toggleDropdown(icon);
+ }
+ document.addEventListener("keyup", onPress);
+ return () => document.removeEventListener("keyup", onPress);
+ }, []);
+
+ const patchDialog = (path, dialog, toggle = true) => {
+ if (toggle) toggleDropdown();
+ fetch(path, {headers}).then(res => res.json())
+ .then(value => setDialog({
+ ...dialog(value.value),
  onSuccess: value => {
- fetch("/api/config/ping", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})})
+ fetch(path, {headers, method: "PATCH", body: JSON.stringify({value})})
  .then(() => showFeedback());
  }
  }));
  }
 
+ const showFeedback = (customText, reload = true) => {
+ setDialog({
+ title: "MySpeed", description: customText || <>Deine Änderungen wurden übernommen.</>, buttonText: "Okay",
+ onSuccess: () => reload ? reloadConfig() : "", onClose: () => reloadConfig()
+ });
+ }
+
+ const updatePing = async () => {
+ patchDialog("/api/config/ping", (value) => ({
+ title: "Optimalen Ping setzen (ms)", placeholder: "Ping", value
+ }));
+ }
+
+
+ const updateDownload = async () => {
+ patchDialog("/api/config/download", (value) => ({
+ title: "Optimalen Down-Speed setzen (Mbit/s)", placeholder: "Down-Speed", value
+ }));
+ }
+
+ const updateUpload = async () => {
+ patchDialog("/api/config/upload", (value) => ({
+ title: "Optimalen Up-Speed setzen (Mbit/s)", placeholder: "Up-Speed", value
+ }));
+ }
 
  function setPause(paused) {
  let element = document.getElementsByClassName("analyse-area")[0];
@@ -83,34 +117,6 @@ function DropdownComponent() {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
- const updateDownload = async () => {
- toggleDropdown();
- fetch("/api/config/download", {headers: headers}).then(res => res.json())
- .then(down => setDialog({
- title: "Optimalen Down-Speed setzen (Mbit/s)",
- placeholder: "Down-Speed",
- value: down.value,
- onSuccess: value => {
- fetch("/api/config/download", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})})
- .then(() => showFeedback());
- }
- }));
- }
-
- const updateUpload = async () => {
- toggleDropdown();
- fetch("/api/config/upload", {headers: headers}).then(res => res.json())
- .then(up => setDialog({
- title: "Optimalen Up-Speed setzen (Mbit/s)",
- placeholder: "Up-Speed",
- value: up.value,
- onSuccess: value => {
- fetch("/api/config/upload", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})})
- .then(() => showFeedback());
- }
- }));
- }
-
  const updatePassword = async () => {
  toggleDropdown();
  setDialog({
@@ -156,17 +162,9 @@ function DropdownComponent() {
  }
 
  const updateServerManually = () => {
- fetch("/api/config/serverId", {headers: headers}).then(res => res.json())
- .then(async server => setDialog({
- title: "Speedtest-Server setzen",
- placeholder: "Server-ID",
- type: "number",
- value: server.value,
- onSuccess: value => {
- fetch("/api/config/serverId", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})})
- .then(() => showFeedback(undefined, false));
- }
- }));
+ patchDialog("/api/config/serverId", (value) => ({
+ title: "Speedtest-Server setzen", placeholder: "Server-ID", type: "number", value: value,
+ }), false);
  }
 
  function togglePause() {
@@ -198,11 +196,6 @@ function DropdownComponent() {
  und verwendet die <a href="https://www.speedtest.net/apps/cli" target="_blank" rel="noreferrer">Speedtest-CLI</a> von Ookla.</>, buttonText: "Schließen"});
  }
 
- const showFeedback = (customText, reload = true) => {
- setDialog({title: "MySpeed", description: customText || <>Deine Änderungen wurden übernommen.</>, buttonText: "Okay",
- onSuccess: () => reload ? window.location.reload() : "", onClose: () => window.location.reload()});
- }
-
  const recommendedSettings = async () => {
  toggleDropdown();
  fetch("/api/recommendations", {headers: headers}).then(res => res.json())
@@ -281,8 +274,8 @@ function DropdownComponent() {
  }
 
  return (
- <div className="dropdown dropdown-invisible">
- <div id="dropdown" className="dropdown-content">
+ <div className="dropdown dropdown-invisible" id="dropdown">
+ <div className="dropdown-content">
  <h2>Einstellungen</h2>
  <div className="dropdown-entries">
  <div className="dropdown-item" onClick={updatePing}>

client/src/components/HeaderComponent.js

@@ -50,7 +50,7 @@ function HeaderComponent() {
  href="https://github.com/gnmyt/myspeed/releases/latest"
  rel="noreferrer">die Änderungen
  an</a> und <a target="_blank"
- href="https://github.com/gnmyt/myspeed/wiki/Einrichtung-Linux"
+ href="https://myspeed.gnmyt.dev/setup/linux/"
  rel="noreferrer">lade dir das Update
  herunter</a>.</>
  })}/></div>

client/src/components/LatestTestComponent.js

@@ -12,7 +12,7 @@ function LatestTestComponent() {
  const [latestTestTime, setLatestTestTime] = useState("-");
  const [setDialog] = useContext(DialogContext);
  const [speedtests] = useContext(SpeedtestContext);
- const config = useContext(ConfigContext);
+ const config = useContext(ConfigContext)[0];
 
  useEffect(() => setLatest(speedtests[0]), [speedtests]);
 
@@ -45,9 +45,7 @@ function LatestTestComponent() {
  <div className="inner-container">
  <div className="container-header">
  <FontAwesomeIcon onClick={() => setDialog({title: "Download-Geschwindigkeit", description: "Die Downloadgeschwindigkeit wirkt sich " +
- "auf dein Surferlebnis aus. Umso mehr du bekommst, desto besser und stabiler ist das Internet. " +
- "Achte hierbei auch auf den Internetvertrag und prüfe, ob die Bedingungen erfüllt werden. " +
- "Du kannst nur so viel bekommen, wie dein Anbieter auch verspricht.", buttonText: "Okay"})}
+ "auf dein Surferlebnis aus. Umso mehr du bekommst, desto schneller kann dein Computer Daten empfangen.", buttonText: "Okay"})}
  icon={faArrowDown} className={"container-icon help-icon icon-" + getIconBySpeed(latest.download, config.download, true)}/>
  <h2 className="container-text">Download<span className="container-subtext">Mbit/s</span></h2>
  </div>
@@ -60,9 +58,7 @@ function LatestTestComponent() {
  <div className="inner-container">
  <div className="container-header">
  <FontAwesomeIcon onClick={() => setDialog({title: "Upload-Geschwindigkeit", description: "Die Uploadgeschwindigkeit wirkt sich " +
- "auf dein Surferlebnis aus. Umso mehr du bekommst, desto besser und stabiler ist das Internet. " +
- "Achte hierbei auch auf den Internetvertrag und prüfe, ob die Bedingungen erfüllt werden. " +
- "Du kannst nur so viel bekommen, wie dein Anbieter auch verspricht.", buttonText: "Okay"})}
+ "auf dein Surferlebnis aus. Umso mehr du bekommst, desto schneller kann dein Computer Daten senden.", buttonText: "Okay"})}
  icon={faArrowUp} className={"container-icon help-icon icon-" + getIconBySpeed(latest.upload, config.upload, true)}/>
  <h2 className="container-text">Upload<span className="container-subtext">Mbit/s</span></h2>
  </div>

client/src/components/SpeedtestComponent.js

@@ -11,13 +11,31 @@ import "../style/Speedtest.sass";
 import {DialogContext} from "../context/DialogContext";
 import {SpeedtestContext} from "../context/SpeedtestContext";
 
+const errors = {
+ "Network unreachable": "Die Internetverbindung scheint unterbrochen gewesen zu sein",
+ "Timeout occurred in connect": "Der Test hat zu lange gedauert und wurde abgebrochen",
+ "permission denied": "MySpeed hat keine Berechtigung, diesen Test zu starten",
+ "Resource temporarily unavailable": "Der Test konnte nicht durchgeführt werden, da die Ressource vorübergehend nicht verfügbar ist",
+ "No route to host": "Der Test konnte nicht durchgeführt werden, da keine Route zum Host existiert",
+ "Connection refused": "Der Test konnte nicht durchgeführt werden, da die Verbindung abgelehnt wurde",
+ "timed out": "Der Test konnte nicht durchgeführt werden, da die Verbindung zu lange gedauert hat",
+ "Could not retrieve or read configuration": "Die Konfigurationsdatei konnte nicht geladen werden",
+}
+
 function SpeedtestComponent(props) {
 
  const [setDialog] = useContext(DialogContext);
  const updateTests = useContext(SpeedtestContext)[1];
 
  let passwordHeaders = localStorage.getItem("password") ? {password: localStorage.getItem("password")} : {}
 
+ let errorMessage = "Unbekannter Fehler: " + props.error;
+
+ if (props.error) {
+ for (let errorsKey in errors)
+ if (props.error.includes(errorsKey)) errorMessage = errors[errorsKey];
+ }
+
  return (
  <div>
  <div className="speedtest">
@@ -27,8 +45,7 @@ function SpeedtestComponent(props) {
  className={"container-icon help-icon icon-" + (props.error ? "error" : "blue")}
  onClick={props.error ? () => setDialog({
  title: "Test fehlgeschlagen",
- description: props.error.includes("Network unreachable") ? "Die Internetverbindung scheint unterbrochen gewesen zu sein. " +
- "Bitte überprüfe weitestgehend, ob das öfters passiert." : "Unbekannter Fehler: " + props.error,
+ description: errorMessage + ". Bitte überprüfe weitestgehend, ob das öfters passiert.",
  buttonText: "Okay",
  unsetButton: true,
  unsetButtonText: "Test löschen",

client/src/components/TestAreaComponent.js

@@ -5,7 +5,7 @@ import {ConfigContext} from "../context/ConfigContext";
 import {SpeedtestContext} from "../context/SpeedtestContext";
 
 function TestArea() {
- const config = useContext(ConfigContext);
+ const config = useContext(ConfigContext)[0];
  const [speedtests] = useContext(SpeedtestContext);
 
  if (Object.entries(config).length === 0) return (<></>)

client/src/context/ConfigContext.js

@@ -8,8 +8,7 @@ export const ConfigProvider = (props) => {
  const [config, setConfig] = useState({});
  const [setDialog] = useContext(DialogContext);
 
-
- useEffect(() => {
+ const reloadConfig = () => {
  let passwordHeaders = localStorage.getItem("password") ? {password: localStorage.getItem("password")} : {}
  fetch("/api/config", {headers: passwordHeaders})
  .then(res => {
@@ -30,10 +29,15 @@ export const ConfigProvider = (props) => {
  window.location.reload();
  }
  }));
- }, [setDialog]);
+ }
+
+ useEffect(() => {
+ reloadConfig();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
 
  return (
- <ConfigContext.Provider value={config}>
+ <ConfigContext.Provider value={[config, reloadConfig]}>
  {props.children}
  </ConfigContext.Provider>
  )

client/src/style/Dialog.sass

@@ -6,20 +6,20 @@
  right: 0
  width: 100%
  height: 100%
- background-color: rgb(0, 0, 0)
  background-color: rgba(0, 0, 0, 0.6)
  display: flex
  align-items: center
  z-index: 10
  justify-content: center
+ backdrop-filter: blur(2px)
 
 .dialog
  width: 480px
  padding: 15px
  background-color: #27282B
  border-radius: 15px
- transform: scale(0.9)
- transition: opacity 300ms, transform 300ms
+ transition: all 0.2s
+ animation: fadeIn 0.2s
 
 .dialog-speedtest
  display: flex
@@ -64,6 +64,9 @@
 .dialog-icon
  cursor: pointer
 
+.dialog-icon:hover
+ color: #B83939
+
 .dialog-input
  font-size: 18pt
  padding: 15px
@@ -88,9 +91,15 @@
  margin-left: 5px
  margin-right: 5px
 
+.dialog-btn:hover
+ background-color: #3EA95A
+
 .dialog-secondary
  background-color: #C64545
 
+.dialog-secondary:hover
+ background-color: #B83939
+
 .lds-ellipsis
  display: inline-block
  position: relative