Ecosystem/ai-gateway
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve the token edit page

Browse Source
This commit is contained in:
JustSong 2023-04-25 09:24:02 +08:00
parent 336c03a125
commit 5ed4a3d405
3 changed files with 27 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/App.js
View File

@ -18,7 +18,6 @@ import { StatusContext } from './context/Status';
import Channel from './pages/Channel';
import Token from './pages/Token';
import EditToken from './pages/Token/EditToken';
import AddToken from './pages/Token/AddToken';
import EditChannel from './pages/Channel/EditChannel';
import AddChannel from './pages/Channel/AddChannel';
@ -116,7 +115,7 @@ function App() {
path='/token/add'
element={
<Suspense fallback={<Loading></Loading>}>
<AddToken />
<EditToken />
</Suspense>
}
/>

115
web/src/pages/Token/AddToken.js
View File

@ -1,115 +0,0 @@
import React, { useState } from 'react';
import { Button, Form, Header, Segment } from 'semantic-ui-react';
import { API, showError, showSuccess, timestamp2string } from '../../helpers';
const AddToken = () => {
const originInputs = {
name: '',
remain_times: -1,
expired_time: -1
};
const [inputs, setInputs] = useState(originInputs);
const { name, remain_times, expired_time } = inputs;
const handleInputChange = (e, { name, value }) => {
setInputs((inputs) => ({ ...inputs, [name]: value }));
};
const setExpiredTime = (month, day, hour, minute) => {
let now = new Date();
let timestamp = now.getTime() / 1000;
let seconds = month * 30 * 24 * 60 * 60;
seconds += day * 24 * 60 * 60;
seconds += hour * 60 * 60;
seconds += minute * 60;
if (seconds !== 0) {
timestamp += seconds;
setInputs({ ...inputs, expired_time: timestamp2string(timestamp) });
} else {
setInputs({ ...inputs, expired_time: -1 });
}
};
const submit = async () => {
if (inputs.name === '') return;
let localInputs = inputs;
localInputs.remain_times = parseInt(localInputs.remain_times);
if (localInputs.expired_time !== -1) {
let time = Date.parse(localInputs.expired_time);
if (isNaN(time)) {
showError('过期时间格式错误！');
return;
}
localInputs.expired_time = Math.ceil(time / 1000);
}
const res = await API.post(`/api/token/`, localInputs);
const { success, message } = res.data;
if (success) {
showSuccess('令牌创建成功！');
setInputs(originInputs);
} else {
showError(message);
}
};
return (
<>
<Segment>
<Header as='h3'>创建新的令牌</Header>
<Form autoComplete='off'>
<Form.Field>
<Form.Input
label='名称'
name='name'
placeholder={'请输入名称'}
onChange={handleInputChange}
value={name}
autoComplete='off'
required
/>
</Form.Field>
<Form.Field>
<Form.Input
label='剩余次数'
name='remain_times'
placeholder={'请输入剩余次数，-1 表示无限制'}
onChange={handleInputChange}
value={remain_times}
autoComplete='off'
/>
</Form.Field>
<Form.Field>
<Form.Input
label='过期时间'
name='expired_time'
placeholder={'请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'}
onChange={handleInputChange}
value={expired_time}
autoComplete='off'
/>
</Form.Field>
<Button type={'button'} onClick={() => {
setExpiredTime(0, 0, 0, 0);
}}>永不过期</Button>
<Button type={'button'} onClick={() => {
setExpiredTime(1, 0, 0, 0);
}}>一个月后过期</Button>
<Button type={'button'} onClick={() => {
setExpiredTime(0, 1, 0, 0);
}}>一天后过期</Button>
<Button type={'button'} onClick={() => {
setExpiredTime(0, 0, 1, 0);
}}>一小时后过期</Button>
<Button type={'button'} onClick={() => {
setExpiredTime(0, 0, 0, 1);
}}>一分钟后过期</Button>
<Button type={'submit'} onClick={submit}>
提交
</Button>
</Form>
</Segment>
</>
);
};
export default AddToken;

34
web/src/pages/Token/EditToken.js
View File

@ -6,12 +6,14 @@ import { API, showError, showSuccess, timestamp2string } from '../../helpers';
const EditToken = () => {
const params = useParams();
const tokenId = params.id;
const [loading, setLoading] = useState(true);
const [inputs, setInputs] = useState({
const isEdit = tokenId !== undefined;
const [loading, setLoading] = useState(isEdit);
const originInputs = {
name: '',
remain_times: -1,
expired_time: -1
});
};
const [inputs, setInputs] = useState(originInputs);
const { name, remain_times, expired_time } = inputs;
const handleInputChange = (e, { name, value }) => {
@ -47,10 +49,13 @@ const EditToken = () => {
setLoading(false);
};
useEffect(() => {
loadToken().then();
if (isEdit) {
loadToken().then();
}
}, []);
const submit = async () => {
if (!isEdit && inputs.name === '') return;
let localInputs = inputs;
localInputs.remain_times = parseInt(localInputs.remain_times);
if (localInputs.expired_time !== -1) {
@ -61,10 +66,20 @@ const EditToken = () => {
}
localInputs.expired_time = Math.ceil(time / 1000);
}
let res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(tokenId) });
let res;
if (isEdit) {
res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(tokenId) });
} else {
res = await API.post(`/api/token/`, localInputs);
}
const { success, message } = res.data;
if (success) {
showSuccess('令牌更新成功！');
if (isEdit) {
showSuccess('令牌更新成功！');
} else {
showSuccess('令牌创建成功！');
setInputs(originInputs);
}
} else {
showError(message);
}
@ -73,16 +88,17 @@ const EditToken = () => {
return (
<>
<Segment loading={loading}>
<Header as='h3'>更新令牌信息</Header>
<Header as='h3'>{isEdit ? "更新令牌信息" : "创建新的令牌"}</Header>
<Form autoComplete='off'>
<Form.Field>
<Form.Input
label='名称'
name='name'
placeholder={'请输入新的名称'}
placeholder={'请输入名称'}
onChange={handleInputChange}
value={name}
autoComplete='off'
required={!isEdit}
/>
</Form.Field>
<Form.Field>
@ -93,6 +109,7 @@ const EditToken = () => {
onChange={handleInputChange}
value={remain_times}
autoComplete='off'
type='number'
/>
</Form.Field>
<Form.Field>
@ -103,6 +120,7 @@ const EditToken = () => {
onChange={handleInputChange}
value={expired_time}
autoComplete='off'
type='datetime-local'
/>
</Form.Field>
<Button type={'button'} onClick={() => {