mirror/myspeed
1
0
Fork 0
mirror of https://github.com/gnmyt/myspeed.git synced 2026-05-05 11:40:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
🖌️ Verbesserungen am Design
This commit is contained in:
Mathias Wagner
2022-08-07 19:13:31 +02:00
committed by GitHub
parent a9fc4757ed bfda333c3a
commit b4a48e67e0
18 changed files with 4019 additions and 3665 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package-lock.json
Generated
+3889 -3571
View File
File diff suppressed because it is too large Load Diff
client/package.json
+1 -5
View File
@@ -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
+2 -1
View File
@@ -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
+3 -2
View File
@@ -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
+9 -1
View File
@@ -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
+50 -57
View File
@@ -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
+1 -1
View File
@@ -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
+3 -7
View File
@@ -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
+19 -2
View File
@@ -11,6 +11,17 @@ 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);
@@ -18,6 +29,13 @@ function SpeedtestComponent(props) {
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
+1 -1
View File
@@ -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 -4
View File
@@ -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
+12 -3
View File
@@ -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
client/src/style/Dropdown.sass
+4 -1
View File
@@ -34,12 +34,15 @@
display: flex
align-items: center
cursor: pointer
color: #DFDFDF
.dropdown-item *
margin: 0
font-size: 16pt
font-weight: 500
color: #DFDFDF
.dropdown-item:hover
color: #45C65A
.dropdown-item svg
width: 25px
client/src/style/Header.sass
+1
View File
@@ -28,6 +28,7 @@
.header-icon:hover
transform: scale(1.1)
color: #45C65A
@media (max-width: 425px)
.header-main
client/src/style/LatestTest.sass
+10 -5
View File
@@ -6,21 +6,26 @@
border-radius: 15px
width: 80rem
flex-wrap: wrap
transition: all 0.5s
animation: fadeIn 0.5s
.pulse
animation: pulse 5s infinite
border: #45c65a 2px solid
animation: pulse 2s infinite
@keyframes pulse
0%
border: #45c65a 2px solid
50%
border: #2d7134 2px solid
box-shadow: 0 0 0 0 #14AB37FF
70%
box-shadow: 0 0 0 10px #CCA92C00
100%
border: #45c65a 2px solid
box-shadow: 0 0 0 0 #CCA92C00
.inner-container
margin-left: 2rem
margin-right: 2rem
transition: all 0.5s
animation: fadeIn 0.5s
.container-header
display: flex
client/src/style/Speedtest.sass
+2
View File
@@ -7,6 +7,8 @@
justify-content: space-between
width: 80rem
flex-wrap: wrap
transition: all 0.5s
animation: fadeIn 0.5s
.speedtest-row
display: flex
server/routes/config.js
+1 -1
View File
@@ -27,7 +27,7 @@ app.patch("/:key", async (req, res) => {
return res.status(400).json({message: "You need to provide a number in order to change this"});
if (req.params.key === "ping")
req.body.value = req.body.value.split(".")[0];
req.body.value = req.body.value.toString().split(".")[0];
if (req.params.key === "password" && req.body.value !== "none") req.body.value = await require('bcrypt').hash(req.body.value, 10);
server/routes/system.js
+3 -3
View File
@@ -1,15 +1,15 @@
const app = require('express').Router();
const version = require('../../package.json').version;
const remote_url = "https://raw.githubusercontent.com/gnmyt/myspeed/release/package.json";
const remote_url = "https://api.github.com/repos/gnmyt/myspeed/releases/latest";
const axios = require('axios');
const fs = require("fs");
app.get("/version", async (req, res) => {
try {
res.json({local: version, remote: (await axios.get(remote_url)).data.version});
res.json({local: version, remote: (await axios.get(remote_url)).data.tag_name});
} catch (e) {
res.status(500).json({message: "An error occurred"});
res.json({local: version, remote: "0"});
}
});