📦 Sammelansicht von Servern

client/public/locales/de.json

@@ -104,7 +104,7 @@
  "view_title": "Ansicht wechseln"
  },
  "header": {
- "title": "Netzwerkanalyse",
+ "title": "MySpeed",
  "running_tooltip": "Speedtest läuft",
  "start_tooltip": "Speedtest starten",
  "new_update": "Update verfügbar",
@@ -237,5 +237,34 @@
  "down": "Download-Werte",
  "up": "Upload-Werte"
  }
+ },
+ "nodes": {
+ "add": "Server hinzufügen",
+ "create": "Hinzufügen",
+ "this_server": "Dieser Server",
+ "created": "Der Server wurde erfolgreich hinzugefügt",
+ "password_required": "Für diese Node ist ein Passwort erforderlich",
+ "update_password": "Bitte aktualisiere das Passwort dieser Node",
+ "password_outdated": "Passwort veraltet",
+ "password_updated": "Das Passwort wurde erfolgreich aktualisiert",
+ "placeholder": {
+ "name": "MySpeed Instanz",
+ "url": "https://dein-server.de"
+ },
+ "group": {
+ "name": "Servername",
+ "url": "Serveradresse"
+ },
+ "delete": {
+ "title": "Server löschen",
+ "description": "Der Server <Bold>{{name}}</Bold> (#{{id}}) wird gelöscht. Diese Aktion kann nicht rückgängig gemacht werden. Möchtest du fortfahren?",
+ "yes": "Ja, löschen",
+ "success": "Der Server wurde erfolgreich gelöscht"
+ },
+ "messages": {
+ "not_reachable": "Server ist nicht erreichbar",
+ "password_changed": "Passwort wurde geändert",
+ "tests_pending": "Testergebnisse ausstehend"
+ }
  }
 }

client/public/locales/en.json

@@ -104,7 +104,7 @@
  "view_title": "Switch view"
  },
  "header": {
- "title": "Network Analysis",
+ "title": "MySpeed",
  "running_tooltip": "Speedtest running",
  "start_tooltip": "Start speedtest",
  "new_update": "Update available",
@@ -237,5 +237,34 @@
  "down": "Download values",
  "up": "Upload values"
  }
+ },
+ "nodes": {
+ "add": "Add server",
+ "create": "Add",
+ "this_server": "This server",
+ "created": "The server has been successfully added",
+ "password_required": "This node requires a password",
+ "update_password": "Please update the password of this node",
+ "password_outdated": "Password outdated",
+ "password_updated": "The password has been successfully updated",
+ "placeholder": {
+ "name": "MySpeed instance",
+ "url": "https://your-server.com"
+ },
+ "group": {
+ "name": "Server name",
+ "url": "Server address"
+ },
+ "delete": {
+ "title": "Delete server",
+ "description": "The server <Bold>{{name}}</Bold> (#{{id}}) will be deleted. This action cannot be undone. Do you want to continue?",
+ "yes": "Yes, delete",
+ "success": "The server has been deleted successfully"
+ },
+ "messages": {
+ "not_reachable": "Server is not reachable",
+ "password_changed": "Password changed",
+ "tests_pending": "Test results pending"
+ }
  }
 }

client/src/App.jsx

@@ -14,6 +14,8 @@ import {ViewContext, ViewProvider} from "@/common/contexts/View";
 import Statistics from "@/pages/Statistics";
 import {t} from "i18next";
 import {ToastNotificationProvider} from "@/common/contexts/ToastNotification";
