add setting page

master
Aaron Yu 2021-12-23 21:51:43 +08:00
parent d23fb2de18
commit 9b0c24d983
6 changed files with 102 additions and 1 deletions

View File

@ -3,6 +3,7 @@ import Pane from './Components/pane';
import DeviceFrame from './Components/deviceFrame';
import waterMarkPng from './images/water-mark.png'
import React from 'react';
import SettingFrame from './Components/settingsFrame';
class App extends React.Component {
constructor() {
@ -49,6 +50,22 @@ class App extends React.Component {
})));
}
UpdateSetting(obj) {
var body = {
...obj,
Name: this.state.selectedProject.Name,
};
var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&')
fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew`, {
method: 'POST',
body: JSON.stringify(body)
})
.then(() =>
console.log('update success')
)
.catch(e => console.log('update fails', e));
}
render() {
var { mode, device, projects, selectedProject } = this.state;
@ -77,7 +94,10 @@ class App extends React.Component {
? <DeviceFrame
htmlUrl={selectedProject.HtmlUrl}
device={device}/>
: <div>setting content</div>
: <SettingFrame
setting={selectedProject.TextObjStr}
settingValue={selectedProject.OldSlectType ? selectedProject.OldSlectType.split('|').map(v => +v) : [1, 1, 1]}
generate={(value) => this.UpdateSetting(value)}/>
}
</div>
</div>

View File

@ -0,0 +1,81 @@
import { Grid, List, ListItem } from '@mui/material';
import { useEffect, useState } from 'react'
import './index.css'
import settingCardPng from '../../images/setting-card.png';
import checkPng from '../../images/check.png';
import generateButtonPng from '../../images/generate-button.png';
var rows = ['TopText', 'CentText', 'MiddText']
var rowTitles = ['开头', '中间', '结尾']
function SettingFrame(props) {
var [settingArr, setSettingArr] = useState([1, 2, 3])
useEffect(() => {
setSettingArr(props.settingValue)
}, [props.settingValue])
return (
<div style={{
flex: 1
}}>
<List>
{
rows.map((rowKey, rowIndex) => (
<ListItem key={rowIndex}>
<span>{rowTitles[rowIndex]}</span>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{props.setting && props.setting[rowKey] && Array.from(props.setting[rowKey].split('|')).map((text, index) => (
<Grid item xs={2} sm={4} md={4} key={index}>
<div style={{
backgroundImage: `url('${settingCardPng}')`,
position: 'relative',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
height: '120px',
textAlign: 'center',
justifyContent: 'center',
display: 'flex',
alignItems: 'center',
cursor: 'pointer'
}}
onClick={() => {
var newSetting = settingArr.slice()
newSetting[rowIndex] = index + 1;
setSettingArr(newSetting);
}}>
{text}
<img src={checkPng} alt='check' style={{
position: 'absolute',
right: '10px',
top: '10px',
display: (index + 1) === settingArr[rowIndex] ? 'block' : 'none'
}}/>
</div>
</Grid>
))}
</Grid>
</ListItem>
))
}
</List>
<div style={{
alignItems: 'center',
cursor: 'pointer',
marginTop: '30px'
}}>
<img
src={generateButtonPng}
alt='generate'
style={{
cursor: 'pointer'
}}
onClick={() => props.generate({
topType: settingArr[0]+'',
centreType: settingArr[1]+'',
middleType: settingArr[2]+''
})}/>
</div>
</div>
)
}
export default SettingFrame;

Binary file not shown.

After

Width:  |  Height:  |  Size: 992 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB