You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
4.7 KiB
172 lines
4.7 KiB
<!DOCTYPE html>
|
|
<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">
|
|
<title>Bobinoscope</title>
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="/css/view.css"/>
|
|
</head>
|
|
<body>
|
|
<div id="idMain" style="width:400px; margin: auto">
|
|
<p>Cliquez sur le <i>bobinogramme</i> qui vous intéresse<br/>pour afficher le menu</p>
|
|
<div id="idViewLoading">
|
|
<img src='/img/common/294.GIF'/>
|
|
</div>
|
|
<div id="idViewContainer">
|
|
|
|
</div>
|
|
</div>
|
|
<div id="idMenu" style="display:none">
|
|
<div id="idMenu-title">Bobinoscope</div>
|
|
<img id="idMenu-preview" src=""/>
|
|
<br/>
|
|
<div>
|
|
<button id="idMenu-btnDownload">Télécharger</button>
|
|
<button id="idMenu-btnPrint">Imprimer</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<!-- Latest compiled and minified JQuery -->
|
|
<script src="/js/jquery-1.11.2.min.js"></script>
|
|
<!-- Getting the Socket.IO Client -->
|
|
<script src="/js/socket.io-1.3.4.js"></script>
|
|
</html>
|
|
|
|
<style type="text/css">
|
|
#idMenu {
|
|
background: #000;
|
|
opacity: 1;
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 1em;
|
|
top:0;
|
|
left:0;
|
|
bottom: 0;
|
|
right: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.classBoothItem {
|
|
margin: 5px 0
|
|
}
|
|
|
|
#idMenu button{
|
|
padding: 0.5em;
|
|
}
|
|
|
|
#idMenu-title {
|
|
padding: 0.3em;
|
|
font-size: 1.3em;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var socket = io('http://<%= serverIpAddress %>:3000');
|
|
socket.on('connect', function() {
|
|
console.log("connect")
|
|
})
|
|
socket.on('boothState', function (data) {
|
|
BOB_getBooths();
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
BOB_getBooths();
|
|
|
|
if( $(window).width() < 500 ) {
|
|
$('#idMain').css('width' ,'100%');
|
|
$('#idMenu-preview').css('width', 60 * $(window).width() / 100 )
|
|
} else {
|
|
$('#idMenu-preview').css('width', 500 )
|
|
}
|
|
|
|
$('#idMenu').click(function() {
|
|
$(this).fadeOut();
|
|
})
|
|
|
|
$('#idMenu-btnDownload').click(function() {
|
|
if( confirm("Télécharger le bobinogramme ?\n\nPour les iPhone-istes, un nouvel onglet va s'ouvrir avec le bobinogramme voulu. Un click long sur celui-ci permet de la télécharger définitivement.") ) {
|
|
window.open("/download/final/hd/"+BOB_var_selectedBoothId, "_blank");
|
|
}
|
|
})
|
|
|
|
$('#idMenu-btnPrint').click(function() {
|
|
console.log(BOB_var_printer.todos, BOB_var_selectedBoothId)
|
|
if( BOB_var_printer.todos.indexOf(BOB_var_selectedBoothId) === -1 ) {
|
|
if( confirm("Envoyer une demande d'impression du bobinogramme pour le livre d'Or?\n\nPour que tout le monde puisse y mettre sa bobine, ne faites qu'une seule demande par groupe.") ) {
|
|
$.get("/print/bobinogramme/"+BOB_var_selectedBoothId, function(pResponse) {
|
|
if( pResponse.error ) {
|
|
console.log("Printer: ", pResponse.error)
|
|
alert("Echec ! Essayez d'envoyer une nouvelle demande")
|
|
} else {
|
|
alert("Demande prise en compte !\n\nVotre bobinogramme sera disponible près du Livre d'Or d'ici 1 heure")
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
alert("Une demande a déjà été envoyée.\nVérifiez près du Livre d'Or si votre bobinogramme ne s'y trouve pas.")
|
|
}
|
|
})
|
|
})
|
|
|
|
var BOB_var_lastBooth = "0";
|
|
var BOB_var_selectedBoothId = "";
|
|
var BOB_var_printer = {
|
|
todos : []
|
|
}
|
|
|
|
function BOB_getBooths() {
|
|
var boothList = $(".classBoothItem");
|
|
var jqBoothContainer = $('#idViewContainer');
|
|
|
|
$.get('/print/list/todo', function(pResponse) {
|
|
if( pResponse.error ) {
|
|
console.log('Printer: ', pResponse.error)
|
|
} else {
|
|
BOB_var_printer.todos = pResponse.todos
|
|
}
|
|
})
|
|
|
|
$.get('/booth/list/'+BOB_var_lastBooth, function(pResponse) {
|
|
if( pResponse.inProgress > 0 ) {
|
|
$('#idViewLoading').fadeIn();
|
|
} else {
|
|
$('#idViewLoading').fadeOut();
|
|
}
|
|
|
|
pResponse.booths.forEach(function(pBoothName) {
|
|
var jqImg = $('<img>');
|
|
var jqMenu = $('<div>');
|
|
var jqBtnDownload = $('<button>');
|
|
var jqBtnPrint = $('<button>');
|
|
jqImg.css('width', '100%');
|
|
jqImg.css('opacity', '0');
|
|
jqImg.css('transition', 'opacity 1s');
|
|
jqImg.data('booth', pBoothName);
|
|
jqImg.attr('src', "/img/final_ld/"+pBoothName);
|
|
jqImg.addClass('classBoothItem');
|
|
|
|
jqImg.on('click', function() {
|
|
BOB_var_selectedBoothId = pBoothName;
|
|
$('#idMenu-preview').attr('src', "/img/final_ld/"+pBoothName);
|
|
$('#idMenu').fadeIn();
|
|
})
|
|
|
|
jqImg.on('load', function() {
|
|
jqImg.css('opacity', '1');
|
|
})
|
|
|
|
if( pBoothName.localeCompare(BOB_var_lastBooth) > 0 ) {
|
|
BOB_var_lastBooth = pBoothName;
|
|
}
|
|
|
|
jqBoothContainer.prepend(jqImg);
|
|
})
|
|
})
|
|
|
|
console.log('-----------------');
|
|
}
|
|
|
|
</script>
|