move NTP set time to Settings page

interface/src/app/settings/NTPSettings.tsx

@@ -1,12 +1,27 @@
 import { useState } from 'react';
+import { toast } from 'react-toastify';
 
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
-import { Button, Checkbox, MenuItem } from '@mui/material';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  MenuItem,
+  TextField,
+  Typography
+} from '@mui/material';
 
 import * as NTPApi from 'api/ntp';
 import { readNTPSettings } from 'api/ntp';
 
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova/client';
 import { updateState } from 'alova/client';
 import type { ValidateFieldsError } from 'async-validator';
 import {
@@ -19,8 +34,8 @@ import {
   useLayoutTitle
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
-import type { NTPSettingsType } from 'types';
-import { updateValueDirty, useRest } from 'utils';
+import type { NTPSettingsType, Time } from 'types';
+import { formatLocalDateTime, updateValueDirty, useRest } from 'utils';
 import { validate } from 'validators';
 import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';
 
@@ -46,6 +61,17 @@ const NTPSettings = () => {
   const { LL } = useI18nContext();
   useLayoutTitle('NTP');
 
+  const [localTime, setLocalTime] = useState<string>('');
+  const [settingTime, setSettingTime] = useState<boolean>(false);
+  const [processing, setProcessing] = useState<boolean>(false);
+
+  const { send: updateTime } = useRequest(
+    (local_time: Time) => NTPApi.updateTime(local_time),
+    {
+      immediate: false
+    }
+  );
+
   const updateFormValue = updateValueDirty(
     origData,
     dirtyFlags,
@@ -55,6 +81,78 @@ const NTPSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
+  const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setLocalTime(event.target.value);
+
+  const openSetTime = () => {
+    setLocalTime(formatLocalDateTime(new Date()));
+    setSettingTime(true);
+  };
+
+  const configureTime = async () => {
+    setProcessing(true);
+
+    await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) })
+      .then(async () => {
+        toast.success(LL.TIME_SET());
+        setSettingTime(false);
+        await loadData();
+      })
+      .catch(() => {
+        toast.error(LL.PROBLEM_UPDATING());
+      })
+      .finally(() => {
+        setProcessing(false);
+      });
+  };
+
+  const renderSetTimeDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={settingTime}
+      onClose={() => setSettingTime(false)}
+    >
+      <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
+      <DialogContent dividers>
+        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+          <Typography variant="body2">{LL.SET_TIME_TEXT()}</Typography>
+        </Box>
+        <TextField
+          label={LL.LOCAL_TIME(0)}
+          type="datetime-local"
+          value={localTime}
+          onChange={updateLocalTime}
+          disabled={processing}
+          fullWidth
+          slotProps={{
+            inputLabel: {
+              shrink: true
+            }
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setSettingTime(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<AccessTimeIcon />}
+          variant="outlined"
+          onClick={configureTime}
+          disabled={processing}
+          color="primary"
+        >
+          {LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -115,6 +213,25 @@ const NTPSettings = () => {
           <MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
           {timeZoneSelectItems()}
         </ValidatedTextField>
+
+        <Box display="flex" flexWrap="wrap">
+          {!data.enabled && !dirtyFlags.length && (
+            <Box flexWrap="nowrap" whiteSpace="nowrap">
+              <ButtonRow>
+                <Button
+                  onClick={openSetTime}
+                  variant="outlined"
+                  color="primary"
+                  startIcon={<AccessTimeIcon />}
+                >
+                  {LL.SET_TIME(0)}
+                </Button>
+              </ButtonRow>
+            </Box>
+          )}
+        </Box>
+        {renderSetTimeDialog()}
+
         {dirtyFlags && dirtyFlags.length !== 0 && (
           <ButtonRow>
             <Button

interface/src/app/status/NTPStatus.tsx

@@ -1,40 +1,27 @@
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import CancelIcon from '@mui/icons-material/Cancel';
 import DnsIcon from '@mui/icons-material/Dns';
 import SwapVerticalCircleIcon from '@mui/icons-material/SwapVerticalCircle';
 import UpdateIcon from '@mui/icons-material/Update';
 import {
   Avatar,
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   Divider,
   List,
   ListItem,
   ListItemAvatar,
   ListItemText,
-  TextField,
-  Typography,
   useTheme
 } from '@mui/material';
 import type { Theme } from '@mui/material';
 
 import * as NTPApi from 'api/ntp';
 
-import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
-import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
-import type { NTPStatusType, Time } from 'types';
+import type { NTPStatusType } from 'types';
 import { NTPSyncStatus } from 'types';
 import { useInterval } from 'utils';
-import { formatDateTime, formatLocalDateTime } from 'utils';
+import { formatDateTime } from 'utils';
 
 const NTPStatus = () => {
   const { data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
@@ -43,24 +30,11 @@ const NTPStatus = () => {
     void loadData();
   });
 
-  const [localTime, setLocalTime] = useState<string>('');
-  const [settingTime, setSettingTime] = useState<boolean>(false);
-  const [processing, setProcessing] = useState<boolean>(false);
-
   const { LL } = useI18nContext();
   useLayoutTitle('NTP');
 
-  const { send: updateTime } = useRequest(
-    (local_time: Time) => NTPApi.updateTime(local_time),
-    {
-      immediate: false
-    }
-  );
-
   NTPApi.updateTime;
 
-  const isNtpActive = ({ status }: NTPStatusType) =>
-    status === NTPSyncStatus.NTP_ACTIVE;
   const isNtpEnabled = ({ status }: NTPStatusType) =>
     status !== NTPSyncStatus.NTP_DISABLED;
 
@@ -77,14 +51,6 @@ const NTPStatus = () => {
     }
   };
 
-  const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setLocalTime(event.target.value);
-
-  const openSetTime = () => {
-    setLocalTime(formatLocalDateTime(new Date()));
-    setSettingTime(true);
-  };
-
   const theme = useTheme();
 
   const ntpStatus = ({ status }: NTPStatusType) => {
@@ -100,70 +66,6 @@ const NTPStatus = () => {
     }
   };
 
-  const configureTime = async () => {
-    setProcessing(true);
-
-    await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) })
-      .then(async () => {
-        toast.success(LL.TIME_SET());
-        setSettingTime(false);
-        await loadData();
-      })
-      .catch(() => {
-        toast.error(LL.PROBLEM_UPDATING());
-      })
-      .finally(() => {
-        setProcessing(false);
-      });
-  };
-
-  const renderSetTimeDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={settingTime}
-      onClose={() => setSettingTime(false)}
-    >
-      <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
-      <DialogContent dividers>
-        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
-          <Typography variant="body2">{LL.SET_TIME_TEXT()}</Typography>
-        </Box>
-        <TextField
-          label={LL.LOCAL_TIME(0)}
-          type="datetime-local"
-          value={localTime}
-          onChange={updateLocalTime}
-          disabled={processing}
-          fullWidth
-          slotProps={{
-            inputLabel: {
-              shrink: true
-            }
-          }}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setSettingTime(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<AccessTimeIcon />}
-          variant="outlined"
-          onClick={configureTime}
-          disabled={processing}
-          color="primary"
-        >
-          {LL.UPDATE()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
@@ -219,23 +121,6 @@ const NTPStatus = () => {
           </ListItem>
           <Divider variant="inset" component="li" />
         </List>
-        <Box display="flex" flexWrap="wrap">
-          {data && !isNtpActive(data) && (
-            <Box flexWrap="nowrap" whiteSpace="nowrap">
-              <ButtonRow>
-                <Button
-                  onClick={openSetTime}
-                  variant="outlined"
-                  color="primary"
-                  startIcon={<AccessTimeIcon />}
-                >
-                  {LL.SET_TIME(0)}
-                </Button>
-              </ButtonRow>
-            </Box>
-          )}
-        </Box>
-        {renderSetTimeDialog()}
       </>
     );
   };

interface/src/app/status/Version.tsx

@@ -220,7 +220,7 @@ const Version = () => {
             color="primary"
           >
             <Link underline="none" target="_blank" href={binURL} color="primary">
-              {LL.DOWNLOAD(1)}
+              {LL.DOWNLOAD(0)}
             </Link>
           </Button>
           {!downloadOnly && (

mock-api/rest_server.ts

@@ -414,8 +414,8 @@ let ntp_settings = {
   tz_label: 'Europe/Amsterdam',
   tz_format: 'CET-1CEST,M3.5.0,M10.5.0/3'
 };
-const ntp_status = {
-  status: 2,
+let ntp_status = {
+  status: 0, // 0 = disabled, 1 = inactive, 2 = active
   utc_time: '2021-04-01T14:25:42Z',
   local_time: '2021-04-01T16:25:42',
   server: 'time.google.com',
@@ -4330,7 +4330,15 @@ router
 router
   .get(NTP_SETTINGS_ENDPOINT, () => ntp_settings)
   .get(NTP_STATUS_ENDPOINT, () => ntp_status)
-  .post(TIME_ENDPOINT, () => status(200))
+  .post(TIME_ENDPOINT, async (request: any) => {
+    const rsp = await request.json();
+    const local_time = rsp.local_time;
+    ntp_status.status = 1;
+    ntp_status.local_time = local_time;
+    ntp_status.utc_time = local_time;
+    console.log('ntp time set to', local_time);
+    return status(200);
+  })
   .post(NTP_SETTINGS_ENDPOINT, async (request: any) => {
     ntp_settings = await request.json();
     console.log('ntp settings saved', ntp_settings);