1 files changed, 32 insertions, 32 deletions

diff --git a/modern/src/settings/MaintenancePage.jsx b/modern/src/settings/MaintenancePage.jsx
index 987789d5..2161e7eb 100644
--- a/modern/src/settings/MaintenancePage.jsx
+++ b/modern/src/settings/MaintenancePage.jsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
 import {
   Accordion,
   AccordionSummary,
@@ -10,7 +11,6 @@ import {
   MenuItem,
   Select,
 } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { prefixString } from '../common/util/stringUtils';
 import EditItemView from './components/EditItemView';
@@ -22,18 +22,10 @@ import {
 import { useTranslation } from '../common/components/LocalizationProvider';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import SettingsMenu from './components/SettingsMenu';
-
-const useStyles = makeStyles((theme) => ({
-  details: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    paddingBottom: theme.spacing(3),
-  },
-}));
+import useSettingsStyles from './common/useSettingsStyles';
 
 const MaintenancePage = () => {
-  const classes = useStyles();
+  const classes = useSettingsStyles();
   const t = useTranslation();
 
   const positionAttributes = usePositionAttributes(t);
@@ -48,21 +40,18 @@ const MaintenancePage = () => {
     const otherList = [];
     Object.keys(attributes).forEach((key) => {
       const value = attributes[key];
-      if (value.type === 'number') {
+      if (value.type === 'number' || key.endsWith('Time')) {
         otherList.push({ key, name: value.name, type: value.type });
       }
     });
     return otherList;
   };
 
-  const onMaintenanceTypeChange = (event) => {
-    const newValue = event.target.value;
-    setItem({
-      ...item, type: newValue, start: 0, period: 0,
-    });
-
-    const attribute = positionAttributes[newValue];
-    if (attribute && attribute.dataType) {
+  useEffect(() => {
+    const attribute = positionAttributes[item?.type];
+    if (item?.type?.endsWith('Time')) {
+      setLabels({ ...labels, start: null, period: t('sharedDays') });
+    } else if (attribute && attribute.dataType) {
       switch (attribute.dataType) {
         case 'distance':
           setLabels({ ...labels, start: t(prefixString('shared', distanceUnit)), period: t(prefixString('shared', distanceUnit)) });
@@ -77,10 +66,16 @@ const MaintenancePage = () => {
     } else {
       setLabels({ ...labels, start: null, period: null });
     }
-  };
+  }, [item?.type]);
 
-  const rawToValue = (value) => {
+  const rawToValue = (start, value) => {
     const attribute = positionAttributes[item.type];
+    if (item.type.endsWith('Time')) {
+      if (start) {
+        return dayjs(value).locale('en').format('YYYY-MM-DD');
+      }
+      return value / 86400000;
+    }
     if (attribute && attribute.dataType) {
       switch (attribute.dataType) {
         case 'speed':
@@ -94,9 +89,14 @@ const MaintenancePage = () => {
     return value;
   };
 
-  const valueToRaw = (value) => {
+  const valueToRaw = (start, value) => {
     const attribute = positionAttributes[item.type];
-    if (attribute && attribute.dataType) {
+    if (item.type.endsWith('Time')) {
+      if (start) {
+        return dayjs(value, 'YYYY-MM-DD').valueOf();
+      }
+      return value * 86400000;
+    } if (attribute && attribute.dataType) {
       switch (attribute.dataType) {
         case 'speed':
           return speedToKnots(value, speedUnit);
@@ -131,7 +131,7 @@ const MaintenancePage = () => {
             <AccordionDetails className={classes.details}>
               <TextField
                 value={item.name || ''}
-                onChange={(event) => setItem({ ...item, name: event.target.value })}
+                onChange={(e) => setItem({ ...item, name: e.target.value })}
                 label={t('sharedName')}
               />
               <FormControl>
@@ -139,7 +139,7 @@ const MaintenancePage = () => {
                 <Select
                   label={t('sharedType')}
                   value={item.type || ''}
-                  onChange={onMaintenanceTypeChange}
+                  onChange={(e) => setItem({ ...item, type: e.target.value, start: 0, period: 0 })}
                 >
                   {convertToList(positionAttributes).map(({ key, name }) => (
                     <MenuItem key={key} value={key}>{name}</MenuItem>
@@ -147,15 +147,15 @@ const MaintenancePage = () => {
                 </Select>
               </FormControl>
               <TextField
-                type="number"
-                value={rawToValue(item.start) || ''}
-                onChange={(event) => setItem({ ...item, start: valueToRaw(event.target.value) })}
+                type={item.type.endsWith('Time') ? 'date' : 'number'}
+                value={rawToValue(true, item.start) || ''}
+                onChange={(e) => setItem({ ...item, start: valueToRaw(true, e.target.value) })}
                 label={labels.start ? `${t('maintenanceStart')} (${labels.start})` : t('maintenanceStart')}
               />
               <TextField
                 type="number"
-                value={rawToValue(item.period) || ''}
-                onChange={(event) => setItem({ ...item, period: valueToRaw(event.target.value) })}
+                value={rawToValue(false, item.period) || ''}
+                onChange={(e) => setItem({ ...item, period: valueToRaw(false, e.target.value) })}
                 label={labels.period ? `${t('maintenancePeriod')} (${labels.period})` : t('maintenancePeriod')}
               />
             </AccordionDetails>