gnmyt · gnmyt · Aug 14, 2022 · Aug 13, 2022 · Aug 13, 2022 · Aug 13, 2022
diff --git a/client/public/index.html → client/index.html b/client/public/index.html → client/index.html
@@ -2,21 +2,21 @@
 <html lang="de">
  <head>
  <meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#232835" />
- <meta property="og:image" content="%PUBLIC_URL%/logo.png" />
+ <meta property="og:image" content="/logo.png" />
  <meta name="description"
  content="Eine deutschsprachige Speedtest Analyse-Software, welche das Internet der letzten 24 Stunden übersichtlich darstellt."
  />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap" rel="stylesheet">
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="manifest" href="/manifest.json" />
  <title>MySpeed</title>
  </head>
  <body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
+ <script type="module" src="/src/index.jsx"></script>
  </body>
 </html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,40 +1,24 @@
 {
  "name": "client",
- "version": "0.0.2",
- "proxy": "http://localhost:5216/",
+ "version": "1.0.3",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
  "dependencies": {
- "@fortawesome/fontawesome": "^1.1.8",
  "@fortawesome/fontawesome-free-solid": "^5.0.13",
  "@fortawesome/fontawesome-svg-core": "^6.1.2",
  "@fortawesome/free-solid-svg-icons": "^6.1.2",
  "@fortawesome/react-fontawesome": "^0.2.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
- "react-scripts": "^5.0.1",
  "sass": "^1.54.3"
  },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
+ "devDependencies": {
+ "@types/react": "^18.0.17",
+ "@types/react-dom": "^18.0.6",
+ "@vitejs/plugin-react": "^2.0.1",
+ "vite": "^3.0.7"
  }
 }
diff --git a/client/src/App.js → client/src/App.jsx b/client/src/App.js → client/src/App.jsx
diff --git a/client/src/components/DropdownComponent.js → client/src/components/DropdownComponent.jsx b/client/src/components/DropdownComponent.js → client/src/components/DropdownComponent.jsx
diff --git a/client/src/components/HeaderComponent.js → client/src/components/HeaderComponent.jsx b/client/src/components/HeaderComponent.js → client/src/components/HeaderComponent.jsx
diff --git a/client/src/components/LatestTestComponent.js → ...nt/src/components/LatestTestComponent.jsx b/client/src/components/LatestTestComponent.js → ...nt/src/components/LatestTestComponent.jsx
diff --git a/client/src/components/SpeedtestComponent.js b/client/src/components/SpeedtestComponent.js
diff --git a/client/src/components/SpeedtestComponent.jsx b/client/src/components/SpeedtestComponent.jsx
@@ -0,0 +1,88 @@
+import React, {useContext} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+ faArrowDown,
+ faArrowUp,
+ faClockRotateLeft,
+ faClose, faInfo,
+ faPingPongPaddleBall
+} from "@fortawesome/free-solid-svg-icons";
+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 className="speedtest">
+ <div className="date">
+ <div className="tooltip-element">
+ <FontAwesomeIcon icon={props.error ? faInfo : faClockRotateLeft}
+ className={"container-icon help-icon icon-" + (props.error ? "error" : "blue")}
+ onClick={props.error ? () => setDialog({
+ title: "Test fehlgeschlagen",
+ description: errorMessage + ". Bitte überprüfe weitestgehend, ob das öfters passiert.",
+ buttonText: "Okay",
+ unsetButton: true,
+ unsetButtonText: "Test löschen",
+ onClear: () => fetch("/api/speedtests/"+props.id, {headers: passwordHeaders, method: "DELETE"})
+ .then(updateTests)
+ }) : () => setDialog({
+ title: "Testergebnis",
+ description: <>Dieser Test erreichte eine maximale Downloadgeschwindigkeit von <span className="dialog-value">{props.down} Mbit/s </span>
+ und eine maximale Uploadgeschwindigkeit von <span className="dialog-value">{props.up} Mbit/s</span>. Er wurde <span className="dialog-value">{props.type === "custom"
+ ? "von dir" : "automatisch"}</span> angelegt und hat <span className="dialog-value">{props.duration} Sekunden</span> gedauert.</>,
+ buttonText: "Okay",
+ unsetButton: true,
+ unsetButtonText: "Test löschen",
+ onClear: () => fetch("/api/speedtests/"+props.id, {headers: passwordHeaders, method: "DELETE"})
+ .then(updateTests)
+ })} />
+ <span className="tooltip">{props.type === "custom" ? "Benutzerdefiniert" :"Automatisiert"}</span>
+ </div>
+
+ <h2 className="date-text">Um {props.time}</h2>
+ </div>
+ <div className="speedtest-row">
+ <FontAwesomeIcon icon={props.error ? faClose : faPingPongPaddleBall}
+ className={"speedtest-icon icon-" + props.pingLevel}/>
+ <h2 className="speedtest-text">{props.error ? "" : props.ping}</h2>
+ </div>
+ <div className="speedtest-row">
+ <FontAwesomeIcon icon={props.error ? faClose : faArrowDown}
+ className={"speedtest-icon icon-" + props.downLevel}/>
+ <h2 className="speedtest-text">{props.error ? "" : props.down}</h2>
+ </div>
+ <div className="speedtest-row">
+ <FontAwesomeIcon icon={props.error ? faClose : faArrowUp}
+ className={"speedtest-icon icon-" + props.upLevel}/>
+ <h2 className="speedtest-text">{props.error ? "" : props.up}</h2>
+ </div>
+ </div>
+ );
+}
+
+export default SpeedtestComponent;
diff --git a/client/src/components/TestAreaComponent.js → client/src/components/TestAreaComponent.jsx b/client/src/components/TestAreaComponent.js → client/src/components/TestAreaComponent.jsx
diff --git a/client/src/context/ConfigContext.js → client/src/context/ConfigContext.jsx b/client/src/context/ConfigContext.js → client/src/context/ConfigContext.jsx
diff --git a/client/src/context/DialogContext.js → client/src/context/DialogContext.jsx b/client/src/context/DialogContext.js → client/src/context/DialogContext.jsx
diff --git a/client/src/context/SpeedtestContext.js → client/src/context/SpeedtestContext.jsx b/client/src/context/SpeedtestContext.js → client/src/context/SpeedtestContext.jsx
diff --git a/client/src/context/StatusContext.js → client/src/context/StatusContext.jsx b/client/src/context/StatusContext.js → client/src/context/StatusContext.jsx
diff --git a/client/src/index.js → client/src/index.jsx b/client/src/index.js → client/src/index.jsx
diff --git a/client/vite.config.js b/client/vite.config.js
@@ -0,0 +1,13 @@
+import react from '@vitejs/plugin-react'
+
+export default {
+ plugins: [react()],
+ build: {
+ outDir: 'build'
+ },
+ server: {
+ proxy: {
+ "/api": "http://localhost:5216/"
+ }
+ }
+}
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
  "name": "myspeed",
  "version": "1.0.3",
  "scripts": {
- "client": "cd client && npm start",
+ "client": "cd client && npm run dev",
  "server": "nodemon server",
  "build": "cd client && npm run build",
  "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""