Skip to content

GitLab

Q
QR-code-reader
Commit dffc03dd authored by Sli's avatar Sli
Browse files
Options

Une webapp centrée

parent effe6e19
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 31 deletions
Server/src/media/css/webscan.css 0 → 100644
View file @ dffc03dd
/*
* @Author: Bartuccio Antoine (Sli) (klmp200)
* @Date: 2016-11-09 10:50:39
* @Last Modified by: klmp200
* @Last Modified time: 2016-11-09 11:34:09
*/
.alert {
color: white;
text-align:center;
display:inline-block;
box-sizing:border-box;
zoom:1;
line-height:normal;
border:1px solid #999;
border:0 rgba(0,0,0,0);
font-size:100%;
padding:.5em 1em;
}
.alert-success {
background: rgb(28, 184, 65);
}
.alert-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.alert-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
#app {
text-align:center;
display:inline-block;
}
#reader {
width:300px;
height:250px;
margin: 0 auto;
margin-bottom: 5px;
text-align: center;
}
#validate {
margin-bottom: 10%;
}
\ No newline at end of file
Server/src/views/scan.simple
View file @ dffc03dd
......@@ -5,40 +5,47 @@
<link rel="stylesheet" type="text/css" href="/media/css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/media/css/pure-min.css">
<link rel="stylesheet" type="text/css" href="/media/css/colored-buttons.css">
<link rel="stylesheet" type="text/css" href="/media/css/webscan.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-24 pure-u-md-1-12 pure-u-sm-1-24"></div>
<div class="pure-u-22-24 pure-u-md-10-12 pure-u-sm-22-24">
<h1>Serveur de validation de ebillets du gala</h1>
<div id="response">
% if response['valid']:
% if response['valid'] == "True" and response['av']:
% if response['child'] and response['child'] == 'True':
<p class="pure-button button-warning" style="font-size: 30px">Ceci est une place pour mineur !</p><br>
<div id="app">
<h1>Serveur de validation de ebillets du gala</h1>
<div id="response">
% if response['valid']:
% if response['valid'] == "True" and response['av']:
% if response['child'] and response['child'] == 'True':
<p class="alert alert-warning" style="font-size: 30px">Ceci est une place pour mineur !</p><br>
% end
<p class="alert alert-success">Billet valide : {{response['av']}} places restantes</p>
% else:
<p class="alert alert-error">Billet invalide ou déjà utilisé</p>
% end
<p class="pure-button button-success">Billet valide : {{response['av']}} places restantes</p>
% else:
<p class="pure-button button-error">Billet invalide ou déjà utilisé</p>
% end
% end
</div>
<div id="reader"></div>
<div id="reader-status"></div>
<form class="pure-form pure-form-aligned" method="post" action="/webscan/form">
<fieldset>
<div class="pure-control-group">
<label>Code</label>
<input type="text" name="code" id="code">
</div>
<div class="pure-control-group">
<label>Places à valider</label>
<input type="number" name="qt" id="qt" value="1">
</div>
</fieldset>
<input type="hidden" name="ajax" value="False">
<button type="submit" id="validate" class="pure-button pure-button-primary">Vérifier</button>
</form>
</div>
<div id="reader" style="width:300px;height:250px">
</div>
<p id="reader-status"></p>
<form class="pure-form" method="post" action="/webscan/form">
<p>
Code
<input type="text" name="code" id="code">
</p>
<p>
Places à valider
<input type="number" name="qt" id="qt" value="1">
</p>
<input type="hidden" name="ajax" value="False">
<button type="submit" id="validate" class="pure-button pure-button-primary">Vérifier</button>
</form>
</div>
<div class="pure-u-1-24 pure-u-md-1-12 pure-u-sm-1-24"></div>
</div>
......@@ -50,30 +57,32 @@
$('#reader').html5_qrcode(function(data){
// do something when code is read
$('#code').val(data);
$('#reader-status').empty().prepend("Lecture réusise").attr('class', 'pure-button button-success');
$('#reader-status').empty().prepend("Lecture réusise").attr('class', 'alert alert-success');
$('#validate').prop('disabled', true);
$('#response').empty();
$('#reader').attr('id', 'reader-off');
$.post("/webscan/form", {
code: $("#code").val(),
qt: $("#qt").val(),
ajax: "True"
}).done(function(data){
if (data['valid']){
$("#response").prepend('<p class="alert alert-success">Billet valide : ' + data['av'] + ' places restantes</p>');
if (data['child']){
$("#response").prepend('<p class="pure-button button-warning" style="font-size: 30px">Ceci est une place pour mineur !</p><br>');
$("#response").prepend('<p class="alert alert-warning" style="font-size: 30px">Ceci est une place pour mineur !</p><br>');
}
$("#response").prepend('<p class="pure-button button-success">Billet valide : ' + data['av'] + ' places restantes</p>');
} else {
$("#response").prepend('<p class="pure-button button-error">Billet invalide ou déjà utilisé</p>');
$("#response").prepend('<p class="alert alert-error">Billet invalide ou déjà utilisé</p>');
}
$('#reader').attr('id', 'reader');
});
$('#validate').prop('disabled', false);
},
function(error){
//show read errors
$('#reader-status').empty().prepend("Erreur de lecture du qr code, veuillez réessayer").attr('class', 'pure-button button-warning');
$('#reader-status').empty().prepend("Erreur de lecture du qr code, veuillez réessayer").attr('class', 'alert alert-warning');
}, function(videoError){
$('#reader').prepend("Accès à la caméra impossible").attr('class', 'button-error');
$('#reader').prepend("Accès à la caméra impossible").attr('class', 'alert alert-error');
}
);
</script>
......
Markdown is supported
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