#1665

interface/src/framework/system/OTASettingsForm.tsx

@@ -1,127 +0,0 @@
-import CancelIcon from '@mui/icons-material/Cancel';
-import WarningIcon from '@mui/icons-material/Warning';
-import { Button, Checkbox } from '@mui/material';
-import { useState } from 'react';
-import type { ValidateFieldsError } from 'async-validator';
-import type { FC } from 'react';
-
-import type { OTASettings } from 'types';
-import * as SystemApi from 'api/system';
-import {
-  BlockFormControlLabel,
-  ButtonRow,
-  FormLoader,
-  SectionContent,
-  ValidatedPasswordField,
-  ValidatedTextField,
-  BlockNavigation
-} from 'components';
-
-import { useI18nContext } from 'i18n/i18n-react';
-import { numberValue, updateValueDirty, useRest } from 'utils';
-
-import { validate } from 'validators';
-import { OTA_SETTINGS_VALIDATOR } from 'validators/system';
-
-const OTASettingsForm: FC = () => {
-  const {
-    loadData,
-    saveData,
-    saving,
-    updateDataValue,
-    data,
-    origData,
-    dirtyFlags,
-    setDirtyFlags,
-    blocker,
-    errorMessage
-  } = useRest<OTASettings>({
-    read: SystemApi.readOTASettings,
-    update: SystemApi.updateOTASettings
-  });
-
-  const { LL } = useI18nContext();
-
-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
-
-  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
-    }
-
-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(OTA_SETTINGS_VALIDATOR, data);
-        await saveData();
-      } catch (errors: any) {
-        setFieldErrors(errors);
-      }
-    };
-
-    return (
-      <>
-        <BlockFormControlLabel
-          control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
-          label={LL.ENABLE_OTA()}
-        />
-        <ValidatedTextField
-          fieldErrors={fieldErrors}
-          name="port"
-          label="Port"
-          fullWidth
-          variant="outlined"
-          value={numberValue(data.port)}
-          type="number"
-          onChange={updateFormValue}
-          margin="normal"
-        />
-        <ValidatedPasswordField
-          fieldErrors={fieldErrors}
-          name="password"
-          label={LL.PASSWORD()}
-          fullWidth
-          variant="outlined"
-          value={data.password}
-          onChange={updateFormValue}
-          margin="normal"
-        />
-        {dirtyFlags && dirtyFlags.length !== 0 && (
-          <ButtonRow>
-            <Button
-              startIcon={<CancelIcon />}
-              disabled={saving}
-              variant="outlined"
-              color="primary"
-              type="submit"
-              onClick={loadData}
-            >
-              {LL.CANCEL()}
-            </Button>
-            <Button
-              startIcon={<WarningIcon color="warning" />}
-              disabled={saving}
-              variant="contained"
-              color="info"
-              type="submit"
-              onClick={validateAndSubmit}
-            >
-              {LL.APPLY_CHANGES(dirtyFlags.length)}
-            </Button>
-          </ButtonRow>
-        )}
-      </>
-    );
-  };
-
-  return (
-    <SectionContent title={LL.SETTINGS_OF('OTA')} titleGutter>
-      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content()}
-    </SectionContent>
-  );
-};
-
-export default OTASettingsForm;

interface/src/framework/system/Status.tsx

@@ -0,0 +1,36 @@
+import { Tab } from '@mui/material';
+import { Navigate, Routes, Route } from 'react-router-dom';
+import SystemLog from './SystemLog';
+import SystemStatusForm from './SystemStatusForm';
+import type { FC } from 'react';
+
+import { useRouterTab, RouterTabs, useLayoutTitle } from 'components';
+
+import { useI18nContext } from 'i18n/i18n-react';
+import EMSStatus from 'project/EMSStatus';
+
+const Status: FC = () => {
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.STATUS_OF(''));
+
+  const { routerTab } = useRouterTab();
+
+  return (
+    <>
+      <RouterTabs value={routerTab}>
+        <Tab value="status" label={LL.SYSTEM(1)} />
+        <Tab value="emsesp-status" label="EMS-ESP" />
+        <Tab value="log" label={LL.LOG_OF(LL.SYSTEM(2))} />
+      </RouterTabs>
+      <Routes>
+        <Route path="status" element={<SystemStatusForm />} />
+        <Route path="emsesp-status" element={<EMSStatus />} />
+        <Route path="log" element={<SystemLog />} />
+        <Route path="*" element={<Navigate replace to="status" />} />
+      </Routes>
+    </>
+  );
+};
+
+export default Status;

