Mathias/PowerTools
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed the connectionFailed border with a toast message

Browse Source
This commit is contained in:
Mathias Wagner 2023-06-02 18:53:50 +02:00
parent 70ad6363e3
commit c4893b92b7
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
2 changed files with 7 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/pages/tools/linux/InstallSoftware/components/ConfigurationArea/ConfigurationArea.jsx
View File

@ -2,14 +2,15 @@ import "./styles.sass";
import ConfigurationRow from "@/pages/tools/linux/InstallSoftware/components/ConfigurationRow"; import ConfigurationRow from "@/pages/tools/linux/InstallSoftware/components/ConfigurationRow";
import Button from "@/common/components/Button"; import Button from "@/common/components/Button";
import {faDownload} from "@fortawesome/free-solid-svg-icons"; import {faDownload} from "@fortawesome/free-solid-svg-icons";
import {useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {createConnection} from "@/common/utils/SocketUtil.js"; import {createConnection} from "@/common/utils/SocketUtil.js";
import LogArea from "@/pages/tools/linux/InstallSoftware/components/ConfigurationArea/components/LogArea"; import LogArea from "@/pages/tools/linux/InstallSoftware/components/ConfigurationArea/components/LogArea";
import {ToastNotificationContext} from "@/common/contexts/ToastNotification/index.js";
export const ConfigurationArea = ({current}) => { export const ConfigurationArea = ({current}) => {
const [connection, setConnection] = useState(createConnection("app")); const updateToast = useContext(ToastNotificationContext);
const [connectionFailed, setConnectionFailed] = useState(false); const [connection, setConnection] = useState(createConnection("app"));
const states = current?.configuration?.map((configuration) => { const states = current?.configuration?.map((configuration) => {
return {name: configuration.id, value: useState(configuration.value)} return {name: configuration.id, value: useState(configuration.value)}
@ -30,11 +31,6 @@ export const ConfigurationArea = ({current}) => {
} }
}, []); }, []);
useEffect(() => {
if (connectionFailed)
setTimeout(() => setConnectionFailed(false), 2500);
}, [connectionFailed]);
const update = () => { const update = () => {
let data = {}; let data = {};
states.forEach((state) => { states.forEach((state) => {
@ -55,7 +51,7 @@ export const ConfigurationArea = ({current}) => {
connection.on("login", (event) => { connection.on("login", (event) => {
if (event.status === "failed") { if (event.status === "failed") {
setConnectionFailed(true); updateToast("Verbindung zum Server fehlgeschlagen.", "red");
disconnect(); disconnect();
} else if (event.status === "success") { } else if (event.status === "success") {
connection.emit("install", {name: current.name, data}) connection.emit("install", {name: current.name, data})
@ -80,7 +76,7 @@ export const ConfigurationArea = ({current}) => {
return ( return (
<div className="configuration-area"> <div className="configuration-area">
<div className={"package-area" + (connectionFailed ? " package-failed" : "")}> <div className="package-area">
<div className="package-title"> <div className="package-title">
<img src={current.icon} alt={current.name}/> <img src={current.icon} alt={current.name}/>
<h2>Paket: <span>{current.name}</span></h2> <h2>Paket: <span>{current.name}</span></h2>
@ -94,7 +90,7 @@ export const ConfigurationArea = ({current}) => {
})} })}
<div className="align-right"> <div className="align-right">
<Button icon={faDownload} text={current.buttonText || "Installieren"} onClick={update}/> <Button icon={faDownload} text={current.buttonText || "Installieren"} onClick={update} />
</div> </div>
</div> </div>

3
client/src/pages/tools/linux/InstallSoftware/components/ConfigurationArea/styles.sass
View File

@ -26,9 +26,6 @@
span span
color: $primary color: $primary
.package-failed
border: 2px dashed $red
.align-right .align-right
display: flex display: flex
justify-content: flex-end justify-content: flex-end