· 6 years ago · Sep 09, 2019, 08:28 PM
1<div id="root"></div>
2<script>
3
4const API_URL = "http://192.168.0.147:1338/api/";
5
6const TOTAL_NUMBER = 10; // <--- Nombre de touche numérique autorisé par le serveur (default 0 - 9)
7const KEY_COUNTER = 3; // <--- Nombre de touche compteur
8const KEYBOARD_MATRICE_BUILD = [5,5]; // <---- Nombre de touche affichées au clavier
9const KEYBOARD_MATRICE_TOTAL = KEYBOARD_MATRICE_BUILD[0] * KEYBOARD_MATRICE_BUILD[1];
10
11
12/*
13##################################
14 API REQUEST
15###################################
16
17*/
18 var _API = function (method, url, data, callback) {
19 let resp = {};
20
21 var headers = axios.defaults.headers;
22
23 return axios({
24 headers:headers,
25 method: method,
26 url: API_URL + url,
27 data: data,
28 validateStatus: (s) => {
29 resp.status = s
30
31 return true // I'm always returning true, you may want to do it depending on the status received
32 }
33 }).then(response => {
34 try {
35
36
37 resp.data = response.data.data;
38 resp.error = response.data.error;
39 } catch (e) {
40 JSON.parse(x)
41 resp.data = response.data.data;
42 resp.error = response.data.error;
43 }
44
45 return callback(resp)
46 }).catch(error => { resp.data = error; return callback(resp) })
47 // return axios
48 // .get(SYSTEM.API+url)
49 // .then(response => { return response; })
50 // .catch(error => { console.log('ERROR = '+ error); return error; })
51 }
52
53/*
54##################################
55 COMPONENT
56 KEYBOARD BUTTON
57###################################
58
59*/
60
61
62var KeyboardButton ={
63 name: "kbbutton",
64 key: "kbbutton",
65 props: ['value'],
66 data() {
67 return {
68 active: false
69 }
70 },
71 methods: {
72 onPressIn:function(){
73 if (this.props.value) {
74 this.props.onPressIn(this.props.value);
75 }
76
77 },
78
79},
80
81template: `
82<div>{{value}}</div>
83`
84}
85
86
87
88/*
89##################################
90 COMPONENT
91 SOCRYPTIC KEYBOARD
92###################################
93
94*/
95
96
97var app = new Vue({
98
99
100 el: '#root',
101 data: {
102 output:[],
103 output_display: null,
104 session_key: null,
105 session_matrice: [],
106 keyboard_matrice: [],
107 array_counters: [],
108 is_randomizing: false,
109 },
110
111 components: {
112 KeyboardButton
113},
114
115
116/*
117##################################
118 BEFORE MOUNT
119###################################
120
121*/
122
123
124beforeMount: function() {
125
126 this.initialize_keyboardMatrice();
127 this.initialize_counters();
128},
129
130
131/*
132##################################
133 MOUNTED
134###################################
135
136*/
137
138mounted: function() {
139
140
141 var session_received = {}, _this=this;
142 // api.client.getConnectSession({deviceid:'599261',buildid:'86168118'}).then((response) => {
143
144 // console.log(response);
145 // session_received.key = response.data.key;
146 // session_received.matrice = response.data.matrice;
147
148 // _this.update_sessionKey(session_received.key);
149 // _this.update_sessionMatrice(session_received.matrice);
150 // _this.prepare_counters()
151 // _this.randomize_keypad_multiple(1);
152 // })
153
154 /* DONNE DE TEST */
155
156 var session_received = {
157 key: 'F090fdskoksdf0909fdsfksdoksdk0430493fsdkfdsokOKFDOFKDFDOKFDO',
158 matrice: [
159 'fdsfodskfpofdspoksdopk',
160 'adsfodskfpofdspoksdopk',
161 'zdsfodskfpofdspoksdopk',
162 'edsfodskfpofdspoksdopk',
163 'rdsfodskfpofdspoksdopk',
164 'tdsfodskfpofdspoksdopk',
165 'ydsfodskfpofdspoksdopk',
166 'udsfodskfpofdspoksdopk',
167 'idsfodskfpofdspoksdopk',
168 'odsfodskfpofdspoksdopk',
169 ]
170 }
171
172 _this.update_sessionKey(session_received.key);
173 _this.update_sessionMatrice(session_received.matrice);
174 _this.prepare_counters()
175 _this.randomize_keypad_multiple(1);
176},
177
178
179
180/*
181##################################
182 COMPONENTS METHODS
183###################################
184
185*/
186methods: {
187
188
189/*
190############# METHOD ################
191 Initialize the counter matrice
192 Used on beforeMount
193 prepare array_counters data;
194*/
195
196
197 initialize_counters: function(){
198 this.array_counters=[]
199 for (let i = 0; i < KEY_COUNTER; i++) {
200 this.array_counters.push([null,null]);
201 }
202 },
203
204
205/*
206############# METHOD ################
207 Initialize the keyboard matrice
208 Used on beforeMount
209 prepare keyboard_matrice data;
210*/
211
212
213 initialize_keyboardMatrice: function() {
214 this.keyboard_matrice=[];
215 for (let i = 0; i < KEYBOARD_MATRICE_TOTAL; i++) {
216 this.keyboard_matrice.push([null,null]);
217 }
218 },
219
220
221/*
222############# METHOD ################
223 Update Session Key
224 update session_key data
225*/
226
227 update_sessionKey: function(key) {
228 this.session_key = key;
229 },
230
231/*
232############# METHOD ################
233 Update Session Matrice Datas
234 update session_matrice data
235*/
236
237 update_sessionMatrice: function(matrice) {
238
239 this.session_matrice = [];
240 for (let i in matrice) {
241 this.session_matrice.push(matrice[i]);
242 }
243 console.log('updated session ====');
244 console.log(this.session_matrice);
245 },
246
247
248 prepare_counters: function() {
249 var number_array=[], randomNumber=null;
250 for (i = 0 ; i < TOTAL_NUMBER ; i++) {
251 number_array.push(i);
252 }
253 for (let i in this.array_counters) {
254 randomNumber = Math.floor(Math.random() * (number_array.length-1)) + 0;
255 this.array_counters[i] = this.get_matriceData(number_array[randomNumber]);
256 number_array.splice(randomNumber,1);
257 }
258 },
259
260 get_counterData: function(index) {
261 return this.array_counters[index];
262},
263
264increment_counter: function(index) {
265 var counter = this.array_counters[index],
266 next = false;
267 for (i in this.session_matrice) {
268
269 if (next) { this.array_counters[index] = this.session_matrice[i]; next=false;break; }
270 if (this.session_matrice[i] == counter) { next = true; }
271 }
272 if (next) { this.array_counters[index] = this.session_matrice[0]; }
273 // this.setState({array_counters: this.array_counters});
274},
275
276get_matriceData : function(index) {
277 // index = String(index);
278 var i=0;
279 for (let entry in this.session_matrice) {
280 if (i == index) {
281 return this.session_matrice[entry];
282 }
283 i++
284 }
285 },
286
287 add_output: function(value) {
288 if (!this.is_randomizing) {
289 this.is_randomizing = true;
290 // this.setState({is_randomizing: this.is_randomizing});
291 let o = "#";
292 this.output.push(value);
293 this.output_display = o.repeat(this.output.length);
294 // console.log('KEYPRESS => '+value);
295 // console.log('OUPUT =:: '+this.output);
296 this.randomize_keypad();
297 this.is_randomizing = false;
298 // this.setState({is_randomizing: this.is_randomizing});
299 }
300 },
301
302 clear_output : function() {
303 this.output = [];
304 this.output_display = null;
305 // this.setState({output: [], output_display: null});
306 this.randomize_keypad_multiple(5);
307 },
308
309 randomize_keypad : function() {
310
311 this.initialize_keyboardMatrice();
312
313 var _this=this, i=0, j=0, number_array=[], matrice_array=[], memory_number=[], memory_matrice=[], randomMatrice=null, randomNumber=1;
314 for (i = 0 ; i < TOTAL_NUMBER ; i++) {
315 number_array.push(i);
316 }
317 // console.log(number_array)
318
319 for (i = 0 ; i < KEYBOARD_MATRICE_TOTAL ; i++) {
320 matrice_array.push(i);
321 }
322 // console.log(matrice_array);
323
324 i=0;
325 while (i < TOTAL_NUMBER+KEY_COUNTER) {
326
327 randomMatrice = Math.floor(Math.random() * (matrice_array.length-1)) + 0;
328
329 if (i < TOTAL_NUMBER) {
330
331 randomNumber = Math.floor(Math.random() * (number_array.length-1)) + 0;
332
333 memory_matrice.push(matrice_array[randomMatrice]); memory_number.push(number_array[randomNumber]);
334 this.keyboard_matrice[matrice_array[randomMatrice]] = this.get_matriceData(number_array[randomNumber]);
335
336 number_array.splice(randomNumber,1);
337 matrice_array.splice(randomMatrice,1);
338
339 }else {
340 // console.log('handling counter = '+j +' setted to numpad = '+matrice_array[randomMatrice]);
341 let counter = this.get_counterData(j);
342 this.keyboard_matrice[matrice_array[randomMatrice]] = counter;
343
344 this.increment_counter(j);
345 let a = matrice_array[randomMatrice], b=j;
346
347 // setTimeout(function() {
348 // this.increment_counter(b);
349 // let c = this.get_counterData(b);
350
351 // this.keyboard_matrice[a] = c;
352 // // this.setState({keyboard_matrice: this.keyboard_matrice})
353 // }.bind(this),500)
354
355
356 matrice_array.splice(randomMatrice,1);
357 j++
358 }
359
360
361 i++;
362 }
363
364
365 // this.setState({keyboard_matrice: this.keyboard_matrice});
366 },
367
368 randomize_keypad_multiple : function(time) {
369 var _this=this;
370 if (time) {
371 setTimeout(() => {
372 time--
373 _this.randomize_keypad();
374 _this.randomize_keypad_multiple(time);
375 },20)
376 }
377
378 },
379
380},
381
382computed: {
383
384 getKeyboardMatrice() {
385
386 var lines = KEYBOARD_MATRICE_BUILD[0], columns = KEYBOARD_MATRICE_BUILD[1],
387 l=0, c=0, counter=0;
388 renderLine=[],renderColumn=[];
389
390 this._buttonsList = [];
391
392 // console.log(this.keyboard_matrice);
393
394 while (l < lines) {
395
396 renderColumn = [];
397
398 while (c < columns) {
399
400 var button = {
401 imgsrc: this.keyboard_matrice[counter],
402 value: this.keyboard_matrice[counter],
403 key: counter,
404 id: 'but-'+counter
405 }
406
407
408 // (<KeyboardButton id={"but-"+counter} key={counter} onPressIn={(value) => { this.add_output(value) }} value={this.keyboard_matrice[counter]} imgsrc={this.keyboard_matrice[counter]} />);
409
410 renderColumn.push(button);
411 counter++;
412 c++;
413 }
414
415
416 renderLine.push(renderColumn);
417
418 c=0;
419 l++
420 }
421
422 console.log(renderLine);
423 return renderLine;
424
425
426 }
427},
428
429
430template: `
431
432<div class="k-box">
433<div class="k-c-input" key="inputcont">
434<input class="k-input" type="password" key="ouput_value" disabled :value="output_display">
435</div>
436
437<div class="k-c-keyboard" key="containerKeyboard">
438<div class="k-c-keyline" v-for="(lines,index) in getKeyboardMatrice">
439
440
441<KeyboardButton v-for="(button,index) in lines" :key="button.key" :value="button.value"/>
442
443</div>
444</div>
445</div>
446`
447,
448// render: function(h){
449// var _t = this;
450// return h('div',{class:'k-box', key: "inputcont"},[
451// h('div',{class:'k-c-input'},[
452// h('input',{class:'k-input',key:"output_value",domProps:{type:"password", value:_t.output_display}})
453// ]),
454// h('div',{class:'k-c-keyboard', key:'containerKeyboard'},this.renderKeyboard(h)),
455// ])
456// }
457
458})
459
460
461</script>
462
463
464<style type="text/css">
465 #root {
466 display: flex;
467 flex: 1;
468 }
469
470 .k-box {
471 display: flex;
472 flex-direction: column;;
473 border: 1px solid black;
474 max-width: 95%;
475 min-width: 300px;
476 width: 500px;
477 margin: 0 auto;
478 }
479
480 .k-c-input {
481 display: flex;
482 flex: 2;
483 align-items:center;
484 justify-content:center;
485
486 }
487
488 .k-input {
489
490
491 color: 'black';
492 border: 2px solid black;
493 border-radius: 5px;
494
495 width: 100%;
496 height: 100%;
497 text-align: center;
498 margin: "auto";
499 justify-content:center;
500 align-items:center;
501 font-size: 20px;
502 }
503
504 .k-c-keyboard {
505 flex: 2;
506 padding: 10;
507 justify-content: center;
508 align-items:center;
509 display: flex;
510 }
511
512 .k-c-keyline {flex: 1; flex-direction:'row'}
513</style>