support setting
parent
cc986deb67
commit
44a67f8200
42
src/App.js
42
src/App.js
|
@ -1,5 +1,4 @@
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import * as Utils from './utils'
|
|
||||||
import * as ProjectApi from './apis/projectApi'
|
import * as ProjectApi from './apis/projectApi'
|
||||||
import Pane from './Components/pane';
|
import Pane from './Components/pane';
|
||||||
import DeviceFrame from './Components/deviceFrame';
|
import DeviceFrame from './Components/deviceFrame';
|
||||||
|
@ -7,7 +6,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 { BaseUrl } from './constants';
|
|
||||||
import { getProjectSettingValue, setProjectSetting } from './storage';
|
import { getProjectSettingValue, setProjectSetting } from './storage';
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
|
@ -21,31 +19,17 @@ class App extends React.Component {
|
||||||
device: 'android-h',
|
device: 'android-h',
|
||||||
htmlUrl: '',
|
htmlUrl: '',
|
||||||
dataUrl: '',
|
dataUrl: '',
|
||||||
loading: false,
|
loading: false
|
||||||
projectSettingValue: [1, 1, 1]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
this.refreshQrCode()
|
this.refreshQrCode()
|
||||||
window.onmessage = function(e) {
|
|
||||||
var payload = e.data
|
|
||||||
if (payload.event == "getProjectSetting") {
|
|
||||||
var settingValue = getProjectSettingValue(payload.data) || [1, 1, 1]
|
|
||||||
document.querySelector('iframe')
|
|
||||||
.contentWindow
|
|
||||||
.postMessage({
|
|
||||||
event: 'projectSetting',
|
|
||||||
embededScript: `datanumber=${settingValue[0]};datanumber1=${settingValue[1]};datanumber2=${settingValue[2]};lunaOrHtml=false;`
|
|
||||||
}, '*');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
refreshQrCode() {
|
refreshQrCode() {
|
||||||
var {selectedProject} = this.state;
|
var {selectedProject} = this.state;
|
||||||
var rawUrl = encodeURI(!selectedProject?.HtmlUrl?.startsWith("http") ? BaseUrl + selectedProject.HtmlUrl : selectedProject.HtmlUrl)
|
selectedProject.HtmlUrl && QrCode.toDataURL([{ data: this.selectedProjectUrl, mode: 'byte'}], { width: 120 })
|
||||||
selectedProject.HtmlUrl && QrCode.toDataURL([{ data: rawUrl, mode: 'byte'}], { width: 120 })
|
|
||||||
.then((dataUrl) => {
|
.then((dataUrl) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
dataUrl: dataUrl
|
dataUrl: dataUrl
|
||||||
|
@ -53,10 +37,20 @@ class App extends React.Component {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get selectedProjectUrl () {
|
||||||
|
var {selectedProject} = this.state;
|
||||||
|
var settingValue = getProjectSettingValue(selectedProject?.Name) || [1, 1, 1]
|
||||||
|
var rawUrl = selectedProject?.HtmlUrl ? encodeURI(selectedProject?.HtmlUrl) : ""
|
||||||
|
if (rawUrl) {
|
||||||
|
rawUrl += `?datanumber=${settingValue[0]}&datanumber1=${settingValue[1]}&datanumber2=${settingValue[2]}&lunaOrHtml=false`
|
||||||
|
}
|
||||||
|
|
||||||
|
return rawUrl
|
||||||
|
}
|
||||||
|
|
||||||
async setSelectedProject(selectedProjectName) {
|
async setSelectedProject(selectedProjectName) {
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedProjectName: selectedProjectName,
|
selectedProjectName: selectedProjectName,
|
||||||
projectSettingValue: getProjectSettingValue(selectedProjectName)
|
|
||||||
});
|
});
|
||||||
console.log('selected:', selectedProjectName)
|
console.log('selected:', selectedProjectName)
|
||||||
await this.updateSelectedProject(selectedProjectName)
|
await this.updateSelectedProject(selectedProjectName)
|
||||||
|
@ -100,12 +94,16 @@ class App extends React.Component {
|
||||||
return await ProjectApi.getProjects();
|
return await ProjectApi.getProjects();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get projectSettingValue () {
|
||||||
|
return getProjectSettingValue(this.state.selectedProjectName)
|
||||||
|
}
|
||||||
|
|
||||||
UpdateSetting(obj) {
|
UpdateSetting(obj) {
|
||||||
setProjectSetting(this.state.selectedProject.Name, [+obj.topType, +obj.centreType, +obj.middleType])
|
setProjectSetting(this.state.selectedProject.Name, [+obj.topType, +obj.centreType, +obj.middleType])
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
var { mode, device, projects, selectedProject, dataUrl, loading, projectSettingValue } = this.state;
|
var { mode, device, projects, selectedProject, dataUrl, loading } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
|
@ -131,13 +129,13 @@ class App extends React.Component {
|
||||||
{
|
{
|
||||||
mode === "normal"
|
mode === "normal"
|
||||||
? <DeviceFrame
|
? <DeviceFrame
|
||||||
htmlUrl={selectedProject?.HtmlUrl}
|
htmlUrl={this.selectedProjectUrl}
|
||||||
device={device}
|
device={device}
|
||||||
qrDataUrl={dataUrl}
|
qrDataUrl={dataUrl}
|
||||||
refreshQrCode={() => this.refreshQrCode()}/>
|
refreshQrCode={() => this.refreshQrCode()}/>
|
||||||
: <SettingFrame
|
: <SettingFrame
|
||||||
setting={selectedProject?.TextObjStr}
|
setting={selectedProject?.TextObjStr}
|
||||||
settingValue={projectSettingValue}
|
settingValue={this.projectSettingValue}
|
||||||
generate={(value) => this.UpdateSetting(value)}/>
|
generate={(value) => this.UpdateSetting(value)}/>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -102,8 +102,9 @@ function DeviceFrame(props) {
|
||||||
transform: 'translate(-50%, -50%)',
|
transform: 'translate(-50%, -50%)',
|
||||||
paddingBottom: config.offsetv
|
paddingBottom: config.offsetv
|
||||||
}}
|
}}
|
||||||
|
allow="clipboard-read; clipboard-write *"
|
||||||
title='preview'
|
title='preview'
|
||||||
src={absoluteUrl + '?cacheKey=' + cacheKey}
|
src={absoluteUrl + '&cacheKey=' + cacheKey}
|
||||||
width={config.width}
|
width={config.width}
|
||||||
height={config.height}
|
height={config.height}
|
||||||
frameBorder={'0'}/>
|
frameBorder={'0'}/>
|
||||||
|
|
Loading…
Reference in New Issue