Add ls support

package-lock.json

@@ -3856,16 +3856,6 @@
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
     },
-    "clipboard": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "requires": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
     "cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -4493,11 +4483,6 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
-    "delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -5943,14 +5928,6 @@
         }
       }
     },
-    "good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "requires": {
-        "delegate": "^3.1.2"
-      }
-    },
     "graceful-fs": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
@@ -8036,6 +8013,11 @@
         "json5": "^2.1.2"
       }
     },
+    "localstorage-slim": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/localstorage-slim/-/localstorage-slim-2.2.0.tgz",
+      "integrity": "sha512-YyfTXXCRY9Sjf2dZlSyYQPuUhdOf0ucuWEoSdMcg2u9SAIjWtlsMvP91QeYNealXCy1BrnE9m3ejY82cYtgONQ=="
+    },
     "locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -10351,11 +10333,6 @@
         "ajv-keywords": "^3.5.2"
       }
     },
-    "select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -11066,11 +11043,6 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
-    "tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",

package.json

@@ -2,7 +2,7 @@
   "name": "playable-preview",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/topwar",
+  "homepage": "/preview",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
@@ -11,6 +11,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.24.0",
+    "localstorage-slim": "^2.2.0",
     "qrcode": "^1.5.0",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.4",

src/App.js

@@ -6,8 +6,9 @@ import React from 'react';
 import SettingFrame from './Components/settingsFrame';
 import QrCode from 'qrcode'
 import { BaseUrl } from './constants';
+import { getProjectSettingValue, setProjectSetting } from './storage';
 
-var project = "topwar";
+var project = "";
 class App extends React.Component {
   constructor() {
     super();
@@ -18,12 +19,25 @@ class App extends React.Component {
       device: 'android-h',
       htmlUrl: '',
       dataUrl: '',
-      loading: false
+      loading: false,
+      projectSettingValue: [1, 1, 1]
     }
   }
   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() {
@@ -39,7 +53,8 @@ class App extends React.Component {
 
   setSelectedProject(selected) {
     this.setState({
-      selectedProject: selected
+      selectedProject: selected,
+      projectSettingValue: getProjectSettingValue(selected.Name) || selected.OldSlectType.split('|').map(v => +v) || [1, 1, 1]
     });
   }
 
@@ -78,6 +93,7 @@ class App extends React.Component {
         'Content-Type': 'application/json'
       },
     });
+
     return await response.json();
   }
 
@@ -101,16 +117,19 @@ class App extends React.Component {
   UpdateSetting(obj) {
     var body = {
       ...obj,
+      project: project,
       fileName: this.state.selectedProject.Name,
     };
     var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&')
     fetch(`${BaseUrl}home/UpdateFileContentNew?${query}`)
     .then(() => this.refreshProject())
     .catch(e => console.log('update fails', e));
+
+    setProjectSetting(this.state.selectedProject.Name, [obj.topType, obj.centreType, obj.middleType])
   }
 
   render() {
-    var { mode, device, projects, selectedProject, dataUrl, loading } = this.state;
+    var { mode, device, projects, selectedProject, dataUrl, loading, projectSettingValue } = this.state;
 
     return (
       <div className="App">
@@ -136,13 +155,13 @@ class App extends React.Component {
         {
           mode === "normal"
           ? <DeviceFrame
-              htmlUrl={selectedProject.HtmlUrl}
+              htmlUrl={selectedProject?.HtmlUrl}
               device={device}
               qrDataUrl={dataUrl}
               refreshQrCode={() => this.refreshQrCode()}/>
           : <SettingFrame
               setting={selectedProject.TextObjStr}
-              settingValue={selectedProject.OldSlectType ? selectedProject.OldSlectType.split('|').map(v => +v) : [1, 1, 1]}
+              settingValue={projectSettingValue}
               generate={(value) => this.UpdateSetting(value)}/>
         }
         </div>

src/constants.js

@@ -1 +1,2 @@
-export var BaseUrl = "http://123.56.161.61:1157/";
+export var BaseUrl = "http://123.56.161.61:1157/";
+// export var BaseUrl = "https://localhost:44380/";

src/storage.js

@@ -0,0 +1,11 @@
+import ls from 'localstorage-slim'
+
+const settingPrefix = 'ps_'
+
+export const setProjectSetting = (projectName, settingValueArr) => {
+    ls.set(settingPrefix + projectName, settingValueArr, { ttl: 3600 * 24 * 90 })
+}
+
+export const getProjectSettingValue = (projectName) => {
+    return ls.get(settingPrefix + projectName)
+}