From 08a301d53a39d0a67a2714caef9866c1eeaa4ee3 Mon Sep 17 00:00:00 2001 From: HFO4 <912394456@qq.com> Date: Sat, 3 Apr 2021 16:54:05 +0800 Subject: [PATCH] Feat: support set custom timezone --- package.json | 2 +- src/component/Admin/File/File.js | 12 ++- src/component/Admin/Share/Share.js | 12 ++- src/component/Admin/Task/Download.js | 12 ++- src/component/Admin/Task/Task.js | 12 ++- src/component/Download/DownloadingCard.js | 2 +- src/component/Download/FinishedCard.js | 11 ++- .../FileManager/Sidebar/SideDrawer.js | 7 +- src/component/FileManager/TableRow.js | 7 +- src/component/Modals/TimeZone.js | 88 +++++++++++++++++++ src/component/Setting/Tasks.js | 10 +-- src/component/Setting/UserSetting.js | 40 ++++++++- src/component/Share/Creator.js | 3 +- src/component/Share/MyShare.js | 6 +- src/utils/datetime.js | 28 ++++++ src/utils/index.js | 15 ---- yarn.lock | 10 +-- 17 files changed, 210 insertions(+), 67 deletions(-) create mode 100644 src/component/Modals/TimeZone.js create mode 100644 src/utils/datetime.js diff --git a/package.json b/package.json index e82c78c..b323405 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "clsx": "latest", "connected-react-router": "^6.9.1", "css-loader": "2.1.1", + "dayjs": "^1.10.4", "dotenv": "6.2.0", "dotenv-expand": "5.1.0", "eslint": "^6.8.0", @@ -52,7 +53,6 @@ "material-ui-toggle-icon": "^1.1.1", "mdi-material-ui": "^6.9.0", "mini-css-extract-plugin": "0.8.0", - "moment": "^2.29.1", "monaco-editor-webpack-plugin": "^3.0.0", "optimize-css-assets-webpack-plugin": "5.0.3", "pnp-webpack-plugin": "1.5.0", diff --git a/src/component/Admin/File/File.js b/src/component/Admin/File/File.js index 903cf4b..dbb5581 100644 --- a/src/component/Admin/File/File.js +++ b/src/component/Admin/File/File.js @@ -25,6 +25,7 @@ import { toggleSnackbar } from "../../../actions"; import API from "../../../middleware/Api"; import { sizeToString } from "../../../utils"; import FileFilter from "../Dialogs/FileFilter"; +import { formatLocalTime } from "../../../utils/datetime"; const useStyles = makeStyles((theme) => ({ root: { @@ -424,13 +425,10 @@ export default function File() { - {new Date( - row.CreatedAt - ).toLocaleDateString() + - " " + - new Date( - row.CreatedAt - ).toLocaleTimeString()} + {formatLocalTime( + row.CreatedAt, + "YYYY-MM-DD H:mm:ss" + )} diff --git a/src/component/Admin/Share/Share.js b/src/component/Admin/Share/Share.js index 8457ed5..e336156 100644 --- a/src/component/Admin/Share/Share.js +++ b/src/component/Admin/Share/Share.js @@ -23,6 +23,7 @@ import { useDispatch } from "react-redux"; import { toggleSnackbar } from "../../../actions"; import API from "../../../middleware/Api"; import ShareFilter from "../Dialogs/ShareFilter"; +import { formatLocalTime } from "../../../utils/datetime"; const useStyles = makeStyles((theme) => ({ root: { @@ -445,13 +446,10 @@ export default function Share() { - {new Date( - row.CreatedAt - ).toLocaleDateString() + - " " + - new Date( - row.CreatedAt - ).toLocaleTimeString()} + {formatLocalTime( + row.CreatedAt, + "YYYY-MM-DD H:mm:ss" + )} diff --git a/src/component/Admin/Task/Download.js b/src/component/Admin/Task/Download.js index 244c64b..6272590 100644 --- a/src/component/Admin/Task/Download.js +++ b/src/component/Admin/Task/Download.js @@ -23,6 +23,7 @@ import { toggleSnackbar } from "../../../actions"; import API from "../../../middleware/Api"; import { sizeToString } from "../../../utils"; import ShareFilter from "../Dialogs/ShareFilter"; +import { formatLocalTime } from "../../../utils/datetime"; const useStyles = makeStyles((theme) => ({ root: { @@ -355,13 +356,10 @@ export default function Download() { - {new Date( - row.CreatedAt - ).toLocaleDateString() + - " " + - new Date( - row.CreatedAt - ).toLocaleTimeString()} + {formatLocalTime( + row.CreatedAt, + "YYYY-MM-DD H:mm:ss" + )} diff --git a/src/component/Admin/Task/Task.js b/src/component/Admin/Task/Task.js index 410a077..a5e9f48 100644 --- a/src/component/Admin/Task/Task.js +++ b/src/component/Admin/Task/Task.js @@ -23,6 +23,7 @@ import { toggleSnackbar } from "../../../actions"; import { getTaskProgress, getTaskStatus, getTaskType } from "../../../config"; import API from "../../../middleware/Api"; import ShareFilter from "../Dialogs/ShareFilter"; +import { formatLocalTime } from "../../../utils/datetime"; const useStyles = makeStyles((theme) => ({ root: { @@ -343,13 +344,10 @@ export default function Task() { - {new Date( - row.CreatedAt - ).toLocaleDateString() + - " " + - new Date( - row.CreatedAt - ).toLocaleTimeString()} + {formatLocalTime( + row.CreatedAt, + "YYYY-MM-DD H:mm:ss" + )} diff --git a/src/component/Download/DownloadingCard.js b/src/component/Download/DownloadingCard.js index 15764d4..c20e6f7 100644 --- a/src/component/Download/DownloadingCard.js +++ b/src/component/Download/DownloadingCard.js @@ -585,7 +585,7 @@ export default function DownloadingCard(props) { diff --git a/src/component/Download/FinishedCard.js b/src/component/Download/FinishedCard.js index 68b0966..f6a4b45 100644 --- a/src/component/Download/FinishedCard.js +++ b/src/component/Download/FinishedCard.js @@ -29,6 +29,7 @@ import API from "../../middleware/Api"; import { useDispatch } from "react-redux"; import { toggleSnackbar } from "../../actions"; import { useHistory } from "react-router"; +import { formatLocalTime } from "../../utils/datetime"; const ExpansionPanel = withStyles({ root: { @@ -413,7 +414,10 @@ export default function FinishedCard(props) { 创建日期： - {props.task.create} + {formatLocalTime( + props.task.create, + "YYYY-MM-DD H:mm:ss" + )} @@ -421,7 +425,10 @@ export default function FinishedCard(props) { 最后更新： - {props.task.update} + {formatLocalTime( + props.task.update, + "YYYY-MM-DD H:mm:ss" + )} diff --git a/src/component/FileManager/Sidebar/SideDrawer.js b/src/component/FileManager/Sidebar/SideDrawer.js index 2faad14..d3924f0 100644 --- a/src/component/FileManager/Sidebar/SideDrawer.js +++ b/src/component/FileManager/Sidebar/SideDrawer.js @@ -16,12 +16,12 @@ import { filename, sizeToString } from "../../../utils"; import Link from "@material-ui/core/Link"; import Tooltip from "@material-ui/core/Tooltip"; import TimeAgo from "timeago-react"; -import moment from "moment"; import ListLoading from "../../Placeholder/ListLoading"; import Hidden from "@material-ui/core/Hidden"; import Dialog from "@material-ui/core/Dialog"; import Slide from "@material-ui/core/Slide"; import AppBar from "@material-ui/core/AppBar"; +import { formatLocalTime } from "../../../utils/datetime"; const drawerWidth = 350; @@ -181,13 +181,12 @@ export default function SideDrawer() { { label: "修改于", value: (d, t) => - moment.parseZone(d.updated_at).format("YYYY/MM/DD H:mm:ss"), + formatLocalTime(d.updated_at, "YYYY/MM/DD H:mm:ss"), show: (d) => true, }, { label: "创建于", - value: (d) => - moment.parseZone(d.created_at).format("YYYY/MM/DD H:mm:ss"), + value: (d) => formatLocalTime(d.created_at, "YYYY/MM/DD H:mm:ss"), show: (d) => true, }, ]; diff --git a/src/component/FileManager/TableRow.js b/src/component/FileManager/TableRow.js index 98bbb01..e03c4a8 100644 --- a/src/component/FileManager/TableRow.js +++ b/src/component/FileManager/TableRow.js @@ -20,6 +20,8 @@ import KeyboardReturnIcon from "@material-ui/icons/KeyboardReturn"; import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded"; import statusHelper from "../../utils/page"; import Grow from "@material-ui/core/Grow"; +import dayjs from "dayjs"; +import { formatLocalTime } from "../../utils/datetime"; const styles = (theme) => ({ selected: { @@ -188,7 +190,10 @@ class TableRowCompoment extends Component { })} > {" "} - {this.props.file.date} + {formatLocalTime( + this.props.file.date, + "YYYY-MM-DD H:mm:ss" + )} diff --git a/src/component/Modals/TimeZone.js b/src/component/Modals/TimeZone.js new file mode 100644 index 0000000..d15fd9f --- /dev/null +++ b/src/component/Modals/TimeZone.js @@ -0,0 +1,88 @@ +import React, { useState, useCallback, useEffect } from "react"; +import { FormLabel, makeStyles } from "@material-ui/core"; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + DialogContentText, + CircularProgress, +} from "@material-ui/core"; +import { toggleSnackbar, setModalsLoading } from "../../actions/index"; +import PathSelector from "../FileManager/PathSelector"; +import { useDispatch } from "react-redux"; +import API from "../../middleware/Api"; +import TextField from "@material-ui/core/TextField"; +import Select from "@material-ui/core/Select"; +import MenuItem from "@material-ui/core/MenuItem"; +import { + refreshTimeZone, + timeZone, + validateTimeZone, +} from "../../utils/datetime"; +import FormControl from "@material-ui/core/FormControl"; +import Auth from "../../middleware/Auth"; + +const useStyles = makeStyles((theme) => ({})); + +export default function TimeZoneDialog(props) { + const [timeZoneValue, setTimeZoneValue] = useState(timeZone); + const dispatch = useDispatch(); + const ToggleSnackbar = useCallback( + (vertical, horizontal, msg, color) => + dispatch(toggleSnackbar(vertical, horizontal, msg, color)), + [dispatch] + ); + + const saveZoneInfo = () => { + if (!validateTimeZone(timeZoneValue)) { + ToggleSnackbar("top", "right", "无效的时区名称", "warning"); + return; + } + Auth.SetPreference("timeZone", timeZoneValue); + refreshTimeZone(); + props.onClose(); + }; + + const classes = useStyles(); + + return ( + + 更改时区 + + + + setTimeZoneValue(e.target.value)} + /> + + + + + +
+ +
+ + + ); +} diff --git a/src/component/Setting/Tasks.js b/src/component/Setting/Tasks.js index e60dd29..8f7ba62 100644 --- a/src/component/Setting/Tasks.js +++ b/src/component/Setting/Tasks.js @@ -9,9 +9,9 @@ import TableRow from "@material-ui/core/TableRow"; import TableCell from "@material-ui/core/TableCell"; import TableBody from "@material-ui/core/TableBody"; import API from "../../middleware/Api"; -import TimeAgo from "timeago-react"; import { getTaskProgress, getTaskStatus, getTaskType } from "../../config"; import Pagination from "@material-ui/lab/Pagination"; +import { formatLocalTime } from "../../utils/datetime"; const useStyles = makeStyles((theme) => ({ layout: { @@ -119,10 +119,10 @@ export default function Tasks() { component="th" scope="row" > - + {formatLocalTime( + row.create_date, + "YYYY-MM-DD H:mm:ss" + )} {getTaskType(row.type)} diff --git a/src/component/Setting/UserSetting.js b/src/component/Setting/UserSetting.js index a1f9b33..f28ba8a 100644 --- a/src/component/Setting/UserSetting.js +++ b/src/component/Setting/UserSetting.js @@ -48,9 +48,11 @@ import API from "../../middleware/Api"; import Auth from "../../middleware/Auth"; import { withRouter } from "react-router"; import QRCode from "qrcode-react"; -import { Brightness3, ListAlt, PermContactCalendar } from "@material-ui/icons"; +import { Brightness3, ListAlt, PermContactCalendar,Schedule } from "@material-ui/icons"; import { transformTime } from "../../utils"; import Authn from "./Authn"; +import { formatLocalTime, timeZone } from "../../utils/datetime"; +import TimeZoneDialog from "../Modals/TimeZone"; const styles = (theme) => ({ layout: { @@ -197,6 +199,7 @@ class UserSettingCompoment extends Component { changeWebDavPwd: false, groupBackModal: false, changePolicy: false, + changeTimeZone: false, settings: { uid: 0, group_expires: 0, @@ -706,8 +709,9 @@ class UserSettingCompoment extends Component { className={classes.infoText} color="textSecondary" > - {transformTime( - parseInt(user.created_at + "000") + {formatLocalTime( + user.created_at, + "YYYY-MM-DD H:mm:ss" )} @@ -889,6 +893,32 @@ class UserSettingCompoment extends Component { /> + + + this.setState({ changeTimeZone: true }) + } + button + > + + + + + + + + {timeZone} + + + + {user.group.webdav && ( @@ -976,6 +1006,10 @@ class UserSettingCompoment extends Component { )}
+ this.setState({ changeTimeZone: false })} + open={this.state.changeTimeZone} + /> ({ boxHeader: { @@ -38,7 +39,7 @@ export default function Creator(props) { } return Math.round(props.share.expire / 3600) + " 小时后到期"; } - return props.share.create_date; + return formatLocalTime(props.share.create_date, "YYYY-MM-DD H:mm:ss"); }; const userProfile = () => { diff --git a/src/component/Share/MyShare.js b/src/component/Share/MyShare.js index a2d2d1b..7587d67 100644 --- a/src/component/Share/MyShare.js +++ b/src/component/Share/MyShare.js @@ -36,6 +36,7 @@ import MenuItem from "@material-ui/core/MenuItem"; import FormControl from "@material-ui/core/FormControl"; import { withRouter } from "react-router-dom"; import ToggleIcon from "material-ui-toggle-icon"; +import { formatLocalTime } from "../../utils/datetime"; const styles = (theme) => ({ cardContainer: { @@ -342,7 +343,10 @@ class MyShareCompoment extends Component { } subheader={ - {value.create_date} + {formatLocalTime( + value.create_date, + "YYYY-MM-DD H:mm:ss" + )} {this.isExpired(value) && (