Scribd
Upload
2 views14 pages

C

The document outlines the structure of a report management interface in an admin panel, featuring tabs for operations, births, deaths, and others. Each tab displays a table with relevant data such as ID, description, date, patient, and doctor, along with dynamic charts for visual representation of the data. Additionally, there is JavaScript code to handle chart creation and synchronization with table selections.

Uploaded by

Assetou HAIDARA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
2 views14 pages

C

The document outlines the structure of a report management interface in an admin panel, featuring tabs for operations, births, deaths, and others. Each tab displays a table with relevant data such as ID, description, date, patient, and doctor, along with dynamic charts for visual representation of the data. Additionally, there is JavaScript code to handle chart creation and synchronization with table selections.

Uploaded by

Assetou HAIDARA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 14

C’est l’interieur de view_report dans admin

<div class="box">

<!-- <div class="box-header">

<ul class="nav nav-tabs nav-tabs-left">

<li class="active">

<a href="#list" data-toggle="tab"><i class="icon-align-justify"></i> graphique</a>

</li>

</ul>

</div>-->

<ul class="nav nav-tabs nav-tabs-left">

<li class="active">

<a href="#operation" data-toggle="tab"><i class="icon-align-justify"></i>

<?php echo ('liste Operation');?>

</a></li>

<li>

<a href="#birth" data-toggle="tab"><i class="icon-align-justify"></i>

<?php echo ('liste Naissance');?>

</a></li>

<li>

<a href="#death" data-toggle="tab"><i class="icon-align-justify"></i>


<?php echo ('liste Decès');?>

</a></li>

<li>

<a href="#death" data-toggle="tab"><i class="icon-align-justify"></i>

<?php echo ('liste Autres');?>

</a></li>

</ul>

<div class="box-content padded">

<div class="tab-content">

<!----OPERATION LISTING STARTS--->

<div class="tab-pane box active" id="operation">

<table cellpadding="0" cellspacing="0" border="0" class="dTable responsive table-hover">


<thead>

<tr>

<th><div>ID</div></th>

<th><div><?php echo ('Description');?></div></th>

<th><div><?php echo ('Date');?></div></th>

<th><div><?php echo ('Patient');?></div></th>

<th><div><?php echo ('Docteur');?></div></th>

</tr>

</thead>

<tbody>

<?php

$count = 1;

$birth_reports = $this->db->get_where('report' , array('type'=>'operation'))-


>result_array();

foreach($birth_reports as $row):?>

<tr>
<td><?php echo $count++;?></td>

<td><?php echo $row['description'];?></td>

<td><?php echo date('d M,Y', $row['timestamp']);?></td>

<td><?php echo $this->crud_model->get_type_name_by_id('patient',


$row['patient_id'],'name');?></td>

<td><?php echo $this->crud_model->get_type_name_by_id('doctor',


$row['doctor_id'],'name');?></td>

<!-- <td align="center">

<a href="<?php echo base_url();?>index.php?admin/manage_report/delete/<?php


echo $row['report_id'];?>" onclick="return confirm('delete?')"

rel="tooltip" data-placement="top" data-original-title="<?php echo


('supprimer');?>" class="btn btn-danger">

<i class="icon-trash"></i>

</a>

</td>-->

</tr>

<?php endforeach;?>

</tbody>
</table>

</div>

<div class="tab-pane box" id="birth">

<table cellpadding="0" cellspacing="0" border="0" class="dTable responsive table-hover">

<thead>

<tr>

<th><div>ID</div></th>

<th><div><?php echo ('Description');?></div></th>

<th><div><?php echo ('Date');?></div></th>

<th><div><?php echo ('Patient');?></div></th>

<th><div><?php echo ('Docteur');?></div></th>

</tr>

</thead>

<tbody>
<?php

$count = 1;

$birth_reports = $this->db->get_where('report' , array('type'=>'birth'))-


>result_array();

foreach($birth_reports as $row):?>

<tr>

<td><?php echo $count++;?></td>

<td><?php echo $row['description'];?></td>

<td><?php echo date('d M,Y', $row['timestamp']);?></td>

<td><?php echo $this->crud_model->get_type_name_by_id('patient',


$row['patient_id'],'name');?></td>

<td><?php echo $this->crud_model->get_type_name_by_id('doctor',


$row['doctor_id'],'name');?></td>

<!-- <td align="center">

<a href="<?php echo base_url();?>index.php?admin/manage_report/delete/<?php


echo $row['report_id'];?>" onclick="return confirm('delete?')"

rel="tooltip" data-placement="top" data-original-title="<?php echo


('supprimer');?>" class="btn btn-danger">

<i class="icon-trash"></i>
</a>

</td>-->>

</tr>

<?php endforeach;?>

</tbody>

</table>

</div>

<div class="tab-pane box" id="death">

<table cellpadding="0" cellspacing="0" border="0" class="dTable responsive table-hover">

<thead>

<tr>

<th><div>ID</div></th>

<th><div><?php echo ('Description');?></div></th>

<th><div><?php echo ('Date');?></div></th>

<th><div><?php echo ('Patient');?></div></th>


<th><div><?php echo ('Docteur');?></div></th>

</tr>

