Merge pull request #134 from gnmyt/updates/optimizations

🚀 Optimierungen am Code

client/package.json

@@ -1,6 +1,6 @@
 {
  "name": "client",
- "version": "1.0.4",
+ "version": "1.0.5",
  "scripts": {
  "dev": "vite",
  "build": "vite build",

client/public/locales/de.json

@@ -7,20 +7,26 @@
  "update": "Aktualisieren",
  "close": "Schließen",
  "unset": "Entfernen",
+ "retry": "Erneut versuchen",
+ "login": "Anmelden",
  "password": {
  "title": "Passwort erforderlich",
  "placeholder": "Dein Passwort",
  "wrong": "Das von dir eingegebene Passwort ist falsch"
  },
  "accept": {
- "title": "Nutzungsbedingungen akzeptieren",
- "description": "Mit dem Klick auf <Bold>Akzeptieren</Bold> bestätigst du, dass du die <EULA>EULA</EULA>, <Privacy>Datenschutzerklärung</Privacy> und <Terms>Nutzungsbedingungen</Terms> von Ookla gelesen hast und diesen zustimmst.",
+ "title": "Wir brauchen deine Genehmigung",
+ "description": "Wir nutzen Dienste von Ookla. Mit dem Klick auf <Bold>Akzeptieren</Bold> bestätigst du, dass du die <EULA>EULA</EULA>, <Privacy>Datenschutzerklärung</Privacy> und <Terms>Nutzungsbedingungen</Terms> von Ookla gelesen hast und diesen zustimmst.",
  "button": "Akzeptieren"
+ },
+ "api": {
+ "title": "API nicht erreichbar",
+ "description": "MySpeed konnte die API dieser Instanz nicht erreichen. Bitte versuche es später erneut."
  }
  },
  "dropdown": {
  "settings": "Einstellungen",
- "changes_applied": "Deine Änderungen wurden übernommen.",
+ "changes_applied": "Die Änderungen wurden gespeichert.",
  "changes_unsaved": "Deine Änderungen wurden nicht übernommen. Überprüfe deine Eingabe.",
  "invalid": "Eingabe ungültig",
  "ping": "Optimaler Ping",
@@ -36,7 +42,7 @@
  "resume_tests": "Tests fortsetzen",
  "healthchecks": "Healthchecks",
  "language": "Sprache ändern",
- "info": "Info"
+ "info": "Infos zum Projekt"
  },
  "options": {
  "time": {
@@ -55,6 +61,10 @@
  "export": {
  "json": "JSON-Datei",
  "csv": "CSV-Datei"
+ },
+ "level": {
+ "no_access": "Kein Zugriff",
+ "read_access": "Nur Lesezugriff"
  }
  },
  "update": {
@@ -64,7 +74,7 @@
  "upload_placeholder": "Up-Speed (Mbit/s)",
  "download_title": "Optimalen Down-Speed setzen (Mbit/s)",
  "download_placeholder": "Down-Speed (Mbit/s)",
- "recommendations_title": "Automatische Empfehlungen",
+ "recommendations_title": "Optimale Empfehlungen",
  "recommendations_set": "Automatische Empfehlungen setzen?",
  "server_title": "Speedtest-Server setzen",
  "manually": "Manuell festlegen",
@@ -73,6 +83,8 @@
  "new_password": "Neues Passwort festlegen",
  "password_placeholder": "Neues Passwort",
  "password_removed": "Die Passwortsperre wurde aufgehoben und das festgelegte Passwort wurde entfernt.",
+ "level": "Stufe ändern",
+ "level_title": "Rechte für Besucher",
  "cron_title": "Test-Häufigkeit einstellen",
  "cron_rules": "Cron-Regel",
  "cron_next_test": "Nächster Test:",
@@ -94,7 +106,8 @@
  "start_tooltip": "Speedtest starten",
  "new_update": "Update verfügbar",
  "paused": "Speedtests sind aktuell pausiert. Bitte setze sie fort, wenn du einen machen möchtest.",
- "running": "Es läuft bereits ein Speedtest. Bitte gedulde dich ein wenig, bis dieser fertig ist."
+ "running": "Es läuft bereits ein Speedtest. Bitte warte noch einen Moment.",
+ "admin_login": "Admin-Login"
  },
  "latest": {
  "ping": "Ping",
@@ -125,7 +138,7 @@
  },
  "latest": {
  "title": "Letzter Test",
- "description": "Dies ist die Zeit, die dir zeigt, wann der letzte Test ausgeführt wurde. In diesem Fall wurde der letzte Test am <Bold>{{date}}</Bold> um <Bold>{{time}}</Bold> ausgeführt."
+ "description": "Dies ist die Zeit, die dir zeigt, wann der letzte Test ausgeführt wurde. In diesem Fall fand der letzte am <Bold>{{date}}</Bold> um <Bold>{{time}}</Bold> statt."
  }
  },
  "time": {
@@ -142,7 +155,7 @@
  "not_available": "Es liegen aktuell keine Tests vor",
  "unknown_error": "Unbekannter Fehler:",
  "failed": "Test fehlgeschlagen",
- "recheck": "Bitte überprüfe weitestgehend, ob das öfters passiert.",
+ "recheck": "Bitte überprüfe weitestgehend, ob das öfter passiert.",
  "delete": "Test löschen",
  "average": {
  "title": "Durchschnittsgeschwindigkeit",
@@ -161,13 +174,13 @@
  }
  },
  "errors": {
- "network_unreachable": "Die Internetverbindung scheint unterbrochen gewesen zu sein",
+ "network_unreachable": "Die Internetverbindung war in der Zeit des Tests instabil",
  "took_too_long": "Der Test hat zu lange gedauert und wurde abgebrochen",
  "no_permission": "MySpeed hat keine Berechtigung, diesen Test zu starten",
- "resource_unavailable": "Der Test konnte nicht durchgeführt werden, da die Ressource vorübergehend nicht verfügbar ist",
- "no_route": "Der Test konnte nicht durchgeführt werden, da keine Route zum Host existiert",
+ "resource_unavailable": "Der Test konnte nicht durchgeführt werden, da die Ressource vorübergehend nicht verfügbar war",
+ "no_route": "Der Test konnte nicht durchgeführt werden, da keine Route zum Host existierte",
  "connection_refused": "Der Test konnte nicht durchgeführt werden, da die Verbindung abgelehnt wurde",
- "timed_out": "Die Internetverbindung scheint unterbrochen gewesen zu sein",
+ "timed_out": "Die Internetverbindung war in der Zeit des Tests instabil",
  "config": "Die Konfigurationsdatei konnte nicht geladen werden"
  }
 }

