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

View File

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