add setting page
parent
d23fb2de18
commit
9b0c24d983
22
src/App.js
22
src/App.js
|
@ -3,6 +3,7 @@ import Pane from './Components/pane';
|
||||||
import DeviceFrame from './Components/deviceFrame';
|
import DeviceFrame from './Components/deviceFrame';
|
||||||
import waterMarkPng from './images/water-mark.png'
|
import waterMarkPng from './images/water-mark.png'
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import SettingFrame from './Components/settingsFrame';
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
constructor() {
|
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() {
|
render() {
|
||||||
var { mode, device, projects, selectedProject } = this.state;
|
var { mode, device, projects, selectedProject } = this.state;
|
||||||
|
|
||||||
|
@ -77,7 +94,10 @@ class App extends React.Component {
|
||||||
? <DeviceFrame
|
? <DeviceFrame
|
||||||
htmlUrl={selectedProject.HtmlUrl}
|
htmlUrl={selectedProject.HtmlUrl}
|
||||||
device={device}/>
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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 |
Loading…
Reference in New Issue