Struktur verbessert in components
This commit is contained in:
ISA
122
components/main/settingsPageComponents/GeneralSettings.tsx
Normal file
122
components/main/settingsPageComponents/GeneralSettings.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import handleClearDatabase from "../../header/settingsModal/handlers/handleReboot";
|
||||
import handleReboot from "../../header/settingsModal/handlers/handleReboot";
|
||||
import handleSetDateTime from "../../header/settingsModal/handlers/handleReboot";
|
||||
import handleSubmit from "../../header/settingsModal/handlers/handleReboot";
|
||||
|
||||
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;
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function OPCUAInterfaceSettings() {
|
||||
const [isEnabled, setIsEnabled] = useState(true);
|
||||
const [encryption, setEncryption] = useState("None");
|
||||
const [users, setUsers] = useState([
|
||||
{ id: 1, username: "admin", password: "admin123" },
|
||||
{ id: 2, username: "user1", password: "user123" },
|
||||
]);
|
||||
const [newUser, setNewUser] = useState({ username: "", password: "" });
|
||||
|
||||
const toggleServer = () => setIsEnabled(!isEnabled);
|
||||
const updateEncryption = (event) => setEncryption(event.target.value);
|
||||
const addUser = () => {
|
||||
if (newUser.username && newUser.password) {
|
||||
setUsers([...users, { id: users.length + 1, ...newUser }]);
|
||||
setNewUser({ username: "", password: "" });
|
||||
}
|
||||
};
|
||||
const removeUser = (id) => setUsers(users.filter((user) => user.id !== id));
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6 bg-gray-100 shadow-md rounded-lg">
|
||||
<h2 className="text-xl font-semibold mb-4">OPCUA Server Einstellungen</h2>
|
||||
|
||||
{/* Server Aktivierung */}
|
||||
<div className="mb-4">
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isEnabled}
|
||||
onChange={toggleServer}
|
||||
className="hidden"
|
||||
/>
|
||||
<div
|
||||
className={`w-12 h-6 rounded-full transition-all ${
|
||||
isEnabled ? "bg-green-500" : "bg-gray-300"
|
||||
}`}
|
||||
></div>
|
||||
<span className="ml-2 text-sm">
|
||||
{isEnabled ? "Aktiviert" : "Deaktiviert"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Verschlüsselung */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Verschlüsselung
|
||||
</label>
|
||||
<select
|
||||
value={encryption}
|
||||
onChange={updateEncryption}
|
||||
className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200"
|
||||
>
|
||||
<option value="None">Keine</option>
|
||||
<option value="Basic256">Basic256</option>
|
||||
<option value="Basic256Sha256">Basic256Sha256</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Benutzer & Passwörter */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Benutzer</h3>
|
||||
<ul className="space-y-2">
|
||||
{users.map((user) => (
|
||||
<li
|
||||
key={user.id}
|
||||
className="p-2 bg-white shadow-sm rounded-md flex justify-between items-center"
|
||||
>
|
||||
<span className="font-medium">{user.username}</span>
|
||||
<span className="text-gray-600 ml-2">
|
||||
(Passwort: {user.password})
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeUser(user.id)}
|
||||
className="ml-4 text-red-500"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Benutzername"
|
||||
value={newUser.username}
|
||||
onChange={(e) =>
|
||||
setNewUser({ ...newUser, username: e.target.value })
|
||||
}
|
||||
className="p-2 border rounded mr-2"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Passwort"
|
||||
value={newUser.password}
|
||||
onChange={(e) =>
|
||||
setNewUser({ ...newUser, password: e.target.value })
|
||||
}
|
||||
className="p-2 border rounded mr-2"
|
||||
/>
|
||||
<button
|
||||
onClick={addUser}
|
||||
className="bg-blue-500 text-white p-2 rounded"
|
||||
>
|
||||
Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user