Skip to content

Commit

Permalink
🚧 save work
Browse files Browse the repository at this point in the history
  • Loading branch information
@songquanpeng
songquanpeng committed Feb 22, 2021
1 parent 0c803a2 commit d34a7b0
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 117 deletions.
254 changes: 160 additions & 94 deletions admin/src/components/Settings.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,119 @@
import React, { Component } from 'react';

import { connect } from 'react-redux';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-html';
import 'ace-builds/src-noconflict/snippets/html';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/snippets/javascript';

import axios from 'axios';
import { message as Message, Button, Select, Divider } from 'antd';
import { message as Message, Button, Tabs, Form, Input } from 'antd';

import { PoweroffOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;

const tabs = [
{
label: 'System',
settings: [
{
key: 'domain',
description: '',
},
{
key: 'author',
description: '',
},
{
key: 'motto',
description: '',
},
{
key: 'port',
description: '',
},
{
key: 'language',
description: '',
},
{
key: 'favicon',
description: '',
},
{
key: 'copyright',
description: '',
},
],
},
{
label: 'Third Party',
settings: [
{
key: 'ad',
description: '',
isBlock: true,
},
{
key: 'extra_header_code',
description: 'For example you can insert google analytics code here.',
isBlock: true,
},
{
key: 'extra_footer_code',
description: 'This code will be inserted into the body tag.',
},
{
key: 'disqus',
description: '',
},
{
key: 'extra_footer_text',
description: '',
},
{
key: 'message_push_api',
description: '',
},
],
},
{
label: 'Customize',
settings: [
{
key: 'theme',
description: '',
},
{
key: 'code_theme',
description: '',
},
{
key: 'site_name',
description: '',
},
{
key: 'description',
description: '',
},
{
key: 'nav_links',
description: '',
isBlock: true,
},
],
},
];

class Settings extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
submitLoading: false,
language: 'javascript',
options: [
{
key: 'optionName',
value: 0,
text: 'Option name',
option_value: 'option_value',
description: 'Option description will be displayed here.',
},
],
options: {},
optionIndex: 0,
};
}
Expand All @@ -49,23 +135,14 @@ class Settings extends Component {
try {
this.setState({ loading: true });
const res = await axios.get(`/api/option/`);
const { status, message, options } = res.data;
let { status, message, options } = res.data;
let temp = {};
if (status) {
options.sort((a, b) => {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
});
options.forEach((option, index) => {
option.key = option.name;
option.option_value = option.value;
option.value = index;
option.label = option.name.toUpperCase() + ': ' + option.description;
options.forEach((option) => {
temp[option.name] = option.value;
});
options = temp;
console.log(options);
this.setState({ options });
} else {
Message.error(message);
Expand All @@ -76,30 +153,16 @@ class Settings extends Component {
}
};

onInputChange = (value) => {
updateOption = (key, value) => {
let options = this.state.options;
options[this.state.optionIndex].option_value = value;
options[key] = value;
this.setState({ options });
};

onTypeChange = (e, { value }) => {
let language = 'html';
if (
['nav_links', 'allow_comments', 'port'].includes(
this.state.options[value].name
)
) {
language = 'javascript';
}
this.setState({ optionIndex: value, language });
};

onSubmit = async (e) => {
this.setState({ submitLoading: true });
let option = this.state.options[this.state.optionIndex];
option.value = option.option_value;
submit = async () => {
let options = this.state.options;
try {
const res = await axios.post(`/api/option/`, option);
const res = await axios.post(`/api/option/`, options);
const { status, message } = res.data;
if (status) {
} else {
Expand All @@ -120,15 +183,6 @@ class Settings extends Component {
};

render() {
let option = this.state.options[this.state.optionIndex];
if (option === undefined) {
option = {
key: 'optionName',
value: 0,
text: 'Option name',
option_value: 'Error, try to reload this page.',
};
}
return (
<div className={'content-area'}>
<h1>Settings</h1>{' '}
Expand All @@ -139,46 +193,58 @@ class Settings extends Component {
>
Shutdown the server
</Button>
<Divider />
<div style={{ maxWidth: '1100px' }}>
<Select
style={{ width: '100%' }}
label="Option Name"
name={'name'}
loading={this.state.loading}
options={this.state.options}
value={this.state.optionIndex}
placeholder="Name"
onChange={this.onTypeChange}
/>
<AceEditor
style={{
width: '100%',
height: '100%',
minHeight: '400px',
marginTop: '10px',
marginBottom: '10px',
border: '1px solid rgba(34,36,38,.15)',
}}
mode={this.state.language}
fontSize={18}
setOptions={{ useWorker: false }}
label="Value"
placeholder={option.description}
name={option.name}
value={option.option_value}
rows={20}
theme={'tomorrow'}
onChange={this.onInputChange}
/>
<Button
block
type="primary"
onClick={this.onSubmit}
loading={this.state.submitLoading}
>
Submit
</Button>
<div style={{ background: '#fff', padding: 16 }}>
<Tabs tabPosition={'left'}>
{tabs.map((tab) => {
tab.settings.sort((a, b) => {
if (a.key < b.key) {
return -1;
}
if (a.key > b.key) {
return 1;
}
return 0;
});
return (
<TabPane tab={tab.label} key={tab.label}>
<Form layout={'vertical'}>
{tab.settings.map((setting) => {
setting.label = setting.key
.replaceAll('_', ' ')
.toUpperCase();
return (
<Form.Item
label={setting.label ? setting.label : setting.key}
>
{setting.isBlock ? (
<Input.TextArea
placeholder={setting.description}
value={this.state.options[setting.key]}
onChange={(e) => {
this.updateOption(setting.key, e.target.value);
}}
rows={10}
/>
) : (
<Input
placeholder={setting.description}
value={this.state.options[setting.key]}
onChange={(e) => {
this.updateOption(setting.key, e.target.value);
}}
/>
)}
</Form.Item>
);
})}
<Button type="primary" onClick={() => this.submit()}>
Save
</Button>
</Form>
</TabPane>
);
})}
</Tabs>
</div>
</div>
);
Expand Down
40 changes: 17 additions & 23 deletions routes/option.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,30 +39,24 @@ router.get('/:name', checkPermission, (req, res, next) => {
});
});

// TODO: change the method to put
router.post('/', checkPermission, (req, res, next) => {
const name = req.body.name;
const value = req.body.value;
let option = {
name,
value
};
Option.update(name, option, (status, message) => {
if (status) {
updateConfig(req.app.locals.config, () => {
if (['theme'].includes(name)) {
res.json({
status,
message: 'The server will shutdown in 1 seconds.'
});
setTimeout(() => {
process.exit();
}, 1000);
} else {
res.json({ status, message });
}
});
}
const options = req.body;
for (const [key, value] of Object.entries(options)) {
let option = {
name: key,
value
};
Option.update(key, option, (status, message) => {
if (!status) {
console.error(message);
}
});
}
// TODO
let status = true;
let message = 'ok';
updateConfig(req.app.locals.config, () => {
res.json({ status, message });
});
});

Expand Down

0 comments on commit d34a7b0

Please sign in to comment.