YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add database filesize in UI (#488)

Browse Source
This commit is contained in:
boojack
2022-11-18 21:17:52 +08:00
committed by GitHub
parent 706b1b428f
commit a2831b37c4
13 changed files with 74 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/components/Settings/SystemSection.tsx
View File

@ -3,17 +3,28 @@ import { useTranslation } from "react-i18next";
import { Button, Switch, Textarea } from "@mui/joy";
import * as api from "../../helpers/api";
import toastHelper from "../Toast";
import "../../less/settings/preferences-section.less";
import "../../less/settings/system-section.less";
interface State {
dbSize: number;
allowSignUp: boolean;
additionalStyle: string;
additionalScript: string;
}
const formatBytes = (bytes: number) => {
if (bytes <= 0) return "0 Bytes";
const k = 1024,
dm = 2,
sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i];
};
const SystemSection = () => {
const { t } = useTranslation();
const [state, setState] = useState<State>({
dbSize: 0,
allowSignUp: false,
additionalStyle: "",
additionalScript: "",
@ -23,6 +34,7 @@ const SystemSection = () => {
api.getSystemStatus().then(({ data }) => {
const { data: status } = data;
setState({
dbSize: status.dbSize,
allowSignUp: status.allowSignUp,
additionalStyle: status.additionalStyle,
additionalScript: status.additionalScript,
@ -82,13 +94,17 @@ const SystemSection = () => {
};
return (
<div className="section-container preferences-section-container">
<div className="section-container system-section-container">
<p className="title-text">{t("common.basic")}</p>
<label className="form-label selector">
<p className="text-value">
Database File Size: <span className="font-mono font-medium">{formatBytes(state.dbSize)}</span>
</p>
<p className="title-text">{t("sidebar.setting")}</p>
<label className="form-label">
<span className="normal-text">Allow user signup</span>
<Switch size="sm" checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
</label>
<div className="form-label selector">
<div className="form-label">
<span className="normal-text">Additional style</span>
<Button size="sm" onClick={handleSaveAdditionalStyle}>
Save
@ -100,12 +116,13 @@ const SystemSection = () => {
fontFamily: "monospace",
fontSize: "14px",
}}
minRows={5}
minRows={4}
maxRows={10}
placeholder="Additional css codes"
value={state.additionalStyle}
onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
/>
<div className="form-label selector mt-2">
<div className="form-label mt-2">
<span className="normal-text">Additional script</span>
<Button size="sm" onClick={handleSaveAdditionalScript}>
Save
@ -117,8 +134,9 @@ const SystemSection = () => {
fontFamily: "monospace",
fontSize: "14px",
}}
minRows={5}
minRows={4}
maxRows={10}
placeholder="Additional JavaScript codes"
value={state.additionalScript}
onChange={(event) => handleAdditionalScriptChanged(event.target.value)}
/>