client/public/locales/en.json

@@ -7,20 +7,26 @@
  "update": "Update",
  "close": "Close",
  "unset": "Remove",
+ "retry": "Try again",
+ "login": "Login",
  "password": {
  "title": "Password required",
  "placeholder": "Your password",
  "wrong": "The password you entered is incorrect"
  },
  "accept": {
- "title": "Accept Terms",
- "description": "By clicking <Bold>Accept</Bold>, you acknowledge that you have read and agree to Ookla's <EULA>EULA</EULA>, <Privacy>Privacy Statement</Privacy> and <Terms>Terms of Use</Terms>.",
+ "title": "We need your permission",
+ "description": "We use services from Ookla. By clicking <Bold>Accept</Bold>, you acknowledge that you have read and agree to Ookla's <EULA>EULA</EULA>, <Privacy>Privacy Statement</Privacy> and <Terms>Terms of Use</Terms>.",
  "button": "Accept"
+ },
+ "api": {
+ "title": "API not reachable",
+ "description": "MySpeed could not reach the API of this instance. Please try again later."
  }
  },
  "dropdown": {
  "settings": "Settings",
- "changes_applied": "Your changes have been applied.",
+ "changes_applied": "Your changes have been saved.",
  "changes_unsaved": "Your changes were not applied. Check your input.",
  "invalid": "Input invalid",
  "ping": "Optimal ping",
@@ -36,7 +42,7 @@
  "resume_tests": "Resume tests",
  "healthchecks": "Healthchecks",
  "language": "Change language",
- "info": "Info"
+ "info": "About the project"
  },
  "options": {
  "time": {
@@ -55,6 +61,10 @@
  "export": {
  "json": "JSON file",
  "csv": "CSV file"
+ },
+ "level": {
+ "no_access": "No Access",
+ "read_access": "Read-only Access"
  }
  },
  "update": {
@@ -64,7 +74,7 @@
  "upload_placeholder": "Up speed (Mbps)",
  "download_title": "Set optimal down-speed (Mbps)",
  "download_placeholder": "Down speed (Mbps)",
- "recommendations_title": "Automatic recommendations",
+ "recommendations_title": "Optimal recommendations",
  "recommendations_set": "Set automatic recommendations?",
  "server_title": "Set speedtest server",
  "manually": "Set manually",
@@ -73,6 +83,8 @@
  "new_password": "Set a new password",
  "password_placeholder": "New password",
  "password_removed": "The password lock has been removed and the set password has been removed.",
+ "level": "Change level",
+ "level_title": "Rights for visitors",
  "cron_title": "Set test frequency",
  "cron_rules": "Cron rule",
  "cron_next_test": "Next Test:",
@@ -94,7 +106,8 @@
  "start_tooltip": "Start speedtest",
  "new_update": "Update available",
  "paused": "Speedtests are currently paused. Please continue them if you want to do one.",
- "running": "A speed test is already running. Please be patient until it is finished."
+ "running": "A speedtest is already running. Please wait a moment.",
+ "admin_login": "Admin Login"
  },
  "latest": {
  "ping": "Ping",
@@ -109,7 +122,7 @@
  "healthchecks": "MySpeed uses <HCLink>HealthChecks</HCLink> to notify you when your internet is down. To enable this, put your ping URL in the text box. Read more <WIKILink>here</WIKILink>",
  "credits": "<Link>MySpeed</Link> is provided by GNMYT and uses the <CLILink>Speedtest CLI</CLILink> from Ookla.",
  "recommendations_error": "You have to do at least 10 tests to get an average. It doesn't matter if the tests were done manually or automatically.",
- "recommendations_info": "Based on the last 10 test results, it was found that the optimal ping was <Bold>{{ping}} ms</Bold>, the download at <Bold>{{down}} Mbit/s</Bold> and the upload at <Bold>{{up}} Mbit/s</Bold>. It is best to orientate yourself on your internet contract and only adopt it if it matches that.",
+ "recommendations_info": "Based on the last 10 tests, it was found that the optimal ping was <Bold>{{ping}} ms</Bold>, the download at <Bold>{{down}} Mbit/s</Bold> and the upload at <Bold>{{up}} Mbit/s</Bold>. It is best to orientate yourself on your internet contract and only adopt it if it matches that.",
  "update": "An update to version {{version}} is available. See <Changes>the changes</Changes> and <DLLink>download the update</DLLink>.",
  "down": {
  "title": "Download speed",
@@ -125,7 +138,7 @@
  },
  "latest": {
  "title": "Last test",
- "description": "This is the time that shows you when the last test was run. In this case, the last test was run on <Bold>{{date}}</Bold> at <Bold>{{time}}</Bold>."
+ "description": "This is the time that shows you when the last test was run. In this case, the last one took place on <Bold>{{date}}</Bold> at <Bold>{{time}}</Bold>."
  }
  },
  "time": {
@@ -161,13 +174,13 @@
  }
  },
  "errors": {
- "network_unreachable": "The Internet connection seems to have been interrupted",
+ "network_unreachable": "Internet connection was unstable during the time of the test",
  "took_too_long": "The test took too long and was canceled",
  "no_permission": "MySpeed has no permission to start this test",
- "resource_unavailable": "The test could not be performed because the resource is temporarily unavailable",
- "no_route": "The test could not be performed because there is no route to the host",
+ "resource_unavailable": "The test could not be performed because the resource was temporarily unavailable",
+ "no_route": "The test could not be performed because there was no route to the host",
  "connection_refused": "The test could not be performed because the connection was rejected",
- "timed_out": "The Internet connection seems to have been interrupted",
+ "timed_out": "Internet connection was unstable during the time of the test",
  "config": "The configuration file could not be loaded"
  }
 }

