feat: Add cursor wait state to AnalogInputsTable rows during data loading

- Applied `cursor-wait` style to table rows (`<tr>`) in AnalogInputsTable when loading is true.
- Ensured consistent cursor behavior across the entire table and rows
This commit is contained in:
ISA
2025-07-23 13:40:43 +02:00
parent 2272668ace
commit bdbdd27963
8 changed files with 44 additions and 19 deletions

View File

@@ -42,7 +42,13 @@ ChartJS.register(
TimeScale
);
export default function AnalogInputsChart() {
export default function AnalogInputsChart({
setLoading,
loading,
}: {
setLoading: (loading: boolean) => void;
loading: boolean;
}) {
useEffect(() => {
if (typeof window !== "undefined") {
import("chartjs-plugin-zoom").then((zoom) => {
@@ -119,9 +125,6 @@ export default function AnalogInputsChart() {
setLocalBisDatum(to);
};
// Define loading state
const [loading, setLoading] = React.useState(false);
// ✅ Button → Redux + Fetch triggern
const handleFetchData = () => {
if (!selectedAnalogInput?.id) return;

View File

@@ -14,7 +14,7 @@ import {
setAutoLoad,
} from "@/redux/slices/analogInputs/analogInputsHistorySlice";
export default function AnalogInputsTable() {
export default function AnalogInputsTable({ loading }: { loading: boolean }) {
const dispatch = useDispatch<AppDispatch>();
const [activeId, setActiveId] = React.useState<number | null>(null);
@@ -35,7 +35,11 @@ export default function AnalogInputsTable() {
};
return (
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1">
<div
className={`bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1 ${
loading ? "cursor-wait" : ""
}`}
>
<h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
<Icon
icon={waveformIcon}
@@ -44,7 +48,11 @@ export default function AnalogInputsTable() {
Messwerteingänge
</h2>
<div className="overflow-x-auto">
<table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse">
<table
className={`w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse ${
loading ? "cursor-wait" : ""
}`}
>
<thead className="bg-gray-100 border-b items-center ">
<tr>
<th className="border p-1 text-left">Eingang</th>
@@ -67,7 +75,9 @@ export default function AnalogInputsTable() {
<tr
key={index}
className={`transition cursor-pointer ${
analogInput.id === activeId
loading
? "cursor-wait"
: analogInput.id === activeId
? "bg-blue-100"
: "hover:bg-gray-100"
}`}

View File

@@ -10,15 +10,14 @@ import { useSelector } from "react-redux";
import { RootState } from "@/redux/store";
function AnalogInputsView() {
const [loading, setLoading] = useState(false); // Add loading state
const selectedInput = useSelector(
(state: RootState) => state.selectedAnalogInput
);
const selectedId = useSelector(
(state: RootState) => state.analogInputsHistory.selectedId
);
const isSettingsModalOpen = useSelector(
(state: RootState) => state.analogInputsUi.isSettingsModalOpen
);
const dispatch = useAppDispatch();
@@ -33,21 +32,25 @@ function AnalogInputsView() {
}, [dispatch]);
return (
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)]">
<div
className={`flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] ${
loading ? "cursor-wait" : ""
}`}
>
<div className="container mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-white rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4 text-gray-700">
Messwerteingänge
</h2>
<AnalogInputsTable />
<AnalogInputsTable loading={loading} />
</div>
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
<h2 className="text-xl font-semibold mb-4 text-gray-700">
Messkurve Messwerteingang {selectedId ?? ""}
</h2>
<AnalogInputsChart />
<AnalogInputsChart setLoading={setLoading} loading={loading} />
</div>
</div>
</div>