test.html 9.24 KB
Newer Older
Arturo Hernandez's avatar
Arturo Hernandez committed
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
<html>
<head>
</head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/bootstrap.bundle.js"></script>
  <script src="js/socket.io.js"></script>
  <title>Prueba Lector RFID</title>
  <style>
  #minuta {
    width: 360px;
    height: 260px;
  }
  #spin{
    margin: 20px;
    width: 200px;
    height: 200px;
  }
  </style>
<body>
  <!--<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">-->
    <div id="toaster" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 20; left: 20;">
      <div class="toast-header">
        <img src="favicon.ico" width=32 class="rounded mr-2" alt="huella">
        <strong class="mr-auto">RFID</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body" id="toastmess">
        Hello, world! This is a toast message.
      </div>
    </div>
  <!--</div>-->
  <div class="container">
    <h1>Prueba de RFID</h1>
    <div class="row">
        <div class="btn-group">
42
43
          <button id="btn1" class="btn btn-success">Leer UUID!</button>
          <button id="btn2" class="btn btn-warning">Inicializar +</button>
Arturo Hernandez's avatar
Arturo Hernandez committed
44
          <button id="btn3" class="btn btn-info">Leer datos</button>
45
46
47
48
49
          <button id="btn4" class="btn btn-primary">Escribir!</button>
          <button id="btn5" class="btn btn-danger">Borrar</button>
          <button id="btn6" class="btn btn-primary">Valor</button>
          <button id="btn7" class="btn btn-info">INC</button>
          <button id="btn8" class="btn btn-info">DEC</button>
Arturo Hernandez's avatar
Arturo Hernandez committed
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
        </div>
    </div>
    <div class="row">
      <div class="card">
        <div class="card-header"> Resultado </div>
        <div id="spin" class="spinner-border text-primary"  role="status">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="card-body">
          <h5 class="card-title alert" id="uiid"> </h5>
          <h6 class="card-subtitle" id="reader"> </h6>
          <h5 class="card-title alert" id="mensaje"> </h5>
          <h6 class="card-text" id="atr"> </h6>

        </div>
      </div>
    </div>
  </div>
</body>
<script>
/*
var socket = io();
*/
73
74
75
76
77
78
79
80
let DEFAULT_BLOCK = 4;
let DEFAULT_TEST_DATA = "F0 E1 D2 C3 B4 A5 96 87 78 69 5A 4B 3C 2D 1E 0F";
let DEFAULT_ERASE = "00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00";
let DEFAULT_TEST_VALUE = 12345;
let DEFAULT_TEST_VALUE_ADR = 0x23;
let DEFAULT_TEST_VALUE_DELTA = 3;

