yityu
/
playable-preview
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

polish

master
Aaron Yu 2021-12-27 22:02:21 +08:00
parent f8ddb87499
commit 5530c00c56
11 changed files with 79 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 110 KiB

4
public/index.html
View File

@ -6,7 +6,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" /> <meta name="description" content="Soyoo Playable Preview" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
@ -22,7 +22,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Soyoo Playable Preview</title>
</head> </head>
<body> <body>

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 11 KiB

42
src/App.js
View File

@ -5,7 +5,6 @@ import waterMarkPng from './images/water-mark.png'
import React from 'react'; import React from 'react';
import SettingFrame from './Components/settingsFrame'; import SettingFrame from './Components/settingsFrame';
import QrCode from 'qrcode' import QrCode from 'qrcode'
import toSJIS from 'qrcode/helper/to-sjis'
var baseUrl = "http://123.56.161.61:1157/" var baseUrl = "http://123.56.161.61:1157/"
class App extends React.Component { class App extends React.Component {
@ -59,12 +58,8 @@ class App extends React.Component {
this.setState({ this.setState({
loading: true loading: true
}) })
var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
headers: { var projects = await this.fetchProjects();
'Content-Type': 'application/json'
},
});
var projects = await response.json();
this.setState({ this.setState({
projects, projects,
selectedProject: projects[0], selectedProject: projects[0],
@ -73,6 +68,32 @@ class App extends React.Component {
this.refreshQrCode() 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) { UpdateSetting(obj) {
var body = { var body = {
...obj, ...obj,
@ -80,9 +101,7 @@ class App extends React.Component {
}; };
var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&') var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&')
fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew?${query}`) fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew?${query}`)
.then(() => .then(() => this.refreshProject())
console.log('update success')
)
.catch(e => console.log('update fails', e)); .catch(e => console.log('update fails', e));
} }
@ -115,7 +134,8 @@ class App extends React.Component {
? <DeviceFrame ? <DeviceFrame
htmlUrl={selectedProject.HtmlUrl} htmlUrl={selectedProject.HtmlUrl}
device={device} device={device}
qrDataUrl={dataUrl}/> qrDataUrl={dataUrl}
refreshQrCode={() => this.refreshQrCode()}/>
: <SettingFrame : <SettingFrame
setting={selectedProject.TextObjStr} setting={selectedProject.TextObjStr}
settingValue={selectedProject.OldSlectType ? selectedProject.OldSlectType.split('|').map(v => +v) : [1, 1, 1]} settingValue={selectedProject.OldSlectType ? selectedProject.OldSlectType.split('|').map(v => +v) : [1, 1, 1]}

17
src/Components/deviceFrame/index.js
View File

@ -13,12 +13,14 @@ var configMap = {
"android-h": { "android-h": {
bkg: androidHPng, bkg: androidHPng,
width: '512px', width: '512px',
height: '286px' height: '286px',
offsetv: '5px',
}, },
"android-v": { "android-v": {
bkg: androidVPng, bkg: androidVPng,
width: '286px', width: '286px',
height: '512px' height: '512px',
offsetv: '5px',
}, },
"iphone-h": { "iphone-h": {
bkg: iphoneHPng, bkg: iphoneHPng,
@ -33,12 +35,14 @@ var configMap = {
"ipad-h": { "ipad-h": {
bkg: ipadHPng, bkg: ipadHPng,
width: '433px', width: '433px',
height: '324px' height: '326px',
offsetv: '5px',
}, },
"ipad-v": { "ipad-v": {
bkg: ipadVPng, bkg: ipadVPng,
width: '324px', width: '324px',
height: '433px' height: '433px',
offsetv: '5px',
}, },
} }
@ -55,9 +59,9 @@ function DeviceFrame(props) {
useEffect(() => { useEffect(() => {
console.log(props.htmlUrl) console.log(props.htmlUrl)
refresh() refresh()
props.refreshQrCode()
}, [props.htmlUrl]) }, [props.htmlUrl])
return ( return (
<div className='deviceFrameContainer'> <div className='deviceFrameContainer'>
<img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} className='refreshButton'/> <img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} className='refreshButton'/>
@ -78,7 +82,8 @@ function DeviceFrame(props) {
position: 'absolute', position: 'absolute',
top: '50%', top: '50%',
left: '50%', left: '50%',
transform: 'translate(-50%, -50%)' transform: 'translate(-50%, -50%)',
paddingBottom: config.offsetv
}} }}
title='preview' title='preview'
src={baseUrl + props.htmlUrl} src={baseUrl + props.htmlUrl}

6
src/Components/pane/index.css
View File

@ -13,6 +13,7 @@
width: auto; width: auto;
height: 80px; height: 80px;
margin-right: 10px; margin-right: 10px;
margin-bottom: -24px;
} }
.deviceContent { .deviceContent {
@ -28,4 +29,9 @@
.deviceButtons img { .deviceButtons img {
cursor: pointer; cursor: pointer;
}
.selectPager {
left: 0 !important;
width: 350px;
} }

11
src/Components/pane/index.js
View File

@ -2,14 +2,16 @@ import './index.css';
import Select from '@mui/material/Select'; import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem' import MenuItem from '@mui/material/MenuItem'
import { useEffect, useState } from 'react'; 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 ipadPng from '../../images/ipad.png'
import iphonePng from '../../images/iphone.png' import iphonePng from '../../images/iphone.png'
import androidPng from '../../images/android.png' import androidPng from '../../images/android.png'
import logoPanePng from '../../images/logo-pane.png'
import horizentalChecked from '../../images/horizental-button-checked.png' import horizentalChecked from '../../images/horizental-button-checked.png'
import horizentalButton from '../../images/horizental-button.png' import horizentalButton from '../../images/horizental-button.png'
import verticalChecked from '../../images/vertical-button-checked.png' import verticalChecked from '../../images/vertical-button-checked.png'
import verticalButton from '../../images/vertical-button.png' import verticalButton from '../../images/vertical-button.png'
import modeSelectPng from '../../images/mode-select.png'
var deviceConfigs = [ var deviceConfigs = [
{ {
@ -65,6 +67,7 @@ function Pane(props) {
id="mode-select" id="mode-select"
value={mode} value={mode}
onChange={(e) => modeChange(e)} onChange={(e) => modeChange(e)}
startAdornment={<img src={modeSelectPng} height={'30px'} alt='selected'/>}
sx={{ sx={{
width: '100%', width: '100%',
border: 'none', border: 'none',
@ -72,6 +75,11 @@ function Pane(props) {
color: 'white', color: 'white',
fontWeight: 'bold' fontWeight: 'bold'
}} }}
MenuProps={{
classes: {
paper: 'selectPager'
}
}}
> >
<MenuItem value={'normal'}>Normal Preview</MenuItem> <MenuItem value={'normal'}>Normal Preview</MenuItem>
<MenuItem value={'dynamic'}>Dynamic Preview</MenuItem> <MenuItem value={'dynamic'}>Dynamic Preview</MenuItem>
@ -128,6 +136,7 @@ function Pane(props) {
</Select> </Select>
} }
</div> </div>
<img src={logoPanePng} alt='logo' width={'100%'}/>
</div> </div>
); );
} }

25
src/Components/settingsFrame/index.js
View File

@ -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 { useEffect, useState } from 'react'
import './index.css' import './index.css'
import settingCardPng from '../../images/setting-card.png'; import settingCardPng from '../../images/setting-card.png';
@ -9,6 +9,7 @@ var rows = ['TopText', 'CentText', 'MiddText']
var rowTitles = ['开头', '中间', '结尾'] var rowTitles = ['开头', '中间', '结尾']
function SettingFrame(props) { function SettingFrame(props) {
var [settingArr, setSettingArr] = useState([1, 2, 3]) var [settingArr, setSettingArr] = useState([1, 2, 3])
var [openPopup, setOpenPopup] = useState(false);
useEffect(() => { useEffect(() => {
setSettingArr(props.settingValue) setSettingArr(props.settingValue)
}, [props.settingValue]) }, [props.settingValue])
@ -17,6 +18,14 @@ function SettingFrame(props) {
<div style={{ <div style={{
flex: 1 flex: 1
}}> }}>
<Snackbar open={openPopup} onClose={() => setOpenPopup(false)} autoHideDuration={3000} anchorOrigin={{
vertical: 'top',
horizontal: 'right'
}}>
<Alert severity="success" sx={{ width: '100%' }}>
保存成功
</Alert>
</Snackbar>
<List> <List>
{ {
rows.map((rowKey, rowIndex) => ( rows.map((rowKey, rowIndex) => (
@ -72,11 +81,15 @@ function SettingFrame(props) {
style={{ style={{
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => props.generate({ onClick={async () => {
topType: settingArr[0]+'', await props.generate({
centreType: settingArr[1]+'', topType: settingArr[0]+'',
middleType: settingArr[2]+'' centreType: settingArr[1]+'',
})}/> middleType: settingArr[2]+''
})
setOpenPopup(true);
}}/>
} }
</div> </div>
</div> </div>

BIN
src/images/logo-pane.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/images/mode-select.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB