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:
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
}`}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user