fin hackaton
This commit is contained in:
@ -7,6 +7,7 @@ export default class GetEvent{
|
||||
let saisie = $('#saisie');
|
||||
saisie.focus();
|
||||
let value;
|
||||
let $info = $('.info');
|
||||
let $infoDon = $('#info-don');
|
||||
let $infoDonneur = $('#info-donneur');
|
||||
let $infoPsl = $('#info-psl');
|
||||
@ -17,7 +18,18 @@ export default class GetEvent{
|
||||
let $typeDon = $('#typeDon');
|
||||
let $typePoche = $('#typePoche');
|
||||
let $nbreTube = $('#nbreTube');
|
||||
let $displayError = $('#error');
|
||||
let $step = $('#step');
|
||||
let $indication = $('#indication');
|
||||
let $evolution = $('#evolution');
|
||||
let $label = $('#label');
|
||||
let $type = $('#type');
|
||||
let $current = $('#current');
|
||||
let $todo = $('#todo');
|
||||
let $picturePoche = $('#picturePoche');
|
||||
let $pictureTube = $('#pictureTube');
|
||||
let $input = $('#inputRange');
|
||||
let $displayError = $('.error');
|
||||
let $displaySuccess = $('.displaySuccess');
|
||||
document.addEventListener('keydown', function (event) {
|
||||
saisie.focus();
|
||||
if(event.code == 'Tab'){
|
||||
@ -39,6 +51,12 @@ export default class GetEvent{
|
||||
$naissance.html(new Date(response.data.birthdate).toLocaleDateString());
|
||||
$typeDon.html(response.data.type_don);
|
||||
$nbreTube.html(response.data.nbre_tube);
|
||||
$step.html('Pour passer à la suite');
|
||||
$indication.html('Scannez le DMU');
|
||||
$pictureTube.css('display', 'none');
|
||||
$picturePoche.css('display', 'flex');
|
||||
$info.css('visibility', 'visible')
|
||||
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
@ -49,81 +67,184 @@ export default class GetEvent{
|
||||
$naissance.html(new Date(response.data.birthdate).toLocaleDateString());
|
||||
$typeDon.html(response.data.type_don);
|
||||
$nbreTube.html(response.data.nbre_tube);
|
||||
$step.html('Pour passer à la suite');
|
||||
$indication.html('Scannez le DMU');
|
||||
$typePoche.html('');
|
||||
$info.css('visibility', 'visible')
|
||||
$evolution.css('visibility', 'hidden')
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
if(response.data.status == 'error'){
|
||||
$displayError.css('background', "red");
|
||||
saisie.focus();
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
break;
|
||||
case '1':
|
||||
if(response.data.status == 'success'){
|
||||
$typePoche.html(response.data.nbre_poche)
|
||||
$step.html('ETAPE 1 / 2');
|
||||
$indication.html('Scannez les étiquettes des poches');
|
||||
saisie.focus();
|
||||
$evolution.css('visibility', 'visible');
|
||||
}
|
||||
if(response.data.status == 'error_donneur'){
|
||||
$displayError.html('erreur donneur')
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
}
|
||||
if(response.data.status == 'error_doublon'){
|
||||
$displayError.html('erreur doublon')
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
}
|
||||
case '2':
|
||||
if(response.data.status == 'success'){
|
||||
saisie.focus();
|
||||
$typePoche.html(response.data.nbre_poche)
|
||||
console.log(response.data.nbre_poche)
|
||||
$current.html(response.data.nbre_poche)
|
||||
$type.html('Poches');
|
||||
$todo.html(response.data.nbre_poche_max)
|
||||
$input.attr('max', response.data.nbre_poche_max)
|
||||
$input.attr('value', response.data.nbre_poche)
|
||||
if(response.data.nbre_poche !=response.data.nbre_poche_max ){
|
||||
$picturePoche.append('<div class="sang"><img src="/poches/Poche_sang.png"></div>')
|
||||
}
|
||||
saisie.focus();
|
||||
}
|
||||
if(response.data.status == 'final'){
|
||||
saisie.focus();
|
||||
$typePoche.html(response.data.nbre_poche)
|
||||
console.log(response.data.nbre_poche)
|
||||
$current.html(response.data.nbre_poche)
|
||||
$input.attr('max', response.data.nbre_poche_max)
|
||||
$input.attr('value', response.data.nbre_poche)
|
||||
console.log('valider avec un scan de poche!')
|
||||
$indication.html('valider avec un scan de poche!');
|
||||
|
||||
$picturePoche.append('<div class="sang"><img src="/poches/Poche_sang.png"></div>')
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
if(response.data.status == 'error_scan'){
|
||||
console.log('error_scan');
|
||||
|
||||
$displayError.html("Mauvais type d'étiquette")
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
if(response.data.status == 'error_doublon'){
|
||||
console.log('error_doublon');
|
||||
|
||||
$displayError.html('Etiquette déjà scannée')
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
if(response.data.status == 'error_donneur'){
|
||||
console.log('error_donneur');
|
||||
|
||||
$displayError.html('Ne correspond pas au donneur')
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
break;
|
||||
case '3':
|
||||
if(response.data.status == "success"){
|
||||
$picturePoche.css('display', 'none');
|
||||
$pictureTube.css('display', 'flex');
|
||||
console.log('valider avec un scan de poche!')
|
||||
$indication.html('Scannez les étiquettes de tubes!');
|
||||
$input.attr('max', response.data.nbre_tube_max)
|
||||
$todo.html(response.data.nbre_tube_max)
|
||||
$input.attr('value', response.data.nbre_tube_max)
|
||||
$current.html(response.data.nbre_tube_max)
|
||||
|
||||
$type.html('Tubes')
|
||||
console.log("on passe aux tubes");
|
||||
}
|
||||
if(response.data.status == "error_scan"){
|
||||
console.log("error_scan");
|
||||
|
||||
$displayError.html("Mauvais type d'étiquette")
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
}
|
||||
break;
|
||||
case '4':
|
||||
if(response.data.status == 'success'){
|
||||
$step.html('ETAPE 2 / 2');
|
||||
$nbreTube.html(response.data.nbre_tube)
|
||||
$current.html(response.data.nbre_tube)
|
||||
$input.attr('max', response.data.nbre_tube_max)
|
||||
$type.html('Tubes')
|
||||
$todo.html(response.data.nbre_tube_max)
|
||||
$input.attr('value', response.data.nbre_tube)
|
||||
$pictureTube.append('<div class="sang"><img src="/tubes/Tube1.png"></div>')
|
||||
saisie.focus();
|
||||
|
||||
console.log(response.data.nbre_poche)
|
||||
}
|
||||
if(response.data.status == 'final'){
|
||||
$nbreTube.html(response.data.nbre_tube)
|
||||
$current.html(response.data.nbre_tube)
|
||||
$input.attr('max', response.data.nbre_tube_max)
|
||||
$type.html('Tubes')
|
||||
$todo.html(response.data.nbre_tube_max)
|
||||
$input.attr('value', response.data.nbre_tube)
|
||||
$pictureTube.append('<div class="sang"><img src="/tubes/Tube1.png"></div>')
|
||||
$displaySuccess.css('display', 'flex')
|
||||
setTimeout(() => {
|
||||
$displaySuccess.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
|
||||
console.log(response.data.nbre_poche)
|
||||
}
|
||||
if(response.data.status == 'error_scan'){
|
||||
console.log('error_scan');
|
||||
|
||||
$displayError.html("Mauvais type d'étiquette")
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
if(response.data.status == 'error_doublon'){
|
||||
console.log('error_doublon');
|
||||
|
||||
$displayError.html('Etiquette déjà scannée')
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
if(response.data.status == 'error_donneur'){
|
||||
console.log('error_donneur');
|
||||
|
||||
$displayError.html('Ne correspond pas au donneur')
|
||||
$displayError.css('display', "flex");
|
||||
setTimeout(() => {
|
||||
$displayError.css('display', 'none')
|
||||
}, 5000);
|
||||
saisie.focus();
|
||||
|
||||
}
|
||||
|
||||
@ -2,25 +2,166 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
#info-don{
|
||||
flex: 30%;
|
||||
flex-direction: column;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#step{
|
||||
color: #007BFF;
|
||||
padding: 20px;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#indication, #label{
|
||||
border-radius: 50px;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
#evolution{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
input[type=range]{
|
||||
width: 80%;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#info-donneur{
|
||||
flex: 40%;
|
||||
}
|
||||
#info-psl{
|
||||
flex: 30%;
|
||||
#label{
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.displaySuccess{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: green;
|
||||
color: white;
|
||||
display: none;
|
||||
z-index: 10000;
|
||||
|
||||
}
|
||||
|
||||
#error{
|
||||
#picturePoche, #pictureTube{
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
background-color: grey;
|
||||
.sang{
|
||||
width: auto;
|
||||
height: 150px;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.error{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
background-color: #F44336;
|
||||
color: white;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#saisie{
|
||||
position: absolute;
|
||||
left:-300px
|
||||
}
|
||||
}
|
||||
/*Badeau supérieur*/
|
||||
.page_header {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 0.75% 30% 44%;
|
||||
grid-template-rows: 25vh;
|
||||
grid-template-areas: "barecode sparebar identity gift_spec";
|
||||
background-color: rgba(5, 5, 59, 0.952);
|
||||
}
|
||||
.gift_cb {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 75% 25%;
|
||||
grid-template-areas:
|
||||
"cb"
|
||||
"number_cb";
|
||||
grid-area: barecode;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
margin: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
/*
|
||||
.separator {
|
||||
grid-area: sparebar;
|
||||
background-color: black;
|
||||
}*/
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: large;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.page_header .gift_cb .cb_cb {
|
||||
grid-template-columns: cb;
|
||||
/*background-color: black;*/
|
||||
}
|
||||
|
||||
.cb_number {
|
||||
|
||||
}
|
||||
|
||||
.identity {
|
||||
grid-area: identity;
|
||||
background-color: white;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.gift_specificity {
|
||||
grid-area: gift_spec;
|
||||
background-color: white;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* Bandeau intermédiaire étapes*/
|
||||
|
||||
.step {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 15vh 10vh;
|
||||
grid-template-areas:
|
||||
"step_number"
|
||||
"step_message";
|
||||
background-color: rgba(5, 5, 59, 0.952);
|
||||
}
|
||||
|
||||
.step_state {
|
||||
grid-area: step_number;
|
||||
background-color: white;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user