123 lines
4.3 KiB
TypeScript
123 lines
4.3 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import handleClearDatabase from "../modales/settingsModal/handlers/handleClearDatabase";
|
|
import handleReboot from "../modales/settingsModal/handlers/handleReboot";
|
|
import handleSetDateTime from "../modales/settingsModal/handlers/handleSetDateTime";
|
|
import handleSubmit from "../modales/settingsModal/handlers/handleSubmit";
|
|
|
|
const GeneralSettings = () => {
|
|
const deviceName_Redux = useSelector((state) => state.variables.deviceName);
|
|
const ip_Redux = useSelector((state) => state.variables.ip);
|
|
const subnet_Redux = useSelector((state) => state.variables.subnet);
|
|
const gateway_Redux = useSelector((state) => state.variables.gateway);
|
|
const datetime_Redux = useSelector(
|
|
(state) => state.variables.cplInternalTimestamp
|
|
);
|
|
const ntp1_Redux = useSelector((state) => state.variables.ntp1);
|
|
const ntp2_Redux = useSelector((state) => state.variables.ntp2);
|
|
const ntp3_Redux = useSelector((state) => state.variables.ntp3);
|
|
const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone);
|
|
const active_Redux = useSelector((state) => state.variables.ntpActive);
|
|
|
|
const [name, setName] = useState(deviceName_Redux || "");
|
|
const [ip, setIp] = useState(ip_Redux || "");
|
|
const [subnet, setSubnet] = useState(subnet_Redux || "");
|
|
const [gateway, setGateway] = useState(gateway_Redux || "");
|
|
const [systemUhr, setSystemUhr] = useState(datetime_Redux || "");
|
|
const [ntp1, setNtp1] = useState(ntp1_Redux || "");
|
|
const [ntp2, setNtp2] = useState(ntp2_Redux || "");
|
|
const [ntp3, setNtp3] = useState(ntp3_Redux || "");
|
|
const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || "");
|
|
const [active, setActive] = useState(active_Redux || "");
|
|
|
|
useEffect(() => {
|
|
setName(deviceName_Redux || "");
|
|
setIp(ip_Redux || "");
|
|
setSubnet(subnet_Redux || "");
|
|
setGateway(gateway_Redux || "");
|
|
setSystemUhr(datetime_Redux || "");
|
|
setNtp1(ntp1_Redux || "");
|
|
setNtp2(ntp2_Redux || "");
|
|
setNtp3(ntp3_Redux || "");
|
|
setNtpTimezone(ntpTimezone_Redux || "");
|
|
setActive(active_Redux || "");
|
|
}, [
|
|
deviceName_Redux,
|
|
ip_Redux,
|
|
subnet_Redux,
|
|
gateway_Redux,
|
|
datetime_Redux,
|
|
ntp1_Redux,
|
|
ntp2_Redux,
|
|
ntp3_Redux,
|
|
ntpTimezone_Redux,
|
|
active_Redux,
|
|
]);
|
|
|
|
return (
|
|
<div className="p-4 bg-gray-100">
|
|
<h2 className="text-lg font-bold mb-4">General Settings</h2>
|
|
<form>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium">Name:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">IP:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ip}
|
|
onChange={(e) => setIp(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">Subnet:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={subnet}
|
|
onChange={(e) => setSubnet(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between mt-4">
|
|
<button
|
|
className="bg-blue-500 text-white px-4 py-2 rounded"
|
|
onClick={() => handleReboot()}
|
|
>
|
|
Neustart CPL
|
|
</button>
|
|
<button
|
|
className="bg-blue-500 text-white px-4 py-2 rounded"
|
|
onClick={() => handleClearDatabase()}
|
|
>
|
|
Datenbank leeren
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
handleSubmit(
|
|
{ name, ip, subnet, gateway },
|
|
{ name: deviceName_Redux, ip: ip_Redux, subnet: subnet_Redux }
|
|
)
|
|
}
|
|
className="bg-blue-500 text-white px-4 py-2 rounded"
|
|
>
|
|
Übernehmen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GeneralSettings;
|