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

The ConfigurationArea.jsx now displays errors

Browse Source
This commit is contained in:
Mathias Wagner 2023-06-02 00:55:08 +02:00
parent 78675d385b
commit 8261b46fd7
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,8 @@ import LogArea from "@/pages/tools/linux/InstallSoftware/components/Configuratio
export const ConfigurationArea = ({current}) => { export const ConfigurationArea = ({current}) => {
const [connection, setConnection] = useState(createConnection("app")); const [connection, setConnection] = useState(createConnection("app"));
const [connectionFailed, setConnectionFailed] = useState(false);
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)}
}); });
@ -17,12 +19,22 @@ export const ConfigurationArea = ({current}) => {
const [completedSteps, setCompletedSteps] = useState([]); const [completedSteps, setCompletedSteps] = useState([]);
const [failedStep, setFailedStep] = useState(null); const [failedStep, setFailedStep] = useState(null);
const disconnect = () => {
connection.disconnect();
setConnection(createConnection("app"));
}
useEffect(() => { useEffect(() => {
return () => { return () => {
connection.disconnect(); connection.disconnect();
} }
}, []); }, []);
useEffect(() => {
if (connectionFailed)
setTimeout(() => setConnectionFailed(false), 2500);
}, [connectionFailed]);
const update = () => { const update = () => {
let data = {}; let data = {};
states.forEach((state) => { states.forEach((state) => {
@ -34,35 +46,41 @@ export const ConfigurationArea = ({current}) => {
setFailedStep(null); setFailedStep(null);
connection.connect(); connection.connect();
connection.on("connect", async () => { connection.on("connect", async () => {
connection.emit("login", { connection.emit("login", {
host: prompt("Host", "localhost"), host: prompt("Host", "localhost"),
password: prompt("Password", "password") password: prompt("Password", "password")
}); });
connection.on("login", (data) => {
if (data.status === "failed") {
setConnectionFailed(true);
disconnect();
} else if (data.status === "success") {
connection.emit("install", {name: current.name, data})
}
});
connection.on("install", (data) => { connection.on("install", (data) => {
if (data.status === "info") { if (data.status === "info") {
setSteps(data.data); setSteps(data.data);
} else if (data.status === "success") { } else if (data.status === "success") {
setCompletedSteps(steps => [...steps, data.step]); setCompletedSteps(steps => [...steps, data.step]);
} else if (data.status === "finished") { } else if (data.status === "finished") {
connection.disconnect(); disconnect();
setConnection(createConnection("app"));
} else if (data.status === "failed") { } else if (data.status === "failed") {
setFailedStep(data.step); setFailedStep(data.step);
connection.disconnect(); disconnect();
setConnection(createConnection("app"));
} }
}); });
connection.on("login", () => connection.emit("install", {name: current.name, data}));
}); });
} }
return ( return (
<div className="configuration-area"> <div className="configuration-area">
<div className="package-area"> <div className={"package-area" + (connectionFailed ? " package-failed" : "")}>
<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>