109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
"use client"; //components/main/uebersicht/NetworkInfo.tsx
|
|
import React, { useEffect } from "react";
|
|
import Image from "next/image";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { RootState, AppDispatch } from "@/redux/store";
|
|
import { getSystemSettingsThunk } from "@/redux/thunks/getSystemSettingsThunk";
|
|
import { getOpcUaSettingsThunk } from "@/redux/thunks/getOpcUaSettingsThunk";
|
|
|
|
const NetworkInfo: React.FC = () => {
|
|
const dispatch: AppDispatch = useDispatch();
|
|
|
|
// ✅ OPC UA Daten laden, wenn Komponente angezeigt wird
|
|
useEffect(() => {
|
|
dispatch(getSystemSettingsThunk());
|
|
dispatch(getOpcUaSettingsThunk());
|
|
}, [dispatch]);
|
|
// Werte direkt aus Redux holen
|
|
const ip =
|
|
useSelector((state: RootState) => state.systemSettingsSlice.ip) ||
|
|
"Unbekannt";
|
|
const subnet =
|
|
useSelector((state: RootState) => state.systemSettingsSlice.subnet) ||
|
|
"Unbekannt";
|
|
const gateway =
|
|
useSelector((state: RootState) => state.systemSettingsSlice.gateway) ||
|
|
"Unbekannt";
|
|
const opcUaZustandRaw = useSelector(
|
|
(state: RootState) => state.opcuaSettingsSlice.opcUaZustand
|
|
);
|
|
|
|
// OPC-UA Zustand in lesbaren Text umwandeln
|
|
const opcUaZustand =
|
|
Number(opcUaZustandRaw) === 1
|
|
? "Server betriebsbereit"
|
|
: Number(opcUaZustandRaw) === 0
|
|
? "Server außer Betrieb"
|
|
: "Unbekannt";
|
|
|
|
return (
|
|
<div className="w-full flex-direction: row flex">
|
|
<div className=" flex-grow flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
|
|
<Image
|
|
src="/images/IP-icon.svg"
|
|
alt="IP Address"
|
|
width={24}
|
|
height={24}
|
|
className="w-6 text-littwin-blue"
|
|
priority
|
|
/>
|
|
<div>
|
|
<p className="text-xs text-gray-500">IP-Adresse</p>
|
|
<p className="text-sm font-medium text-gray-700">{ip}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<Image
|
|
src="/images/subnet-mask.svg"
|
|
alt="subnet mask"
|
|
width={24}
|
|
height={24}
|
|
className="w-6"
|
|
priority
|
|
/>
|
|
<div>
|
|
<p className="text-xs text-gray-500">Subnet-Maske</p>
|
|
<p className="text-sm font-medium text-gray-700">{subnet}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<Image
|
|
src="/images/gateway.svg"
|
|
alt="gateway"
|
|
width={24}
|
|
height={24}
|
|
className="w-6"
|
|
priority
|
|
/>
|
|
<div>
|
|
<p className="text-xs text-gray-500">Gateway</p>
|
|
<p className="text-sm font-medium text-gray-700">{gateway}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="text-xs font-bold text-littwin-blue">OPC-UA</div>
|
|
<div>
|
|
<p className="text-xs text-gray-500">Status</p>
|
|
<p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
|
|
</div>
|
|
</div>
|
|
{/* OPC UA Nodeset Name */}
|
|
{/*
|
|
<div className="flex items-center space-x-4">
|
|
<div>
|
|
<p className="text-xs text-gray-500">Nodeset Name</p>
|
|
<p className="text-sm font-medium text-gray-700">
|
|
{opcUaNodesetName}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
*/}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NetworkInfo;
|