From 15e41f4e8e6991e80c56058e621e287b57567ab6 Mon Sep 17 00:00:00 2001 From: ray Date: Tue, 28 Jan 2025 19:17:26 -0800 Subject: [PATCH] DBC22-2802: default state from saved data --- .../src/Components/routing/RouteDetails.js | 7 +- .../routing/forms/NotificationDateTime.js | 66 ++++++++++--------- .../routing/forms/NotificationEventType.js | 11 ++-- 3 files changed, 45 insertions(+), 39 deletions(-) diff --git a/src/frontend/src/Components/routing/RouteDetails.js b/src/frontend/src/Components/routing/RouteDetails.js index fb190907..6d2afa0a 100644 --- a/src/frontend/src/Components/routing/RouteDetails.js +++ b/src/frontend/src/Components/routing/RouteDetails.js @@ -106,7 +106,7 @@ export default function RouteDetails(props) { /* Notification states */ const [notificationsEnabled, setNotificationsEnabled] = useState(route.notification); const [showNotificationForm, setShowNotificationForm] = useState(false); - const [showSpecificTimeDate, setShowSpecificTimeDate] = useState(false); + const [showSpecificTimeDate, setShowSpecificTimeDate] = useState(!!route.notification && !!route.notification_start_time); // Data const loadRouteCameras = async () => { @@ -397,8 +397,6 @@ export default function RouteDetails(props) { ...dateTimePayload }; - console.log('payload', payload); - const response = await patchRoute(route, selectedRoute, dispatch, payload); setNotificationsEnabled(response.notification); setShowNotificationForm(false); @@ -431,7 +429,7 @@ export default function RouteDetails(props) {
- +
@@ -443,6 +441,7 @@ export default function RouteDetails(props) {
diff --git a/src/frontend/src/Components/routing/forms/NotificationDateTime.js b/src/frontend/src/Components/routing/forms/NotificationDateTime.js index f3f47009..a8eb7989 100644 --- a/src/frontend/src/Components/routing/forms/NotificationDateTime.js +++ b/src/frontend/src/Components/routing/forms/NotificationDateTime.js @@ -10,7 +10,7 @@ import './NotificaitonDateTime.scss'; const NotificationDateTime = forwardRef((props, ref) => { /* Setup */ // Props - const { showSpecificTimeDate, setShowSpecificTimeDate } = props; + const { route, showSpecificTimeDate, setShowSpecificTimeDate } = props; // Ref const startTimeRef = useRef(); @@ -19,25 +19,31 @@ const NotificationDateTime = forwardRef((props, ref) => { const [errorMessages, setErrorMessages] = useState([]); const specificDateOptions = ['Specific date', 'Date range', 'Days of the week']; - const [specificDateOption, setSpecificDateOption] = useState(specificDateOptions[0]); - - // Date range - const [startDate, setStartDate] = useState(); - const [endDate, setEndDate] = useState(); + const defaultSpecificDateOption = route.notification_days.length > 0 ? specificDateOptions[2] : + (route.notification_end_date ? specificDateOptions[1] : specificDateOptions[0]); + const [specificDateOption, setSpecificDateOption] = useState(defaultSpecificDateOption); // Time range - const [startTime, setStartTime] = useState(); - const [endTime, setEndTime] = useState(); + const defaultStartTime = route.notification_start_time.split(':').slice(0, 2).join(':'); + const defaultEndTime = route.notification_end_time.split(':').slice(0, 2).join(':'); + const [startTime, setStartTime] = useState(defaultStartTime); + const [endTime, setEndTime] = useState(defaultEndTime); + + // Date range + const defaultStartDate = route.notification_start_date; + const defaultEndDate = route.notification_end_date; + const [startDate, setStartDate] = useState(defaultStartDate); + const [endDate, setEndDate] = useState(defaultEndDate); // Day of week const defaultDayOfWeek = { - Monday: false, - Tuesday: false, - Wednesday: false, - Thursday: false, - Friday: false, - Saturday: false, - Sunday: false + Monday: route.notification_days.includes('Monday'), + Tuesday: route.notification_days.includes('Tuesday'), + Wednesday: route.notification_days.includes('Wednesday'), + Thursday: route.notification_days.includes('Thursday'), + Friday: route.notification_days.includes('Friday'), + Saturday: route.notification_days.includes('Saturday'), + Sunday: route.notification_days.includes('Sunday') } const [dayOfWeek, setDayOfWeek] = useState(defaultDayOfWeek); @@ -45,10 +51,10 @@ const NotificationDateTime = forwardRef((props, ref) => { useEffect(() => { // Reset all date time options setDayOfWeek(defaultDayOfWeek); - setStartDate(null); - setStartTime(null); - setEndDate(null); - setEndTime(null); + setStartTime(defaultStartTime); + setEndTime(defaultEndTime); + setStartDate(defaultStartDate); + setEndDate(defaultEndDate); // Bind event listeners to time pickers if (showSpecificTimeDate) { @@ -67,8 +73,8 @@ const NotificationDateTime = forwardRef((props, ref) => { useEffect(() => { // Reset date options - setStartDate(null); - setEndDate(null); + setStartDate(defaultStartDate); + setEndDate(defaultEndDate); setDayOfWeek(defaultDayOfWeek); // No need to bind event listeners if specific time date is not shown @@ -178,7 +184,7 @@ const NotificationDateTime = forwardRef((props, ref) => { /* Handlers */ const handleRadioChange = (event) => { - if (event.target.value === 'specific') { + if (event.target.id === 'specific') { setShowSpecificTimeDate(true); } else { @@ -219,9 +225,8 @@ const NotificationDateTime = forwardRef((props, ref) => { id='immediately' name='notifications-time' label='Immediately and all the time' - value='immediately' onChange={handleRadioChange} - defaultChecked /> + defaultChecked={!showSpecificTimeDate} />
@@ -230,9 +235,8 @@ const NotificationDateTime = forwardRef((props, ref) => { id='specific' name='notifications-time' label='At a specific time and dates' - value='specific' onChange={handleRadioChange} - /> + defaultChecked={showSpecificTimeDate} />
{ showSpecificTimeDate && @@ -253,7 +257,7 @@ const NotificationDateTime = forwardRef((props, ref) => { ref={startTimeRef} step={60 * 15} placeholder="Start time" - value={startTime} + value={defaultStartTime} max={endTime ? endTime : null} error-message={startTimeRef.current ? startTimeRef.current.errorMessage : null} /> @@ -268,7 +272,7 @@ const NotificationDateTime = forwardRef((props, ref) => { } step={60 * 15} placeholder="End time" - value={endTime} + value={defaultEndTime} min={startTime ? startTime : null} /> @@ -295,7 +299,7 @@ const NotificationDateTime = forwardRef((props, ref) => { 'pickerError' : '' } placeholder="Select date" - value={startDate} + value={defaultStartDate} min={new Date().toISOString().split('T')[0]} /> } @@ -310,7 +314,7 @@ const NotificationDateTime = forwardRef((props, ref) => { 'pickerError' : '' } placeholder="Start date" - value={startDate} + value={defaultStartDate} min={new Date().toISOString().split('T')[0]} max={endDate ? endDate : null } /> @@ -324,7 +328,7 @@ const NotificationDateTime = forwardRef((props, ref) => { 'pickerError' : '' } placeholder="End date" - value={endDate} + value={defaultEndDate} min={startDate ? startDate : new Date().toISOString().split('T')[0] } /> } diff --git a/src/frontend/src/Components/routing/forms/NotificationEventType.js b/src/frontend/src/Components/routing/forms/NotificationEventType.js index 9c002bf8..387ec15e 100644 --- a/src/frontend/src/Components/routing/forms/NotificationEventType.js +++ b/src/frontend/src/Components/routing/forms/NotificationEventType.js @@ -13,14 +13,17 @@ import './NotificaitonEventType.scss'; const NotificationEventType = forwardRef((props, ref) => { /* Setup */ + // Props + const { route } = props; + // States const [errorMessage, setErrorMessage] = useState(''); const [notificationEventTypes, setNotificationEventTypes] = useState({ // advisories: true, - closures: true, - majorEvents: true, - minorEvents: true, - roadConditions: true, + closures: route.notification_types && route.notification_types.includes('closures'), + majorEvents: route.notification_types && route.notification_types.includes('majorEvents'), + minorEvents: route.notification_types && route.notification_types.includes('minorEvents'), + roadConditions: route.notification_types && route.notification_types.includes('roadConditions'), // chainUps: true });