File: /home/cafsindia/ntc_cafsinfotech_in_bk/application/views/home.php
<?php
$this->load->view("partial/header");
$company_name = $this->config->item('company');
?>
<style>
/* Float four columns side by side */
.column {
float: left;
width: 20%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin-left: 15px;
margin-right: 15px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 5px;
text-align: center;
background-color: #FFFFFF;
border-radius: 7px;
}
.card:hover {
box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
}
.orange{
background: linear-gradient(45deg, #ff6f00 0%, #ffca28 100%);
}
.blue{
background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%);
}
.text-uppercase,.h4{
color: #FFFFFF;
font-weight: bold;
}
.pink{
background: linear-gradient(45deg, #FF5252 0%, #f48fb1 100%);
}
.violite{
background: linear-gradient(45deg, #9C27B0 0%, #BA68C8 100%);
}
.green{
background: linear-gradient(45deg, #14f28c 0%, #4DB6AC 100%);
}
.red{
background: linear-gradient(45deg, #e60012 0%, #e8b8b8 100%);
}
.fa{
color: #FFFFFF;
}
</style>
<h4 class="center bold mrgb15" style="color:#5C5C61;"></h4>
<div class="row" style="margin-top: 20px;">
<div class="col-md-2">
<div class="card orange">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-group" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase"> Today <br> Active Loads</h6>
<!-- Heading -->
<span id="active_loads" class="h4 mb-0">0</span>
<!-- Badge -->
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card blue">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-heartbeat" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2">Today <br> Trips Done</h6>
<!-- Heading -->
<span id="trips_done" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card pink">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-balance-scale" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2"> Today <br> Loads Weight </h6>
<!-- Heading -->
<span id="loads_weight" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card violite">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-cubes" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2">Today <br>Customers Load</h6>
<!-- Heading -->
<span id="customer_load" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card green">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-handshake-o" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2">Today <br> Diesel Consumption </h6>
<!-- Heading -->
<span id="diesel_tot" class="h4 mb-0">0</span><span class="text-uppercase text-muted mb-2"> litre<span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<div class="col-md-2">
<div class="card red">
<div class="card-body">
<div class="row align-items-center gx-0">
<div class="col">
<div class="col-auto">
<!-- Icon -->
<span class="h4 fe fe-dollar-sign text-muted mb-0"><i class="fa fa-remove" aria-hidden="true"></i></span>
</div>
<!-- Title -->
<h6 class="text-uppercase text-muted mb-2">Today <br> vehicle information</h6>
<!-- Heading -->
<span id="left_this_month" class="h4 mb-0">0</span>
<!-- Badge -->
<!-- <span class="badge bg-success-soft mt-n1">+3.5%</span> -->
</div>
<div class="col-auto">
<!-- Icon -->
<span class="h2 fe fe-dollar-sign text-muted mb-0"></span>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
<!-- </div> -->
</div>
<div class='col-md-12'>
<div class= "form-group col-md-2" >
<?php
echo form_label('From Date', 'datepicker', array('class' => 'required'));
echo form_input(array('name' => 'datepicker', 'class' => 'form-control input-sm datepicker', 'id' => 'from_date','style'=>'border-radius: 4px; border: 1px solid #CCCCCC;','data-bind'=>'datepicker: dateRange, datepickerOptions: { maxDate: moment ()}'));
?>
</div>
<div class= "form-group col-md-2" >
<?php
echo form_label('To Date','datepicker', array('class' => 'required'));
echo form_input(array('name' => 'datepicker', 'class' => 'form-control input-sm datepicker', 'id' => 'to_date','style'=>'border-radius: 4px; border: 1px solid #CCCCCC;','data-bind'=>'datepicker: dateRange, datepickerOptions: { maxDate: moment ()}'));
?>
</div>
<button class = 'btn btn-primary btn-xs' id= "button" style="margin-top:30px;">Submit</button>
</div>
<div class="col-md-12" style="max-height:100%;">
<div class='row' style='margin: 0px; padding:8px 10px;'>
<div id="container" class="col-sm-6" style="min-width: 100px; height: 400px; margin: 0 auto"></div>
<div id="container1" class="col-sm-6" style="min-width: 100px; height: 400px; margin: 0 auto"></div>
</div>
</div>
<div class="col-md-12">
<div class="col-sm-5" id="driver_licence" style="max-height:300px;"></div>
<div class="col-sm-7" id="vehicle_info" style="max-height:300px;"></div>
</div>
<script>
$(document).ready(function () {
var today = new Date();
var tomorrow = new Date(today.getFullYear(), today.getMonth(), (today.getDate() + 1));
$("#from_date").datetimepicker({
format: 'DD-MM-YYYY',
defaultDate: today
});
$("#to_date").datetimepicker({
format: 'DD-MM-YYYY',
defaultDate: tomorrow
});
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
dashboard_search();
table_search_data(from_date,to_date);
chart_function(from_date,to_date);
$('#button').on('click',function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
table_search_data(from_date,to_date);
chart_function(from_date,to_date)
});
});
function chart_function(from_date,to_date){
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};
Highcharts.setOptions(Highcharts.theme);
var options = {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 0,
beta: -2,
depth: 46,
viewDistance: 25
}
,renderTo: 'container'
},
title: {
text: 'Vehicle Type And Category'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
series: [],
drilldown: {
series: [],
drilldown: {
series: []
}
}
};
$.ajax({
type:"post",
data: {from_date:from_date,to_date:to_date},
url:'<?php echo site_url("home/get_vehicle_piechart");?>',
success: function(data){
var user = JSON.parse(data);
options.series = user.series;
options.drilldown.series = user.drill_list;
chart = new Highcharts.chart(options);
}
});
Highcharts.setOptions(Highcharts.theme);
var secondoptions = {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 0,
beta: -2,
depth: 46,
viewDistance: 25
}
,renderTo: 'container1'
},
title: {
text: 'Load Customer Information'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
series: [],
drilldown: {
series: [],
drilldown: {
series: []
}
}
};
$.ajax({
type:"post",
data: {from_date:from_date,to_date:to_date},
url:'<?php echo site_url("home/get_load_customer_piechart");?>',
success: function(data){
var user = JSON.parse(data);
secondoptions.series = user.series;
secondoptions.drilldown.series = user.drill_list;
chart = new Highcharts.chart(secondoptions);
}
});
}
function dashboard_search(){
$.ajax({
type: "POST",
url: './index.php/home/get_dashboard_data',
success: function(data) {
var rslt = JSON.parse(data);
$('#active_loads').html(rslt.active_load[0].active_load);
$('#trips_done').html(rslt.completed_load[0].completed_load);
$('#loads_weight').html(rslt.weight_load[0].load_weight);
$('#customer_load').html(rslt.customer_load[0].customer_load);
$('#diesel_tot').html(rslt.diesel[0].diesel);
},
});
}
function table_search_data(from_date,to_date){
$.ajax({
type: "POST",
data: {from_date:from_date,to_date:to_date},
url: './index.php/home/table_search_data',
success: function(data) {
var rslt = JSON.parse(data);
$('#driver_licence').html(rslt.driver_licence);
$('#vehicle_info').html(rslt.Vehicle_info);
},
});
}
</script>
<?php
$this->load->view('partial/footer');
?>