Commit 64fd2184 authored by XieXiaohan's avatar XieXiaohan

update WindowsApp

parent 950584ee
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
</head>
<body>
<noscript>
<strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="WindowsApp">
</div>
<!-- built files will be auto injected -->
</body>
</html>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<a class="navbar-item navpadding" @click="refactor" <a class="navbar-item navpadding" @click="refactor"
> >
Refactor Widget_layout
</a> </a>
</div> </div>
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
<div class=" columns" style="margin-bottom: 0px;margin-left: 5px;" ></div> <div class=" columns" style="margin-bottom: 0px;margin-left: 5px;" ></div>
</div> </div>
<component id="widget" class="vue-draggable-handle" :is="widget.widgetComponentName" :ref="widget.ref" :index="index" :widgetList="widgetList" @del="deleteWidget" @schemas="getSchemas" ></component> <component id="widget" class="vue-draggable-handle" :is="widget.widgetComponentName" :ref="widget.ref" :refIndex="widget.ref" :index="index" :widgetList="widgetList" @del="deleteWidget" @schemas="getSchemas" ></component>
</grid-item> </grid-item>
...@@ -144,6 +144,7 @@ import { WidgetRef } from "./models/WidgetRef"; ...@@ -144,6 +144,7 @@ import { WidgetRef } from "./models/WidgetRef";
import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig"; import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig";
import { Action, UpdatePayload } from "./models/UpdatePayload"; import { Action, UpdatePayload } from "./models/UpdatePayload";
import { Widget } from "./models/widget"; import { Widget } from "./models/widget";
//import {UpdateWidget} from "./app.vue";
import { ResourceInfo } from "./models/Customview"; import { ResourceInfo } from "./models/Customview";
import { indexOf } from "typescript-collections/dist/lib/arrays"; import { indexOf } from "typescript-collections/dist/lib/arrays";
...@@ -162,6 +163,8 @@ import Windows from "./components/Common/Windows.vue"; ...@@ -162,6 +163,8 @@ import Windows from "./components/Common/Windows.vue";
// import Gauge from "./components/Gauge/Gauge.vue"; // import Gauge from "./components/Gauge/Gauge.vue";
//this is the view selecotr class //this is the view selecotr class
@Component({ @Component({
components: { components: {
//when add more available widgets add ref to the widgets //when add more available widgets add ref to the widgets
...@@ -180,6 +183,10 @@ import Windows from "./components/Common/Windows.vue"; ...@@ -180,6 +183,10 @@ import Windows from "./components/Common/Windows.vue";
Windows, Windows,
} }
}) })
export default class App extends Vue { export default class App extends Vue {
widgetList: WidgetRef[] = []; widgetList: WidgetRef[] = [];
fileName: string = "widgetTemplate.json"; fileName: string = "widgetTemplate.json";
...@@ -214,8 +221,11 @@ export default class App extends Vue { ...@@ -214,8 +221,11 @@ export default class App extends Vue {
this.widgetList.splice(index, 1); this.widgetList.splice(index, 1);
console.log(index); console.log(index);
} }
OpenWindows(isOpen:boolean):void{ OpenWindows(isOpen:boolean):void{
this.OpenWindow = isOpen; this.OpenWindow = isOpen;
...@@ -283,6 +293,7 @@ export default class App extends Vue { ...@@ -283,6 +293,7 @@ export default class App extends Vue {
} }
mounted() { mounted() {
//console.log(this.App);
let AppLeftClick = document.getElementById('appLeftClick'); let AppLeftClick = document.getElementById('appLeftClick');
let refactorList = document.getElementsByClassName('refactor'); let refactorList = document.getElementsByClassName('refactor');
AppLeftClick.onclick = e => { AppLeftClick.onclick = e => {
...@@ -355,10 +366,28 @@ export default class App extends Vue { ...@@ -355,10 +366,28 @@ export default class App extends Vue {
console.log("PubSub.subscribe(\"VarBroadcast"); console.log("PubSub.subscribe(\"VarBroadcast");
//接收到消息调用全部widget的parentUpdate函数 //接收到消息调用全部widget的parentUpdate函数
for (var widget of this.widgetList) { for (var widget of this.widgetList) {
((this.$refs[widget.ref] as Array<Widget>)[0] as Widget).parentUpdate(Args);} ((this.$refs[widget.ref] as Array<Widget>)[0] as Widget).parentUpdate(Args);
}
}); });
} }
UpdateWidget(EditData:any) {
var url = (EditData.edit.url);
this.$refs[EditData.edit.index][0].pathPoke(url);
this.$refs[EditData.edit.index][0].viewLoad(EditData.params.Args);
if (EditData.params.Args != null) {
this.$refs[EditData.edit.index][0].fontSize = EditData.edit.fontSize;
this.$refs[EditData.edit.index][0].viewLoad(EditData.params.Args);
this.$refs[EditData.edit.index][0].EditData.edit.fontSize = EditData.edit.fontSize;
this.$refs[EditData.edit.index][0].EditData.params.StateFile = EditData.params.StateFile;
this.$refs[EditData.edit.index][0].EditData.params.StateIndicatorFile = EditData.params.StateIndicatorFile;
}
}
exportActiveWidgetList(): AllWidgetConfig { exportActiveWidgetList(): AllWidgetConfig {
for (var widget of this.widgetList) { for (var widget of this.widgetList) {
widget.widgetConfig = ((this.$refs[widget.ref] as Array< widget.widgetConfig = ((this.$refs[widget.ref] as Array<
...@@ -442,6 +471,22 @@ export default class App extends Vue { ...@@ -442,6 +471,22 @@ export default class App extends Vue {
} }
//定义html函数,挂载在window上以供opener调用
//迁移到main.ts里面,和文件分离,这样单独引用file不受影响
/*window.UpdateWidget = function UpdateWidget(config) {
//this.App.UpdateWidget(config);
//prototype原形方法
// App.prototype = new App;
//console.log(Appmain.prototype);
Appmain.prototype.UpdateWidget(config);
//App.prototype.UpdateWidget(config);
}*/
</script> </script>
<style lang="scss"> <style lang="scss">
......
<template>
<div class="container">
<hr>
<div>2020.9 windows.open 'for widget windows'</div>
<hr>
<table class="table">
<thead>
<tr>
<th><abbr >Edit Widget</abbr></th>
</tr>
</thead>
<tbody>
<tr class="is-selected is-fullwidth" v-if="EditData.edit.type == 'status' || EditData.edit.type == 'state'">
<th>status</th>
<td>Enter the Thingin the input box below, </td>
<td>then the return value will Automatic updates</td>
<td>click 'POKE' to get the parameters</td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>EDIT url:</th>
<td> <input class="input has-text-primary" v-model="config.data.url" type="text"></td>
<td><button class="button has-text-primary" style="margin-left: 15px;" @click="pathPoke">POKE</button></td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>fontSize</th>
<td> <input class="input has-text-primary" v-model="fontSize" type="text"></td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>Params</th>
<td>
<div class="file" @change="loadTextFromStateFile" v-model="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
State
</span>
</span>
</label>
</div>
</td>
<td>
<div class="file" @change="loadTextFromStateIndicatorFile" v-model="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
State Indicator
</span>
</span>
</label>
</div>
</td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>Params</th>
<td>
<div v-for="(label, index) in userInputData.keys()" :key="index" class="column" v-show="isShowParams">
<div class="field is-horizontal" style="margin:5px">
<div class="field-label is-normal">
<label class="label">{{label}}</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="text" v-model="tempUserInputData[label]">
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>Finish</th>
<td> <button class="button is-light " @click="apply"> Apply</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import PathProcessor from "./models/PathProcessor";
import axios from "axios";
import { GridItemData, GridLayout, GridItem } from "vue-grid-layout";
import { WidgetRef } from "./models/WidgetRef";
import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig";
import { Action, UpdatePayload } from "./models/UpdatePayload";
import { Widget } from "./models/widget";
//this is the view selecotr class
@Component({
components: {
}
})
export default class WindowsApp extends Vue {
pathProcessor = new PathProcessor();
EditPathPoke : string = '';
isShowParams: boolean = true;
userInputData = new Map<string, string>();
tempUserInputData:{[key: string]: string} = {};
pathwithVar: string = "";
fontSize:number = null;
StateFile:any = {};
StateIndicatorFile:any = {};
config: WidgetConfig = {
WidgetComponentName: "Status",
data: {
url: "",
get: { url: "", userInputData: "" },
set: { url: "", userInputData: "" },
displayname:"",
userInputData: ""
}
};
EditData:any={
edit:{
type:'',
url:this.config.data.url,
fontSize:this.fontSize,
index:'',
},
params:{
PokedPath:this.EditPathPoke,
action:'',
Args : {},
StateFile : {},
StateIndicatorFile : {},
//userInputData:this.userInputData,
},
};
created() {
var localURL = location.search;
if (localURL.indexOf("?") != -1) {
var url = localURL.substr(1);
var jsondata = decodeURI(url);
var data = JSON.parse(jsondata);
this.EditData = data;
}
this.config.data.url = this.EditData.params.PokedPath;
this.fontSize = this.EditData.edit.fontSize;
}
mounted(){
this.updateView();
}
updateView(){
this.isShowParams = true;
this.setVariableList(
this.pathProcessor.extractVarFromPath(this.EditData.params.PokedPath)
);
}
/*loadTextFromStateFile(ev: any){
const file = ev.target.files[0];
//console.log(file);
const reader = new FileReader();
reader.readAsText(file);
reader.onload = e => {
this.StateFile = JSON.parse((e.target as any).result);
this.EditData.params.StateFile = this.StateFile;
};
}
loadTextFromStateIndicatorFile(ev: any){
const file = ev.target.files[0];
const reader = new FileReader();
reader.readAsText(file);
reader.onload = e => {
this.StateIndicatorFile = JSON.parse((e.target as any).result);
this.EditData.params.StateIndicatorFile = this.StateIndicatorFile;
};
}*/
apply(){
this.EditData.edit.url = this.config.data.url;
var Args: UpdatePayload = {
action: this.EditData.params.action,
variables: this.getVariableValues(),
target: ["self"]
};
this.EditData.params.Args = Args;
this.EditData.edit.fontSize = this.fontSize;
window.opener.UpdateWidget(this.EditData);
}
pathPoke() {
this.isShowParams = true;
this.EditData.edit.url = this.config.data.url;
window.opener.UpdateWidget(this.EditData);
}
setVariableList(path: string[]) {
console.log(path);
this.userInputData.clear();
path.forEach(element => {
this.userInputData.set(element, '');
});
console.log(this.userInputData);
this.$forceUpdate();
}
getVariableValues(): Map<string, string> {
for(var key of this.userInputData.keys()) {
this.userInputData.set(key, this.tempUserInputData[key]);
}
return this.userInputData;
}
}
</script>
<style lang="scss">
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
$info: red;
$colors: (
"info": ($info, $info-invert),
);
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
}
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>
import Vue from 'vue';
import WindowsApp from './WindowsApp.vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import 'font-awesome/css/font-awesome.min.css';
//import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window';
import 'babel-polyfill';
import VideoPlayer from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
Vue.config.productionTip = false;
//Vue.use(BootstrapVue)
Vue.use(Buefy);
Vue.use(VueWindow);
Vue.use(VideoPlayer);
// Vue.use(VueRouter);
// const routes = [
// { path: '/', meta: {
// title: 'MdsplusWave'
// }
// }
// ];
// const router = new VueRouter({
// routes
// });
// router.beforeEach((to, from, next) => {
// document.title = 'MdsplusWave'
// next()
// })
new Vue({
render: (h) => h(WindowsApp),
}).$mount('#WindowsApp');
//# sourceMappingURL=main.js.map
\ No newline at end of file
{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uCAAuC,CAAA;AAC9C,yCAAyC;AACzC,OAAO,KAAK,SAAS,MAAM,oBAAoB,CAAA;AAQ/C,OAAO,gBAAgB,CAAA;AAEvB,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAC1C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,4BAA4B,CAAA;AAGnC,GAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC;AAEjC,uBAAuB;AACvB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AACd,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AAElB,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;AAGpB,sBAAsB;AAEtB,mBAAmB;AACnB,0BAA0B;AAC1B,2BAA2B;AAC3B,MAAM;AACN,IAAI;AACJ,KAAK;AAEL,iCAAiC;AACjC,WAAW;AACX,MAAM;AAEN,0CAA0C;AAC1C,mCAAmC;AACnC,WAAW;AACX,KAAK;AAGL,IAAI,GAAG,CAAC;IACN,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;CAE7B,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC"}
\ No newline at end of file
import Vue from 'vue';
import WindowsApp from './WindowsApp.vue';
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import 'font-awesome/css/font-awesome.min.css'
//import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window'
import router from 'vue-router'
//import '@/assets/css/fontSize.css';
//import 'bootstrap/dist/css/bootstrap.css'
//import 'bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'
import 'babel-polyfill'
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.config.productionTip = false;
//Vue.use(BootstrapVue)
Vue.use(Buefy)
Vue.use(VueWindow)
Vue.use(VideoPlayer)
// Vue.use(VueRouter);
// const routes = [
// { path: '/', meta: {
// title: 'MdsplusWave'
// }
// }
// ];
// const router = new VueRouter({
// routes
// });
// router.beforeEach((to, from, next) => {
// document.title = 'MdsplusWave'
// next()
// })
new Vue({
render: (h) => h(WindowsApp),
//router,
}).$mount('#WindowsApp');
export default class PathProcessor {
FillPathWithVar(variables, path) {
//$ $ variables是userinoutdata是参数+参数值
const urlRegExp = /(?<=\$)\w*(?=\$)/g;
let str = '';
//取出path中的$ $,数组
const result = path.match(urlRegExp);
if (result != null) {
//遍历map和数组
variables.forEach((value, key) => {
result.forEach((label) => {
// tslint:disable-next-line:triple-equals
if (label == key) {
str = '\$' + label + '\$';
//将$xxx$替换成参数值 path为/card0/length/0
path = path.replace(str, value);
}
});
});
}
return path;
}
extractVarFromPath(path) {
let inputLabel;
inputLabel = [];
const urlRegExp = /(?<=\$)\w*(?=\$)/g;
const result = path.match(urlRegExp);
if (result != null) {
result.forEach((element) => {
if (element != "") {
inputLabel.push(element);
}
});
}
console.log('extract' + inputLabel);
return inputLabel;
}
}
//# sourceMappingURL=PathProcessor.js.map
\ No newline at end of file
{"version":3,"file":"PathProcessor.js","sourceRoot":"","sources":["PathProcessor.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,aAAa;IACvB,eAAe,CAAC,SAA8B,EAAE,IAAY;QAC/D,qCAAqC;QACrC,MAAM,SAAS,GAAG,mBAAmB,CAAC;QACtC,IAAI,GAAG,GAAG,EAAE,CAAC;QACb,gBAAgB;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACrC,IAAI,MAAM,IAAI,IAAI,EAAE;YAChB,UAAU;YACV,SAAS,CAAC,OAAO,CAAC,CAAC,KAAa,EAAE,GAAW,EAAE,EAAE;gBAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBACrB,yCAAyC;oBACzC,IAAI,KAAK,IAAI,GAAG,EAAE;wBACd,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;wBAC1B,oCAAoC;wBACpC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;qBACnC;gBACL,CAAC,CAAC,CAAC;YACP,CAAC,CAAC,CAAC;SACN;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IACM,kBAAkB,CAAC,IAAY;QAClC,IAAI,UAAoB,CAAC;QACzB,UAAU,GAAG,EAAE,CAAC;QAChB,MAAM,SAAS,GAAG,mBAAmB,CAAC;QACtC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACrC,IAAI,MAAM,IAAI,IAAI,EAAE;YAChB,MAAM,CAAC,OAAO,CAAC,CAAC,OAAe,EAAE,EAAE;gBACnC,IAAG,OAAO,IAAI,EAAE,EAChB;oBACI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;iBAC5B;YACD,CAAC,CAAC,CAAC;SACN;QACD,OAAO,CAAC,GAAG,CAAC,SAAS,GAAC,UAAU,CAAC,CAAC;QAClC,OAAO,UAAU,CAAC;IACtB,CAAC;CACJ"}
\ No newline at end of file
export default class PathProcessor {
public FillPathWithVar(variables: Map<string, string>, path: string): string {
//$ $ variables是userinoutdata是参数+参数值
const urlRegExp = /(?<=\$)\w*(?=\$)/g;
let str = '';
//取出path中的$ $,数组
const result = path.match(urlRegExp);
if (result != null) {
//遍历map和数组
variables.forEach((value: string, key: string) => {
result.forEach((label) => {
// tslint:disable-next-line:triple-equals
if (label == key) {
str = '\$' + label + '\$';
//将$xxx$替换成参数值 path为/card0/length/0
path = path.replace(str, value);
}
});
});
}
return path;
}
public extractVarFromPath(path: string): string[] {
let inputLabel: string[];
inputLabel = [];
const urlRegExp = /(?<=\$)\w*(?=\$)/g;
const result = path.match(urlRegExp);
if (result != null) {
result.forEach((element: string) => {
if(element != "")
{
inputLabel.push(element);
}
});
}
console.log('extract'+inputLabel);
return inputLabel;
}
}
export default class StrMapObjChange {
strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k, v] of strMap) {
// We don’t escape the key '__proto__'
// which can cause problems on older engines
obj[k] = v;
}
return obj;
}
objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
}
//# sourceMappingURL=StrMapObjChange.js.map
\ No newline at end of file
{"version":3,"file":"StrMapObjChange.js","sourceRoot":"","sources":["StrMapObjChange.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,eAAe;IAC3B,WAAW,CAAC,MAA2B;QAC5C,IAAI,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9B,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,EAAE;YACzB,sCAAsC;YACtC,4CAA4C;YAC5C,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;SACZ;QACD,OAAO,GAAG,CAAC;IACb,CAAC;IAEM,WAAW,CAAC,GAAQ;QACzB,IAAI,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACvB,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YAC9B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SACvB;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;CACF"}
\ No newline at end of file
export default class StrMapObjChange {
public strMapToObj(strMap: Map<string, string>): any {
let obj = Object.create(null);
for (let [k, v] of strMap) {
// We don’t escape the key '__proto__'
// which can cause problems on older engines
obj[k] = v;
}
return obj;
}
public objToStrMap(obj: any) :Map<string, string>{
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
}
export var Action;
(function (Action) {
Action[Action["Get"] = 0] = "Get";
Action[Action["Set"] = 1] = "Set";
Action[Action["Invoke"] = 2] = "Invoke";
Action[Action["Broadcast"] = 3] = "Broadcast";
Action[Action["BroadcastAndRefresh"] = 4] = "BroadcastAndRefresh";
})(Action || (Action = {}));
//# sourceMappingURL=UpdatePayload.js.map
\ No newline at end of file
{"version":3,"file":"UpdatePayload.js","sourceRoot":"","sources":["UpdatePayload.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,MAMX;AAND,WAAY,MAAM;IAChB,iCAAG,CAAA;IACH,iCAAG,CAAA;IACH,uCAAM,CAAA;IACN,6CAAS,CAAA;IACT,iEAAmB,CAAA;AACrB,CAAC,EANW,MAAM,KAAN,MAAM,QAMjB"}
\ No newline at end of file
import * as Collections from "typescript-collections";
export enum Action {
Get,
Set,
Invoke,
Broadcast,
BroadcastAndRefresh
}
export interface UpdatePayload {
target: string[];
action: string;
variables: Map<string, string>;
}
export interface ParamRef {
paramName:string;
value: string;
ref: string;
}
export class AllWidgetConfig {
constructor() {
this.widgetList = [];
}
}
//# sourceMappingURL=WidgetConfig.js.map
\ No newline at end of file
{"version":3,"file":"WidgetConfig.js","sourceRoot":"","sources":["WidgetConfig.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,eAAe;IAA5B;QAES,eAAU,GAAgB,EAAE,CAAC;IACtC,CAAC;CAAA"}
\ No newline at end of file
import { WidgetRef } from './WidgetRef';
export interface WidgetConfig {
WidgetComponentName: string;
data: any;
}
export class AllWidgetConfig {
public currentRef?: string;
public widgetList: WidgetRef[] = [];
}
export class WidgetRef {
constructor() {
// this is not quite right, the config for a resource should only be visual-wise,
// the parameters of a resource should be probed by the widget itself
this.widgetComponentName = '';
this.ref = '';
//below is for grid layout
this.x = 0;
this.y = 0;
this.w = 8;
this.h = 6;
this.i = 0;
}
}
//# sourceMappingURL=WidgetRef.js.map
\ No newline at end of file
{"version":3,"file":"WidgetRef.js","sourceRoot":"","sources":["WidgetRef.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,SAAS;IAAtB;QACE,iFAAiF;QACjF,qEAAqE;QAC9D,wBAAmB,GAAW,EAAE,CAAC;QACjC,QAAG,GAAW,EAAE,CAAC;QAExB,0BAA0B;QACnB,MAAC,GAAQ,CAAC,CAAC;QACX,MAAC,GAAQ,CAAC,CAAC;QACX,MAAC,GAAQ,CAAC,CAAC;QACX,MAAC,GAAQ,CAAC,CAAC;QACX,MAAC,GAAQ,CAAC,CAAC;IACpB,CAAC;CAAA"}
\ No newline at end of file
import { WidgetConfig } from './WidgetConfig';
export class WidgetRef {
// this is not quite right, the config for a resource should only be visual-wise,
// the parameters of a resource should be probed by the widget itself
public widgetComponentName: string = '';
public ref: string = '';
public widgetConfig?: WidgetConfig;
//below is for grid layout
public x:number=0;
public y:number=0;
public w:number=8;
public h:number=6;
public i:number=0;
}
//# sourceMappingURL=configParameter.js.map
\ No newline at end of file
{"version":3,"file":"configParameter.js","sourceRoot":"","sources":["configParameter.ts"],"names":[],"mappings":""}
\ No newline at end of file
export interface TimeParameter {
pathId: string;
startTime: string;
endTime: string;
dotNum: string;
}
//# sourceMappingURL=customview.js.map
\ No newline at end of file
{"version":3,"file":"customview.js","sourceRoot":"","sources":["customview.ts"],"names":[],"mappings":""}
\ No newline at end of file
export interface ResourceInfo {
Parameters: Map<string, string>;
OutputType: string;
}
import { Vue } from 'vue-property-decorator';
export class Widget extends Vue {
}
//# sourceMappingURL=widget.js.map
\ No newline at end of file
{"version":3,"file":"widget.js","sourceRoot":"","sources":["widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAW7C,MAAM,OAAgB,MAAO,SAAQ,GAAG;CAUvC"}
\ No newline at end of file
import { Vue } from 'vue-property-decorator';
import { WidgetConfig } from './WidgetConfig';
import { UpdatePayload } from './UpdatePayload';
import { ResourceInfo } from './Customview';
export interface PokePath {
getPath: string;
setPath: string;
invokePath: string;
}
export abstract class Widget extends Vue {
public WidgetComponentName?: string;
public abstract setConfig(wid: WidgetConfig): void;
public abstract getConfig(): WidgetConfig;
public abstract parentUpdate(payload: UpdatePayload): void;
public abstract refresh(): void;
public abstract updateUI(): void;
public abstract replaceStartPath(startPath:string):void;
public abstract pathPoke():void;
public abstract samplePoke(sample:any):void;
}
This diff is collapsed.
...@@ -8,9 +8,6 @@ ...@@ -8,9 +8,6 @@
<span v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span> <span v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
<span v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span> <span v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
</div> </div>
<!--<div class="column is-1 is-offset-7" >
<a class="delete is-medium" @click="del"></a>
</div>-->
</div> </div>
...@@ -18,14 +15,20 @@ ...@@ -18,14 +15,20 @@
<div class="columns" style="margin-top:5px"> <div class="columns" style="margin-top:5px">
<div class="column is-10" style="margin-left:3%;overflow:auto;border-style: solid; border-width: 1px; padding: 4px"> <div class="column is-10" style="margin-left:3%;overflow:auto;border-style: solid; border-width: 1px; padding: 4px">
<p style="float:left;margin:0px;">{{ StatusValue }}</p> <p style="float:left;margin:0px;" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" >{{ StatusValue }}</p>
</div> </div>
</div>
<!--<div class="columns" style="margin-top:5px" v-if="">
<div class="column is-10">
<div>{{EditData.params.StateIndicatorFile.ll}}</div><progress class="progress is-danger" v-bind:class="value=ProgressValue" max="1">{{ProgressValue}}</progress><div>{{EditData.params.StateIndicatorFile.hh}}</div>
</div>
</div>-->
</div>
<div class="columns"> <div class="columns">
<WidgetParams <WidgetParams
class="column" class="column"
ref="WidgetParams" ref="WidgetParams"
...@@ -84,6 +87,7 @@ import Windows from "@/components/Common/Windows.vue"; ...@@ -84,6 +87,7 @@ import Windows from "@/components/Common/Windows.vue";
export default class Status extends Widget { export default class Status extends Widget {
@Prop() index!:number; @Prop() index!:number;
@Prop() refIndex!:number;
@Prop() widgetList:WidgetRef[] = []; @Prop() widgetList:WidgetRef[] = [];
pathProcessor = new PathProcessor(); pathProcessor = new PathProcessor();
...@@ -100,20 +104,21 @@ export default class Status extends Widget { ...@@ -100,20 +104,21 @@ export default class Status extends Widget {
isOpen: boolean = false; isOpen: boolean = false;
EditPathPoke : string = ""; EditPathPoke : string = "";
UserUrl:string = ""; UserUrl:string = "";
fontSize:number = 15;
activeColor:string = '';
ProgressValue:string = '0%';
schemas : any[]= [{ schemas : any[]= [{
label:'status', label:'status',
key:'status-config', key:'status-config',
type:'status', type:'status',
index:this.index, index:this.refIndex,
}, },
]; ];
config: WidgetConfig = { config: WidgetConfig = {
WidgetComponentName: "Status", WidgetComponentName: "Status",
data: { data: {
...@@ -126,12 +131,15 @@ export default class Status extends Widget { ...@@ -126,12 +131,15 @@ export default class Status extends Widget {
EditData = { EditData = {
edit:{ edit:{
type:'status', type:'status',
url:this.config.data.url, url:this.config.data.url,
index:this.index, index:this.refIndex,
fontSize:this.fontSize,
}, },
params:{ params:{
PokedPath:this.EditPathPoke, PokedPath:this.EditPathPoke,
action:'get', action:'get',
StateFile:{},
StateIndicatorFile:{},
//userInputData:this.userInputData, //userInputData:this.userInputData,
}, },
}; };
...@@ -147,9 +155,10 @@ export default class Status extends Widget { ...@@ -147,9 +155,10 @@ export default class Status extends Widget {
} }
mounted() { mounted() {
let parentDomain = window.location.hostname; //console.log(this.refIndex);
//let parentDomain = window.location.hostname;
//console.log("domain",parentDomain); //localhost //console.log("domain",parentDomain); //localhost
document.domain = parentDomain; //document.domain = parentDomain;
this.timer = setInterval(this.refresh, 1000); this.timer = setInterval(this.refresh, 1000);
let containerlist = document.getElementsByClassName('container'); let containerlist = document.getElementsByClassName('container');
...@@ -188,7 +197,7 @@ export default class Status extends Widget { ...@@ -188,7 +197,7 @@ export default class Status extends Widget {
}; };
//全局点击时消失。 //全局点击时消失。
window.onclick = e => { RightClickField.onclick = e => {
let menu = document.querySelector('.menu') let menu = document.querySelector('.menu')
if (menu && !menu.contains(e.target)) if (menu && !menu.contains(e.target))
menu.remove() menu.remove()
...@@ -250,13 +259,32 @@ export default class Status extends Widget { ...@@ -250,13 +259,32 @@ export default class Status extends Widget {
this.$emit('del', this.index); this.$emit('del', this.index);
} }
openWindows(){ ParsingStateNum(){
this.ProgressValue = (this.StatusValue - this.EditData.params.StateFile.ll)/(this.EditData.params.StateIndicatorFile.hh-this.EditData.params.StateFile.ll);
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.hh){
this.activeColor = this.EditData.params.StateFile.hh;
}
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.h && this.StatusValue<this.EditData.params.StateIndicatorFile.hh){
this.activeColor = this.EditData.params.StateFile.h;
}
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.l && this.StatusValue<this.EditData.params.StateIndicatorFile.h){
this.activeColor = this.EditData.params.StateFile.normal;
}
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.ll && this.StatusValue<this.EditData.params.StateIndicatorFile.l){
this.activeColor = this.EditData.params.StateFile.l;
}
if(this.StatusValue <= this.EditData.params.StateIndicatorFile.ll){
this.activeColor = this.EditData.params.StateFile.ll;
}
}
openWindows(){
//windows.open -> another single page application //windows.open -> another single page application
var JsonData = JSON.stringify(this.EditData); var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/?"; var url ="http://localhost:8080/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no'); window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
} }
...@@ -265,13 +293,13 @@ export default class Status extends Widget { ...@@ -265,13 +293,13 @@ export default class Status extends Widget {
console.log("dd22"); console.log("dd22");
this.isShowPath = false; this.isShowPath = false;
//this.isShowParams = true; //this.isShowParams = true;
var url = this.config.data.url; //var url = this.config.data.url;
this.EditData.params.PokedPath = this.config.data.url; this.EditData.params.PokedPath = this.config.data.url;
this.openWindows(); this.openWindows();
this.pathId = url.slice(0, url.indexOf("/")); //this.pathId = url.slice(0, url.indexOf("/"));
(this.$refs.WidgetParams as WidgetParams).setVariableList( /*(this.$refs.WidgetParams as WidgetParams).setVariableList(
this.pathProcessor.extractVarFromPath(url) this.pathProcessor.extractVarFromPath(url)
); );*/
} }
...@@ -304,28 +332,34 @@ export default class Status extends Widget { ...@@ -304,28 +332,34 @@ export default class Status extends Widget {
pathPoke(url:string) { pathPoke(url:string) {
if(url != this.config.data.url ){
this.config.data.url = url; this.config.data.url = url;
this.EditPathPoke = url;
console.log("dddd"); console.log("dddd");
var pokepath = url; var pokepath = url;
//todo:config文件
axios.defaults.timeout = 1000;
axios.get(pokepath, { axios.get(pokepath, {
headers: { headers: {
'Pragma': 'no-cache', 'Pragma': 'no-cache',
'Cache-Control': 'no-cache' 'Cache-Control': 'no-cache'
} }
}).then(response => { }).then(response => {
console.log("update");
this.samplePoke(response.data); this.samplePoke(response.data);
this.updateUI(); this.updateUI();
}).catch(err => {
console.log('catch');
this.EditData.params.PokedPath = this.config.data.url;
this.openWindows();
}); });
var url = this.config.data.url; //var url = this.config.data.url;
this.EditData.params.PokedPath = this.config.data.url;
this.openWindows();
}
} }
//app //app
samplePoke(sample: any) { samplePoke(sample: any) {
console.log("samplePOke");
var samplePath = sample.CFET2CORE_SAMPLE_PATH; var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath: string; var pokedPath: string;
pokedPath = samplePath; pokedPath = samplePath;
...@@ -348,7 +382,6 @@ export default class Status extends Widget { ...@@ -348,7 +382,6 @@ export default class Status extends Widget {
if (count != 0) { if (count != 0) {
pokedPath = pokedPath.substring(0, pokedPath.length - 1); pokedPath = pokedPath.substring(0, pokedPath.length - 1);
} }
this.EditPathPoke = pokedPath;
this.config.data.url = pokedPath; this.config.data.url = pokedPath;
//console.log(this.$parent.$root.$children[0].$children[0].$children[0]); //console.log(this.$parent.$root.$children[0].$children[0].$children[0]);
} }
...@@ -387,21 +420,29 @@ export default class Status extends Widget { ...@@ -387,21 +420,29 @@ export default class Status extends Widget {
//app //app
refresh() { refresh() {
if(this.index === top.childData.index){ /*if(this.index == top.childData.index || top.childData.url == null){
//console.log(top); //console.log(top);
if(this.config.data.url == '' || this.EditPathPoke != top.childData.url){ if(this.config.data.url == '' || this.EditPathPoke != top.childData.url){
console.log(top.childData);
this.UserUrl = top.childData.url; this.UserUrl = top.childData.url;
this.pathPoke(top.childData.url); this.pathPoke(top.childData.url);
this.viewLoad(top.childData.url); this.viewLoad(top.childData.url);
} }
this.EditData.edit.fontSize = top.fontSize;
this.fontSize = top.fontSize;
if(top.Args != null){ if(top.Args != null){
this.viewLoad(top.Args.Args); this.viewLoad(top.Args.Args);
}
}
}
}*/
/*var Args: UpdatePayload = {
action: "get",
variables: (this.$refs.WidgetParams as WidgetParams).getVariableValues(),
target: ["self"]
};
this.viewLoad(Args);*/
} }
...@@ -425,7 +466,6 @@ export default class Status extends Widget { ...@@ -425,7 +466,6 @@ export default class Status extends Widget {
this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL; this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL;
if(this.StatusValue == undefined) if(this.StatusValue == undefined)
{ {
console.log(this.StatusValue);
this.StatusValue = "undefined"; this.StatusValue = "undefined";
} }
}); });
...@@ -436,7 +476,6 @@ export default class Status extends Widget { ...@@ -436,7 +476,6 @@ export default class Status extends Widget {
//called when widgetParams action clicked //called when widgetParams action clicked
async viewLoad(Args: UpdatePayload) { async viewLoad(Args: UpdatePayload) {
// this.config.data.userInputData = Args.variables; // this.config.data.userInputData = Args.variables;
console.log(Args);
this.userInputData = Args.variables; this.userInputData = Args.variables;
this.pathwithVar = this.pathProcessor.FillPathWithVar( this.pathwithVar = this.pathProcessor.FillPathWithVar(
// this.config.data.userInputData, // this.config.data.userInputData,
...@@ -444,6 +483,9 @@ export default class Status extends Widget { ...@@ -444,6 +483,9 @@ export default class Status extends Widget {
this.config.data.url this.config.data.url
); );
await this.getData(this.pathwithVar); await this.getData(this.pathwithVar);
if(typeof this.StatusValue == "number"){
this.ParsingStateNum();
}
} }
} }
......
...@@ -28,7 +28,10 @@ Vue.use(VideoPlayer); ...@@ -28,7 +28,10 @@ Vue.use(VideoPlayer);
// document.title = 'MdsplusWave' // document.title = 'MdsplusWave'
// next() // next()
// }) // })
new Vue({ var Appuse = new Vue({
render: (h) => h(App), render: (h) => h(App),
}).$mount('#app'); }).$mount('#app');
//export default Appmain
//console.log(Appmain.$children[0].UpdateWidget('111'));
window.UpdateWidget = Appuse.$children[0].UpdateWidget;
//# sourceMappingURL=main.js.map //# sourceMappingURL=main.js.map
\ No newline at end of file
{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uCAAuC,CAAA;AAC9C,yCAAyC;AACzC,OAAO,KAAK,SAAS,MAAM,oBAAoB,CAAA;AAQ/C,OAAO,gBAAgB,CAAA;AAEvB,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAC1C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,4BAA4B,CAAA;AAGnC,GAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC;AAEjC,uBAAuB;AACvB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AACd,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AAElB,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;AAIpB,sBAAsB;AAEtB,mBAAmB;AACnB,0BAA0B;AAC1B,2BAA2B;AAC3B,MAAM;AACN,IAAI;AACJ,KAAK;AAEL,iCAAiC;AACjC,WAAW;AACX,MAAM;AAEN,0CAA0C;AAC1C,mCAAmC;AACnC,WAAW;AACX,KAAK;AAGL,IAAI,GAAG,CAAC;IACN,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;CAEtB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"} {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uCAAuC,CAAA;AAC9C,yCAAyC;AACzC,OAAO,KAAK,SAAS,MAAM,oBAAoB,CAAA;AAQ/C,OAAO,gBAAgB,CAAA;AAEvB,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAC1C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,4BAA4B,CAAA;AAGnC,GAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC;AAEjC,uBAAuB;AACvB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AACd,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AAElB,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;AAIpB,sBAAsB;AAEtB,mBAAmB;AACnB,0BAA0B;AAC1B,2BAA2B;AAC3B,MAAM;AACN,IAAI;AACJ,KAAK;AAEL,iCAAiC;AACjC,WAAW;AACX,MAAM;AAEN,0CAA0C;AAC1C,mCAAmC;AACnC,WAAW;AACX,KAAK;AAGL,IAAI,MAAM,GAAG,IAAI,GAAG,CAAC;IACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;CAEtB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AAElB,wBAAwB;AAExB,wDAAwD;AACxD,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC"}
\ No newline at end of file \ No newline at end of file
...@@ -48,8 +48,13 @@ Vue.use(VideoPlayer) ...@@ -48,8 +48,13 @@ Vue.use(VideoPlayer)
// }) // })
new Vue({ var Appuse = new Vue({
render: (h) => h(App), render: (h) => h(App),
//router, //router,
}).$mount('#app'); }).$mount('#app');
//export default Appmain
//console.log(Appmain.$children[0].UpdateWidget('111'));
window.UpdateWidget = Appuse.$children[0].UpdateWidget;
import Vue, { VNode } from 'vue'; import Vue, { VNode } from 'vue';
declare global { declare global {
interface Window{
UpdateWidget:any;
}
namespace JSX { namespace JSX {
// tslint:disable no-empty-interface // tslint:disable no-empty-interface
interface Element extends VNode {} interface Element extends VNode {}
// tslint:disable no-empty-interface // tslint:disable no-empty-interface
...@@ -11,3 +15,4 @@ declare global { ...@@ -11,3 +15,4 @@ declare global {
} }
} }
} }
module.exports = { module.exports = {
pages: {
App:{
entry: './src/main.ts',
//template: 'public/index.html',
//filename: 'index.html',
},
WindowsApp:{
entry:'./src/Windows/main.ts',
template: 'public/WindowsAppIndex.html',
filename: 'WindowsAppIndex.html',
},
},
outputDir: '/Users/igem/Desktop/slide', outputDir: '/Users/igem/Desktop/slide',
devServer: { devServer: {
proxy: { proxy: {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment