diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..cfe9556 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index a25d574..22a2e09 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ - + - React App + Soyoo Playable Preview diff --git a/public/logo192.png b/public/logo192.png index fc44b0a..3a9878e 100644 Binary files a/public/logo192.png and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png index a4e47a6..3a9878e 100644 Binary files a/public/logo512.png and b/public/logo512.png differ diff --git a/src/App.js b/src/App.js index 3a850ed..9737ed1 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,6 @@ import waterMarkPng from './images/water-mark.png' import React from 'react'; import SettingFrame from './Components/settingsFrame'; import QrCode from 'qrcode' -import toSJIS from 'qrcode/helper/to-sjis' var baseUrl = "http://123.56.161.61:1157/" class App extends React.Component { @@ -59,12 +58,8 @@ class App extends React.Component { this.setState({ loading: true }) - var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', { - headers: { - 'Content-Type': 'application/json' - }, - }); - var projects = await response.json(); + + var projects = await this.fetchProjects(); this.setState({ projects, selectedProject: projects[0], @@ -73,6 +68,32 @@ class App extends React.Component { this.refreshQrCode() } + async fetchProjects() { + var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', { + headers: { + 'Content-Type': 'application/json' + }, + }); + return await response.json(); + } + + async refreshProject() { + var { selectedProject } = this.state; + var projects = await this.fetchProjects(); + if (selectedProject) { + var updatedSelectedProject = projects.find(p => p.HtmlUrl === selectedProject.HtmlUrl) + console.log(updatedSelectedProject); + if (updatedSelectedProject) { + this.setState({ + selectedProject: updatedSelectedProject + }) + } + } + this.setState({ + projects, + }) + } + UpdateSetting(obj) { var body = { ...obj, @@ -80,9 +101,7 @@ class App extends React.Component { }; var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&') fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew?${query}`) - .then(() => - console.log('update success') - ) + .then(() => this.refreshProject()) .catch(e => console.log('update fails', e)); } @@ -115,7 +134,8 @@ class App extends React.Component { ? + qrDataUrl={dataUrl} + refreshQrCode={() => this.refreshQrCode()}/> : +v) : [1, 1, 1]} diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js index bad3919..74bdabc 100644 --- a/src/Components/deviceFrame/index.js +++ b/src/Components/deviceFrame/index.js @@ -13,12 +13,14 @@ var configMap = { "android-h": { bkg: androidHPng, width: '512px', - height: '286px' + height: '286px', + offsetv: '5px', }, "android-v": { bkg: androidVPng, width: '286px', - height: '512px' + height: '512px', + offsetv: '5px', }, "iphone-h": { bkg: iphoneHPng, @@ -33,12 +35,14 @@ var configMap = { "ipad-h": { bkg: ipadHPng, width: '433px', - height: '324px' + height: '326px', + offsetv: '5px', }, "ipad-v": { bkg: ipadVPng, width: '324px', - height: '433px' + height: '433px', + offsetv: '5px', }, } @@ -55,9 +59,9 @@ function DeviceFrame(props) { useEffect(() => { console.log(props.htmlUrl) refresh() + props.refreshQrCode() }, [props.htmlUrl]) - return (
refresh refresh()} className='refreshButton'/> @@ -78,7 +82,8 @@ function DeviceFrame(props) { position: 'absolute', top: '50%', left: '50%', - transform: 'translate(-50%, -50%)' + transform: 'translate(-50%, -50%)', + paddingBottom: config.offsetv }} title='preview' src={baseUrl + props.htmlUrl} diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css index 519751c..b670ee9 100644 --- a/src/Components/pane/index.css +++ b/src/Components/pane/index.css @@ -13,6 +13,7 @@ width: auto; height: 80px; margin-right: 10px; + margin-bottom: -24px; } .deviceContent { @@ -28,4 +29,9 @@ .deviceButtons img { cursor: pointer; +} + +.selectPager { + left: 0 !important; + width: 350px; } \ No newline at end of file diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js index 18575bd..5a5f7c0 100644 --- a/src/Components/pane/index.js +++ b/src/Components/pane/index.js @@ -2,14 +2,16 @@ import './index.css'; import Select from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem' import { useEffect, useState } from 'react'; -import { Chip, CircularProgress, List, ListItem } from '@mui/material'; +import { CircularProgress, List, ListItem } from '@mui/material'; import ipadPng from '../../images/ipad.png' import iphonePng from '../../images/iphone.png' import androidPng from '../../images/android.png' +import logoPanePng from '../../images/logo-pane.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' +import modeSelectPng from '../../images/mode-select.png' var deviceConfigs = [ { @@ -65,6 +67,7 @@ function Pane(props) { id="mode-select" value={mode} onChange={(e) => modeChange(e)} + startAdornment={selected} sx={{ width: '100%', border: 'none', @@ -72,6 +75,11 @@ function Pane(props) { color: 'white', fontWeight: 'bold' }} + MenuProps={{ + classes: { + paper: 'selectPager' + } + }} > Normal Preview Dynamic Preview @@ -128,6 +136,7 @@ function Pane(props) { }
+ logo ); } diff --git a/src/Components/settingsFrame/index.js b/src/Components/settingsFrame/index.js index 44a0536..c8db369 100644 --- a/src/Components/settingsFrame/index.js +++ b/src/Components/settingsFrame/index.js @@ -1,4 +1,4 @@ -import { Grid, List, ListItem } from '@mui/material'; +import { Alert, Grid, List, ListItem, Snackbar } from '@mui/material'; import { useEffect, useState } from 'react' import './index.css' import settingCardPng from '../../images/setting-card.png'; @@ -9,6 +9,7 @@ var rows = ['TopText', 'CentText', 'MiddText'] var rowTitles = ['开头', '中间', '结尾'] function SettingFrame(props) { var [settingArr, setSettingArr] = useState([1, 2, 3]) + var [openPopup, setOpenPopup] = useState(false); useEffect(() => { setSettingArr(props.settingValue) }, [props.settingValue]) @@ -17,6 +18,14 @@ function SettingFrame(props) {
+ setOpenPopup(false)} autoHideDuration={3000} anchorOrigin={{ + vertical: 'top', + horizontal: 'right' + }}> + + 保存成功 + + { rows.map((rowKey, rowIndex) => ( @@ -72,11 +81,15 @@ function SettingFrame(props) { style={{ cursor: 'pointer' }} - onClick={() => props.generate({ - topType: settingArr[0]+'', - centreType: settingArr[1]+'', - middleType: settingArr[2]+'' - })}/> + onClick={async () => { + await props.generate({ + topType: settingArr[0]+'', + centreType: settingArr[1]+'', + middleType: settingArr[2]+'' + }) + + setOpenPopup(true); + }}/> }
diff --git a/src/images/logo-pane.png b/src/images/logo-pane.png new file mode 100644 index 0000000..f27c088 Binary files /dev/null and b/src/images/logo-pane.png differ diff --git a/src/images/mode-select.png b/src/images/mode-select.png new file mode 100644 index 0000000..9cbe319 Binary files /dev/null and b/src/images/mode-select.png differ