interface/src/framework/system/System.tsx

@@ -1,56 +0,0 @@
-import { Tab } from '@mui/material';
-import { useContext } from 'react';
-import { Navigate, Routes, Route } from 'react-router-dom';
-import OTASettingsForm from './OTASettingsForm';
-import SystemLog from './SystemLog';
-import SystemStatusForm from './SystemStatusForm';
-import UploadFileForm from './UploadFileForm';
-import type { FC } from 'react';
-
-import { useRouterTab, RouterTabs, useLayoutTitle, RequireAdmin } from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
-
-import { useI18nContext } from 'i18n/i18n-react';
-
-const System: FC = () => {
-  const { LL } = useI18nContext();
-
-  useLayoutTitle(LL.SYSTEM(0));
-
-  const { me } = useContext(AuthenticatedContext);
-  const { routerTab } = useRouterTab();
-
-  return (
-    <>
-      <RouterTabs value={routerTab}>
-        <Tab value="/system/status" label={LL.STATUS_OF(LL.SYSTEM(1))} />
-        <Tab value="/system/log" label={LL.LOG_OF(LL.SYSTEM(2))} />
-        <Tab value="/system/ota" label={LL.SETTINGS_OF('OTA')} disabled={!me.admin} />
-        <Tab value="/system/upload" label={LL.UPLOAD_DOWNLOAD()} disabled={!me.admin} />
-      </RouterTabs>
-      <Routes>
-        <Route path="status" element={<SystemStatusForm />} />
-        <Route path="log" element={<SystemLog />} />
-        <Route
-          path="ota"
-          element={
-            <RequireAdmin>
-              <OTASettingsForm />
-            </RequireAdmin>
-          }
-        />
-        <Route
-          path="upload"
-          element={
-            <RequireAdmin>
-              <UploadFileForm />
-            </RequireAdmin>
-          }
-        />
-        <Route path="*" element={<Navigate replace to="/system/status" />} />
-      </Routes>
-    </>
-  );
-};
-
-export default System;

interface/src/framework/system/SystemStatusForm.tsx

@@ -345,7 +345,7 @@ const SystemStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title={LL.STATUS_OF(LL.SYSTEM(1))} titleGutter>
+    <SectionContent title={LL.STATUS_OF(LL.SYSTEM(1))}>
       {restarting ? <RestartMonitor /> : content()}
       {data && (
         <SystemStatusVersionDialog

interface/src/framework/system/UploadDownload.tsx

@@ -6,12 +6,12 @@ import { toast } from 'react-toastify';
 import RestartMonitor from './RestartMonitor';
 
 import * as SystemApi from 'api/system';
-import { SectionContent, SingleUpload } from 'components';
+import { SectionContent, SingleUpload, useLayoutTitle } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
 import * as EMSESP from 'project/api';
 
-const UploadFileForm: FC = () => {
+const UploadDownload: FC = () => {
   const { LL } = useI18nContext();
   const [restarting, setRestarting] = useState<boolean>();
   const [md5, setMd5] = useState<string>();
@@ -127,6 +127,8 @@ const UploadFileForm: FC = () => {
     });
   };
 
+  useLayoutTitle(LL.UPLOAD_DOWNLOAD());
+
   const content = () => (
     <>
       <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
@@ -214,11 +216,7 @@ const UploadFileForm: FC = () => {
       )}
     </>
   );
-  return (
-    <SectionContent title={LL.UPLOAD_DOWNLOAD()} titleGutter>
-      {restarting ? <RestartMonitor /> : content()}
-    </SectionContent>
-  );
+  return <SectionContent title={LL.UPLOAD_DOWNLOAD()}>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
 };
 
-export default UploadFileForm;
+export default UploadDownload;