diff --git a/public/index.html b/public/index.html index aa069f2..a25d574 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,19 @@ - - - - - - - - - - - React App - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.css b/src/App.css index feb9ed9..1f0e3ee 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,7 @@ .App { text-align: center; display: flex; + align-items: stretch; } .App-logo { diff --git a/src/App.js b/src/App.js index e74b0ff..e02d78e 100644 --- a/src/App.js +++ b/src/App.js @@ -38,16 +38,17 @@ class App extends React.Component { }); } - fetchData() { - fetch('http://123.56.161.61:1157/home/GetServerJsonData', { + async fetchData() { + var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', { headers: { 'Content-Type': 'application/json' }, - }).then((response) => - response.json() - .then(projects => this.setState({ - projects - }))); + }); + var projects = await response.json(); + this.setState({ + projects, + selectedProject: projects[0] + }) } UpdateSetting(obj) { @@ -72,8 +73,8 @@ class App extends React.Component { mode={mode} onModeChange={(_mode) => this.setMode(_mode) } projects={projects} + device={device} onProjectSelect={(project) => { - console.log(project) this.setSelectedProject(project) }} onDeviceChange={(_device) => this.setDevice(_device)}/> diff --git a/src/Components/deviceFrame/index.css b/src/Components/deviceFrame/index.css index e69de29..2bd08e6 100644 --- a/src/Components/deviceFrame/index.css +++ b/src/Components/deviceFrame/index.css @@ -0,0 +1,10 @@ +.deviceFrameContainer { + width: 100%; + flex: 1 1 0%; + align-items: center; + position: relative; + display: flex; + height: 100vh; + justify-content: center; + overflow: hidden; +} \ No newline at end of file diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js index 26325a8..e8f37f9 100644 --- a/src/Components/deviceFrame/index.js +++ b/src/Components/deviceFrame/index.js @@ -48,27 +48,22 @@ function DeviceFrame(props) { useEffect(() => { setConfig(configMap[props.device]) - console.log(props.device, config) }, [props.device, config]) var refresh = () => setIframeKey(Math.round(Math.random() * 10000)); useEffect(() => { + console.log(props.htmlUrl) refresh() }, [props.htmlUrl]) return ( -
+
refresh refresh()} style={{ position: 'absolute', - left: '20px', - bottom: '20px', + left: '30px', + bottom: '30px', cursor: 'pointer' }}/>
diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css index ba7794b..8982645 100644 --- a/src/Components/pane/index.css +++ b/src/Components/pane/index.css @@ -1,8 +1,7 @@ .Pane { - width: 25vw; - min-width: 200px; + width: 30vw; background-color: rgb(52, 90, 176); - height: 100vh; + min-height: 100vh; } .modeSelect { @@ -17,5 +16,16 @@ } .deviceContent { + text-align: left; color: white; +} + +.deviceButtons { + width: 160px; + display: flex; + justify-content: space-between; +} + +.deviceButtons img { + cursor: pointer; } \ No newline at end of file diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js index 7625fce..fe6aa49 100644 --- a/src/Components/pane/index.js +++ b/src/Components/pane/index.js @@ -6,6 +6,10 @@ import { Chip, List, ListItem } from '@mui/material'; import ipadPng from '../../images/ipad.png' import iphonePng from '../../images/iphone.png' import androidPng from '../../images/android.png' +import horizentalChecked from '../../images/horizental-button-checked.png' +import horizentalButton from '../../images/horizental-button.png' +import verticalChecked from '../../images/vertical-button-checked.png' +import verticalButton from '../../images/vertical-button.png' var deviceConfigs = [ { @@ -79,21 +83,20 @@ function Pane(props) { key={_device.name} sx={{ display: 'flex', - alignItems: 'center' + textAlign: 'center' }}> - {_device.name}/ +
+ {_device.name}/ +
-

{_device.name}

+

{_device.name}

- deviceChange(_device.horizental)} - color={ device === _device.horizental ? 'success' : 'default'} - sx={{ - marginRight: '10px' - }}/> - deviceChange(_device.vertical)} - color={ device === _device.vertical ? 'success' : 'default'}/> + horizental deviceChange(_device.horizental)}/> + vertical deviceChange(_device.vertical)}/>
) diff --git a/src/Components/settingsFrame/index.js b/src/Components/settingsFrame/index.js index efbb02e..44a0536 100644 --- a/src/Components/settingsFrame/index.js +++ b/src/Components/settingsFrame/index.js @@ -23,7 +23,10 @@ function SettingFrame(props) { {rowTitles[rowIndex]} - {props.setting && props.setting[rowKey] && Array.from(props.setting[rowKey].split('|')).map((text, index) => ( + {(props.setting && props.setting[rowKey] + ? Array.from(props.setting[rowKey].split('|')) + : ['无', '无', '无']) + .map((text, index) => (
- generate props.generate({ - topType: settingArr[0]+'', - centreType: settingArr[1]+'', - middleType: settingArr[2]+'' - })}/> + { + props.setting && generate props.generate({ + topType: settingArr[0]+'', + centreType: settingArr[1]+'', + middleType: settingArr[2]+'' + })}/> + }
) diff --git a/src/images/horizental-button-checked.png b/src/images/horizental-button-checked.png new file mode 100644 index 0000000..13ed2b1 Binary files /dev/null and b/src/images/horizental-button-checked.png differ diff --git a/src/images/horizental-button.png b/src/images/horizental-button.png new file mode 100644 index 0000000..67cd8ac Binary files /dev/null and b/src/images/horizental-button.png differ diff --git a/src/images/vertical-button-checked.png b/src/images/vertical-button-checked.png new file mode 100644 index 0000000..752bb6f Binary files /dev/null and b/src/images/vertical-button-checked.png differ diff --git a/src/images/vertical-button.png b/src/images/vertical-button.png new file mode 100644 index 0000000..74c7b19 Binary files /dev/null and b/src/images/vertical-button.png differ