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