Merge pull request #32 from gnmyt/updates/folder-structure

📁 Änderungen an der Ordnerstruktur

client/jsconfig.json

@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}

client/src/App.jsx

@@ -1,13 +1,12 @@
 import './App.sass';
-import LatestTestComponent from "./components/LatestTestComponent";
-import HeaderComponent from "./components/HeaderComponent";
-import TestAreaComponent from "./components/TestAreaComponent";
-import {ConfigProvider} from "./context/ConfigContext";
-import {DialogProvider} from "./context/DialogContext";
-import {SpeedtestProvider} from "./context/SpeedtestContext";
-import {StatusProvider} from "./context/StatusContext";
+import Home from "./pages/Home";
+import HeaderComponent from "./common/components/Header";
+import {SpeedtestProvider} from "./common/contexts/Speedtests";
+import {DialogProvider} from "./common/contexts/Dialog";
+import {ConfigProvider} from "./common/contexts/Config";
+import {StatusProvider} from "./common/contexts/Status";
 
-function App() {
+const App = () => {
 
  return (
  <>
@@ -18,11 +17,7 @@ function App() {
 
  <HeaderComponent/>
  <main>
- <LatestTestComponent/>
-
- <hr/>
-
- <TestAreaComponent/>
+ <Home/>
  </main>
 
  </StatusProvider>

client/src/App.sass

@@ -1,50 +1,49 @@
+@import "./common/styles/colors"
+
 body, html
  margin: 0
- background-color: #232835
+ background-color: $background
  font-family: "Inter", sans-serif
  font-weight: 700
 
 ::-webkit-scrollbar
- width: 10px
+ width: 13px
 
 ::-webkit-scrollbar-thumb
- background: #1d222e
+ background: $darker-gray
  border-radius: 10px
 
 ::-webkit-scrollbar-thumb:hover
- background: #1e212a
+ background: $dark-gray
 
 .speedtest-icon
  font-size: 26pt
- color: #F1F1F1
+ color: $white
  margin-right: 10px
 
 .container-icon
  width: 35px
  height: 35px
- color: #F1F1F1
+ color: $white
  font-size: 26pt
 
 .help-icon
  cursor: help
 
 .icon-red
- color: #C64545
-
-.icon-white
- color: #ffffff
+ color: $red
 
 .icon-error
- color: #900c0c
+ color: $error
 
 .icon-green
- color: #45C65A
+ color: $green
 
 .icon-orange
- color: #E58A00
+ color: $orange
 
 .icon-blue
- color: #456AC6
+ color: $blue
 
 main
  display: flex
@@ -54,7 +53,7 @@ main
 hr
  margin: 2rem
  width: 3rem
- border: 1px solid #727676
+ border: 1px solid $gray
  border-radius: 25px
 
 @keyframes fadeIn

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

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from "react";
-import "../style/Dropdown.sass";
+import "./styles.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
  faArrowDown,
@@ -11,9 +11,9 @@ import {
  faPlay,
  faServer, faWandMagicSparkles
 } from "@fortawesome/free-solid-svg-icons";
-import {DialogContext} from "../context/DialogContext";
-import {ConfigContext} from "../context/ConfigContext";
-import {StatusContext} from "../context/StatusContext";
+import {ConfigContext} from "@/common/contexts/Config";
+import {StatusContext} from "@/common/contexts/Status";
+import {DialogContext} from "@/common/contexts/Dialog";
 
 let icon;
 
@@ -31,7 +31,7 @@ export const toggleDropdown = (setIcon) => {
 
 function DropdownComponent() {
 
- const reloadConfig = useContext(ConfigContext)[1];
+ const [config, reloadConfig] = useContext(ConfigContext);
  const [status, updateStatus] = useContext(StatusContext);
  const [setDialog] = useContext(DialogContext);
 
@@ -47,43 +47,35 @@ function DropdownComponent() {
  return () => document.removeEventListener("keyup", onPress);
  }, []);
 
- const patchDialog = (path, dialog, toggle = true) => {
+ const showFeedback = (customText, reload = true) => setDialog({
+ title: "MySpeed", description: customText || <>Deine Änderungen wurden übernommen.</>, buttonText: "Okay",
+ onSuccess: () => reload ? reloadConfig() : "", onClose: () => reloadConfig()
+ });
+
+ const patchDialog = (value, dialog, toggle = true) => {
  if (toggle) toggleDropdown();
- fetch(path, {headers}).then(res => res.json())
- .then(value => setDialog({
- ...dialog(value.value),
- onSuccess: 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()
- });
+ ...dialog(config[value]),
+ onSuccess: value => {
+ fetch("/api/config/" + value, {headers, method: "PATCH", body: JSON.stringify({value})})
+ .then(() => showFeedback());
+ }
+ })
  }
 
- const updatePing = async () => {
- patchDialog("/api/config/ping", (value) => ({
- title: "Optimalen Ping setzen (ms)", placeholder: "Ping", value
- }));
- }
+ const updatePing = async () => patchDialog("ping", (value) => ({
+ title: "Optimalen Ping setzen (ms)", placeholder: "Ping", value
+ }));
 
+ const updateDownload = async () => patchDialog("download", (value) => ({
+ title: "Optimalen Down-Speed setzen (Mbit/s)", placeholder: "Down-Speed", value
+ }));
 
- const updateDownload = async () => {
- patchDialog("/api/config/download", (value) => ({
- title: "Optimalen Down-Speed setzen (Mbit/s)", placeholder: "Down-Speed", value
- }));
- }
+ const updateUpload = async () => patchDialog("upload", (value) => ({
+ title: "Optimalen Up-Speed setzen (Mbit/s)", placeholder: "Up-Speed", value
+ }));
 
- const updateUpload = async () => {
- patchDialog("/api/config/upload", (value) => ({
- title: "Optimalen Up-Speed setzen (Mbit/s)", placeholder: "Up-Speed", value
- }));
- }
 
  const updatePassword = async () => {
  toggleDropdown();
@@ -129,11 +121,10 @@ function DropdownComponent() {
  })));
  }
 
- const updateServerManually = () => {
- patchDialog("/api/config/serverId", (value) => ({
- title: "Speedtest-Server setzen", placeholder: "Server-ID", type: "number", value: value,
- }), false);
- }
+ const updateServerManually = () => patchDialog("serverId", (value) => ({
+ title: "Speedtest-Server setzen", placeholder: "Server-ID", type: "number", value: value,
+ }), false);
+
 
  function togglePause() {
  toggleDropdown();
@@ -160,8 +151,13 @@ function DropdownComponent() {
 
  const showCredits = () => {
  toggleDropdown();
- setDialog({title: "MySpeed", description: <><a href="https://github.com/gnmyt/myspeed" target="_blank" rel="noreferrer">MySpeed</a> wird von GNMYT bereitgestellt
- und verwendet die <a href="https://www.speedtest.net/apps/cli" target="_blank" rel="noreferrer">Speedtest-CLI</a> von Ookla.</>, buttonText: "Schließen"});
+ setDialog({
+ title: "MySpeed",
+ description: <><a href="https://github.com/gnmyt/myspeed" target="_blank" rel="noreferrer">MySpeed</a> wird
+ von GNMYT bereitgestellt
+ und verwendet die <a href="https://www.speedtest.net/apps/cli" target="_blank" rel="noreferrer">Speedtest-CLI</a> von Ookla.</>,
+ buttonText: "Schließen"
+ });
  }
 
  const recommendedSettings = async () => {
@@ -222,23 +218,22 @@ function DropdownComponent() {
 
  const updateLevel = async () => {
  toggleDropdown();
- fetch("/api/config/timeLevel", {headers: headers}).then(res => res.json())
- .then(level => setDialog({
- title: "Test-Häufigkeit einstellen",
- select: true,
- selectOptions: {
- 1: "Durchgehend (jede Minute)",
- 2: "Sehr häufig (alle 30 Minuten)",
- 3: "Standard (jede Stunde)",
- 4: "Selten (alle 3 Stunden)",
- 5: "Sehr selten (alle 6 Stunden)"
- },
- value: level.value,
- onSuccess: value => {
- fetch("/api/config/timeLevel", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})})
- .then(() => showFeedback(undefined, false));
- }
- }));
+ setDialog({
+ title: "Test-Häufigkeit einstellen",
+ select: true,
+ selectOptions: {
+ 1: "Durchgehend (jede Minute)",
+ 2: "Sehr häufig (alle 30 Minuten)",
+ 3: "Standard (jede Stunde)",
+ 4: "Selten (alle 3 Stunden)",
+ 5: "Sehr selten (alle 6 Stunden)"
+ },
+ value: config.timeLevel,
+ onSuccess: value => {
+ fetch("/api/config/timeLevel", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})})
+ .then(() => showFeedback(undefined, false));
+ }
+ });
  }
 
  return (

client/src/common/components/Dropdown/index.js

@@ -0,0 +1 @@
+export {default} from './DropdownComponent';

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

@@ -1,3 +1,5 @@
+@import "@/common/styles/colors"
+
 .dropdown-content
  float: right
  margin-right: 10%
@@ -10,13 +12,13 @@
  right: 0
  z-index: 1
  padding: 15px
- background-color: #1c2228
+ background-color: $dark-gray
 
 .dropdown-invisible
  visibility: hidden
 
 .dropdown-content h2
- color: #C9C9C9
+ color: $darker-white
  margin: 0
  font-size: 16pt
 
@@ -34,15 +36,15 @@
  display: flex
  align-items: center
  cursor: pointer
- color: #DFDFDF
+ color: $white
 
 .dropdown-item *
  margin: 0
  font-size: 16pt
  font-weight: 500
 
 .dropdown-item:hover
- color: #45C65A
+ color: $green
 
 .dropdown-item svg
  width: 25px

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

@@ -1,9 +1,9 @@
-import "../style/Header.sass";
+import "./styles.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faCircleExclamation, faGaugeHigh, faGear} from "@fortawesome/free-solid-svg-icons";
-import DropdownComponent, {toggleDropdown} from "./DropdownComponent";
 import {useContext, useEffect, useState} from "react";
-import {DialogContext} from "../context/DialogContext";
+import DropdownComponent, {toggleDropdown} from "../Dropdown/DropdownComponent";
+import {DialogContext} from "@/common/contexts/Dialog";
 
 
 function HeaderComponent() {

client/src/common/components/Header/index.js

@@ -0,0 +1 @@
+export {default} from './HeaderComponent';

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

@@ -1,9 +1,11 @@
+@import "@/common/styles/colors"
+
 .header-main
  margin-top: 2rem
  display: flex
  align-items: center
  justify-content: space-between
- color: #F1F1F1
+ color: $white
 
 .header-right
  display: flex
@@ -28,7 +30,7 @@
 
 .header-icon:hover
  transform: scale(1.1)
- color: #45C65A
+ color: $green
 
 @media (max-width: 425px)
  .header-main

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

@@ -1,5 +1,5 @@
 import React, {useState, createContext, useEffect, useContext} from "react";
-import {DialogContext} from "./DialogContext";
+import {DialogContext} from "../Dialog";
 
 export const ConfigContext = createContext();
 

client/src/common/contexts/Config/index.js

@@ -0,0 +1 @@
+export * from './ConfigContext';

client/src/context/DialogContext.jsx → client/src/common/contexts/Dialog/DialogContext.jsx

@@ -1,8 +1,8 @@
 import React, {useState, createContext, useContext} from "react";
-import "../style/Dialog.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faClose} from "@fortawesome/free-solid-svg-icons";
-import {SpeedtestContext} from "./SpeedtestContext";
+import {SpeedtestContext} from "../Speedtests";
+import "./styles.sass";
 
 export const DialogContext = createContext();
 

client/src/common/contexts/Dialog/index.js

@@ -0,0 +1 @@
+export * from './DialogContext';