Created the dropdown component

2026-02-18 04:09:25 -06:00 · 2022-04-09 23:17:08 +02:00
parent e63c0c3222
commit 82f4b7e160
2 changed files with 188 additions and 0 deletions
--- a/client/src/components/DropdownComponent.js
+++ b/client/src/components/DropdownComponent.js
@@ -0,0 +1,134 @@
+import React, {useContext} from "react";
+import "../style/Dropdown.sass";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+    faArrowDown,
+    faArrowUp,
+    faGaugeHigh,
+    faKey,
+    faPingPongPaddleBall,
+    faServer
+} from "@fortawesome/free-solid-svg-icons";
+import {DialogContext} from "../context/DialogContext";
+
+export const toggleDropdown = () => {
+    let classList = document.getElementsByClassName("dropdown")[0].classList;
+    if (classList.contains("dropdown-invisible")) {
+        classList.remove("dropdown-invisible");
+    } else {
+        classList.add("dropdown-invisible");
+    }
+}
+
+export default () => {
+
+    const [setDialog] = useContext(DialogContext);
+    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",
+                placeholder: "Ping",
+                value: ping.value,
+                onSuccess: value => {
+                    fetch("/api/config/ping", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})});
+                }
+            }));
+    }
+
+    const updateDownload = async () => {
+        toggleDropdown();
+        fetch("/api/config/download", {headers: headers}).then(res => res.json())
+            .then(down => setDialog({
+                title: "Optimalen Down-Speed setzen",
+                placeholder: "Down-Speed",
+                value: down.value,
+                onSuccess: value => {
+                    fetch("/api/config/download", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})});
+                }
+            }));
+    }
+
+    const updateUpload = async () => {
+        toggleDropdown();
+        fetch("/api/config/upload", {headers: headers}).then(res => res.json())
+            .then(up => setDialog({
+                title: "Optimalen Up-Speed setzen",
+                placeholder: "Up-Speed",
+                value: up.value,
+                onSuccess: value => {
+                    fetch("/api/config/upload", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})});
+                }
+            }));
+    }
+
+    const updatePassword = async () => {
+        toggleDropdown();
+        setDialog({
+            title: "Neues Passwort festlegen",
+            placeholder: "Neues Passwort",
+            onSuccess: value => {
+                fetch("/api/config/password", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})});
+                localStorage.setItem("password", value);
+            }
+        })
+    }
+
+    const updateServer = async () => {
+        toggleDropdown();
+        fetch("/api/config/serverId", {headers: headers}).then(res => res.json())
+            .then(ping => setDialog({
+                title: "Speedtest-Server setzen",
+                placeholder: "Server-ID",
+                value: ping.value,
+                onSuccess: value => {
+                    fetch("/api/config/serverId", {headers: headers, method: "PATCH", body: JSON.stringify({value: value})});
+                }
+            }));
+    }
+
+    const startSpeedtest = async () => {
+        toggleDropdown();
+        setDialog({speedtest: true, promise: fetch("/api/speedtests/run", {headers: headers, method: "POST"})});
+    }
+
+    return (
+        <div className="dropdown dropdown-invisible">
+            <div id="dropdown" className="dropdown-content">
+                <h2>Einstellungen</h2>
+                <div className="dropdown-entries">
+                    <div className="dropdown-item" onClick={updatePing}>
+                        <FontAwesomeIcon icon={faPingPongPaddleBall}/>
+                        <h3>Optimaler Ping</h3>
+                    </div>
+                    <div className="dropdown-item" onClick={updateDownload}>
+                        <FontAwesomeIcon icon={faArrowDown}/>
+                        <h3>Optimaler Down-Speed</h3>
+                    </div>
+                    <div className="dropdown-item" onClick={updateUpload}>
+                        <FontAwesomeIcon icon={faArrowUp}/>
+                        <h3>Optimaler Up-Speed</h3>
+                    </div>
+                    <div className="center">
+                        <hr className="dropdown-hr"/>
+                    </div>
+                    <div className="dropdown-item" onClick={updateServer}>
+                        <FontAwesomeIcon icon={faServer}/>
+                        <h3>Server wechseln</h3>
+                    </div>
+                    <div className="dropdown-item" onClick={updatePassword}>
+                        <FontAwesomeIcon icon={faKey}/>
+                        <h3>Passwort ändern</h3>
+                    </div>
+                    <div className="dropdown-item" onClick={startSpeedtest}>
+                        <FontAwesomeIcon icon={faGaugeHigh}/>
+                        <h3>Speedtest starten</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
--- a/client/src/style/Dropdown.sass
+++ b/client/src/style/Dropdown.sass
@@ -0,0 +1,54 @@
+.dropdown-content
+  float: right
+  margin-right: 10%
+  display: inline-block
+  position: absolute
+  width: 320px
+  height: 270px
+  overflow: auto
+  border-radius: 10px
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2)
+  right: 0
+  z-index: 1
+  padding: 15px
+  background-color: #1c2228
+
+.dropdown-invisible
+  visibility: hidden
+
+.dropdown-content h2
+  color: #C9C9C9
+  margin: 0
+  font-size: 16pt
+
+.dropdown-hr
+  margin: 5px
+  width: 30px
+
+.dropdown-entries
+  margin-top: 10px
+  display: flex
+  flex-direction: column
+
+.dropdown-item
+  margin: 5px 10px
+  display: flex
+  align-items: center
+  cursor: pointer
+
+.dropdown-item *
+  margin: 0
+  font-size: 16pt
+  font-weight: 500
+  color: #DFDFDF
+
+.dropdown-item svg
+  width: 25px
+  height: 25px
+
+.dropdown-item h3
+  margin-left: 15px
+
+.center
+  display: flex
+  justify-content: center