<div class="row">
<!--La Ruleta-->
<div class="col-md-8" >
<div class="box box-info box-solid" style="text-transform:uppercase;">
<div class="box-body" style="">
<div id="div-ruleta"></div>
</div>
</div>
</div>
<!--Los TAbs-->
<div class="col-md-4" >
<div class="box box-info box-solid" style="text-transform:uppercase;">
<div class="box-header with-border bg-aqua">
<h3 class="box-title ">Ruleta de la Suerte</h3>
<div class="pull-right">
<button type="button"onclick="paraRuleta();" id="btn-pararuleta" class="btn btn-warning" style="border-color:#fff;" disabled ><i class="fa fa-stop"></i> Para Ruleta </button>
<button type="button"onclick="abrirSorteosActivos();" class="btn" style="border-color:#fff;"><i class="fa fa-home"></i></button>
<button type="button"onclick="iniciarRuleta(<?= $Sorteo->sorteoID ?>);" class="btn" style="border-color:#fff;"><i class="fa fa-refresh"></i></button>
<button type="button"onclick="cargarConfiguracion();" class="btn" style="border-color:#fff;"><i class="fa fa-cog"></i></button>
</div>
</div>
<div class="box-body" style="">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-3">
<img id="imagenPremio" src="vistas/rifas/img/premio.png" class="img-thumbnail" />
<img id="imagenGanador" src="<?= URL_SICAM32 ?>archivo/colaboradores/fotos/sin-foto.png" class="img-thumbnail" />
</div>
<div class="col-md-9">
<h5>Jugando por <strong id="premioEnJuego" style="font-size: 150%" ></strong></h5>
<h6>Ganador</h6>
<h4 id="nombreGanador" style="color:red;"></h4>
</div>
</div>
</div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_Premios" data-toggle="tab">PREMIOS</a></li>
<li><a href="#tab_Participantes" data-toggle="tab">PARTICIPANTES</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_Premios">
<div>
<div id="div-premios"></div>
</div>
</div>
<div class="tab-pane" id="tab_Participantes">
<div>
<div id="div-participantes"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var sorteoRuleta = "<?= $Sorteo->sorteoID ?>";
$(document).ready(function () {
cargarParticipantes();
cargarPremios();
});
var Ruleta;
var ctx;
var yaSeCargo = false;
function cargarConfiguracion(){
cargarDivisionSicam('div-ruleta', 'tienda-apps', 'Rifas', 'verConfiguracion', "sorteo="+sorteoRuleta);
}
function cargarPremios() {
cargarDivisionSicam('div-premios', 'tienda-apps', 'Rifas', 'todosPremios', "sorteo="+sorteoRuleta);
}
var PremioEnJuego;
function cargarParticipantes(premio) {
ejecutarOperacion("tienda-apps", "Rifas", "asistentes", "sorteo="+sorteoRuleta+"&premio="+premio,
function (datos) {
if( datos ){
leerParticipantes(datos.Asistentes);
if(datos.Premio){
PremioEnJuego = datos.Premio;
}
}
}
);
cargarDivisionSicam('div-participantes', 'tienda-apps', 'Rifas', 'todosParticipantes', "sorteo="+sorteoRuleta);
}
function cargarParticipantesSinGanar(premio) {
ejecutarOperacion("tienda-apps", "Rifas", "asistentesSinGanar", "sorteo="+sorteoRuleta+"&premio="+premio,
function (datos) {
if( datos ){
console.log(datos);
leerParticipantes(datos.Asistentes);
if(datos.Premio){
PremioEnJuego = datos.Premio;
console.log(PremioEnJuego);
}
}
}
);
cargarDivisionSicam('div-participantes', 'tienda-apps', 'Rifas', 'todosParticipantes', "sorteo="+sorteoRuleta);
}
function leerParticipantes(Asistentes) {
var ParticipantesRuleta = [];
for (i = 0; i < Asistentes.length; i++) {
ParticipantesRuleta.push({
'fillStyle': "#" + ((1 << 24) * Math.random() | 0).toString(16),
'id': Asistentes[i].participanteID ,
'cedula': Asistentes[i].personaIDENTIFICACION ,
'foto': "<?= URL_SICAM32 ?>"+Asistentes[i].colaboradorFOTO ,
'text': Asistentes[i].personaNOMBRES+" "+Asistentes[i].personaAPELLIDOS
});
}
pintarRuleta(ParticipantesRuleta);
}
function pintarRuleta(ArraydeParticipantes) {
cargarDivisionSicam('div-ruleta', 'tienda-apps', 'Rifas', 'cargarRuleta', "sorteo="+sorteoRuleta, function(){
bloqueoCargando();
Ruleta = new Winwheel({
'canvasId': 'myCanvas',
'fillStyle' : '#e7706f',
'innerRadius': 75,
'lineWidth': 1,
'textOrientation' : 'horizontal', // Set orientation. horizontal, vertical, curved.
'textFontFamily' : 'arial',
'textFontSize': 10,
'textFillStyle': "white",
'textMargin': 5,
'textAlignment' : 'outer',
'numSegments': ArraydeParticipantes.length,
'outerRadius': 320,
'segments': ArraydeParticipantes,
'animation':
{
'type': 'spinToStop',
'duration': 2 + parseInt(Math.random()*5),
'spins': 2 + parseInt( Math.random()*ArraydeParticipantes.length),
'callbackFinished': 'pintarGanador(); anunciarGanador();',
'callbackAfter': 'pintarTriangulo()'
},
'pins': true
});
pintarTriangulo();
if(yaSeCargo){
$("#imagenPremio").attr('src', "vistas/rifas/img/"+PremioEnJuego.sorteoPremioURLIMG);
$("#premioEnJuego").text(PremioEnJuego.sorteoPremioTITULO);
girarRuleta(null);
}
yaSeCargo = true;
desbloqueoCargando();
});
}
function pintarTriangulo() {
ctx = Ruleta.ctx;
ctx.strokeStyle = '#000000';
ctx.fillStyle = 'silver';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(320, 55);
ctx.lineTo(380, 55);
ctx.lineTo(350, 90);
ctx.lineTo(321, 55);
ctx.stroke();
ctx.fill();
}
function pintarGanador() {
var ganadorID = Ruleta.getIndicatedSegmentNumber();
for (var x = 1; x < Ruleta.segments.length; x++) {
Ruleta.segments[x].fillStyle = 'gray';
}
Ruleta.segments[ganadorID].lineWidth = 3;
Ruleta.segments[ganadorID].fillStyle = 'yellow';
Ruleta.segments[ganadorID].textFillStyle = 'red';
Ruleta.segments[ganadorID].textFontSize = '15';
Ruleta.draw();
pintarTriangulo();
}
function anunciarGanador() {
var ganadorID = Ruleta.getIndicatedSegment();
ejecutarOperacionOculta(
'tienda-apps', 'rifas', 'registrarGanador',
'participante='+Ruleta.getIndicatedSegment().id+'&premio='+PremioEnJuego.sorteoPremioID
);
Ruleta.stopAnimation(false);
Ruleta.draw();
pintarTriangulo();
$("#nombreGanador").text(ganadorID.text);
$("#imagenGanador").attr('src',ganadorID.foto);
swal({
title: "¡FELICITACIONES " + ganadorID.text + " [" + ganadorID.cedula + "] !",
html: " <img src='"+ ganadorID.foto + "' style='width:64px' /> ",
icon: "success"
});
cargarPremios();
}
function elegirSiempre() {
// This formula always makes the wheel stop somewhere inside prize 3 at least
// 1 degree away from the start and end edges of the segment.
var stopAt = (91 + Math.floor((Math.random() * 43)))
alert(stopAt);
// Important thing is to set the stopAngle of the animation before stating the spin.
Ruleta.animation.stopAngle = 259;
// May as well start the spin from here.
Ruleta.startAnimation();
}
function girarRuleta(premioID) {
//$("#" + panel).attr("style", "background-color: rgba(158, 158, 158, 0.3)");
//$("#" + boton).attr("disabled", "disabled");
//$("#imagenPremio").attr("src", premioID);
//$("#premioEnJuego").text(nombrePremio);
//$("#nombreGanador").text("En juego....");
$("#btn-pararuleta").removeAttr('disabled');
alert("Ya se preparó la ruleta. \r\n Aceptar para girar.");
Ruleta.startAnimation();
}
function paraRuleta() {
Ruleta.stopAnimation();
$("#btn-pararuleta").attr('disabled','');
}
/*function addSegment(){
// Use a date object to set the text of each added segment to the current minutes:seconds
// (just to give each new segment a different label).
var date = new Date();
// The Second parameter in the call to addSegment specifies the position,
// in this case 1 meaning the new segment goes at the start of the wheel.
theWheel.addSegment({
'text' : date.getMinutes() + ':' + date.getSeconds(),
'fillStyle' : 'aqua'
}, 1);
// The draw method of the wheel object must be called in order for the changes
// to be rendered.
theWheel.draw();
drawArrow();
}
function deleteSegment(){
// Call function to remove a segment from the wheel, by default the last one will be
// removed; you can pass in the number of the segment to delete if desired.
theWheel.deleteSegment();
// The draw method of the wheel object must be called to render the changes.
theWheel.draw();
drawArrow();
}*/
</script>