Merge pull request #134 from gnmyt/updates/optimizations

🚀 Optimierungen am Code

Author: gnmyt

client/package-lock.json

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

client/package.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/de.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/public/locales/en.json

@@ -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/App.sass

@@ -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/DropdownComponent.jsx

@@ -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