323 lines
14 KiB
PHP
323 lines
14 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('content')
|
|
<div class="title-stat">
|
|
<h2><i class="fas fa-chart-line"></i>Statistiques de la campagne</h2>
|
|
<div class="selector-stat">
|
|
<h4>Période :</h4>
|
|
<input id="startdate" name="startdate" type="date" value="{{ $startdate }}">
|
|
<input id="enddate" name="enddate" type="date" value="{{ $enddate }}">
|
|
<input id="csrf" name="csrf" type="hidden" value="<?php echo csrf_token(); ?>">
|
|
<a class="add-button reload-stats" id="reloader" data-campid="{{ $campagne->camp_id }}" href="#"><i
|
|
class="fas fa-chart-line"></i> Charger</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="statistiquesGlobales">
|
|
<table class="campstat">
|
|
<thead>
|
|
<th colspan="2">{{ $campagne->camp_name }}</th>
|
|
</thead>
|
|
<tr>
|
|
<td>Référence</td>
|
|
<td>{{ $campagne->camp_id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Référence Site</td>
|
|
<td>{{ $campagne->camp_siteId }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Type</td>
|
|
<td>{{ $campagne->camp_type }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Impression limité</td>
|
|
<td>
|
|
@if ($campagne->camp_limitedPrinting === 1)
|
|
Oui
|
|
@else
|
|
Non
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Date de création</td>
|
|
<td>
|
|
{{ date('d/m/Y', strtotime($campagne->camp_createdate)) }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Publiée ?
|
|
</td>
|
|
<td>
|
|
@if ($campagne->camp_published === 1)
|
|
<i class="fas fa-check-circle green"></i>
|
|
@else
|
|
<i class="fas fa-times-circle red"></i>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="graphStatsGlobales">
|
|
<h3>Consommation Globale</h3>
|
|
<canvas id="myChartGlobal" height="150" width="300"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="statistiquesContent">
|
|
<div class="couponStats">
|
|
<div class="title">
|
|
<h3>Les Coupons</h3>
|
|
<div class="btns">
|
|
<a class="add-button open-all-stats" href="#"><i class="fas fa-plus-square"></i> Tout Ouvrir</a>
|
|
<a class="add-button close-all-stats" href="#"><i class="fas fa-minus-square"></i> Tout Fermer</a>
|
|
</div>
|
|
</div>
|
|
@foreach ($campagne->coupons as $coupon)
|
|
<div class="couponStatsDetail">
|
|
<h4><span class="expand">{{ $coupon->coupon_name }}</span> <span class="couponLegend"
|
|
data-label="{{ $coupon->coupon_name }}" style="background-color:{{ $coupon->color }}"></span></h4>
|
|
<div class="content">
|
|
<figure>
|
|
<a data-fancybox="images" data-caption="{{ $coupon->coupon_name }}" href="{{ asset($coupon->coupon_image) }}"><img
|
|
src="{{ asset($coupon->coupon_image) }}" alt=""></a>
|
|
</figure>
|
|
<p><span>Code de traitement :</span> <span>{{ $coupon->coupon_code }}</span></p>
|
|
<p><span>Valeur :</span> <span>{{ str_replace('.', ',', number_format($coupon->coupon_value, 2)) }} €</span></p>
|
|
<p><span>Quantité Totale :</span> <span>{{ $coupon->quantity }}</span></p>
|
|
<p><span>Quantité Restante :</span> <span>{{ $coupon->remain }}</span></p>
|
|
<p><span>Quantité Diffusé :</span> <span>{{ $coupon->diffused }}</span></p>
|
|
<p><span>Quantité Imprimé :</span> <span>{{ $coupon->quantity - $coupon->remain }}</span></p>
|
|
@if ($coupon->coupon_mindatediffusion != null)
|
|
<p><span>Date de début de diffusion :</span>
|
|
<span>{{ date('d/m/Y', strtotime($coupon->coupon_mindatediffusion)) }}</span></p>
|
|
@else
|
|
<p><span>Date de début de diffusion :</span> <span>n/c</span></p>
|
|
@endif
|
|
@if ($coupon->coupon_maxdatediffusion != null)
|
|
<p><span>Date de fin de diffusion :</span>
|
|
<span>{{ date('d/m/Y', strtotime($coupon->coupon_maxdatediffusion)) }}</span></p>
|
|
@else
|
|
<p><span>Date de fin de diffusion :</span> <span>n/c</span></p>
|
|
@endif
|
|
@if ($coupon->coupon_published == 1)
|
|
<p><span>Publié ?</span><span><i class="fas fa-check-circle green"></i></span></p>
|
|
@else
|
|
<p><span>Publié ?</span><span><i class="fas fa-times-circle red"></i></span></p>
|
|
@endif
|
|
@if ($coupon->isPrintable == 1)
|
|
<p><span>Imprimable ?</span><span><i class="fas fa-check-circle green"></i></span></p>
|
|
@else
|
|
@if ($coupon->isPaused == 1)
|
|
<p><span>Imprimable ?</span><span><i class="fas fa-pause-circle orange"></i></span></p>
|
|
@else
|
|
<p><span>Imprimable ?</span><span><i class="fas fa-times-circle red"></i></span></p>
|
|
@endif
|
|
@endif
|
|
<input class="couponStatData" id="{{ $coupon->coupon_code }}" data-color="{{ $coupon->color }}"
|
|
data-name="{{ $coupon->coupon_name }}" type="hidden">
|
|
</div>
|
|
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="graphStats">
|
|
<h3>Consommation par coupons <i class="fas fa-eye"></i><i class="fas fa-eye-slash"></i></h3>
|
|
<canvas id="myChart" height="150" width="300"></canvas>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script src="{{ mix('js/Chart.js', 'build') }}" charset="utf-8"></script>
|
|
<script>
|
|
var myLine;
|
|
var myLineGlobal;
|
|
|
|
function load_graphs(campid, startdate, enddate) {
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('#csrf').val()
|
|
}
|
|
});
|
|
$.ajax({
|
|
url: '/loadStat',
|
|
type: 'POST',
|
|
data: {
|
|
campid: campid,
|
|
startdate: startdate,
|
|
enddate: enddate,
|
|
},
|
|
dataType: 'JSON',
|
|
success: function(response) {
|
|
//console.log("label", response.labels.reverse());
|
|
//Mise en place du graphique globa
|
|
var configGlobal = {
|
|
type: 'line',
|
|
data: {
|
|
labels: response.labels,
|
|
datasets: [{
|
|
label: "Coupons",
|
|
data: response.dataGlobal,
|
|
fill: false,
|
|
borderColor: '#de9700',
|
|
backgroundColor: '#de9700',
|
|
borderWidth: 1,
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: true,
|
|
responsive: true,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
title: {
|
|
display: false,
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
fontColor: '#adb5bd'
|
|
},
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
fontColor: '#adb5bd'
|
|
},
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
var ctxGlobal = document.getElementById("myChartGlobal").getContext('2d');
|
|
myLineGlobal = new Chart(ctxGlobal, configGlobal);
|
|
|
|
//Mise en place du graphique spec
|
|
var dataSpecCp = [];
|
|
$.each(response.dataSpec, function(coupon_code, data) {
|
|
var dataset = {
|
|
label: $('#' + coupon_code).attr('data-name'),
|
|
borderColor: $('#' + coupon_code).attr('data-color'),
|
|
borderWidth: 1,
|
|
backgroundColor: $('#' + coupon_code).attr('data-color'),
|
|
fill: false,
|
|
data: data,
|
|
}
|
|
dataSpecCp.push(dataset);
|
|
})
|
|
var config = {
|
|
type: 'line',
|
|
data: {
|
|
labels: response.labels,
|
|
datasets: dataSpecCp,
|
|
},
|
|
options: {
|
|
maintainAspectRatio: true,
|
|
responsive: true,
|
|
legend: {
|
|
display: false,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: false,
|
|
text: 'Consommation de BR par jour'
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
fontColor: '#adb5bd'
|
|
},
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
fontColor: '#adb5bd'
|
|
},
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
var ctx = document.getElementById("myChart").getContext('2d');
|
|
myLine = new Chart(ctx, config);
|
|
},
|
|
error: function(e) {
|
|
console.log(e.responseText);
|
|
}
|
|
});
|
|
}
|
|
|
|
window.onload = function() {
|
|
load_graphs($('#reloader').attr('data-campid'), $('#startdate').val(), $('#enddate').val());
|
|
|
|
// ---- SHOW ALL
|
|
$('.fa-eye').on('click', function() {
|
|
$('.couponLegend').each(function() {
|
|
$(this).find('.line').remove();
|
|
})
|
|
myLine.data.datasets.forEach(function(ds) {
|
|
ds.hidden = false;
|
|
});
|
|
myLine.update();
|
|
})
|
|
// ---- HIDE ALL
|
|
$('.fa-eye-slash').on('click', function() {
|
|
$('.couponLegend').each(function() {
|
|
$(this).append('<div class="line"></div>');
|
|
})
|
|
myLine.data.datasets.forEach(function(ds) {
|
|
ds.hidden = true;
|
|
});
|
|
myLine.update();
|
|
})
|
|
|
|
$('.couponStats').on('click', '.couponLegend', function(e) {
|
|
if ($(this).find('.line').length) {
|
|
$(this).find('.line').remove();
|
|
} else {
|
|
$(this).append('<div class="line"></div>');
|
|
}
|
|
var label = $(this).attr('data-label');
|
|
myLine.data.datasets.forEach(function(ds) {
|
|
if (ds.label == label) {
|
|
ds.hidden = !ds.hidden;
|
|
}
|
|
});
|
|
myLine.update();
|
|
})
|
|
}
|
|
|
|
|
|
$('.reload-stats').on('click', function(event) {
|
|
var campid = $(this).attr('data-campid');
|
|
var startdate = $('#startdate').val();
|
|
var enddate = $('#enddate').val();
|
|
event.preventDefault();
|
|
|
|
//console.log(enddate);
|
|
if (startdate != "" && enddate != "") {
|
|
teststartdate = new Date(startdate);
|
|
testenddate = new Date(enddate);
|
|
if (teststartdate < testenddate) {
|
|
myLine.destroy();
|
|
myLineGlobal.destroy();
|
|
load_graphs(campid, startdate, enddate);
|
|
} else {
|
|
$.fancyConfirm({
|
|
title: "<i class='fas fa-times-circle red'></i> Erreur",
|
|
message: "La date de fin doit être supérieure à la date de début.",
|
|
okButton: 'Valider',
|
|
noButton: "",
|
|
callback: function(value) {}
|
|
});
|
|
}
|
|
|
|
} else {
|
|
$.fancyConfirm({
|
|
title: "<i class='fas fa-times-circle red'></i> Erreur",
|
|
message: "Veuillez remplir les deux dates pour voir les données associées.",
|
|
okButton: 'Valider',
|
|
noButton: "",
|
|
callback: function(value) {}
|
|
});
|
|
}
|
|
})
|
|
</script>
|
|
@endsection
|