· 6 years ago · Sep 09, 2019, 10:38 PM
1<div id="root"></div>
2<script>
3
4 const API_URL = "http://localhost: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 METHOD
15###################################
16
17*/
18
19var _API = function (method, url, data, callback) {
20 let resp = {};
21
22 var headers = axios.defaults.headers;
23
24 return axios({
25 headers:headers,
26 method: method,
27 url: API_URL + url,
28 data: data,
29 validateStatus: (s) => {
30 resp.status = s
31
32 return true // I'm always returning true, you may want to do it depending on the status received
33 }
34 }).then(response => {
35 try {
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 }
48
49/*
50##################################
51 COMPONENT
52 KEYBOARD BUTTON
53###################################
54
55*/
56
57
58var KeyboardButton ={
59 name: "kbbutton",
60 key: "kbbutton",
61 props: ['value'],
62 data() {
63 return {
64 active: false
65 }
66 },
67 methods: {
68 onPressIn:function(){
69 if (this.props.value) {
70 this.props.onPressIn(this.props.value);
71 }
72 },
73
74
75},
76
77template: `
78<div class="kb-key">{{ value !== null ? value.substr(1,2) : ' ' }}</div>
79`
80}
81
82
83
84/*
85##################################
86 COMPONENT
87 SOCRYPTIC KEYBOARD
88###################################
89
90*/
91
92
93var app = new Vue({
94
95
96 el: '#root',
97 data: {
98 output:[],
99 ready: false,
100 output_display: null,
101 session_key: null,
102 session_matrice: [],
103 keyboard_matrice: [],
104 array_counters: [],
105 is_randomizing: false,
106 },
107
108 components: {
109 KeyboardButton
110},
111
112
113/*
114##################################
115 BEFORE MOUNT
116###################################
117
118*/
119
120
121beforeMount: function() {
122
123 this.initialize_keyboardMatrice();
124 this.initialize_counters();
125},
126
127
128/*
129##################################
130 MOUNTED
131###################################
132
133*/
134
135mounted: function() {
136
137
138 var session_received = {}, _this=this;
139
140 _API('POST','/getConnectSession',{deviceid:'599261',buildid:'86168118'},function(response){
141 console.log(response);
142 session_received.key = response.data.key;
143 session_received.matrice = response.data.matrice;
144
145 _this.update_sessionKey(session_received.key);
146 _this.update_sessionMatrice(session_received.matrice);
147 _this.prepare_counters()
148 _this.randomize_keypad_multiple(1);
149 _this.ready = true;
150 })
151
152 /* DONNE DE TEST */
153
154 // var session_received = {
155 // key: 'F090fdskoksdf0909fdsfksdoksdk0430493fsdkfdsokOKFDOFKDFDOKFDO',
156 // matrice: [
157 // 'fdsfodskfpofdspoksdopk',
158 // 'adsfodskfpofdspoksdopk',
159 // 'zdsfodskfpofdspoksdopk',
160 // 'edsfodskfpofdspoksdopk',
161 // 'rdsfodskfpofdspoksdopk',
162 // 'tdsfodskfpofdspoksdopk',
163 // 'ydsfodskfpofdspoksdopk',
164 // 'udsfodskfpofdspoksdopk',
165 // 'idsfodskfpofdspoksdopk',
166 // 'odsfodskfpofdspoksdopk',
167 // ]
168 // }
169
170 // _this.update_sessionKey(session_received.key);
171 // _this.update_sessionMatrice(session_received.matrice);
172 // _this.prepare_counters()
173 // _this.randomize_keypad_multiple(1);
174 },
175
176
177
178/*
179##################################
180 COMPONENTS METHODS
181###################################
182
183*/
184methods: {
185
186
187/*
188############# METHOD ################
189 Initialize the counter matrice
190 Used on beforeMount
191 prepare array_counters data;
192 */
193
194
195 initialize_counters: function(){
196 this.array_counters=[]
197 for (let i = 0; i < KEY_COUNTER; i++) {
198 this.array_counters.push(null);
199 }
200 },
201
202
203
204/*
205############# METHOD ################
206 Initialize the keyboard matrice
207 Used on beforeMount
208 prepare keyboard_matrice data;
209 */
210
211
212 initialize_keyboardMatrice: function() {
213 this.keyboard_matrice=[];
214 for (let i = 0; i < KEYBOARD_MATRICE_TOTAL; i++) {
215 this.keyboard_matrice.push(null);
216 }
217 },
218
219
220
221
222/*
223############# METHOD ################
224 Update Session Key
225 update session_key data
226 */
227
228 update_sessionKey: function(key) {
229 this.session_key = key;
230 },
231
232
233
234
235/*
236############# METHOD ################
237 Update Session Matrice Datas
238 update session_matrice @matrice data
239 */
240
241
242 update_sessionMatrice: function(matrice) {
243
244 this.session_matrice = [];
245 for (let i in matrice) {
246 this.session_matrice.push(matrice[i]);
247 }
248 },
249
250
251
252
253
254
255/*
256############# METHOD ################
257 Prepare counters
258 */
259
260
261 prepare_counters: function() {
262 var number_array=[], randomNumber=null;
263 for (i = 0 ; i < TOTAL_NUMBER ; i++) {
264 number_array.push(i);
265 }
266 for (let i in this.array_counters) {
267 randomNumber = Math.floor(Math.random() * (number_array.length-1)) + 0;
268 this.array_counters[i] = this.get_matriceData(number_array[randomNumber]);
269 number_array.splice(randomNumber,1);
270 }
271 },
272
273
274
275
276 /*
277############# METHOD ################
278 Get Counter Data by @index
279 */
280
281 get_counterData: function(index) {
282 return this.array_counters[index];
283 },
284
285
286
287
288 /*
289############# METHOD ################
290 Increment a counter by @index
291 */
292
293
294 increment_counter: function(index) {
295
296 var counter = this.array_counters[index],
297 next = false;
298 for (i in this.session_matrice) {
299
300 if (next) { this.array_counters[index] = this.session_matrice[i]; next=false;break; }
301 if (this.session_matrice[i] == counter) { next = true; }
302 }
303 if (next) { this.array_counters[index] = this.session_matrice[0]; }
304
305 },
306
307
308
309
310 /*
311############# METHOD ################
312 Get Matrice Data for @Index
313 */
314
315
316 get_matriceData : function(index) {
317
318 var i=0;
319 for (let entry in this.session_matrice) {
320 if (i == index) {
321 return this.session_matrice[entry];
322 }
323 i++
324 }
325},
326
327
328
329
330 /*
331############# METHOD ################
332 Add output when user click
333 @value = input
334 */
335
336 add_output: function(value) {
337 if (!this.is_randomizing) {
338 this.is_randomizing = true;
339 let o = "#";
340 this.output.push(value);
341 this.output_display = o.repeat(this.output.length);
342
343 this.randomize_keypad();
344 this.is_randomizing = false;
345
346 }
347},
348
349
350
351
352
353 /*
354############# METHOD ################
355 Clear the user inputs
356 */
357
358
359 clear_output : function() {
360 this.output = [];
361 this.output_display = null;
362
363 this.randomize_keypad_multiple(5);
364},
365
366
367
368
369 /*
370############# METHOD ################
371 Randomize the keypad
372 */
373
374 randomize_keypad : function() {
375
376 this.initialize_keyboardMatrice();
377
378 var _this=this, i=0, j=0, number_array=[], matrice_array=[], memory_number=[], memory_matrice=[], randomMatrice=null, randomNumber=1;
379
380 for (i = 0 ; i < TOTAL_NUMBER ; i++) {
381 number_array.push(i);
382 }
383
384
385 for (i = 0 ; i < KEYBOARD_MATRICE_TOTAL ; i++) {
386 matrice_array.push(i);
387}
388
389
390i=0;
391while (i < TOTAL_NUMBER+KEY_COUNTER) {
392
393 randomMatrice = Math.floor(Math.random() * (matrice_array.length-1)) + 0;
394
395 if (i < TOTAL_NUMBER) {
396
397 randomNumber = Math.floor(Math.random() * (number_array.length-1)) + 0;
398
399 memory_matrice.push(matrice_array[randomMatrice]); memory_number.push(number_array[randomNumber]);
400
401 this.keyboard_matrice[matrice_array[randomMatrice]] = this.get_matriceData(number_array[randomNumber]);
402
403 number_array.splice(randomNumber,1);
404 matrice_array.splice(randomMatrice,1);
405
406 }else {
407
408 let counter = this.get_counterData(j);
409 this.keyboard_matrice[matrice_array[randomMatrice]] = counter;
410
411 this.increment_counter(j);
412 let a = matrice_array[randomMatrice], b=j;
413
414 setTimeout(function() {
415 this.increment_counter(b);
416 let c = this.get_counterData(b);
417 this.keyboard_matrice[a] = c;
418 }.bind(this),500);
419
420 matrice_array.splice(randomMatrice,1);
421 j++
422 }
423
424 i++;
425}
426
427},
428
429
430
431 /*
432############# METHOD ################
433 Randomize the keypad multiple @time
434 */
435
436
437 randomize_keypad_multiple : function(time) {
438 var _this=this;
439 if (time) {
440 setTimeout(() => {
441 time--
442 _this.randomize_keypad();
443 _this.randomize_keypad_multiple(time);
444 },20)
445 }
446
447},
448
449},
450
451
452
453
454/*
455##################################
456 COMPONENTS COMPUTED DATA
457###################################
458
459*/
460
461computed: {
462
463
464 /*
465############# COMPUTED ################
466 Get Keyboard Matrice Array Data for Render
467 return @render = [];
468 */
469
470 getKeyboardMatrice() {
471
472 var lines = KEYBOARD_MATRICE_BUILD[0], columns = KEYBOARD_MATRICE_BUILD[1],
473 l=0, c=0, counter=0;
474 renderLine=[],renderColumn=[];
475
476 this._buttonsList = [];
477
478
479 while (l < lines) {
480
481 renderColumn = [];
482
483 while (c < columns) {
484
485 var button = {
486 imgsrc: this.keyboard_matrice[counter],
487 value: this.keyboard_matrice[counter],
488 key: counter,
489 id: 'but-'+counter
490 }
491
492 renderColumn.push(button);
493 counter++;
494 c++;
495 }
496
497
498 renderLine.push(renderColumn);
499
500 c=0;
501 l++
502}
503
504return renderLine;
505
506
507}
508},
509
510
511template: `
512
513<div class="k-box">
514<div class="k-c-input" key="inputcont">
515<input class="k-input" type="password" key="ouput_value" disabled :value="output_display">
516</div>
517
518<div class="k-c-keyboard" key="containerKeyboard" v-if="session_key && ready">
519<div class="k-c-keyline" v-for="(lines,index) in getKeyboardMatrice">
520
521
522<KeyboardButton v-for="(button,index) in lines" :key="button.key" :value="button.value"/>
523
524</div>
525</div>
526</div>
527`
528,
529// render: function(h){
530// var _t = this;
531// return h('div',{class:'k-box', key: "inputcont"},[
532// h('div',{class:'k-c-input'},[
533// h('input',{class:'k-input',key:"output_value",domProps:{type:"password", value:_t.output_display}})
534// ]),
535// h('div',{class:'k-c-keyboard', key:'containerKeyboard'},this.renderKeyboard(h)),
536// ])
537// }
538
539})
540
541
542</script>
543
544
545<style type="text/css">
546 #root {
547 display: flex;
548 flex: 1;
549 }
550
551 .k-box {
552 display: flex;
553 flex-direction: column;;
554 border: 1px solid black;
555 max-width: 95%;
556 min-width: 300px;
557 width: 500px;
558 margin: 0 auto;
559 }
560
561 .k-c-input {
562 display: flex;
563 flex: 2;
564 align-items:center;
565 justify-content:center;
566
567 }
568
569 .k-input {
570
571
572 color: 'black';
573 border: 2px solid black;
574 border-radius: 5px;
575
576 width: 100%;
577 height: 100%;
578 text-align: center;
579 margin: "auto";
580 justify-content:center;
581 align-items:center;
582 font-size: 20px;
583 }
584
585 .k-c-keyboard {
586 flex: 2;
587 padding: 10;
588 display: flex;
589 min-height: 400px;
590 }
591
592 .k-c-keyline {
593 flex: 1; flex-direction: column;
594 display: flex;
595 }
596
597 .kb-key {
598 display: flex;
599 flex: 1;
600 justify-content:center;
601 align-items:center;
602 background-color: black;
603 color: white;
604 border: 1px outset #888;
605 }
606</style>