+import Nodes from "@/pages/Nodes";
+import {NodeProvider} from "@/common/contexts/Node";
 
 const MainContent = () => {
  const [view] = useContext(ViewContext);
@@ -30,27 +32,33 @@ const App = () => {
  const [translationsLoaded, setTranslationsLoaded] = useState(false);
  const [translationError, setTranslationError] = useState(false);
 
+ const [showNodePage, setShowNodePage] = useState(false);
+
  i18n.on("initialized", () => setTranslationsLoaded(true));
  i18n.on("failedLoading", () => setTranslationError(true));
 
  return (
  <>
  {!translationsLoaded && !translationError && <Loading/>}
  {translationError && <Error text="Failed to load translations"/>}
- {translationsLoaded && !translationError && <SpeedtestProvider>
+ <InputDialogProvider>
  <ToastNotificationProvider>
- <InputDialogProvider>
- <ViewProvider>
- <ConfigProvider>
- <StatusProvider>
- <HeaderComponent/>
- <MainContent/>
- </StatusProvider>
- </ConfigProvider>
- </ViewProvider>
- </InputDialogProvider>
+ <ConfigProvider showNodePage={setShowNodePage}>
+ <NodeProvider>
+ {translationsLoaded && !translationError && showNodePage &&
+ <Nodes setShowNodePage={setShowNodePage}/>}
+ {translationsLoaded && !translationError && !showNodePage && <SpeedtestProvider>
+ <ViewProvider>
+ <StatusProvider>
+ <HeaderComponent showNodePage={setShowNodePage}/>
+ <MainContent/>
+ </StatusProvider>
+ </ViewProvider>
+ </SpeedtestProvider>}
+ </NodeProvider>
+ </ConfigProvider>
  </ToastNotificationProvider>
- </SpeedtestProvider>}
+ </InputDialogProvider>
  </>
  );
 }

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

@@ -25,7 +25,7 @@ import {ConfigContext} from "@/common/contexts/Config";
 import {StatusContext} from "@/common/contexts/Status";
 import {InputDialogContext} from "@/common/contexts/InputDialog";
 import {SpeedtestContext} from "@/common/contexts/Speedtests";
-import {downloadRequest, jsonRequest, patchRequest, postRequest} from "@/common/utils/RequestUtil";
+import {baseRequest, downloadRequest, jsonRequest, patchRequest, postRequest} from "@/common/utils/RequestUtil";
 import {creditsInfo, healthChecksInfo, recommendationsInfo} from "@/common/components/Dropdown/utils/infos";
 import {
  exportOptions, languageOptions, levelOptions,
@@ -36,6 +36,7 @@ import {changeLanguage, t} from "i18next";
 import ViewDialog from "@/common/components/ViewDialog";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {ToastNotificationContext} from "@/common/contexts/ToastNotification";
+import {NodeContext} from "@/common/contexts/Node";
 
 let icon;
 
@@ -56,6 +57,7 @@ export const toggleDropdown = (setIcon) => {
 function DropdownComponent() {
  const [config, reloadConfig] = useContext(ConfigContext);
  const [status, updateStatus] = useContext(StatusContext);
+ const currentNode = useContext(NodeContext)[2];
  const updateTests = useContext(SpeedtestContext)[1];
  const updateToast = useContext(ToastNotificationContext);
  const [setDialog] = useContext(InputDialogContext);
@@ -153,7 +155,10 @@ function DropdownComponent() {
  .then(() => localStorage.removeItem("password")),
  onSuccess: (value) => patchRequest("/config/password", {value})
  .then(() => showFeedback(undefined, false))
- .then(() => localStorage.setItem("password", value))
+ .then(() => {
+ currentNode !== 0 ? baseRequest("/nodes/" + currentNode + "/password", "PATCH",
+ {password: value}) : localStorage.setItem("password", value);
+ })
  })
  }
 

client/src/common/components/Header/HeaderComponent.jsx

@@ -1,6 +1,12 @@
 import "./styles.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCircleArrowUp, faGaugeHigh, faGear, faLock} from "@fortawesome/free-solid-svg-icons";
+import {
+ faCircleArrowUp,
+ faGaugeHigh,
+ faGear,
+ faLock,
+ faServer
+} from "@fortawesome/free-solid-svg-icons";
 import {useContext, useEffect, useState} from "react";
 import DropdownComponent, {toggleDropdown} from "../Dropdown/DropdownComponent";
 import {InputDialogContext} from "@/common/contexts/InputDialog";
@@ -11,19 +17,19 @@ import {updateInfo} from "@/common/components/Header/utils/infos";
 import {t} from "i18next";
 import {ConfigContext} from "@/common/contexts/Config";
 import {SpeedtestDialog} from "@/common/components/SpeedtestDialog";
-import {ViewContext} from "@/common/contexts/View";
-import {Trans} from "react-i18next";
-import {PROJECT_URL} from "@/index";
+import {NodeContext} from "@/common/contexts/Node";
+
+function HeaderComponent(props) {
+ const nodes = useContext(NodeContext)[0];
+ const currentNode = useContext(NodeContext)[2];
 
-function HeaderComponent() {
  const [setDialog] = useContext(InputDialogContext);
  const [icon, setIcon] = useState(faGear);
  const [status, updateStatus] = useContext(StatusContext);
  const [startedManually, setStartedManually] = useState(false);
  const updateTests = useContext(SpeedtestContext)[1];
  const [config, reloadConfig, checkConfig] = useContext(ConfigContext);
  const [updateAvailable, setUpdateAvailable] = useState("");
- const [view] = useContext(ViewContext);
 
  function switchDropdown() {
  toggleDropdown(setIcon);
@@ -76,15 +82,17 @@ function HeaderComponent() {
  if (!config.viewMode) updateVersion();
  }, [config]);
 
+ const getNodeName = () =>
+ currentNode === "0" ? t("header.title") : nodes?.find(node => node.id === currentNode)?.name || t("header.title");
+
+ if (Object.keys(config).length === 0) return <></>;
+
  return (
  <header>
  <SpeedtestDialog isOpen={startedManually}/>
  <div className="header-main">
- <h2>{t("header.title")} {view === 1 && <span className="beta-span" onClick={() => setDialog({
- title: t("header.beta.title"),
- description: <Trans components={{Link: <a href={PROJECT_URL+"/issues/new/choose"} target="_blank" />}}>header.beta.description</Trans>,
- buttonText: t("dialog.okay")
- })}>BETA</span>}</h2>
+ {config.viewMode ? <h2>{t("header.title")}</h2> : <h2 onClick={() => props.showNodePage(true)} className="h2-click"><FontAwesomeIcon icon={faServer} /> {getNodeName()}</h2>}
+
  <div className="header-right">
  {updateAvailable ?
  <div><FontAwesomeIcon icon={faCircleArrowUp} className="header-icon icon-orange update-icon"

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

@@ -19,18 +19,18 @@
 .header-main h2
  margin-left: 10%
  display: flex
- gap: 0.3rem
+ gap: 1rem
+ align-items: center
+ padding: 0.5rem 1rem
+ border-radius: 1rem
 
-.beta-span
- display: flex
+.header-main .h2-click
  cursor: pointer
- align-items: center
- justify-content: center
- font-size: 14pt
+ user-select: none
+
+.header-main .h2-click:hover
+ color: $green-hover
  background-color: $dark-gray
- color: $green
- padding: 0.1rem 0.4rem
- border-radius: 0.7rem
 
 .header-main div
  margin-right: 10%
@@ -75,14 +75,17 @@
  margin-right: 0
  .header-main h2
  margin-left: 0
- font-size: 18pt
+ font-size: 24pt
  .header-icon
- width: 20px
- height: 20px
+ width: 25px
+ height: 25px
 
 
 @media (max-width: 360px)
  .header-main h2
  font-size: 16pt
  text-overflow: ellipsis
- overflow: hidden
+ overflow: hidden
+ .header-icon
+ width: 20px
+ height: 20px

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

@@ -3,6 +3,7 @@
 .chooser-dialog
  display: flex
  justify-content: center
+ flex-wrap: wrap
  align-items: center
  padding: 2rem 3.5rem
  gap: 1rem

client/src/common/contexts/Config/ConfigContext.jsx

@@ -6,7 +6,6 @@ import {acceptDialog, apiErrorDialog, passwordRequiredDialog} from "@/common/con
 export const ConfigContext = createContext({});
 
 export const ConfigProvider = (props) => {
-
  const [config, setConfig] = useState({});
  const [setDialog] = useContext(InputDialogContext);
  const [dialogShown, setDialogShown] = useState(false);
@@ -15,15 +14,20 @@ export const ConfigProvider = (props) => {
  request("/config").then(async res => {
  if (res.status === 401) throw 1;
  if (!res.ok) throw 2;
- 
+
  try {
  return JSON.parse(await res.text());
  } catch (e) {
  throw 2;
  }
- })
- .then(result => config !== result ? setConfig(result) : null)
- .catch((code) => setDialog(code === 1 ? passwordRequiredDialog() : apiErrorDialog()));
+ }).then(result => {
+ if (config !== result)
+ result.viewMode && localStorage.getItem("currentNode") !== null && localStorage.getItem("currentNode") !== "0"
+ ? props.showNodePage(true) : setConfig(result);
+ }).catch((code) => {
+ localStorage.getItem("currentNode") !== null && localStorage.getItem("currentNode") !== "0"
+ ? props.showNodePage(true) : setDialog(code === 1 ? passwordRequiredDialog() : apiErrorDialog());
+ });
  }
 
  const checkConfig = async () => (await request("/config")).json();

client/src/common/contexts/InputDialog/InputDialog.jsx

@@ -16,16 +16,22 @@ const DialogArea = ({dialog}) => {
  if (dialog.value) setValue(dialog.value);
  }, [dialog.value]);
 
- document.onkeyup = e => {
- if (e.key === "Enter") {
- e.preventDefault();
- submit();
+ useEffect(() => {
+ document.onkeyup = e => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ submit();
+ }
+ if (e.key === "Escape" && !dialog.disableCloseButton) {
+ e.preventDefault();
+ closeDialog();
+ }
  }
- if (e.key === "Escape" && !dialog.disableCloseButton) {
-  e.preventDefault();
- closeDialog();
+
+ return () => {
+ document.onkeyup = null;
  }
- }
+ });
 
  function updateValue(e) {
  if (dialog.updateDescription) dialog.description = dialog.updateDescription(e.target.value);
@@ -72,7 +78,7 @@ const DialogArea = ({dialog}) => {
  <div className="dialog-buttons">
  {dialog.unsetButton ? <button className="dialog-btn dialog-secondary"
  onClick={clear}>{dialog.unsetButton || t("dialog.unset")}</button> : ""}
- <button className="dialog-btn" onClick={submit}>{dialog.buttonText || t("dialog.update")}</button>
+ <button className={"dialog-btn"+(dialog.mainRed ? " dialog-secondary" : "")} onClick={submit}>{dialog.buttonText || t("dialog.update")}</button>
  </div>
  </>
  )