901 lines
48 KiB
React
901 lines
48 KiB
React
import { useState, useEffect, useMemo, useRef } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Header from './Header';
|
|
import useSerialData from '../hooks/useSerialData';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { useNomenclatures } from '../contexts/NomenclatureContext';
|
|
import { useNomenclatureData } from '../contexts/NomenclatureDataContext';
|
|
import { useScaleProtocols } from '../contexts/ScaleProtocolContext';
|
|
import { useLicense } from '../contexts/LicenseContext';
|
|
import { parseReading } from '../services/scaleProtocols';
|
|
import NomenclatureDropdown from './NomenclatureUI/NomenclatureDropdown';
|
|
import ReportPreviewModal from './ReportPreviewModal';
|
|
import ExtraCombinationsTable from './ExtraCombinationsTable';
|
|
import { visibleNomenclatures, codesRevealedBy } from '../services/nomenclatureVisibility';
|
|
import { buildVehicleReportData } from '../services/vehicleReportData';
|
|
import api from '../services/api';
|
|
import './Main.css';
|
|
import './License/LicenseManager.css';
|
|
|
|
export default function Main() {
|
|
const navigate = useNavigate();
|
|
const { readings, isConnected } = useSerialData();
|
|
const { vehicles } = useNomenclatures();
|
|
const { currentUser } = useAuth();
|
|
const { selectedProtocol } = useScaleProtocols();
|
|
const { allowed: licenseAllowed, detail: licenseDetail, stationKey, status: licenseStatus } = useLicense();
|
|
|
|
const [selectedVehicleId, setSelectedVehicleId] = useState(null);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [showNewForm, setShowNewForm] = useState(false);
|
|
const [newForm, setNewForm] = useState({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '', driver_name: '' });
|
|
const [newExtraData, setNewExtraData] = useState({});
|
|
const [error, setError] = useState('');
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [showNoticeReport, setShowNoticeReport] = useState(false);
|
|
const [isPrinting, setIsPrinting] = useState(false);
|
|
const [showDesignMenu, setShowDesignMenu] = useState(false);
|
|
const [showManualForm, setShowManualForm] = useState(false);
|
|
const [manualForm, setManualForm] = useState({ value: '', note: '' });
|
|
|
|
// Nomenclature data from context
|
|
const { definitions, entries } = useNomenclatureData();
|
|
const vehicleNomenclatures = useMemo(
|
|
() => Object.values(definitions)
|
|
.filter(d => d.applies_to === 'vehicle')
|
|
.sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0)),
|
|
[definitions]
|
|
);
|
|
const [extraData, setExtraData] = useState({});
|
|
|
|
// A selector's value decides which other nomenclatures appear, so the visible
|
|
// set is derived per panel from that panel's own extra data.
|
|
const visibleForSelected = useMemo(
|
|
() => visibleNomenclatures(vehicleNomenclatures, definitions, extraData),
|
|
[vehicleNomenclatures, definitions, extraData]
|
|
);
|
|
const visibleForNew = useMemo(
|
|
() => visibleNomenclatures(vehicleNomenclatures, definitions, newExtraData),
|
|
[vehicleNomenclatures, definitions, newExtraData]
|
|
);
|
|
|
|
// Switching a selector clears whatever its PREVIOUS choice revealed, so a
|
|
// vehicle never carries data contradicting its own selector. Clearing on the
|
|
// previous value (rather than diffing visible sets) keeps a nomenclature that
|
|
// both choices reveal from being needlessly emptied.
|
|
const applySelectorChange = (setter) => (code, newValue) => {
|
|
setter(prev => {
|
|
const next = { ...prev, [code]: newValue };
|
|
if (definitions[code]?.kind === 'selector') {
|
|
for (const revealed of codesRevealedBy(definitions, code, prev[code])) {
|
|
delete next[revealed];
|
|
}
|
|
}
|
|
if (newValue === undefined) delete next[code];
|
|
return next;
|
|
});
|
|
};
|
|
const handleExtraChange = applySelectorChange(setExtraData);
|
|
const handleNewExtraChange = applySelectorChange(setNewExtraData);
|
|
|
|
// Never send a value the selector state hides - the serializer rejects those,
|
|
// and stale keys can survive on vehicles that predate the selector.
|
|
const prunedExtra = (data, visible) => {
|
|
const allowed = new Set(visible.map(n => n.code));
|
|
return Object.fromEntries(
|
|
Object.entries(data).filter(([code]) => allowed.has(code))
|
|
);
|
|
};
|
|
|
|
// Current reading from the serial bridge. The bridge is pure transport - how
|
|
// to read a line comes from the station protocol definition, so a new scale
|
|
// type never requires updating the bridge on the station PC.
|
|
const latestReading = readings.length > 0 ? readings[0] : null;
|
|
|
|
const parsed = useMemo(
|
|
() => parseReading(latestReading, selectedProtocol),
|
|
[latestReading, selectedProtocol]
|
|
);
|
|
const currentWeight = parsed.weight;
|
|
const isBalanced = parsed.balanced;
|
|
const readingError = parsed.error;
|
|
|
|
// Equalizer bar history: last 40 readings, oldest first, newest at the
|
|
// right. A ticking interval, not a useEffect keyed on value changes - a
|
|
// static weight (scale settled, or nothing on it) would otherwise never
|
|
// push a new bar at all, since the effect only reruns when the value
|
|
// itself changes. Sampling on a timer keeps the strip moving continuously
|
|
// whether or not the reading is currently changing.
|
|
const EQUALIZER_BAR_COUNT = 40;
|
|
const EQUALIZER_SAMPLE_INTERVAL_MS = 250;
|
|
const EQUALIZER_FIXED_MAX_KG = 60000;
|
|
const [equalizerBars, setEqualizerBars] = useState([]);
|
|
// 'fixed' makes bar height comparable across vehicles/sessions; 'auto'
|
|
// scales to whatever is on screen right now, so a light load still fills
|
|
// the card. Not persisted - always starts on 'fixed' per session.
|
|
const [equalizerScaleMode, setEqualizerScaleMode] = useState('fixed');
|
|
const latestReadingRef = useRef({ weight: null, balanced: null });
|
|
latestReadingRef.current = { weight: currentWeight, balanced: isBalanced };
|
|
useEffect(() => {
|
|
const id = setInterval(() => {
|
|
const { weight, balanced } = latestReadingRef.current;
|
|
if (weight === null || isNaN(weight)) return;
|
|
setEqualizerBars(prev => [...prev, { value: weight, balanced }].slice(-EQUALIZER_BAR_COUNT));
|
|
}, EQUALIZER_SAMPLE_INTERVAL_MS);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
|
|
// Padded to a fixed 40 slots (empty ones render as zero-height bars).
|
|
// 'fixed' scales against EQUALIZER_FIXED_MAX_KG (clamped at 100% above
|
|
// it); 'auto' scales against the tallest bar currently visible, so the
|
|
// row re-scales as the window slides instead of clipping.
|
|
const equalizerSlots = useMemo(() => {
|
|
const maxValue = equalizerScaleMode === 'fixed'
|
|
? EQUALIZER_FIXED_MAX_KG
|
|
: Math.max(1, ...equalizerBars.map(b => Math.abs(b.value)));
|
|
const padding = Array(Math.max(0, EQUALIZER_BAR_COUNT - equalizerBars.length)).fill(null);
|
|
return [...padding, ...equalizerBars].map(bar => ({
|
|
balanced: bar?.balanced ?? null,
|
|
heightPct: bar ? Math.min(100, Math.max(6, (Math.abs(bar.value) / maxValue) * 100)) : 0,
|
|
}));
|
|
}, [equalizerBars, equalizerScaleMode]);
|
|
|
|
// Tell the bridge how to talk to this scale. Polled indicators stay silent
|
|
// until asked, so the bridge must send the command on its own timer - a
|
|
// browser tab cannot be the heartbeat (background tabs get throttled, and a
|
|
// closed tab would stop the scale). The UI only supplies the string.
|
|
useEffect(() => {
|
|
if (!selectedProtocol) return;
|
|
const serialUrl = import.meta.env.VITE_SERIAL_URL || 'http://localhost:5000';
|
|
fetch(serialUrl + '/poll', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
command: selectedProtocol.poll_command || '',
|
|
interval: selectedProtocol.poll_interval || 0.2,
|
|
}),
|
|
}).catch(() => {
|
|
// Bridge not reachable - the SSE connection state already shows this.
|
|
});
|
|
}, [selectedProtocol]);
|
|
|
|
// Selected vehicle object (refreshes when vehicles list updates via SSE)
|
|
const selectedVehicle = useMemo(
|
|
() => vehicles.find(v => v.id === selectedVehicleId) || null,
|
|
[vehicles, selectedVehicleId]
|
|
);
|
|
|
|
// Filtered vehicles
|
|
const filteredVehicles = useMemo(() => {
|
|
if (!searchQuery.trim()) return vehicles;
|
|
const q = searchQuery.toLowerCase();
|
|
return vehicles.filter(v => v.vehicle_number.toLowerCase().includes(q));
|
|
}, [vehicles, searchQuery]);
|
|
|
|
// When vehicle selection changes, load its extra data
|
|
useEffect(() => {
|
|
if (selectedVehicle?.extra?.data) {
|
|
setExtraData({ ...selectedVehicle.extra.data });
|
|
} else {
|
|
setExtraData({});
|
|
}
|
|
}, [selectedVehicle]);
|
|
|
|
// Open new vehicle form
|
|
const handleNewVehicle = () => {
|
|
setSelectedVehicleId(null);
|
|
setShowNewForm(true);
|
|
setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '' });
|
|
setNewExtraData({});
|
|
setError('');
|
|
};
|
|
|
|
// Cancel new vehicle form
|
|
const handleCancelNew = () => {
|
|
setShowNewForm(false);
|
|
setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '', driver_name: '' });
|
|
setNewExtraData({});
|
|
setError('');
|
|
};
|
|
|
|
// Create new vehicle
|
|
const handleCreateVehicle = async () => {
|
|
if (!newForm.vehicle_number.trim()) return;
|
|
setIsSaving(true);
|
|
setError('');
|
|
try {
|
|
const payload = {
|
|
vehicle_number: newForm.vehicle_number.trim(),
|
|
trailer1_number: newForm.trailer1_number.trim() || null,
|
|
trailer2_number: newForm.trailer2_number.trim() || null,
|
|
driver_pid: newForm.driver_pid.trim() || null,
|
|
driver_name: newForm.driver_name.trim(),
|
|
};
|
|
// Include extra data if any values set
|
|
const visibleNewExtra = prunedExtra(newExtraData, visibleForNew);
|
|
const hasExtra = Object.values(visibleNewExtra).some(v => v !== undefined && v !== null && v !== '');
|
|
if (hasExtra) {
|
|
payload.extra = { data: visibleNewExtra };
|
|
}
|
|
const res = await api.post('/api/vehicles/', payload);
|
|
setSelectedVehicleId(res.data.id);
|
|
setShowNewForm(false);
|
|
setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '', driver_name: '' });
|
|
setNewExtraData({});
|
|
} catch (err) {
|
|
const data = err.response?.data;
|
|
const msg = data?.vehicle_number?.[0] || data?.detail || (typeof data === 'string' ? data : JSON.stringify(data)) || 'Failed to create vehicle';
|
|
setError(msg);
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
// Record a weighing - the backend decides whether it is tare or gross
|
|
const handleMeasure = async () => {
|
|
if (!selectedVehicle || currentWeight === null || isNaN(currentWeight)) return;
|
|
setError('');
|
|
try {
|
|
await api.post(`/api/vehicles/${selectedVehicle.id}/measure/`, {
|
|
value: currentWeight,
|
|
station_key: stationKey,
|
|
});
|
|
} catch (err) {
|
|
setError(err.response?.data?.detail || 'Failed to record measurement');
|
|
}
|
|
};
|
|
|
|
// Record a weighing entered by hand - requires a note
|
|
const handleManualMeasure = async () => {
|
|
if (!selectedVehicle) return;
|
|
const value = parseInt(manualForm.value, 10);
|
|
if (isNaN(value)) {
|
|
setError('Enter a valid weight');
|
|
return;
|
|
}
|
|
if (!manualForm.note.trim()) {
|
|
setError('A note is required for a manual measurement');
|
|
return;
|
|
}
|
|
setIsSaving(true);
|
|
setError('');
|
|
try {
|
|
await api.post(`/api/vehicles/${selectedVehicle.id}/measure/`, {
|
|
value,
|
|
manual: true,
|
|
note: manualForm.note.trim(),
|
|
station_key: stationKey,
|
|
});
|
|
setShowManualForm(false);
|
|
setManualForm({ value: '', note: '' });
|
|
} catch (err) {
|
|
setError(err.response?.data?.detail || 'Failed to record measurement');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
// Save extra data
|
|
const handleSaveExtra = async () => {
|
|
if (!selectedVehicle) return;
|
|
setIsSaving(true);
|
|
setError('');
|
|
try {
|
|
await api.patch(`/api/vehicles/${selectedVehicle.id}/`, {
|
|
extra: { data: prunedExtra(extraData, visibleForSelected) },
|
|
});
|
|
} catch (err) {
|
|
const data = err.response?.data;
|
|
setError(typeof data === 'string' ? data : JSON.stringify(data) || 'Failed to save');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
// Apply a saved combination - merge so non-lookup field values are preserved
|
|
// A combination carries its selector value, so applying one must also drop
|
|
// whatever the previous selection revealed - otherwise a stale field survives
|
|
// the merge and the payload contradicts the new source.
|
|
const applyCombination = (setter) => (data) => {
|
|
setter(prev => {
|
|
const next = { ...prev, ...data };
|
|
for (const [code, nom] of Object.entries(definitions)) {
|
|
if (nom.kind !== 'selector') continue;
|
|
if (!(code in data) || data[code] === prev[code]) continue;
|
|
for (const revealed of codesRevealedBy(definitions, code, prev[code])) {
|
|
if (!(revealed in data)) delete next[revealed];
|
|
}
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
const handleApplyCombination = applyCombination(setExtraData);
|
|
const handleApplyCombinationNew = applyCombination(setNewExtraData);
|
|
|
|
// Format date
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
};
|
|
|
|
// Net weight
|
|
const netWeight = (selectedVehicle?.tare != null && selectedVehicle?.gross != null)
|
|
? selectedVehicle.gross - selectedVehicle.tare
|
|
: null;
|
|
|
|
const canMeasure = !!currentUser?.can_measure;
|
|
const isFinalized = selectedVehicle?.tare != null && selectedVehicle?.gross != null;
|
|
|
|
// Vehicle data shaped for report preview/design (shared with History)
|
|
const vehicleReportData = useMemo(
|
|
() => buildVehicleReportData(selectedVehicle, definitions, entries),
|
|
[selectedVehicle, definitions, entries]
|
|
);
|
|
|
|
// Look up the saved notice report by name. Server-side filter — ?name= is a
|
|
// real filter now that django-filter is configured, replacing the old
|
|
// fetch-every-report-then-.find() pattern.
|
|
const fetchNoticeReport = async () => {
|
|
const res = await api.get('/api/reports/?name=notice_report');
|
|
return (res.data.results || res.data || [])[0] || null;
|
|
};
|
|
|
|
// Warm the A4 print chunk on hover/focus, so the click handler's dynamic
|
|
// import resolves from cache instead of blocking on a network round-trip
|
|
// between the operator's click and window.print(). Cheap insurance: the
|
|
// print dialog is not gated behind transient user activation the way
|
|
// window.open is, but the shorter the gap the less there is to go wrong on
|
|
// a slow station. Failure is ignored — the click path imports it anyway.
|
|
const prefetchA4Print = () => {
|
|
import('./ReportEditor/a4/print/printReport').catch(() => {});
|
|
};
|
|
|
|
// Print Notice always opens the unified preview modal now — the modal
|
|
// itself fetches both the matrix and a4 notice_report variants and decides
|
|
// what Print/Download do based on whichever kind is selected in its own
|
|
// switcher. Previously an a4 report skipped the modal and went straight to
|
|
// window.print(); that bypass is gone so both kinds get the same
|
|
// preview/print/download/mark-notice-printed flow.
|
|
const handlePrintNotice = async () => {
|
|
if (isPrinting) return;
|
|
setIsPrinting(true);
|
|
try {
|
|
const report = await fetchNoticeReport();
|
|
if (!report) {
|
|
setError('Report "notice_report" not found. Create it in the Report Editor first.');
|
|
return;
|
|
}
|
|
setShowNoticeReport(true);
|
|
} catch (err) {
|
|
console.error('Failed to print notice:', err);
|
|
setError('Failed to load the notice report');
|
|
} finally {
|
|
setIsPrinting(false);
|
|
}
|
|
};
|
|
|
|
// Design Notice routes to the editor that can actually edit the saved
|
|
// report. A matrix report opened in the mm editor would read its character
|
|
// coordinates as millimetres, so the kind decides the route, not a default.
|
|
const handleDesignNotice = async () => {
|
|
const state = { reportName: 'notice_report', vehicleData: vehicleReportData };
|
|
try {
|
|
const report = await fetchNoticeReport();
|
|
navigate(report?.kind === 'a4' ? '/report-editor-a4' : '/report-editor', { state });
|
|
} catch (err) {
|
|
// Nothing saved yet, or the lookup failed — the matrix editor is the
|
|
// existing default and pre-fills the name so Save creates it.
|
|
console.error('Failed to resolve notice report kind:', err);
|
|
navigate('/report-editor', { state });
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Open a chosen editor regardless of what is saved.
|
|
*
|
|
* The automatic route above is right for editing an existing notice; this is
|
|
* for deliberately starting the OTHER kind. Opening a report in the wrong
|
|
* editor reinterprets its coordinates — character cells as millimetres, or
|
|
* the reverse — so a mismatch is confirmed rather than done silently.
|
|
*/
|
|
const handleDesignAs = async (kind) => {
|
|
setShowDesignMenu(false);
|
|
const state = { reportName: 'notice_report', vehicleData: vehicleReportData };
|
|
const route = kind === 'a4' ? '/report-editor-a4' : '/report-editor';
|
|
|
|
let saved = null;
|
|
try {
|
|
saved = await fetchNoticeReport();
|
|
} catch (err) {
|
|
console.error('Failed to resolve notice report kind:', err);
|
|
}
|
|
|
|
if (saved && saved.kind !== kind) {
|
|
const savedLabel = saved.kind === 'a4' ? 'A4' : 'matrix';
|
|
const targetLabel = kind === 'a4' ? 'A4' : 'matrix';
|
|
const ok = window.confirm(
|
|
`"notice_report" is saved as a ${savedLabel} report.\n\n` +
|
|
`Opening it in the ${targetLabel} editor will read its positions in the ` +
|
|
`wrong units, and saving would overwrite the ${savedLabel} layout.\n\n` +
|
|
`Open the ${targetLabel} editor anyway?`
|
|
);
|
|
if (!ok) return;
|
|
}
|
|
|
|
navigate(route, { state });
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Header />
|
|
{licenseStatus && !licenseStatus.valid && (
|
|
<div className={`license-banner ${licenseStatus.in_grace ? '' : 'license-banner--blocked'}`}>
|
|
{licenseStatus.in_grace
|
|
? <>This installation is not licensed. Everything keeps working for <strong>{licenseStatus.grace_days_left} more days</strong>.</>
|
|
: <>This installation is not licensed. Only {licenseStatus.stations} station can measure.</>}
|
|
</div>
|
|
)}
|
|
<div className="main">
|
|
{/* Left panel - Vehicle list */}
|
|
<div className="main-left">
|
|
<div className="vehicle-list-header">
|
|
<button
|
|
className="vehicle-add-btn"
|
|
onClick={handleNewVehicle}
|
|
>
|
|
+ New Vehicle
|
|
</button>
|
|
<input
|
|
className="vehicle-search"
|
|
type="text"
|
|
placeholder="Search..."
|
|
value={searchQuery}
|
|
onChange={e => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="vehicle-list">
|
|
{filteredVehicles.map(v => (
|
|
<div
|
|
key={v.id}
|
|
className={`vehicle-list-item ${selectedVehicleId === v.id ? 'vehicle-list-item--active' : ''}`}
|
|
onClick={() => { setSelectedVehicleId(v.id); setShowNewForm(false); setError(''); }}
|
|
>
|
|
<span className="vehicle-list-number">{v.vehicle_number}</span>
|
|
{v.tare != null && (
|
|
<span className="vehicle-list-weight">{v.tare} kg</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
{filteredVehicles.length === 0 && (
|
|
<div className="vehicle-list-empty">No vehicles found</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right panel - Vehicle detail or New form */}
|
|
<div className="main-right">
|
|
{showNewForm ? (
|
|
<div className="vehicle-detail">
|
|
{error && <div className="vehicle-error">{error}</div>}
|
|
|
|
<h2 className="vehicle-detail-title">New Vehicle</h2>
|
|
|
|
<div className="vehicle-form-section">
|
|
<div className="vehicle-new-fields">
|
|
<div className="extra-field">
|
|
<label>Vehicle Number *</label>
|
|
<input
|
|
type="text"
|
|
value={newForm.vehicle_number}
|
|
onChange={e => setNewForm(prev => ({ ...prev, vehicle_number: e.target.value }))}
|
|
disabled={isSaving}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="extra-field">
|
|
<label>Trailer 1</label>
|
|
<input
|
|
type="text"
|
|
value={newForm.trailer1_number}
|
|
onChange={e => setNewForm(prev => ({ ...prev, trailer1_number: e.target.value }))}
|
|
disabled={isSaving}
|
|
/>
|
|
</div>
|
|
<div className="extra-field">
|
|
<label>Trailer 2</label>
|
|
<input
|
|
type="text"
|
|
value={newForm.trailer2_number}
|
|
onChange={e => setNewForm(prev => ({ ...prev, trailer2_number: e.target.value }))}
|
|
disabled={isSaving}
|
|
/>
|
|
</div>
|
|
<div className="extra-field">
|
|
<label>Driver PID</label>
|
|
<input
|
|
type="text"
|
|
value={newForm.driver_pid}
|
|
onChange={e => setNewForm(prev => ({ ...prev, driver_pid: e.target.value }))}
|
|
disabled={isSaving}
|
|
/>
|
|
</div>
|
|
<div className="extra-field">
|
|
<label>Driver Name *</label>
|
|
<input
|
|
type="text"
|
|
value={newForm.driver_name}
|
|
onChange={e => setNewForm(prev => ({ ...prev, driver_name: e.target.value }))}
|
|
disabled={isSaving}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{vehicleNomenclatures.length > 0 && (
|
|
<div className="extra-section">
|
|
<ExtraCombinationsTable
|
|
nomenclatures={vehicleNomenclatures}
|
|
onApply={handleApplyCombinationNew}
|
|
/>
|
|
<h3>Additional Data</h3>
|
|
<div className="extra-fields">
|
|
{visibleForNew.map(nom => (
|
|
<div key={nom.code} className="extra-field">
|
|
<NomenclatureDropdown
|
|
nomenclatureCode={nom.code}
|
|
value={newExtraData[nom.code]}
|
|
onChange={val => handleNewExtraChange(nom.code, val)}
|
|
disabled={isSaving}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="vehicle-form-actions">
|
|
<button
|
|
className="vehicle-form-cancel"
|
|
onClick={handleCancelNew}
|
|
disabled={isSaving}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="extra-save-btn"
|
|
onClick={handleCreateVehicle}
|
|
disabled={isSaving || !newForm.vehicle_number.trim() || !newForm.driver_name.trim()}
|
|
>
|
|
{isSaving ? 'Creating...' : 'Create Vehicle'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : !selectedVehicle ? (
|
|
<div className="main-placeholder">
|
|
Select a vehicle or create a new one
|
|
</div>
|
|
) : (
|
|
<div className="vehicle-detail">
|
|
{error && <div className="vehicle-error">{error}</div>}
|
|
|
|
{/* Header bar: icon, plate number, derived status pills, and (cockpit
|
|
only) a photo. Both pills come from real state, not decoration:
|
|
"on scale" is this vehicle having a live reading right now, and
|
|
the weighing status is the same isFinalized used by the cards
|
|
below. */}
|
|
<div className="vehicle-hero">
|
|
<div className="vehicle-heading">
|
|
<span className="vehicle-icon" aria-hidden="true">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" strokeWidth="1.7"
|
|
strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M3 6h11v11H3z" />
|
|
<path d="M14 10h4l3 3v4h-7z" />
|
|
<circle cx="7" cy="19" r="2" />
|
|
<circle cx="18" cy="19" r="2" />
|
|
</svg>
|
|
</span>
|
|
<h2 className="vehicle-detail-title">{selectedVehicle.vehicle_number}</h2>
|
|
<span className={`vehicle-status ${isFinalized ? 'vehicle-status--done' : 'vehicle-status--progress'}`}>
|
|
● {isFinalized ? 'Finalized' : 'In progress'}
|
|
</span>
|
|
{isConnected && currentWeight !== null && !isNaN(currentWeight) && (
|
|
<span className="vehicle-status vehicle-status--scale">◉ On Scale</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Equalizer: last 40 live readings, oldest to newest left to
|
|
right. Green when the last reading was stable, rose when it
|
|
wasn't. The corner button switches between scaling against a
|
|
fixed 60t ceiling (comparable across vehicles) and scaling to
|
|
whatever is on screen right now (fills the strip for any
|
|
load). No border/background of its own - it sits directly on
|
|
the hero bar between the pills and the photo. */}
|
|
<div className="vehicle-hero-equalizer">
|
|
<button
|
|
type="button"
|
|
className="equalizer-scale-toggle"
|
|
onClick={() => setEqualizerScaleMode(m => m === 'fixed' ? 'auto' : 'fixed')}
|
|
title={equalizerScaleMode === 'fixed'
|
|
? 'Scaled to 60,000 kg - click for auto-scale'
|
|
: 'Auto-scaled to visible readings - click for fixed 60,000 kg'}
|
|
>
|
|
{equalizerScaleMode === 'fixed' ? '60t' : 'AUTO'}
|
|
</button>
|
|
<div className="equalizer-bars">
|
|
{equalizerSlots.map((slot, i) => (
|
|
<span
|
|
key={i}
|
|
className={`equalizer-bar ${
|
|
slot.balanced === null ? '' : slot.balanced ? 'equalizer-bar--balanced' : 'equalizer-bar--unbalanced'
|
|
}`}
|
|
style={{ height: `${slot.heightPct}%` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vehicle-hero-photo" aria-hidden="true" />
|
|
</div>
|
|
|
|
{/* Weighing section - four readouts plus an action column, all of
|
|
which always render, so the row never changes its column count
|
|
as a weighing progresses. The readouts hold no controls: every
|
|
button lives in the action column. */}
|
|
<div className="weighing-section">
|
|
{/* Current reading, which doubles as the Measure card:
|
|
both showed the same live weight. Icon and text sit in
|
|
separate columns (weight-card-icon / -content), matching
|
|
the reference layout - the icon spans the card's full
|
|
height instead of sitting inline with the label. */}
|
|
<div className="weight-card weight-card--reading">
|
|
<span className="weight-card-icon" aria-hidden="true" />
|
|
<div className="weight-card-content">
|
|
<div className="weight-card-header">Current Reading</div>
|
|
<div className={`weight-card-value weight-card-value--reading ${
|
|
!isConnected
|
|
? 'reading-value--disconnected'
|
|
: currentWeight === null || isNaN(currentWeight)
|
|
? ''
|
|
: isBalanced ? 'reading-value--balanced' : 'reading-value--unbalanced'
|
|
}`}>
|
|
{currentWeight !== null && !isNaN(currentWeight)
|
|
? `${currentWeight} kg`
|
|
: (isConnected ? 'Waiting...' : 'Disconnected')
|
|
}
|
|
</div>
|
|
{isConnected && readingError && latestReading && (
|
|
<div className="reading-error" title={latestReading.data}>
|
|
{readingError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* Measure/Manual entry, moved here from the action column:
|
|
they act on THIS card's live value, so they sit beside it. */}
|
|
{canMeasure && !isFinalized && (
|
|
<div className="weight-card-reading-actions">
|
|
<button
|
|
className="weight-set-btn"
|
|
onClick={handleMeasure}
|
|
disabled={currentWeight === null || isNaN(currentWeight) || !licenseAllowed}
|
|
title={licenseAllowed ? undefined : licenseDetail}
|
|
>
|
|
Measure
|
|
</button>
|
|
{!licenseAllowed && (
|
|
<div className="weight-license-block">{licenseDetail}</div>
|
|
)}
|
|
{currentUser?.can_manually_measure && (
|
|
<button
|
|
className="weight-manual-btn"
|
|
onClick={() => { setManualForm({ value: '', note: '' }); setShowManualForm(true); }}
|
|
>
|
|
Manual entry
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tare. A lone reading is parked here by the backend, but a
|
|
lighter second one moves it to Gross - the slot is shown
|
|
plainly rather than hedged behind a neutral label. */}
|
|
<div className="weight-card weight-card--tare">
|
|
<span className="weight-card-icon" aria-hidden="true" />
|
|
<div className="weight-card-content">
|
|
<div className="weight-card-header">Tare</div>
|
|
<div className="weight-card-value">
|
|
{selectedVehicle.tare != null ? `${selectedVehicle.tare} kg` : '—'}
|
|
</div>
|
|
{selectedVehicle.tare != null && (
|
|
<div className="weight-card-meta">
|
|
{formatDate(selectedVehicle.tare_date)}
|
|
{selectedVehicle.tare_user_name && ` (${selectedVehicle.tare_user_name})`}
|
|
{selectedVehicle.tare_manual && <span className="weight-manual-tag">manual</span>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gross */}
|
|
<div className="weight-card weight-card--gross">
|
|
<span className="weight-card-icon" aria-hidden="true" />
|
|
<div className="weight-card-content">
|
|
<div className="weight-card-header">Gross</div>
|
|
<div className="weight-card-value">
|
|
{selectedVehicle.gross != null ? `${selectedVehicle.gross} kg` : '—'}
|
|
</div>
|
|
{selectedVehicle.gross != null && (
|
|
<div className="weight-card-meta">
|
|
{formatDate(selectedVehicle.gross_date)}
|
|
{selectedVehicle.gross_user_name && ` (${selectedVehicle.gross_user_name})`}
|
|
{selectedVehicle.gross_manual && <span className="weight-manual-tag">manual</span>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Net */}
|
|
<div className="weight-card weight-card--net">
|
|
<span className="weight-card-icon" aria-hidden="true" />
|
|
<div className="weight-card-content">
|
|
<div className="weight-card-header">Net</div>
|
|
<div className="weight-card-value">
|
|
{netWeight !== null ? `${netWeight} kg` : '—'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action column. Print/Design only now - Measure/Manual entry
|
|
moved into the Current Reading card, since they act on that
|
|
card's live value. This column is empty (just its panel
|
|
chrome) until weighing is finalized. */}
|
|
<div className="weight-card weight-actions">
|
|
{netWeight !== null && (
|
|
<>
|
|
<button
|
|
className="weight-set-btn"
|
|
onClick={handlePrintNotice}
|
|
onMouseEnter={prefetchA4Print}
|
|
onFocus={prefetchA4Print}
|
|
disabled={isPrinting}
|
|
>
|
|
{isPrinting ? 'Preparing...' : 'Print Notice'}
|
|
</button>
|
|
{/* Split button: the main action routes by
|
|
the saved report's kind; the caret opens
|
|
an explicit choice for starting the other
|
|
kind. */}
|
|
<div className="design-notice-split">
|
|
<button
|
|
className="weight-set-btn design-notice-main"
|
|
onClick={handleDesignNotice}
|
|
>
|
|
Design Notice
|
|
</button>
|
|
<button
|
|
className="weight-set-btn design-notice-caret"
|
|
onClick={() => setShowDesignMenu(v => !v)}
|
|
aria-haspopup="menu"
|
|
aria-expanded={showDesignMenu}
|
|
title="Choose which editor to open"
|
|
>
|
|
▾
|
|
</button>
|
|
{showDesignMenu && (
|
|
<>
|
|
{/* Click-away closes the menu. */}
|
|
<div
|
|
className="design-notice-backdrop"
|
|
onClick={() => setShowDesignMenu(false)}
|
|
/>
|
|
<div className="design-notice-menu" role="menu">
|
|
<button
|
|
role="menuitem"
|
|
onClick={() => handleDesignAs('matrix')}
|
|
>
|
|
<strong>Matrix editor</strong>
|
|
<span>Character grid · dot-matrix printer</span>
|
|
</button>
|
|
<button
|
|
role="menuitem"
|
|
onClick={() => handleDesignAs('a4')}
|
|
>
|
|
<strong>A4 editor</strong>
|
|
<span>Millimetres · laser printer & PDF</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Extra fields from nomenclatures */}
|
|
{vehicleNomenclatures.length > 0 && (
|
|
<div className="extra-section">
|
|
<ExtraCombinationsTable
|
|
nomenclatures={vehicleNomenclatures}
|
|
onApply={handleApplyCombination}
|
|
/>
|
|
<h3>Additional Data</h3>
|
|
<div className="extra-fields">
|
|
{visibleForSelected.map(nom => (
|
|
<div key={nom.code} className="extra-field">
|
|
<NomenclatureDropdown
|
|
nomenclatureCode={nom.code}
|
|
value={extraData[nom.code]}
|
|
onChange={val => handleExtraChange(nom.code, val)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
className="extra-save-btn"
|
|
onClick={handleSaveExtra}
|
|
disabled={isSaving}
|
|
>
|
|
{isSaving ? 'Saving...' : 'Save Extra Data'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{showNoticeReport && vehicleReportData && (
|
|
<ReportPreviewModal
|
|
vehicleData={vehicleReportData}
|
|
onClose={() => setShowNoticeReport(false)}
|
|
/>
|
|
)}
|
|
|
|
{showManualForm && (
|
|
<div className="manual-overlay" onClick={() => setShowManualForm(false)}>
|
|
<div className="manual-content" onClick={e => e.stopPropagation()}>
|
|
<h3>Manual measurement</h3>
|
|
<div className="manual-field">
|
|
<label>Weight (kg)</label>
|
|
<input
|
|
type="number"
|
|
value={manualForm.value}
|
|
onChange={e => setManualForm(prev => ({ ...prev, value: e.target.value }))}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="manual-field">
|
|
<label>Reason</label>
|
|
<input
|
|
type="text"
|
|
value={manualForm.note}
|
|
onChange={e => setManualForm(prev => ({ ...prev, note: e.target.value }))}
|
|
placeholder="Why is this entered by hand?"
|
|
/>
|
|
</div>
|
|
<div className="manual-actions">
|
|
<button
|
|
className="vehicle-form-cancel"
|
|
onClick={() => setShowManualForm(false)}
|
|
disabled={isSaving}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="weight-set-btn"
|
|
onClick={handleManualMeasure}
|
|
disabled={isSaving}
|
|
>
|
|
{isSaving ? 'Saving...' : 'Record'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|