Skip to content
Snippets Groups Projects
Commit 5831a962 authored by Robert Martin-Legene's avatar Robert Martin-Legene
Browse files

Merge branch 'markup' into 'develop' 

Markup

See merge request blockchain/tsa2!3
parents 8914cc8a 1f660f7e
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2798 additions and 2226 deletions
ui/package-lock.json
+ 2034
− 2034
View file @ 5831a962
This diff is collapsed.
ui/package.json
+ 1
− 1
View file @ 5831a962
{
{
"name": "ui",
"version": "0.1.0",
"private": true,
......
ui/public/favicon.ico
+ 0
− 0
View replaced file @ 8914cc8a View file @ 5831a962
ui/public/favicon.ico

4.19 KiB | W: 32px | H: 32px

ui/public/favicon.ico

1.12 KiB | W: 16px | H: 16px

ui/public/favicon.ico
ui/public/favicon.ico
ui/public/favicon.ico
ui/public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
ui/public/index.html
+ 38
− 15
View file @ 5831a962
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>ui</title>
</head>
<body>
<noscript>
<strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" apiurl="http://localhost:3001"></div>
<!-- built files will be auto injected -->
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="<%= BASE_URL %>static/css/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>static/css/style.css">
<link rel="stylesheet" href="<%= BASE_URL %>static/css/tsa2.css">
<title>Sello de Tiempo - Blockchain Federal Argentina</title>
</head>
<body>
<noscript>
<b>Lo sentimos pero el sello de tiempo no funciona sin JavaScript. Por favor, habilitalo para continuar.</b>
</noscript>
<nav id="navbar" role="banner" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="logo navbar-btn pull-left" href="/" rel="home">
<img id="logo" src="<%= BASE_URL %>static/images/logo.svg" alt="Blockchain Federal Argentina">
</a>
</div>
</div>
</nav>
<main>
<div class="container">
<div class="tsa2">
<h1>Sello de Tiempo</h1>
<p>El servicio de Sello de Tiempo de BFA permite demostrar que el contenido de cualquier documento digital existió en un momento y que desde entonces, no ha cambiado. Al sellar un archivo, cualquiera podrá verificar el día y la hora en que su hash fue almacenado en Blockchain Federal Argentina. Tené en cuenta que el documento seleccionado nunca se sube a la red, garantizando su privacidad.</p>
<p class="font_small"><a href="https://bfa.ar/sello">Si tenés un archivo con Recibo Digital (.rd) verificalo aquí</a></p>
<div id="app" apiurl="http://localhost:3001"></div>
</div>
</div>
</body>
</html>
\ No newline at end of file
ui/public/static/css/bootstrap.min.css 0 → 100644
+ 6
− 0
View file @ 5831a962
This diff is collapsed.
ui/public/static/css/style.css 0 → 100644
+ 166
− 0
View file @ 5831a962
html {
font-size: 0.9em;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 1.125em;
background-color: #ffffff;
line-height: 1.45;
margin-top: 0;
}
h1,
h2,
h3,
h4 {
margin: 1.414em 0 0.5em;
font-weight: bold;
line-height: 1.2;
}
h1 {
margin-top: 20px;
font-size: 2.441em;
}
h2 {
font-size: 1.953em;
}
h3 {
font-size: 1.563em;
margin-top: 10px;
}
h4 {
font-size: 1.25em;
}
small,
.font_small {
font-size: 0.8em;
}
p {
margin-bottom: 20px;
}
.btn-pill {
border-radius: 50px;
}
.navbar-default {
background-color: #ffffff;
border-color: #e7e7e7;
}
.navbar-brand {
height: 130px;
}
.navbar-header .logo img {
height: 100px;
width: 140px;
}
.navbar .logo {
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
}
@media screen and (min-width: 768px){
.navbar .logo {
margin-right: 0;
padding-left: 0;
}
}
.navbar-default {
background-color: #fff;
border-color: #e7e7e7;
padding-top: 30px;
}
.navbar-default .navbar-nav li>a {
color: #0094D4;
font-weight: 400;
font-size: 1.25em;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #2e2f30;
background-color: transparent;
border-bottom: 2px solid #2e2f30;
}
@media (min-width: 768px) {
.navbar-default .navbar-nav li>a {
color: #0094D4;
padding-bottom: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 20px;
border-bottom: 2px solid transparent;
}
.navbar-default .navbar-nav li>a:hover,
.navbar-default .navbar-nav li>a:focus {
color: #0094D4;
border-bottom: 2px solid #0094D4;
}
.navbar-default .navbar-nav li:last-child>a:hover,
.navbar-default .navbar-nav li:last-child>a:focus {
color: #0094D4;
background-color: #fff;
}
}
.navbar-default .navbar-toggle {
border-color: #0094D4;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #0094D4;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #0094D4;
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #fff;
}
.navbar-default .menu {
margin-top: 40px;
}
@media (max-width: 768px) {
.navbar-default .navbar-nav li>a:hover,
.navbar-default .navbar-nav li>a:focus {
color: #0094D4;
text-decoration: underline;
}
.navbar-default {
padding-top: 0px;
}
.navbar-default .navbar-collapse {
-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.navbar-default .menu {
margin-top: 0;
}
}
ui/public/static/css/tsa2.css 0 → 100644
+ 149
− 0
View file @ 5831a962
#app{
margin-bottom: 20px;
}
.tsa2 .dropArea {
border: 1px dashed #0094D4;
background-color: #ffffff;
padding: 50px;
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
/* transition: 0.3s; */
position: relative;
}
.tsa2 .btn-primary:active, .tsa2 .btn-primary:active:hover, .tsa2 .btn-primary:focus, .tsa2 .btn-primary:hover {
background-color: #fff;
color: #0094d4;
border-color: #0094d4;
}
.tsa2 .btn-success:active, .tsa2 .btn-success:active:hover, .tsa2 .btn-success:focus, .tsa2 .btn-success:hover {
background-color: #fff;
color: #4cae4c;
border-color: #4cae4c;
}
.tsa2 .btn-pill {
border-radius: 50px;
border-width: 2px;
font-weight: 400;
}
.tsa2 .hash {
word-wrap: break-word;
}
.tsa2 .dropArea p {
margin-bottom: 5px;
}
.tsa2 .dropArea:hover {
border-style: solid;
background: rgba(0, 148, 212, 0.05);
}
.tsa2 .dropArea .droptxt {
font-size: 1.2em;
margin-bottom: 10px;
}
.tsa2 .dropArea .glyphicon-cloud-upload {
font-size: 8em;
margin-bottom: 40px;
color: #ccc;
}
.tsa2 .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999999;
color: #fff;
background: rgba(0, 148, 212, 0.10);
}
.tsa2 .pulse{
-webkit-animation: pulse 1s infinite ease-in-out;
-o-animation: pulse 1s infinite ease-in-out;
-ms-animation: pulse 1s infinite ease-in-out;
-moz-animation: pulse 1s infinite ease-in-out;
animation: pulse 1s infinite ease-in-out;
}
.tsa2 .loading {
background-color: rgba(0, 148, 212, 0.75);
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
}
@keyframes pulse {
0% {
opacity: 1.0;
}
50% {
opacity: 0;
}
100% {
opacity: 1.0;
}
}
@media screen and (max-width: 768px) {
.tsa2 .dropArea .glyphicon-cloud-upload {
font-size: 4em;
margin-bottom: 20px;
}
.tsa2 .dropArea {
padding: 20px;
}
}
.tsa2 [hidden]{
display: none !important;
}
.tsa2 .btn-lg {
min-width: 150px;
margin: 0 5px;
margin-top: 20px;
}
.tsa2 .alert {
margin-top: 15px;
text-align: left;
}
.tsa2 .alert p{
margin-bottom: 0;
}
.drop-file {
width: 100%;
height: 100%;
}
.tsa2 .center-v {
position: relative;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 992px) {
.tsa2 h3 {
margin-top: 30px;
}
.tsa2 .nav-tabs {
font-size: 1.3em;
}
}
@media screen and (max-width: 1200px) {
.tsa2 .dropArea .droptxt {
font-size: 1em;
margin-bottom: 15px;
}
}
ui/public/static/fonts/glyphicons-halflings-regular.eot 0 → 100644
+ 0
− 0
View file @ 5831a962
File added
ui/public/static/fonts/glyphicons-halflings-regular.svg 0 → 100644
+ 288
− 0
View file @ 5831a962
This diff is collapsed.
ui/public/static/fonts/glyphicons-halflings-regular.ttf 0 → 100644
+ 0
− 0
View file @ 5831a962
File added
ui/public/static/fonts/glyphicons-halflings-regular.woff 0 → 100644
+ 0
− 0
View file @ 5831a962
File added
ui/public/static/fonts/glyphicons-halflings-regular.woff2 0 → 100644
+ 0
− 0
View file @ 5831a962
File added
ui/public/static/images/loader.svg 0 → 100644
+ 16
− 0
View file @ 5831a962
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.4" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite"/>
</path>
</svg>
\ No newline at end of file
ui/public/static/images/logo.svg 0 → 100644
+ 1
− 0
View file @ 5831a962
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.31 100"><defs><style>.c{fill:#5c5c60}</style><radialGradient id="a" cx="69.48" cy="64.25" r="48.74" gradientTransform="matrix(1.39 0 0 1.39 -27.38 -19.65)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#84d0d0"/><stop offset="1" stop-color="#6a9ad1"/></radialGradient></defs><title>Blockchain Federal Argentina</title><path fill="#e5b449" d="M69.65 53.63a14.47 14.47 0 0 0-14.47 14.48h28.95a14.48 14.48 0 0 0-14.48-14.48z"/><path fill="url(#a)" d="M1.61 68.11V55.32l22.14 12.79L45.9 55.32v12.79h1.61V54.39l22.14-12.78L91.8 54.39v13.72h1.61V54.39L104.48 48l10.27-5.93v26h1.61v-26l21.34 12.32v13.72h1.61V53.47l-23-13.25v-26.5L92.6 0 69.65 13.25 46.7 0 23 13.72v26.5L0 53.47v14.64zm91.8-65.79l21.34 12.32v24.65L93.41 27zm20.53 38.36l-10.26 5.93L92.6 53 71.26 40.68 92.6 28.36zm-43.48-26L91.8 2.32V27L70.46 39.29zm-1.61 25.54L47.51 52.54V27.89l21.34-12.32zM46.7 1.86L68 14.18 46.7 26.5 25.36 14.18zM24.56 15.57L45.9 27.89v24.65l-10.27-5.93-11.07-6.39zm-.81 26L34.83 48l10.27 5.93-21.35 12.32L2.41 53.93z"/><path d="M.09 73.53H5.6c2.66 0 4.58 1.47 4.58 4a3.68 3.68 0 0 1-2 3.39 3.79 3.79 0 0 1 2.59 3.81c0 3-2.3 4.48-5.06 4.48H.09zm5.51 6.62a2.23 2.23 0 0 0 2.32-2.39 2.16 2.16 0 0 0-2.36-2.32H2.3v4.71zm.25 7.21a2.5 2.5 0 0 0 2.7-2.68A2.56 2.56 0 0 0 5.83 82H2.3v5.38zM14.43 73.53h2.21v13.83h7.05v1.91h-9.26zM33.25 73.26a7.93 7.93 0 0 1 8.07 8 8.09 8.09 0 1 1-16.17 0 8 8 0 0 1 8.1-8zm0 14.25a6 6 0 0 0 5.8-6.22 5.82 5.82 0 1 0-11.63 0 6 6 0 0 0 5.83 6.22zM51.47 73.26a8.11 8.11 0 0 1 5.73 2.07L56.11 77a7.2 7.2 0 0 0-4.55-1.71 5.71 5.71 0 0 0-5.82 6 5.91 5.91 0 0 0 5.84 6.22 7.11 7.11 0 0 0 4.86-2.05L57.63 87a8.47 8.47 0 0 1-6.12 2.5 8.14 8.14 0 0 1 0-16.28zM61 73.53h2.21v6.62l6.32-6.62H72L65.06 81l7.21 8.23h-2.5l-6.54-7.22v7.22H61zM80.9 73.33a8 8 0 0 1 5.65 2l-.83 1.13A7.37 7.37 0 0 0 81 74.75a6.27 6.27 0 0 0-6.31 6.56c0 3.75 2.63 6.8 6.35 6.8A7.35 7.35 0 0 0 86.08 86l.92 1.11a8.36 8.36 0 0 1-6 2.43 7.89 7.89 0 0 1-8-8.21 7.77 7.77 0 0 1 7.9-8zM90.32 73.59h1.54v7.14H101v-7.14h1.54v15.68H101v-7.16h-9.1v7.16h-1.58zM114.79 84.28h-6.32l-1.78 5h-1.63l5.75-15.68h1.66l5.75 15.68h-1.63zm-3.17-9.06s-.34 1.3-.6 2l-2.1 5.69h5.4l-2.06-5.69c-.26-.73-.6-2-.6-2zM120.78 73.59h1.54v15.68h-1.54zM126.87 73.59h1.5l8 11.29c.53.78 1.29 2.12 1.29 2.12s-.13-1.29-.13-2.12V73.59h1.54v15.68h-1.49l-8-11.28c-.54-.78-1.3-2.12-1.3-2.12s.13 1.29.13 2.12v11.28h-1.54zM0 94.19h3v.5H.58v2.15h2.1v.5H.58v2.56H0zM7.88 94.19h3.22v.5H8.44v2.08h2.17v.51H8.44v2.12h2.81v.5H7.88zM16.21 94.19h1.84a2.86 2.86 0 1 1 0 5.71h-1.84zM18 99.4a2.36 2.36 0 0 0 0-4.71h-1.23v4.71zM25.91 94.19h3.22v.5h-2.66v2.08h2.17v.51h-2.17v2.12h2.8v.5h-3.36zM34.23 94.19h1.69a2.73 2.73 0 0 1 1.08.15 1.67 1.67 0 0 1-.22 3l.14.23 1.25 2.3h-.65l-1.29-2.4h-1.44v2.4h-.56zM36.15 97a1.18 1.18 0 0 0 .61-2.16 1.61 1.61 0 0 0-.81-.14h-1.16V97zM45.84 98.08h-2.3l-.65 1.82h-.59l2.09-5.71H45l2.09 5.71h-.59zm-1.15-3.3l-.22.74-.77 2.07h2l-.75-2.07a9.7 9.7 0 0 1-.22-.74zM51.71 94.19h.56v5.21h2.65v.5h-3.21zM68.29 98.08H66l-.66 1.82h-.59l2.1-5.71h.6l2.1 5.71H69zm-1.15-3.3s-.12.47-.22.74l-.76 2.07h2l-.74-2.07a9.7 9.7 0 0 1-.22-.74zM74.17 94.19h1.69a2.7 2.7 0 0 1 1.07.15 1.67 1.67 0 0 1-.22 3l.15.23 1.24 2.3h-.64l-1.29-2.4h-1.44v2.4h-.56zM76.08 97a1.06 1.06 0 0 0 1.13-1.16 1.05 1.05 0 0 0-.52-1 1.61 1.61 0 0 0-.81-.14h-1.15V97zM85.45 94.09a3.08 3.08 0 0 1 2 .67l-.3.42a2.82 2.82 0 0 0-1.71-.57 2.44 2.44 0 0 0 0 4.87 2.49 2.49 0 0 0 1.8-.84v-1h-1v-.51h1.51v2.77h-.52v-.43-.24a2.56 2.56 0 0 1-1.86.77 2.83 2.83 0 0 1-2.8-3 2.87 2.87 0 0 1 2.88-2.91zM92.8 94.19H96v.5h-2.64v2.08h2.17v.51h-2.17v2.12h2.8v.5H92.8zM101.12 94.19h.55l2.92 4.11c.19.29.47.77.47.77V94.19h.56v5.71H105l-2.92-4.11c-.19-.28-.47-.77-.47-.77V99.9h-.57zM112.21 94.69h-2v-.5h4.66v.5h-2v5.21h-.56zM119.39 94.19h.61v5.71h-.56zM125.29 94.19h.55l2.92 4.11c.19.29.47.77.47.77s-.05-.47-.05-.77v-4.11h.57v5.71h-.55l-2.92-4.11c-.19-.28-.47-.77-.47-.77V99.9h-.56zM137.92 98.08h-2.3L135 99.9h-.59l2.09-5.71h.6l2.1 5.71h-.59zm-1.16-3.3s-.12.47-.21.74l-.77 2.07h2l-.78-2.07a9.7 9.7 0 0 1-.22-.74z" class="c"/></svg>
\ No newline at end of file
ui/src/App.vue
+ 30
− 44
View file @ 5831a962
<template>
<div id="app">
<div class="drop-file-wrapper">
<div id="app">
<div>
<div v-if="state == 'stamped'" class="dropAreasuccess-stamp alert alert-success" role="alert">
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> El archivo <b>{{archivo}}</b> fue sellado con éxito en el bloque 666 el {{ stamp.unixtimestamp }}</p>
</div>
<div v-if="state=='failed-stamp'" class="fail-stamp alert alert-danger" role="alert">
<p><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Se ha producido un error al intentar sellar el archivo <b>{{archivo}}</b>
</p>
</div>
<div v-if="state=='verified'" class="success-verify alert alert-success" role="alert">
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> El archivo <b>{{archivo}}</b> se encuentra sellado por:</p>
<ul>
<li v-for="stamp in stamps" v-bind:key="stamp.stamper">
<b>{{ stamp.stamper }}</b> en el bloque <b>{{ stamp.block }}</b> el {{ stamp.unixtimestamp }}
</li>
</ul>
</div>
<div v-if="state=='failed-verification'" class="fail-verify alert alert-danger">
<p><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> No se ha podido verificar el archivo <b>{{archivo}}</b></p>
</div>
<div v-if="state!='visible-drop'">
<button v-on:click="continuar()" class="btn btn-primary btn-pill btn-lg">Volver a Sellar o Verificar</button>
</div>
</div>
<DropFile
:apiurl="apiurl"
v-if="state == 'visible-drop'"
......@@ -8,28 +30,8 @@
v-on:failed-stamp="onFailedStamp()"
v-on:verify="onVerify"
v-on:failed-verify="onFailedVerify()"
v-on:nombreArchivo="onFilename"
/>
<div v-if="state == 'stamped'" class="success-stamp">
<p> Stampeado exitosamente :)</p>
</div>
<div v-if="state=='failed-stamp'" class="fail-stamp">
<p> Error al stampear :( </p>
</div>
<div v-if="state=='verified'" class="success-verify">
<p> Verificado exitosamente por</p>
<ul>
<li v-for="stamp in stamps" v-bind:key="stamp.stamper">
<b>{{ stamp.stamper }}</b> en el bloque <b>{{ stamp.block }}</b>
</li>
</ul>
</div>
<div v-if="state=='failed-verification'" class="fail-verify">
<p> Error al verificar :( </p>
</div>
<div v-if="state!='visible-drop'">
<button v-on:click="continuar()">Probar de nuevo!</button>
</div>
</div>
</div>
</template>
......@@ -42,6 +44,7 @@
data: function() {
return {
state: 'visible-drop',
archivo: '',
stamps: []
}
},
......@@ -61,7 +64,10 @@
},
onFailedStamp() {
this.state = 'failed-stamp'
}
},
onFilename (value) {
this.archivo = value
}
},
components: {
DropFile
......@@ -69,23 +75,3 @@
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.drop-file-wrapper {
max-width: 500px;
position: relative;
border: 4px dashed;
margin: 0 auto;
height: 200px;
}
</style>
ui/src/components/DropFile.vue
+ 57
− 132
View file @ 5831a962
<template>
<!-- @dragover.prevent @dragover="handleDragStart()" -->
<div class="drop-file" @drop.prevent @drop="handleDrop($event)">
<div class="dropArea" @drop.prevent @drop="handleDrop($event)" aria-live="polite">
<div style="visibility:hidden; opacity:0" id="dropzone">
<div class="center-v">Arrastrá el archivo aquí</div>
<div id="dropzone" class="overlay pulse" style="visibility: hidden;"></div>
<div class="loading overlay" v-if="loading">
<svg aria-label="Cargando" class="center-v" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.4" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite"/>
</path>
</svg>
<!-- <img class="center-v" src="static/images/loader.svg" width="100px" height="100px" alt="Cargando"> -->
</div>
<div class="loading" v-if="loading">
<div class="center-v">Loading . . .</div>
</div>
<div class="col-md-4" id="file-panel">
<div class="panel panel-success">
<div class="panel-body">
<div v-if="uploadedFiles.length == 0">
<p><strong>Arrastrá un archivo aquí</strong></p>
<p>o</p>
<p>
<label class="text-reader">
Elegir archivo
<input type="file" @change="handleInput">
</label>
</p>
</div>
<div v-if="uploadedFiles.length > 0" class="file-info">
<p>
Nombre del archivo: <b> {{ uploadedFiles[0].fileName }}</b>
</p>
<p class='hash'>
Hash: <b> {{ uploadedFiles[0].hash }}</b>
</p>
</div>
<!-- <li v-for="(file,index) in uploadedFiles" v-bind:key="index">{{file.fileName}}: {{file.hash}}</li> -->
</div>
<div>
<div v-if="uploadedFiles.length == 0">
<div><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div>
<div class="droptxt">Arrastrá un archivo aquí<br>ó</div>
<div><button type="button" class="btn btn-primary btn-pill" v-on:click="uploadFile()">Seleccioná un archivo <span class="sr-only">para Sellar o Verificar</span></button></div>
<input type="file" id="fileUpload" @change="handleInput" hidden>
</div>
<div v-if="uploadedFiles.length > 0" class="file-info">
<p>
Nombre del archivo: <b> {{ uploadedFiles[0].fileName }}</b>
</p>
<p class='hash'>
Hash del archivo: <b> {{ uploadedFiles[0].hash }}</b>
</p>
</div>
<!-- <li v-for="(file,index) in uploadedFiles" v-bind:key="index">{{file.fileName}}: {{file.hash}}</li> -->
</div>
<div class="buttons">
<button v-if="uploadedFiles.length > 0" v-on:click="stamp()">Stamp</button>
<button v-if="uploadedFiles.length > 0" v-on:click="verify()">Verify</button>
<div>
<button class="btn btn-lg btn-primary btn-pill" v-if="uploadedFiles.length > 0" v-on:click="stamp()">Sellar</button>
<button class="btn btn-lg btn-success btn-pill" v-if="uploadedFiles.length > 0" v-on:click="verify()">Verificar</button>
</div>
</div>
</template>
......@@ -46,6 +52,7 @@ import * as SHA256 from "js-sha256"
import axios from "axios"
export default {
/* eslint-disable */
name: 'DropFile',
props: ['apiurl'],
data: function() {
......@@ -56,6 +63,9 @@ export default {
};
},
methods: {
uploadFile() {
document.getElementById("fileUpload").click()
},
handleInput(e) {
var files = e.target.files
this.uploadFiles([files[0]])
......@@ -73,7 +83,7 @@ export default {
let verifyUrl = `${this.apiurl}/verify/${hash}`
self.loading = true
axios.get(verifyUrl).then((res) => {
console.log(res.data)
//console.log(res.data)
if (res.data.stamped) {
self.$emit('verify', res.data.stamps)
} else {
......@@ -81,7 +91,7 @@ export default {
}
}).catch((e) => {
self.$emit('failed-verify')
console.error(e)
//console.error(e)
}).finally( () => self.loading = false )
},
stamp() {
......@@ -92,19 +102,19 @@ export default {
axios.post(stampUrl, {
hashes: [self.uploadedFiles[0].hash]
}).then((res) => {
console.log(res.data)
//console.log(res.data)
self.$emit('stamp')
}).catch((e) => {
console.error(e)
//console.error(e)
self.$emit('failed-stamp')
}).finally( () => self.loading = false )
},
uploadFiles: function(f) {
var self = this;
this.loading = true
function loadFile(file) {
let name = file.name
self.$emit('nombreArchivo', name)
let reader = new FileReader()
reader.onload = function(e) {
......@@ -128,117 +138,32 @@ export default {
}
},
mounted() {
var counter = 0;
window.addEventListener("dragenter", function (e) {
e.preventDefault();
e.preventDefault();
counter++;
document.querySelector("#dropzone").style.visibility = "";
document.querySelector("#dropzone").style.opacity = 1;
});
window.addEventListener("dragleave", function (e) {
e.preventDefault();
document.querySelector("#dropzone").style.visibility = "hidden";
document.querySelector("#dropzone").style.opacity = 0;
counter--;
if (counter === 0) {
document.querySelector("#dropzone").style.visibility = "hidden";
}
});
window.addEventListener("dragover", function (e) {
e.preventDefault();
document.querySelector("#dropzone").style.visibility = "";
document.querySelector("#dropzone").style.opacity = 1;
});
window.addEventListener("drop", function (e) {
e.preventDefault();
document.querySelector("#dropzone").style.visibility = "hidden";
document.querySelector("#dropzone").style.opacity = 0;
})
});
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.drop-file {
width: 100%;
height: 100%;
}
.text-reader {
position: relative;
overflow: hidden;
display: inline-block;
/* Fancy button looking */
border: 1px solid black;
border-radius: 5px;
padding: 6px 10px;
margin: 5px;
cursor: pointer;
}
.text-reader input {
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
}
.hash {
word-wrap: break-word;
}
.panel-body {
padding: 20px
}
.panel-body p {
margin: 0
}
.buttons {
position: absolute;
top: 104%;
margin: 0 auto;
width: 100%;
}
.loading {
position: absolute;
/* top: 0;
left: 0; */
z-index: 9999999999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: visibility 175ms, opacity 175ms;
display: table;
text-shadow: 1px 1px 2px #000;
color: #fff;
background: rgba(0, 0, 0, 0.45);
font: bold 42px Oswald, DejaVu Sans, Tahoma, sans-serif;
}
.center-v {
display: table-cell;
text-align: center;
vertical-align: middle;
transition: font-size 175ms;
}
div#dropzone {
position: absolute;
/* top: 0;
left: 0; */
z-index: 9999999999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: visibility 175ms, opacity 175ms;
display: table;
text-shadow: 1px 1px 2px #000;
color: #fff;
background: rgba(0, 0, 0, 0.45);
font: bold 42px Oswald, DejaVu Sans, Tahoma, sans-serif;
}
</style>
ui/vue.config.js 0 → 100644
+ 12
− 0
View file @ 5831a962
module.exports = {
publicPath: './',
configureWebpack: {
output: {
filename: 'tsa2.js'
},
optimization: {
splitChunks: false
},
},
filenameHashing: false
};
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