let empty_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=";
Arturo Hernandez's avatar
Arturo Hernandez committed
81
$(function() {
82
  function spin(){
Arturo Hernandez's avatar
Arturo Hernandez committed
83
84
85
86
87
    $("#reader").text('');
    $("#atr").text('');
    $("#uiid").text('');
    $("#mensaje").text('');
    $("#spin").show();
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
    $("#mensaje").removeClass('alert-danger').removeClass('alert-success');
  }
  function fail(err,st){
    $("#spin").hide();
    $("#mensaje").removeClass('alert-success').addClass('alert-danger');
    console.log("error", err);
    console.log("st", st);
    if (err.responseJSON){
      var data = err.responseJSON;
      $("#mensaje").text(data.message);
    } else {
      $("#mensaje").text("Sin Conexión con el microservicio de tarjetas https://127.0.0.1:8000");
    }
  }
  function parse_data(data, st){
    $("#spin").hide();
    console.log(data,st);
Arturo Hernandez's avatar
Arturo Hernandez committed
105

106
107
108
109
110
111
112
113
114
115
116
117
118
    if (data.UUIDHex){
      $("#uiid").text("UUID: " + data.UUIDHex);
      $("#reader").text("Lector: " + data.reader);
      $("#atr").html("ATR: <a href=\"https://smartcard-atr.apdu.fr/parse?ATR=" + encodeURIComponent(data.ATR) + "\" target=\"_blank\"> " + data.ATR + "</a>");
      if (data.ATR_match.length || data.ATR_possible.length){
        $("#atr").append("<h5>Tipo de tarjeta</h5>");
        data.ATR_match.forEach(function(e,i){
          $("#atr").append((i==0?"<strong class=\"alert-success\">":"") + e + (i==0?"</strong>":"") + "<br/>");
        })
        if (data.ATR_possible.length){
          $("#atr").append("<br/><h5>Otros tipos</h5>");
          data.ATR_possible.forEach(function(e,i){
            $("#atr").append(e + "<br/>");
Arturo Hernandez's avatar
Arturo Hernandez committed
119
120
121
          })
        }
      }else{
122
        $("#atr").append("<h5 class=\"alert-danger\">Tarjeta desconocida</h5>");
Arturo Hernandez's avatar
Arturo Hernandez committed
123
      }
124
      $("#mensaje").removeClass('alert-danger').addClass('alert-success');
Arturo Hernandez's avatar
Arturo Hernandez committed
125
        if (data.data){
126
          $("#mensaje").text("Block " + data.data.block + " : " + (data.data.isValue ? ("V=" + data.data.value + " adr=" + data.data.value_adr) : data.data.string));
Arturo Hernandez's avatar
Arturo Hernandez committed
127
128
        }else{
          $("#mensaje").text(data.message);
Arturo Hernandez's avatar
Arturo Hernandez committed
129
130
131
132
133
            console.log("trynig mes", data.message);
          if (data.message != "OK"){
            $("#mensaje").removeClass('alert-success').addClass('alert-danger');
            return $.Deferred().reject({responseJSON:{message:data.message}});
          }
Arturo Hernandez's avatar
Arturo Hernandez committed
134
        }
135
    }else{
Arturo Hernandez's avatar
Arturo Hernandez committed
136
      let mess = data.error || data.message || "Error al recabar respuesta " + data.toString();
Arturo Hernandez's avatar
Arturo Hernandez committed
137
      $("#mensaje").removeClass('alert-success').addClass('alert-danger');
Arturo Hernandez's avatar
Arturo Hernandez committed
138
139
140
      $("#mensaje").text(mess);
      console.log("trynig errr");
      return $.Deferred().reject({responseJSON:{message:mess}});
141
    }
Arturo Hernandez's avatar
Arturo Hernandez committed
142
    return $.Deferred().resolve("read ok");
Arturo Hernandez's avatar
Arturo Hernandez committed
143
  }
144
  function check_uiid(){
Arturo Hernandez's avatar
Arturo Hernandez committed
145
146
147
148
    if ($("#uiid").text().trim().length == 0){
      console.log("sin uuid");
      $("#mensaje").removeClass('alert-success').addClass('alert-danger');
      $("#mensaje").text("identifique una tarjeta primero");
149
      return null;
Arturo Hernandez's avatar
Arturo Hernandez committed
150
    }
151
152
    console.log("trying uuid", $("#uiid").text().trim())
    return $("#uiid").text().substring(6);
Arturo Hernandez's avatar
Arturo Hernandez committed
153
  }
154
155
156
157
158
  function read_card(){
    spin();
    $.ajax('https://127.0.0.1:8000/api/read-card', {
      method: 'GET', 
      timeout: 2000 
Arturo Hernandez's avatar
Arturo Hernandez committed
159
    }).then(parse_data).fail(fail);
160
161
162
  }
  function read_card_data(){
    spin();
Arturo Hernandez's avatar
Arturo Hernandez committed
163
    return $.ajax('https://127.0.0.1:8000/api/read-card', {
164
165
166
      method: 'GET',
      data: {block: DEFAULT_BLOCK},
      timeout: 2000
Arturo Hernandez's avatar
Arturo Hernandez committed
167
    }).then(parse_data).fail(fail);
168
169
170
171
172
173
174
175
176
  }
  function init_card(){
    let uiid = check_uiid();
    if (!uiid) return;
    spin();
    $.ajax('https://127.0.0.1:8000/api/init-card', {
      method:'POST',
      data:{uuid:uiid},
      timeout: 2000 }
Arturo Hernandez's avatar
Arturo Hernandez committed
177
    ).then(parse_data).fail(fail);
178
179
180
181
182
183
184
185
186
187
188
189
190
  }
  function write_card(){
    let uiid = check_uiid();
    if (!uiid) return;
    spin();
    $.ajax('https://127.0.0.1:8000/api/write-card', {
      method:'POST',
      data:{
        uuid:uiid,
        block: DEFAULT_BLOCK,
        data : DEFAULT_TEST_DATA
      },
      timeout: 2000 }
Arturo Hernandez's avatar
Arturo Hernandez committed
191
    ).then(parse_data).then(read_card_data).fail(fail);
192
193
194
195
196
197
198
199
200
201
202
203
204
  }
  function erase_card(){
    let uiid = check_uiid();
    if (!uiid) return;
    spin();
    $.ajax('https://127.0.0.1:8000/api/write-card', {
      method:'POST',
      data:{
        uuid:uiid,
        block: DEFAULT_BLOCK,
        data : DEFAULT_ERASE
      },
      timeout: 2000 }
Arturo Hernandez's avatar
Arturo Hernandez committed
205
    ).then(parse_data).then(read_card_data).fail(fail);
206
207
208
209
210
211
212
213
214
215
216
217
218
219
  }
  function write_value(){
    let uiid = check_uiid();
    if (!uiid) return;
    spin();
    $.ajax('https://127.0.0.1:8000/api/write-card', {
      method:'POST',
      data:{
        uuid:uiid,
        block: DEFAULT_BLOCK,
        value : DEFAULT_TEST_VALUE,
        value_adr: DEFAULT_TEST_VALUE_ADR
      },
      timeout: 2000 }
Arturo Hernandez's avatar
Arturo Hernandez committed
220
    ).then(parse_data).then(read_card_data).fail(fail);
221
222
223
224
225
226
227
228
229
230
231
232
233
  }
  function increment_value(){
    let uiid = check_uiid();
    if (!uiid) return;
    spin();
    $.ajax('https://127.0.0.1:8000/api/increment-value', {
      method:'POST',
      data:{
        uuid:uiid,
        block: DEFAULT_BLOCK,
        value : DEFAULT_TEST_VALUE_DELTA,
      },
      timeout: 2000 }
Arturo Hernandez's avatar
Arturo Hernandez committed
234
    ).then(parse_data).then(read_card_data).fail(fail);
235
236
237
238
239
240
241
242
243
244
245
246
247
  }
  function decrement_value(){
    let uiid = check_uiid();
    if (!uiid) return;
    spin();
    $.ajax('https://127.0.0.1:8000/api/decrement-value', {
      method:'POST',
      data:{
        uuid:uiid,
        block: DEFAULT_BLOCK,
        value : DEFAULT_TEST_VALUE_DELTA,
      },
      timeout: 2000 }
Arturo Hernandez's avatar
Arturo Hernandez committed
248
    ).then(parse_data).then(read_card_data).fail(fail);
Arturo Hernandez's avatar
Arturo Hernandez committed
249
250
  }
  $("#btn1").click(function(){read_card()});
Arturo Hernandez's avatar
Arturo Hernandez committed
251
252
253
  $("#btn2").click(function(){init_card()});
  $("#btn3").click(function(){read_card_data()});
  $("#btn4").click(function(){write_card()});
254
255
256
257
  $("#btn5").click(function(){erase_card()});
  $("#btn6").click(function(){write_value()});
  $("#btn7").click(function(){increment_value()});
  $("#btn8").click(function(){decrement_value()});
Arturo Hernandez's avatar
Arturo Hernandez committed
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
  $("#spin").hide();
/*
  socket.on('connect', function(){console.log("io.connected");});
  socket.on('huella', function(data){
    console.log("io.data", data);
    $("#toastmess").text(data);
    $("#toaster").toast('show');
  });
  socket.on('disconnect', function(){console.log("io.disconnected");});
  $('.toast').toast({delay:1000});
  $("#spin").hide();
  $("#img").hide();
  $("#dbmp").hide();
  $("#dwsq").hide();
  $("#dmin").hide();
*/
});
</script>

</html>