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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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" />
<!--
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.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Soyoo Playable Preview</title>
</head>
<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 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 {
? <DeviceFrame
htmlUrl={selectedProject.HtmlUrl}
device={device}
qrDataUrl={dataUrl}/>
qrDataUrl={dataUrl}
refreshQrCode={() => this.refreshQrCode()}/>
: <SettingFrame
setting={selectedProject.TextObjStr}
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": {
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 (
<div className='deviceFrameContainer'>
<img src={refreshButtonPng} alt='refresh' onClick={() => 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}

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

@ -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;
}

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

@ -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={<img src={modeSelectPng} height={'30px'} alt='selected'/>}
sx={{
width: '100%',
border: 'none',
@ -72,6 +75,11 @@ function Pane(props) {
color: 'white',
fontWeight: 'bold'
}}
MenuProps={{
classes: {
paper: 'selectPager'
}
}}
>
<MenuItem value={'normal'}>Normal Preview</MenuItem>
<MenuItem value={'dynamic'}>Dynamic Preview</MenuItem>
@ -128,6 +136,7 @@ function Pane(props) {
</Select>
}
</div>
<img src={logoPanePng} alt='logo' width={'100%'}/>
</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 './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) {
<div style={{
flex: 1
}}>
<Snackbar open={openPopup} onClose={() => setOpenPopup(false)} autoHideDuration={3000} anchorOrigin={{
vertical: 'top',
horizontal: 'right'
}}>
<Alert severity="success" sx={{ width: '100%' }}>
保存成功
</Alert>
</Snackbar>
<List>
{
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);
}}/>
}
</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