Unterer Bereich - Schleifenwiderstand und Messkurve

This commit is contained in:
ISA
2024-10-15 19:30:46 +02:00
parent 24258f938f
commit 2891e70a6b
2 changed files with 47 additions and 6 deletions

View File

@@ -1,4 +1,4 @@
#Next.js Webserver, bleibt localhost auf CPL bei production
#NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
#CPL Webserver für die Entwicklung , um Daten von CPL zu bekommen, hat funktioniert auf dem CPL selbst
NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443
#NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443

View File

@@ -47,11 +47,52 @@ function Kue705FO({
</div>
{/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
<div className="absolute bottom-0 left-[1.095px] w-[113.182px] h-[105.864px] bg-gray-300 border-[1.5px] border-gray-400">
{/* Messkurve Button */}
<div className="absolute bottom-[1.5px] left-[13.49px] w-[91.428px] h-[14.544px] bg-littwin-blue flex items-center justify-center">
<span className="text-white text-[9px]">Messkurve</span>
<div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
<span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
Schleifenwiderstand [kOhm]
</span>
{/* Schleifenwiderstand Anzeige */}
<div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
{/* Icon rechts oben */}
<button
onClick={() => console.log("Refresh clicked")}
className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
>
<span className="text-white text-[18px]"></span>
</button>
{/* Wertanzeige */}
<div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
{/* Schleifenwiderstand */}
<div className=" top-[220px] left-[10px] text-black text-[10px]">
<p>{schleifenwiderstand} kOhm</p>
</div>
</div>
</div>
{/* Schleife und TDR Buttons nebeneinander */}
<div className="flex mt-2 space-x-1">
<button
onClick={() => console.log("Schleife clicked")}
className="w-[50%] h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center"
>
Schleife
</button>
<button
onClick={() => console.log("TDR clicked")}
className="w-[50%] h-[25px] bg-gray-400 text-white text-[10px] flex items-center justify-center"
>
TDR
</button>
</div>
{/* Messkurve Button */}
<button
onClick={() => console.log("Messkurve clicked")}
className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
>
Messkurve
</button>
</div>
</div>
);