Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.637
NEXT_PUBLIC_APP_VERSION=1.6.638
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.637
NEXT_PUBLIC_APP_VERSION=1.6.638
NEXT_PUBLIC_CPL_MODE=production

9
CHANGELOG.md
View File

@@ -1,3 +1,12 @@
## [1.6.638] – 2025-07-23
- feat: Add cursor wait during chart data loading
- Implemented cursor wait state while chart data is being loaded in `AnalogInputsChart.tsx`.
- Fixed missing dependencies in `useEffect` and defined `loading` state.
- Updated `handleFetchData` to manage
---
## [1.6.637] – 2025-07-23
- feat: Add cursor wait during chart data loading

11
components/main/analogInputs/AnalogInputsChart.tsx
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;

18
components/main/analogInputs/AnalogInputsTable.tsx
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"
}`}

15
components/main/analogInputs/AnalogInputsView.tsx
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>

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "cpl-v4",
"version": "1.6.637",
"version": "1.6.638",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "cpl-v4",
"version": "1.6.637",
"version": "1.6.638",
"dependencies": {
"@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "cpl-v4",
"version": "1.6.637",
"version": "1.6.638",
"private": true,
"scripts": {
"dev": "next dev",