</thead>

<tbody>

<?php

$count = 1;

$birth_reports = $this->db->get_where('report' , array('type'=>'death'))-


>result_array();

foreach($birth_reports as $row):?>

<tr>

<td><?php echo $count++;?></td>

<td><?php echo $row['description'];?></td>

<td><?php echo date('d M,Y', $row['timestamp']);?></td>

<td><?php echo $this->crud_model->get_type_name_by_id('patient',


$row['patient_id'],'name');?></td>
<td><?php echo $this->crud_model->get_type_name_by_id('doctor',
$row['doctor_id'],'name');?></td>

<!-- <td align="center">

<a href="<?php echo base_url();?>index.php?admin/manage_report/delete/<?php


echo $row['report_id'];?>" onclick="return confirm('delete?')"

rel="tooltip" data-placement="top" data-original-title="<?php echo


('supprimer');?>" class="btn btn-danger">

<i class="icon-trash"></i>

</a>

</td>-->

</tr>

<?php endforeach;?>

</tbody>

</table>

</div>

<div class="box-content padded">

<div class="tab-content">
<div class="tab-pane box active" id="list">

<!-- Table Start -->

<div class="table-responsive">

<!-- <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-


hover">

<thead>

<tr>

<th><div><?php echo ('id');?></div></th>

<th><div><?php echo ('Description');?></div></th>

<th><div><?php echo ('Date');?></div></th>

<th><div><?php echo ('patient');?></div></th>

<th><div><?php echo ('Docteur');?></div></th>

<th><div><?php echo ('type');?></div></th> Nouvelle colonne pour les types de


rapports -->

<!-- </tr>

</thead>

<tbody>

<?php

$count = 1;

foreach($report as $row):

$report_type = strtolower($row['type']); // exemple: "deces", "naissance", etc.

?>

<tr class="report-row" data-report-type="<?= $report_type; ?>">

<td><?php echo $count++;?></td>

<td><?php echo $row['description'];?></td>

<td><?php echo date('d M, Y', $row['timestamp']);?></td>

<td><?php echo $this->crud_model->get_type_name_by_id('patient',


$row['patient_id'],'name');?></td>

<td><?php echo $this->crud_model->get_type_name_by_id('doctor',


$row['doctor_id'],'name');?></td>

<td><?php echo ucfirst($report_type); ?></td>

</tr>

<?php endforeach; ?>


</tbody>

</table>-->

</div>

<!-- Table End -->

<!-- Graphs Start -->

<div class="graph-container">

<div class="graph">

<canvas id="birthsChart"></canvas>

</div>

<div class="graph">

<canvas id="deathsChart"></canvas>

</div>

<div class="graph">

<canvas id="operationsChart"></canvas>

</div>

<div class="graph">

<canvas id="othersChart"></canvas>

</div>

</div>

<!-- Graphs End -->

</div>

</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

// Example of dynamic data from PHP to JavaScript

const births = <?php echo json_encode($births); ?>;

const deaths = <?php echo json_encode($deaths); ?>;


const operations = <?php echo json_encode($operations); ?>;

const others = <?php echo json_encode($others); ?>;

// Configure and create charts

const createChart = (ctx, label, data, color) => {

return new Chart(ctx, {

type: 'bar',

data: {

labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],

datasets: [{

label: label,

data: data,

backgroundColor: color,

borderColor: color,

borderWidth: 1

}]

},

options: {

responsive: true,

scales: {

y: {

beginAtZero: true

});

};

// Initialize the charts

const birthsChart = createChart(document.getElementById('birthsChart'), 'Naissances', births,


'rgba(75, 192, 192, 0.6)');
const deathsChart = createChart(document.getElementById('deathsChart'), 'Décès', deaths,
'rgba(255, 99, 132, 0.6)');

const operationsChart = createChart(document.getElementById('operationsChart'), 'Opérations',


operations, 'rgba(54, 162, 235, 0.6)');

const othersChart = createChart(document.getElementById('othersChart'), 'Autres', others,


'rgba(153, 102, 255, 0.6)');

// Synchronize graphs with table selections (if necessary)

const tableRows = document.querySelectorAll('.report-row');

tableRows.forEach(row => {

row.addEventListener('click', () => {

const reportType = row.getAttribute('data-report-type');

const selectedData = {

'deces': deaths,

'naissance': births,

'operation': operations,

'autre': others

};

// Update the charts dynamically based on row selection

if (reportType === 'deces') {

deathsChart.data.datasets[0].data = selectedData['deces'];

deathsChart.update();

} else if (reportType === 'naissance') {

birthsChart.data.datasets[0].data = selectedData['naissance'];

birthsChart.update();

} else if (reportType === 'operation') {

operationsChart.data.datasets[0].data = selectedData['operation'];

operationsChart.update();

} else if (reportType === 'autre') {

othersChart.data.datasets[0].data = selectedData['autre'];

othersChart.update();
}

});

});

</script>

<style>

.graph-container {

display: flex;

flex-wrap: wrap;

gap: 20px;

justify-content: center;

.graph {

width: 45%;

height: 300px;

table {

width: 100%;

table th, table td {

text-align: center;

padding: 8px;

</style>

You might also like