-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (116 loc) · 6.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<!-- Cutting management + Sequence Plan Application integration example -->
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="./messagepipe.js"></script>
</head>
<body>
<div id="app" class="container">
<h1>Cutting Management removal list MOCKUP</h1>
<form v-if="isReceived">
<div v-for="(item, index) in removalList" class="row mb-3" style="border-bottom: 1px solid gray;">
<div class="form-group col-6">
<label>rawSapMaterial</label>
<input type="text" class="form-control" v-model="item.rawSapMaterial">
</div>
<div class="form-group col-6">
<label>lamWoodModuleLength</label>
<input type="text" class="form-control" v-model="item.lamWoodModuleLength">
</div>
<div class="form-group col-12">
<button class="btn btn-secondary" @click.prevent="remove(index)">- Remove</button>
</div>
</div>
<button class="btn btn-success float-left" @click.prevent="add">+ Add item</button>
<button v-if="hasAnyRemovals" class="btn btn-secondary float-left ml-1" @click.prevent="reset">Reset</button>
<button v-if="hasAnyRemovals" class="btn btn-primary float-right ml-1" @click.prevent="save">Save</button>
<button class="btn btn-warning float-right" @click.prevent="cancel">Cancel</button>
</form>
<div v-else="">Loading data...</div>
</div>
<script>
(function() {
// Assuming page loaded within the iframe.
// Establish connection with parent window by creating new message pipe.
// Second argument should point a domain (including protocol) where Sequence Plan is running.
// http://localhost:61493 - local, http://frontend.messp.astor.office.xtech.pl - demo
var pipe = new MessagePipe(window.parent, 'http://frontend.messp.astor.office.xtech.pl')
// DEBUG ONLY, not required in production mode.
// This callback will be called as soon as pipe connects to the other end (pipe implements simple 'hello' routine that confirms connection establishing).
// CAUTION: callback has to be set before pipe is connected (calling .connect() method), otherwise event will occure before handler was assigned.
pipe.onConnected = function(data) {
console.log('MOCKUP: pipe connected!')
}
// When initialized pipe has to be connected - this will ensure that pipe is connected to the other end (Sequence Plan App).
pipe.connect()
// NOTE: pipe shouled be disposed if you plan to reinitialize it within same page load (listerns are bound to window an will stay active when not disposed).
// pipe.dispose();
// Initializing new vue instace that will mockup the UI.
// https://vuejs.org/
new Vue({
el: '#app',
data: {
isReceived: false,
removalList: []
},
mounted() {
var me = this
// This callback will handle incomming messages. At the moment cutting management scenario does not makes usage in this direction.
// CAUTION: callback has to be set before pipe is connected, otherwise some of the messages might lost.
pipe.onReceived = function (data) {
console.log('MOCKUP: message recevied', data)
// Get removal list from app (Sequence Plan App)
if (data.method === 'getAppRemovalList') {
me.removalList = data.params.removalList.length > 0 ? data.params.removalList : me.removalList
me.isReceived = true
}
}
},
computed: {
hasAnyRemovals: function () {
return this.removalList.length > 0
}
},
methods: {
remove: function(itemIndex) {
this.removalList.splice(itemIndex, 1)
},
add: function() {
this.removalList.push({
"rawSapMaterial": "",
"lamWoodModuleLength": ""
})
},
save: function() {
// When save button clicked sending message to Sequence Plan app.
// It is expected that message payload (first argment of .send() method) will have specified format:
// { method: '<methodName>', params: { '<param1Name>': '<param1Value>', '<param2Name>': '<param2Value>', '<paramNName>': '<paramNValue>' } }
// In case of below method name is "setRemovalList" and the only paramter is removalList value (assigned from ui).
// On Sequece Plan app end: when message received "setRemovalList" will store removal list for current location and the will close cutting management layer (modal).
pipe.send({
method: "setRemovalList",
params: {
removalList: this.removalList
}
})
},
reset: function() {
this.removalList = []
},
cancel: function () {
// When cancel button clicked sending message to Sequence Plan app.
// It is expected that message payload (first argment of .send() method) will have specified format:
// { method: '<methodName>', params: { '<param1Name>': '<param1Value>', '<param2Name>': '<param2Value>', '<paramNName>': '<paramNValue>' } }
// In case of below method name is "terminate" and there are no parameters.
// On Sequece Plan app end: when message received "terminate" will release pipe resources and then destroy layer (modal) including cutting management iframe.
pipe.send({
method: "terminate"
})
}
}
})
})()
</script>
</body>
</html>