client/src/App.sass

@@ -59,11 +59,19 @@ hr
 @keyframes fadeIn
  0%
  opacity: 0
- transform: scale(1.6)
+ transform: scale(0.4)
  filter: blur(5px)
  100%
  opacity: 1
 
+@keyframes fadeOut
+ 0%
+ opacity: 1
+ 100%
+ opacity: 0
+ transform: scale(0.4)
+ filter: blur(5px)
+
 @media (max-width: 730px)
  ::-webkit-scrollbar
  width: 5px

client/src/common/components/Dropdown/DropdownComponent.jsx

@@ -11,7 +11,7 @@ import {DialogContext} from "@/common/contexts/Dialog";
 import {SpeedtestContext} from "@/common/contexts/Speedtests";
 import {downloadRequest, jsonRequest, patchRequest, postRequest} from "@/common/utils/RequestUtil";
 import {creditsInfo, healthChecksInfo, recommendationsInfo} from "@/common/components/Dropdown/utils/infos";
-import {exportOptions, languageOptions, selectOptions, timeOptions} from "@/common/components/Dropdown/utils/options";
+import {exportOptions, languageOptions, levelOptions, selectOptions, timeOptions} from "@/common/components/Dropdown/utils/options";
 import {parseCron, stringifyCron} from "@/common/components/Dropdown/utils/utils";
 import {changeLanguage, t} from "i18next";
 
@@ -63,13 +63,12 @@ function DropdownComponent() {
  });
 
  const patchDialog = async (key, dialog, toggle = true, postValue = (val) => val) => {
- if (toggle) toggleDropdown();
+ toggle ? toggleDropdown() : setDialog();
 
- setDialog({
- ...(await dialog(config[key])),
+ setTimeout(async () => setDialog({...(await dialog(config[key])),
  onSuccess: value => patchRequest(`/config/${key}`, {value: postValue(value)})
  .then(res => showFeedback(!res.ok ? t("dropdown.changes_unsaved") : undefined))
- })
+ }), 160);
  }
 
  const updatePing = async () => patchDialog("ping", (value) => ({
@@ -119,7 +118,7 @@ function DropdownComponent() {
  const updatePassword = async () => {
  toggleDropdown();
  setDialog({
- title: t("update.new_password"),
+ title: <>{t("update.new_password")} » <a onClick={updatePasswordLevel}>{t("update.level")}</a></>,
  placeholder: t("update.password_placeholder"),
  type: "password",
  unsetButton: localStorage.getItem("password") != null ? "Sperre aufheben" : undefined,
@@ -132,6 +131,10 @@ function DropdownComponent() {
  })
  }
 
+ const updatePasswordLevel = () => patchDialog("passwordLevel", async (value) => ({
+ title: t("update.level_title"), select: true, selectOptions: levelOptions(), value
+ }), false);
+
  const updateCron = async () => {
  toggleDropdown();
  setDialog({
@@ -200,7 +203,7 @@ function DropdownComponent() {
  placeholder: t("update.healthchecks_url"), value,
  buttonText: t("dialog.update"),
  unsetButton: !value.includes("<uuid>") ? "Deaktivieren" : undefined,
- onClear: () => patchDialog("/config/healthChecksUrl", {value: "https://hc-ping.com/<uuid>"})
+ onClear: () => patchRequest("/config/healthChecksUrl", {value: "https://hc-ping.com/<uuid>"})
  .then(() => showFeedback(t("update.healthchecks_activated")))
  }));
 
@@ -235,27 +238,29 @@ function DropdownComponent() {
  {run: updateServer, icon: faServer, text: t("dropdown.server")},
  {run: updatePassword, icon: faKey, text: t("dropdown.password")},
  {run: updateCron, icon: faClock, text: t("dropdown.cron")},
- {run: updateTime, icon: faCalendarDays, text: t("dropdown.time")},
+ {run: updateTime, icon: faCalendarDays, text: t("dropdown.time"), allowView: true},
  {run: exportDialog, icon: faFileExport, text: t("dropdown.export")},
  {run: togglePause, icon: status.paused ? faPlay : faPause, text: t("dropdown." + (status.paused ? "resume_tests" : "pause_tests"))},
  {run: updateIntegration, icon: faCircleNodes, text: t("dropdown.healthchecks")},
- {run: updateLanguage, icon: faGlobeEurope, text: t("dropdown.language")},
- {run: showCredits, icon: faInfo, text: t("dropdown.info")}
+ {run: updateLanguage, icon: faGlobeEurope, text: t("dropdown.language"), allowView: true},
+ {run: showCredits, icon: faInfo, text: t("dropdown.info"), allowView: true}
  ];
 
  return (
  <div className="dropdown dropdown-invisible" id="dropdown" ref={ref}>
  <div className="dropdown-content">
  <h2>{t("dropdown.settings")}</h2>
  <div className="dropdown-entries">
- {options.map(entry => !entry.hr ? (
- <div className="dropdown-item" onClick={entry.run} key={entry.run}>
- <FontAwesomeIcon icon={entry.icon}/>
- <h3>{entry.text}</h3>
- </div>
- ) : <div className="center" key={entry.key}>
- <hr className="dropdown-hr"/>
- </div>)}
+ {options.map(entry => {
+ if (!config.viewMode || (config.viewMode && entry.allowView)) {
+ if (!entry.hr) {
+ return (<div className="dropdown-item" onClick={entry.run} key={entry.run}>
+ <FontAwesomeIcon icon={entry.icon}/>
+ <h3>{entry.text}</h3>
+ </div>);
+ } else return (<div className="center" key={entry.key}><hr className="dropdown-hr"/></div>);
+ }
+ })}
  </div>
  </div>
  </div>

client/src/common/components/Dropdown/styles.sass

@@ -1,11 +1,17 @@
 @import "@/common/styles/colors"
 
+.dropdown
+ visibility: visible
+ opacity: 1
+ transition: opacity 0.1s linear
+ user-select: none
+
 .dropdown-content
  float: right
  margin-right: 10%
  display: inline-block
  position: absolute
- width: 320px
+ width: auto
  overflow: auto
  border-radius: 10px
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2)
@@ -16,6 +22,8 @@
 
 .dropdown-invisible
  visibility: hidden
+ opacity: 0
+ transition: visibility 0s 0.1s, opacity 0.1s linear
 
 .dropdown-content h2
  color: $darker-white