support setting

master
Aaron Yu 2022-07-10 14:34:52 +08:00
parent cc986deb67
commit 44a67f8200
2 changed files with 22 additions and 23 deletions

View File

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

View File

@ -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'}/>