mirror of
https://github.com/RaspbianFrance/raspisms.git
synced 2025-04-22 01:16:26 +02:00
Add page and api for stats about phone sended sms
This commit is contained in:
osaajani
parent
064d6fd941
commit
4f717ef849
11 changed files with 530 additions and 0 deletions
|
|
@ -42,6 +42,9 @@
|
|||
<script src="<?php echo HTTP_PWD_JS; ?>/datatables/datatables.min.js"></script>
|
||||
<!-- Qrcode lib -->
|
||||
<script src="<?php echo HTTP_PWD_JS; ?>/qrcode.min.js"></script>
|
||||
<!-- Chartjs -->
|
||||
<script src="<?php echo HTTP_PWD_JS; ?>/chart.js"></script>
|
||||
|
||||
|
||||
<!-- Custom JS -->
|
||||
<script src="<?php echo HTTP_PWD_JS; ?>/custom.js"></script>
|
||||
|
|
|
|||
|
|
@ -122,6 +122,11 @@
|
|||
</ul>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if (!in_array('stats', json_decode($_SESSION['user']['settings']['hide_menus'], true) ?? [])) { ?>
|
||||
<li <?php echo $page == 'settings' ? 'class="active"' : ''; ?>>
|
||||
<a href="<?php echo \descartes\Router::url('Stat', 'sms_status'); ?>"><i class="fa fa-fw fa-area-chart"></i> Statistiques</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if (!in_array('settings', json_decode($_SESSION['user']['settings']['hide_menus'], true) ?? [])) { ?>
|
||||
<li <?php echo $page == 'settings' ? 'class="active"' : ''; ?>>
|
||||
<a href="<?php echo \descartes\Router::url('Setting', 'show'); ?>"><i class="fa fa-fw fa-cogs"></i> Réglages</a>
|
||||
|
|
|
|||
213
templates/stat/sms-status.php
Normal file
213
templates/stat/sms-status.php
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<?php
|
||||
//Template dashboard
|
||||
|
||||
$this->render('incs/head')
|
||||
?>
|
||||
<div id="wrapper">
|
||||
<?php
|
||||
$this->render('incs/nav', ['page' => 'dashboard'])
|
||||
?>
|
||||
<div id="page-wrapper">
|
||||
<div class="container-fluid">
|
||||
<!-- Page Heading -->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h1 class="page-header">
|
||||
Statistiques <small>Statistiques avancées</small>
|
||||
</h1>
|
||||
<ol class="breadcrumb">
|
||||
<li class="active">
|
||||
<i class="fa fa-dashboard"></i> Statistiques avancées
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="panel panel-default dashboard-panel-chart">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-area-chart fa-fw"></i> Status des SMS envoyés par téléphone : </h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form id="sms-status-form" class="form-inline text-right mb-3" action="" method="POST">
|
||||
<div class="form-group">
|
||||
<label for="id_phone">Téléphone : </label>
|
||||
<div class="form-group">
|
||||
<select id="id_phone" name="id_phone" class="form-control">
|
||||
<option value="">Tous les téléphones</option>
|
||||
<?php foreach ($phones as $phone) { ?>
|
||||
<option value="<?php $this->s($phone['id']); ?>"><?php $this->s($phone['name']); ?></option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group ml-4">
|
||||
<label for="start">Période : </label>
|
||||
<input id="start" name="start" class="form-control form-date auto-width" type="date" value="<?php $this->s($seven_days_ago->format('Y-m-d')) ?>">
|
||||
- <input id="end" name="end" class="form-control form-date auto-width" type="date" value="<?php $this->s($now->format('Y-m-d')) ?>">
|
||||
</div>
|
||||
|
||||
<input type="submit" class="btn btn-success ml-4" value="Valider" />
|
||||
</form>
|
||||
<canvas id="bar-chart-sms-status"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- /#page-wrapper -->
|
||||
|
||||
</div>
|
||||
<script>
|
||||
smsStatusChart = null;
|
||||
const phones = {};
|
||||
for (const phone of <?= json_encode($phones); ?>) {
|
||||
phones[phone.id] = phone;
|
||||
};
|
||||
|
||||
|
||||
async function drawChart(e = null) {
|
||||
const startDate = new Date(document.getElementById('start').value);
|
||||
const formatedStartDate = startDate.toISOString().split('T')[0]
|
||||
const endDate = new Date(document.getElementById('end').value);
|
||||
const formatedEndDate = endDate.toISOString().split('T')[0]
|
||||
const id_phone = document.getElementById('id_phone').value;
|
||||
|
||||
let url = `http://127.0.0.1/raspisms/api/stats/sms-status?api_key=a25cc40e2ffcc661170e28dc56724f67&start=${formatedStartDate}&end=${formatedEndDate}`;
|
||||
url = (id_phone ? `${url}&id_phone=${id_phone}` : url );
|
||||
const response = await fetch(url);
|
||||
const data = (await response.json()).response;
|
||||
|
||||
// Get all dates to avoid holes in data
|
||||
const dates = [];
|
||||
let currentDate = new Date(startDate);
|
||||
while (currentDate <= endDate) {
|
||||
const formated_date = (new Date(currentDate)).toISOString().split('T')[0]
|
||||
dates.push(formated_date);
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
const empty_dataset = Array(dates.length + 1).fill(0)
|
||||
|
||||
const colors = {'failed': '#d9534f', 'unknown': '#337ab7', 'delivered': '#5cb85c'};
|
||||
|
||||
|
||||
|
||||
let datasets = {};
|
||||
for (const entry of data) {
|
||||
if (!datasets[entry.id_phone]) {
|
||||
datasets[entry.id_phone] = {
|
||||
'failed': {
|
||||
'data': [...empty_dataset],
|
||||
'label': `Phone ${phones[entry.id_phone]['name']} - Failed`,
|
||||
'backgroundColor': colors['failed'],
|
||||
'stack': entry.id_phone,
|
||||
},
|
||||
'unknown': {
|
||||
'data': [...empty_dataset],
|
||||
'label': `Phone ${phones[entry.id_phone]['name']} - Unknown`,
|
||||
'backgroundColor': colors['unknown'],
|
||||
'stack': entry.id_phone,
|
||||
},
|
||||
'delivered': {
|
||||
'data': [...empty_dataset],
|
||||
'label': `Phone ${phones[entry.id_phone]['name']} - Delivered`,
|
||||
'backgroundColor': colors['delivered'],
|
||||
'stack': entry.id_phone,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const date_index = dates.indexOf(entry.at_ymd);
|
||||
|
||||
// This should never happen, but better be sure
|
||||
if (date_index == -1) {
|
||||
throw Error('Data for a date not in dates array');
|
||||
}
|
||||
|
||||
datasets[entry.id_phone][entry.status]['data'][date_index] = entry.nb;
|
||||
}
|
||||
// Pass all from dict to array
|
||||
const formated_datasets = [];
|
||||
for (const key in datasets) {
|
||||
formated_datasets.push(datasets[key]['failed']);
|
||||
formated_datasets.push(datasets[key]['unknown']);
|
||||
formated_datasets.push(datasets[key]['delivered']);
|
||||
}
|
||||
|
||||
// Custom plugin to display "Pas de données sur cette période"
|
||||
const noDataPlugin = {
|
||||
id: 'noDataPlugin',
|
||||
afterDraw: (chart) => {
|
||||
const datasets = chart.data.datasets;
|
||||
const hasData = datasets.some(dataset => dataset.data.some(value => value !== null && value !== undefined && value !== 0));
|
||||
|
||||
if (!hasData) {
|
||||
const ctx = chart.ctx;
|
||||
const { width, height } = chart;
|
||||
ctx.save();
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.font = '3em Helvetica';
|
||||
ctx.fillText('Pas de données sur cette période', width / 2, height / 2);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
const ctx = document.getElementById('bar-chart-sms-status');
|
||||
const config = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: dates,
|
||||
datasets: formated_datasets,
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [noDataPlugin],
|
||||
};
|
||||
|
||||
// On first run create chart, after update
|
||||
if (!smsStatusChart) {
|
||||
smsStatusChart = new Chart(ctx, config);
|
||||
} else {
|
||||
for (const key in config) {
|
||||
smsStatusChart[key] = config[key];
|
||||
}
|
||||
smsStatusChart.update();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
jQuery(document).ready(function()
|
||||
{
|
||||
drawChart();
|
||||
});
|
||||
|
||||
jQuery('#sms-status-form').on('submit', (e) => {
|
||||
e.preventDefault();
|
||||
drawChart();
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
<!-- /#wrapper -->
|
||||
<?php
|
||||
$this->render('incs/footer');
|
||||
Loading…
Add table
Add a link
Reference in a new issue