Skip to content
Snippets Groups Projects
Commit 2cb5ecb0 authored by Otto Zaiser's avatar Otto Zaiser
Browse files

Nuevo diseño

parent 694c9c39
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
GUI/index.html
+ 30
− 18
View file @ 2cb5ecb0
...@@ -2,37 +2,49 @@ ...@@ -2,37 +2,49 @@
<html ng-app> <html ng-app>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lib/css/index.css">
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/style.css">
<script src="lib/js/angular.min.js"></script> <script src="lib/js/angular.min.js"></script>
<script src="lib/js/bower_components/js-sha256/src/sha256.js"></script> <script src="lib/js/bower_components/js-sha256/src/sha256.js"></script>
<script src="lib/js/jquery.min.js"></script> <script src="lib/js/jquery.min.js"></script>
<script src="lib/js/index.js"></script> <script src="lib/js/index.js"></script>
<script src="lib/js/bootstrap.min.js"></script> <script src="lib/js/bootstrap.min.js"></script>
<title>BFA</title> <title>TSA - Blockchain Federal Argentina</title>
</head> </head>
<body> <body>
<div class="row"> <nav class="navbar navbar-default">
<h1>BFA</h1> <div class="container">
</div> <div class="navbar-header">
<div> <a class="navbar-brand" href="#">
<img alt="Blockchain Federal Argentina" src="lib/images/logo.svg" width="140" height="100">
</a>
</div>
</div>
</nav>
<main>
<div class="container">
<h1>Time Stamp Authority</h1>
<form class="box" method="post" action="" enctype="multipart/form-data"> <form class="box" method="post" action="" enctype="multipart/form-data">
<div class="title">Stamp</div> <h2>Stamp</h2>
<div class="center_div" id="stamp" ondrop="drop(event)" ondragover="allowDrop(event)"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div style="width: 100%; text-align: center; margin-top: 10px" id="stamp_info">Drop file <i class="fa fa-arrow-alt-circle-down"></i></div> <div id="stamp" class="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">
<div><span class=" glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div>
<div class="droptxt">Soltá un archivo aquí<br>ó</div>
<div><button type="button" class="btn btn-primary">Seleccioná un archivo</button></div>
</div> </div>
<div id="ots_div" class="center_div"> <div id="ots_div" class="loading"></div>
</div>
<hr> <hr>
<div class="title">Verify</div> <h2>Verify</h2>
<div class="center_div" id="verify"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<textarea id="verify_ots"></textarea> <div class="form-group">
<textarea id="verify_ots" class="form-control" rows="3"></textarea>
</div> </div>
<div class="center_div" style="width: 50%"> <div id="response" role="alert"></div>
<div id="response"></div> <div class="form-group">
<button type="button" id="btn_verify">Verify</button> <button type="button" id="btn_verify" class="btn btn-primary btn-lg">Verify</button>
</div> </div>
</form> </form>
</div> </div>
</main>
</body> </body>
</html> </html>
\ No newline at end of file
GUI/lib/css/style.css
+ 1
− 1
View file @ 2cb5ecb0
...@@ -28,7 +28,7 @@ body{ ...@@ -28,7 +28,7 @@ body{
margin-bottom: 40px; margin-bottom: 40px;
color: #ccc; color: #ccc;
} }
.cargando{ .loading{
background-color: #0094D4; background-color: #0094D4;
margin-top: 5px; margin-top: 5px;
display: none; display: none;
......
GUI/lib/js/index.js
+ 18
− 12
View file @ 2cb5ecb0
...@@ -2,7 +2,8 @@ $(document).ready(function(){ ...@@ -2,7 +2,8 @@ $(document).ready(function(){
$('#btn_verify').click(function(){ $('#btn_verify').click(function(){
if($('#verify_ots').val() == ''){ if($('#verify_ots').val() == ''){
$('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> Debe ingresar el comprobante'); $('#response').html('<span class="glyphicon glyphicon-remove text-danger" aria-hidden="true"></span> Debe ingresar el comprobante');
$('#response').addClass('alert alert-danger');
} }
verify($('#verify_ots').val()); verify($('#verify_ots').val());
...@@ -10,7 +11,7 @@ $(document).ready(function(){ ...@@ -10,7 +11,7 @@ $(document).ready(function(){
}); });
var tsa_api = 'http://tsaapi.pp.bfa.local/api/tsa/'; var tsa_api = 'http://tsaapi.pp.bfa.local/api/tsa/';
var loader_gif = 'lib/images/ajax-loader.gif'; var loader_gif = 'lib/images/loader.svg';
var ots_api = ''; var ots_api = '';
var deadline_date = new Date('2018-09-03 00:00:00'); var deadline_date = new Date('2018-09-03 00:00:00');
var current_date = new Date(); var current_date = new Date();
...@@ -47,7 +48,7 @@ function drop(e){ ...@@ -47,7 +48,7 @@ function drop(e){
hash.update(file_contents); hash.update(file_contents);
var file_hash = hash.hex(); var file_hash = hash.hex();
$('#stamp_info').html(file.name + ' <i class="far fa-file"></i>'); $('#stamp_info').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> '+file.name );
$.ajax({ $.ajax({
url: tsa_api + "stamp/", url: tsa_api + "stamp/",
...@@ -70,17 +71,18 @@ function drop(e){ ...@@ -70,17 +71,18 @@ function drop(e){
function verify(json_ots){ function verify(json_ots){
$('#response').removeClass();
try{ try{
var ots = JSON.parse(json_ots); var ots = JSON.parse(json_ots);
} }
catch(err){ catch(err){
$('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> Parámetros inválidos'); $('#response').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Parámetros inválidos');
$('#response').addClass('alert alert-danger');
return; return;
} }
$('#response').html('<img src="' + loader_gif + '">'); $('#response').html('<img src="' + loader_gif + '">');
$('#response').addClass('loading');
if(deadline_date<current_date){ if(deadline_date<current_date){
verify_bfa(ots); verify_bfa(ots);
} }
...@@ -105,20 +107,24 @@ function verify_bfa(ots){ ...@@ -105,20 +107,24 @@ function verify_bfa(ots){
success: function(response){ success: function(response){
if(response.status == 'success'){ if(response.status == 'success'){
icon = 'glyphicon-ok text-success'; icon = 'glyphicon-ok';
st = 'alert alert-success';
}else if(response.status == 'pending'){ }else if(response.status == 'pending'){
pending = true; pending = true;
icon = 'glyphicon-time text-warning'; icon = 'glyphicon-time';
st = 'alert alert-warning';
}else{ }else{
icon = 'glyphicon-remove text-danger'; icon = 'glyphicon-remove';
st = 'alert alert-danger';
} }
message = '<span class="glyphicon ' + icon + '"></span> ' + response.messages; message = '<span class="glyphicon ' + icon + '" aria-hidden="true"></span> ' + response.messages;
if(!pending){ if(!pending){
message += ' - ots definitivo:' + response.permanent_ots; message += ' - ots definitivo:' + response.permanent_ots;
} }
$('#response').html(message); $('#response').html(message);
$('#response').addClass(st);
}, },
error:function(jqXHR, textStatus, errorThrown){ error:function(jqXHR, textStatus, errorThrown){
...@@ -128,8 +134,8 @@ function verify_bfa(ots){ ...@@ -128,8 +134,8 @@ function verify_bfa(ots){
responseText = 'No se pudo conectar a la Blockchain'; responseText = 'No se pudo conectar a la Blockchain';
} }
$('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> ' + responseText); $('#response').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> ' + responseText);
$('#response').addClass('alert alert-danger');
}, },
timeout:5000 timeout:5000
......
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