Skip to content

Commit

Permalink
DBC22-2802: default state from saved data
Browse files Browse the repository at this point in the history
  • Loading branch information
@ray-oxd
ray-oxd committed Jan 29, 2025
1 parent 7007681 commit 15e41f4
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 39 deletions.
7 changes: 3 additions & 4 deletions src/frontend/src/Components/routing/RouteDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -431,7 +429,7 @@ export default function RouteDetails(props) {
</div>

<div className="info-row__data">
<NotificationEventType ref={EventTypeFormRef} />
<NotificationEventType ref={EventTypeFormRef} route={route} />
</div>
</div>

Expand All @@ -443,6 +441,7 @@ export default function RouteDetails(props) {
<div className="info-row__data">
<NotificationDateTime
ref={DateTimeFormRef}
route={route}
showSpecificTimeDate={showSpecificTimeDate}
setShowSpecificTimeDate={setShowSpecificTimeDate} />
</div>
Expand Down
66 changes: 35 additions & 31 deletions src/frontend/src/Components/routing/forms/NotificationDateTime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -19,36 +19,42 @@ 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);

// Effects
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) {
Expand All @@ -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
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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} />
</div>

<div key='At a specific time and dates'>
Expand All @@ -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} />
</div>

{ showSpecificTimeDate &&
Expand All @@ -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} />

Expand All @@ -268,7 +272,7 @@ const NotificationDateTime = forwardRef((props, ref) => {
}
step={60 * 15}
placeholder="End time"
value={endTime}
value={defaultEndTime}
min={startTime ? startTime : null} />
</div>
</div>
Expand All @@ -295,7 +299,7 @@ const NotificationDateTime = forwardRef((props, ref) => {
'pickerError' : ''
}
placeholder="Select date"
value={startDate}
value={defaultStartDate}
min={new Date().toISOString().split('T')[0]} />
</div>
}
Expand All @@ -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 } />

Expand All @@ -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] } />
</div>
}
Expand Down
11 changes: 7 additions & 4 deletions src/frontend/src/Components/routing/forms/NotificationEventType.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
});

Expand Down

0 comments on commit 15e41f4

Please sign in to comment.