From 44a67f8200458d12c2cd27a0d06d5c3d6fefb0db Mon Sep 17 00:00:00 2001
From: Aaron Yu <yityu@microsoft.com>
Date: Sun, 10 Jul 2022 14:34:52 +0800
Subject: [PATCH] support setting

---
 src/App.js                          | 42 ++++++++++++++---------------
 src/Components/deviceFrame/index.js |  3 ++-
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5d7c021..e531eac 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js
index dc23cb9..7f5707b 100644
--- a/src/Components/deviceFrame/index.js
+++ b/src/Components/deviceFrame/index.js
@@ -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'}/>