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

Added animations to the ConfigurationArea.jsx

Browse Source
This commit is contained in:
Mathias Wagner
2023-08-13 18:06:30 +02:00
parent 74cd295670
commit f5e1da8c4d
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,13 @@
import "./styles.sass"; 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, faServer} from "@fortawesome/free-solid-svg-icons"; import {faCheck, faDownload, faServer} from "@fortawesome/free-solid-svg-icons";
import {useContext, 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"; import {ToastNotificationContext} from "@/common/contexts/ToastNotification";
import {ServerContext} from "@/common/contexts/Server"; import {ServerContext} from "@/common/contexts/Server";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
export const ConfigurationArea = ({current}) => { export const ConfigurationArea = ({current}) => {
const updateToast = useContext(ToastNotificationContext); const updateToast = useContext(ToastNotificationContext);
@ -23,6 +24,8 @@ export const ConfigurationArea = ({current}) => {
const [completedSteps, setCompletedSteps] = useState([]); const [completedSteps, setCompletedSteps] = useState([]);
const [failedStep, setFailedStep] = useState(null); const [failedStep, setFailedStep] = useState(null);
const [completed, setCompleted] = useState(false);
useEffect(() => { useEffect(() => {
if (servers.length > 0 && servers.find((server) => server.id === selectedServer) === undefined) if (servers.length > 0 && servers.find((server) => server.id === selectedServer) === undefined)
setSelectedServer(servers[0].id); setSelectedServer(servers[0].id);
@ -38,6 +41,7 @@ export const ConfigurationArea = ({current}) => {
setSteps([]); setSteps([]);
setCompletedSteps([]); setCompletedSteps([]);
setFailedStep(null); setFailedStep(null);
setCompleted(false);
connection.disconnect(); connection.disconnect();
} }
}, []); }, []);
@ -82,6 +86,7 @@ export const ConfigurationArea = ({current}) => {
} 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") {
setCompleted(true);
disconnect(); disconnect();
} else if (data.status === "failed") { } else if (data.status === "failed") {
setFailedStep(data.step); setFailedStep(data.step);
@ -98,25 +103,37 @@ export const ConfigurationArea = ({current}) => {
<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>
{completed && <FontAwesomeIcon icon={faCheck}/>}
</div> </div>
<div className={"description-area" + (steps.length !== 0 && !completed ? " description-hidden" : "")}>
{!completed && <>
{current.configuration.map((configuration) => { {current.configuration.map((configuration) => {
return <ConfigurationRow key={configuration.id} text={configuration.text} icon={configuration.icon} return <ConfigurationRow key={configuration.id} text={configuration.text} icon={configuration.icon}
type={configuration.type} options={configuration.options} type={configuration.type} options={configuration.options} value={states.find((s) => s.name === configuration.id)?.value[0]}
value={states.find((s) => s.name === configuration.id)?.value[0]}
setValue={states.find((s) => s.name === configuration.id)?.value[1]}/> setValue={states.find((s) => s.name === configuration.id)?.value[1]}/>
})} })}
{servers.length !== 0 && <ConfigurationRow type="select" icon={faServer} text="Server" options={servers.map((server) => { {servers.length !== 0 && <ConfigurationRow type="select" icon={faServer} text="Server"
return {value: server.id, text: (server.name || "Unbenannt") + " (" + server.hostname + ")"} options={servers.map((server) => {return {value: server.id, text: (server.name || "Unbenannt") + " (" + server.hostname + ")"}})} value={selectedServer}
})} value={selectedServer} setValue={setSelectedServer} />} setValue={setSelectedServer}/>}
<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>
</>}
{completed && current.configuration.map((configuration) => {
return configuration.type !== "text" && <ConfigurationRow key={configuration.id} text={configuration.text} icon={configuration.icon}
type={configuration.type} options={configuration.options} value={states.find((s) => s.name === configuration.id)?.value[0]}
setValue={states.find((s) => s.name === configuration.id)?.value[1]} disabled/>
})}
</div> </div>
</div> </div>
{steps.length !== 0 && <LogArea completedSteps={completedSteps} failedStep={failedStep} steps={steps} />} {steps.length !== 0 && !completed &&
<LogArea completedSteps={completedSteps} failedStep={failedStep} steps={steps}/>}
</div> </div>
); );