Created
June 14, 2024 00:21
-
-
Save somaria/0212389890fb1b665850e4d7a42e7984 to your computer and use it in GitHub Desktop.
home.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@extends('layouts.app') | |
@section('title') | |
Dashboard | |
@endsection | |
@section('content') | |
@include('layouts.partials.sidebar', array('active' => 'dashboard')) | |
<?php $role_name=Auth::user()->role->name; ?> | |
<div class="content-wrapper"> | |
<section class="content"> | |
<h2 > | |
<i class="fa fa-dashboard icon-content-header"></i> <?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="help_desk" || $role_name=="site_admin" || $role_name=="site_staff" || $role_name=="other" ) { echo "Analytics Dashboard"; } else {echo "Home"; } ?> | |
</h2> | |
<br /> | |
<div class="clearfix"></div> | |
<div > | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="help_desk" || $role_name=="site_admin" || $role_name=="site_staff" || $role_name=="other" ) {?> | |
<div class="row"> | |
<style> | |
canvas { | |
-moz-user-select: none; | |
-webkit-user-select: none; | |
-ms-user-select: none; | |
} | |
.filter-table-box{margin-top:0;} | |
.filter-field{display:inline-block;margin:4px 16px 4px 0px;} | |
.filter_site{margin-left:10px;} | |
</style> | |
<div class="col-md-12"> | |
<div class="box box-primary"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Overview of Fault Reported</h3> | |
<div class="box-tools pull-right"> | |
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
</div> | |
</div> | |
<div class="box-body"> | |
<div class="filter-table-box"> | |
<div class="filter-field"> | |
<span>Site: </span> | |
<select class="site_overview filter_overview select2" name="site_overview[]" multiple="multiple"> | |
<?php $site_count=0;?> | |
@if(!empty($sites)) | |
@foreach($sites as $site) | |
<option value="{{ $site->id }}" selected>{{ $site->name }}</option> | |
<?php $site_count++;?> | |
@endforeach | |
@endif | |
</select> | |
</div> | |
<span id="location_overview" style="{{ $site_count==1?'':'display:none;' }}"> | |
<div class="filter-field"> | |
<span>Building: </span> | |
<select id="building_id_filter_overview" class="input-sm form-control filter_overview" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
<div class="filter-field"> | |
<span>Floor: </span> | |
<select id="floor_id_filter_overview" class="input-sm form-control filter_overview" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
</span> | |
<div class="filter-field"> | |
<span>Start Date: </span> | |
<input data-date-format="yyyy-mm-dd" value="{{ date('Y-01-01') }}" class="d-inline-block input-sm form-control filter_overview datepicker" type="text" id="start_date_filter_overview" style="max-width:200px;" autocomplete="off"> | |
</div> | |
<div class="filter-field"> | |
<span>End Date: </span> | |
<input data-date-format="yyyy-mm-dd" value="{{ date('Y-m-d') }}" class="d-inline-block input-sm form-control filter_overview datepicker" type="text" id="end_date_filter_overview" style="max-width:200px;" autocomplete="off"> | |
</div> | |
</div> | |
<div class="clearfix"></div> | |
<br /> | |
<div id="overview_none" class="text-center d-none"><h4>No fault reported at this moment</h4></div> | |
<div class="chart" id="overview" style="margin:0 auto;max-width:980px;"> | |
<canvas id="canvas_overview"></canvas> | |
<div id="overview-legend"></div> | |
<br /> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="box box-primary"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Breakdown of Defects by Trade / Month</h3> | |
<div class="box-tools pull-right"> | |
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
</div> | |
</div> | |
<div class="box-body"> | |
<div class="filter-table-box"> | |
<div class="filter-field"> | |
<span>Site: </span> | |
<select id="site_id_filter" class="filter select2" name="site_defect[]" multiple="multiple"> | |
@if(!empty($sites)) | |
@foreach($sites as $site) | |
<option value="{{ $site->id }}" selected>{{ $site->name }}</option> | |
@endforeach | |
@endif | |
</select> | |
</div> | |
<span id="location_defect" style="{{ $site_count==1?'':'display:none;' }}"> | |
<div class="filter-field"> | |
<span>Building: </span> | |
<select id="building_id_filter" class="input-sm form-control filter" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
<div class="filter-field"> | |
<span>Floor: </span> | |
<select id="floor_id_filter" class="input-sm form-control filter" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
<div class="clearfix"></div> | |
</div> | |
</span> | |
<div class="clearfix"></div> | |
<div class="filter-field"> | |
<span>Year: </span> | |
<select id="year_filter" class="filter"> | |
@for($year=$minYear;$year<=$maxYear;$year++) | |
<option value="{{ $year }}" <?php if(date('Y')==$year) {echo "selected";} ?>>{{ $year }}</option> | |
@endfor | |
</select> | |
</div> | |
<div class="filter-field"> | |
<span>Month: </span> | |
<select id="month_filter" class="filter"> | |
<option value="">- All months -</option> | |
<option value="1">January</option> | |
<option value="2">February</option> | |
<option value="3">March</option> | |
<option value="4">April</option> | |
<option value="5">May</option> | |
<option value="6">June</option> | |
<option value="7">July</option> | |
<option value="8">August</option> | |
<option value="9">September</option> | |
<option value="10">October</option> | |
<option value="11">November</option> | |
<option value="12">December</option> | |
</select> | |
</div> | |
</div> | |
<div class="clearfix"></div> | |
<br /> | |
<div class="chart" id="chart1"> | |
<canvas id="canvas" style="height:300px;"></canvas> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="box box-primary"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Percentage of Fault Response</h3> | |
<div class="box-tools pull-right"> | |
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
</div> | |
</div> | |
<div class="box-body"> | |
<div class="filter-table-box"> | |
<div class="filter-field"> | |
<span>Site: </span> | |
<select id="site_id_filter2" class="site_percentage filter2 select2" name="site_percentage[]" multiple="multiple"> | |
@if(!empty($sites)) | |
@foreach($sites as $site) | |
<option value="{{ $site->id }}" selected>{{ $site->name }}</option> | |
@endforeach | |
@endif | |
</select> | |
</div> | |
<span id="location_percentage" style="{{ $site_count==1?'':'display:none;' }}"> | |
<div class="filter-field"> | |
<span>Building: </span> | |
<select id="building_id_filter2" class="input-sm form-control filter2" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
<div class="filter-field"> | |
<span>Floor: </span> | |
<select id="floor_id_filter2" class="input-sm form-control filter2" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
</span> | |
<div class="clearfix"></div> | |
<div class="filter-field"> | |
<span>Year: </span> | |
<select id="year_filter2" class="filter2"> | |
@for($year=$minYear;$year<=$maxYear;$year++) | |
<option value="{{ $year }}" <?php if(date('Y')==$year) {echo "selected";} ?>>{{ $year }}</option> | |
@endfor | |
</select> | |
</div> | |
<div class="filter-field"> | |
<span>Month: </span> | |
<select id="month_filter2" class="filter2"> | |
<option value="">- All months -</option> | |
<option value="1">January</option> | |
<option value="2">February</option> | |
<option value="3">March</option> | |
<option value="4">April</option> | |
<option value="5">May</option> | |
<option value="6">June</option> | |
<option value="7">July</option> | |
<option value="8">August</option> | |
<option value="9">September</option> | |
<option value="10">October</option> | |
<option value="11">November</option> | |
<option value="12">December</option> | |
</select> | |
</div> | |
</div> | |
<div class="clearfix"></div> | |
<br /> | |
<div class="chart"> | |
<canvas id="canvas2" style="height:350px;"></canvas> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="box box-primary"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Defect Status</h3> | |
<div class="box-tools pull-right"> | |
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
</div> | |
</div> | |
<div class="box-body"> | |
<div class="filter-table-box"> | |
<div class="filter-field"> | |
<span>Site: </span> | |
<select id="site_id_filter_status" class="filter_status select2" name="site_id_filter_status[]" multiple="multiple"> | |
@if(!empty($sites)) | |
@foreach($sites as $site) | |
<option value="{{ $site->id }}" selected>{{ $site->name }}</option> | |
@endforeach | |
@endif | |
</select> | |
</div> | |
<span id="location_status" style="{{ $site_count==1?'':'display:none;' }}"> | |
<div class="filter-field"> | |
<span>Building: </span> | |
<select id="building_id_filter_status" class="input-sm form-control filter_status" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
<div class="filter-field"> | |
<span>Floor: </span> | |
<select id="floor_id_filter_status" class="input-sm form-control filter_status" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
</span> | |
<div class="clearfix"></div> | |
<div class="filter-field"> | |
<span>Year: </span> | |
<select id="year_filter_status" class="filter_status"> | |
@for($year=$minYear;$year<=$maxYear;$year++) | |
<option value="{{ $year }}" <?php if(date('Y')==$year) {echo "selected";} ?>>{{ $year }}</option> | |
@endfor | |
</select> | |
</div> | |
<div class="filter-field"> | |
<span>Month: </span> | |
<select id="month_filter_status" class="filter_status"> | |
<option value="">- All months -</option> | |
<option value="1">January</option> | |
<option value="2">February</option> | |
<option value="3">March</option> | |
<option value="4">April</option> | |
<option value="5">May</option> | |
<option value="6">June</option> | |
<option value="7">July</option> | |
<option value="8">August</option> | |
<option value="9">September</option> | |
<option value="10">October</option> | |
<option value="11">November</option> | |
<option value="12">December</option> | |
</select> | |
</div> | |
<div class="filter-field"> | |
<span>Trade: </span> | |
<select id="trade_id_filter_status" class="filter_status"> | |
@if(!empty($trades)) | |
<option value="" >- All trades -</option> | |
@foreach($trades as $trade) | |
<option value="{{ $trade->id }}">{{ $trade->name }}</option> | |
@endforeach | |
@else | |
<option value="">- Select trades -</option> | |
@endif | |
</select> | |
</div> | |
</div> | |
<div class="clearfix"></div> | |
<br /> | |
<div class="chart"> | |
<canvas id="canvas_status" style="height:300px;"></canvas> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="box box-primary"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Fault By Floor</h3> | |
<div class="box-tools pull-right"> | |
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
</div> | |
</div> | |
<div class="box-body"> | |
<div class="filter-table-box"> | |
<div class="filter-field"> | |
<span>Site: </span> | |
<select id="site_id_filter_floor" class="filter_floor select2" name="site_id_filter_floor[]" multiple="multiple"> | |
@if(!empty($sites)) | |
@foreach($sites as $site) | |
<option value="{{ $site->id }}" selected>{{ $site->name }}</option> | |
@endforeach | |
@endif | |
</select> | |
</div> | |
<span id="location_floor" style="{{ $site_count==1?'':'display:none;' }}"> | |
<div class="filter-field"> | |
<span>Building: </span> | |
<select id="building_id_filter_floor" class="input-sm form-control filter_floor" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
</span> | |
<div class="clearfix"></div> | |
<div class="filter-field"> | |
<span>Year: </span> | |
<select id="year_filter_floor" class="filter_floor"> | |
@for($year=$minYear;$year<=$maxYear;$year++) | |
<option value="{{ $year }}" <?php if(date('Y')==$year) {echo "selected";} ?>>{{ $year }}</option> | |
@endfor | |
</select> | |
</div> | |
<div class="filter-field"> | |
<span>Month: </span> | |
<select id="month_filter_floor" class="filter_floor"> | |
<option value="">- All months -</option> | |
<option value="1">January</option> | |
<option value="2">February</option> | |
<option value="3">March</option> | |
<option value="4">April</option> | |
<option value="5">May</option> | |
<option value="6">June</option> | |
<option value="7">July</option> | |
<option value="8">August</option> | |
<option value="9">September</option> | |
<option value="10">October</option> | |
<option value="11">November</option> | |
<option value="12">December</option> | |
</select> | |
</div> | |
</div> | |
<br /> | |
<div class="chart"> | |
<canvas id="canvas_floor" style="min-height:1000px;"></canvas> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="box box-primary"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Fault Breakdown</h3> | |
<div class="box-tools pull-right"> | |
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
</div> | |
</div> | |
<div class="box-body"> | |
<style> | |
.table td, .table th{white-space: normal;vertical-align:middle!important;border:1px solid #ccc!important;font-weight:normal;} | |
.table tr th{background-color:#f3f3f3;color:#333;font-weight:bold;font-size:11px;} | |
.table tr th{border-bottom:none!important;} | |
.dataTables_wrapper.no-footer .dataTables_scrollBody{border:none;} | |
table { | |
display: block; | |
overflow-x: auto; | |
white-space: nowrap; | |
} | |
.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td{padding:8px 8px;} | |
</style> | |
<div class="filter-table-box"> | |
<div class="filter-field"> | |
<span>Site: </span> | |
<select id="site_id_filter_breakdown" class="filter_breakdown select2" name="site_id_filter_breakdown[]" multiple="multiple"> | |
@if(!empty($sites)) | |
@foreach($sites as $site) | |
<option value="{{ $site->id }}" selected>{{ $site->name }}</option> | |
@endforeach | |
@endif | |
</select> | |
</div> | |
<span id="location_breakdown" style="{{ $site_count==1?'':'display:none;' }}"> | |
<div class="filter-field"> | |
<span>Building: </span> | |
<select id="building_id_filter_breakdown" class="input-sm form-control filter_breakdown" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
<div class="filter-field"> | |
<span>Floor: </span> | |
<select id="floor_id_filter_breakdown" class="input-sm form-control filter_breakdown" disabled="disabled" style="display:inline-block;width:200px;"></select> | |
</div> | |
</span> | |
<div class="clearfix"></div> | |
<div class="filter-field"> | |
<span>Year: </span> | |
<select id="year_filter_breakdown" class="filter_breakdown"> | |
@for($year=$minYear;$year<=$maxYear;$year++) | |
<option value="{{ $year }}" <?php if(date('Y')==$year) {echo "selected";} ?>>{{ $year }}</option> | |
@endfor | |
</select> | |
</div> | |
<div class="filter-field"> | |
<span>Month: </span> | |
<select id="month_filter_breakdown" class="filter_breakdown"> | |
<option value="">- All months -</option> | |
<option value="1">January</option> | |
<option value="2">February</option> | |
<option value="3">March</option> | |
<option value="4">April</option> | |
<option value="5">May</option> | |
<option value="6">June</option> | |
<option value="7">July</option> | |
<option value="8">August</option> | |
<option value="9">September</option> | |
<option value="10">October</option> | |
<option value="11">November</option> | |
<option value="12">December</option> | |
</select> | |
</div> | |
</div> | |
<div class="clearfix"></div> | |
<br /> | |
<?php | |
$canvas_breakdown_height=$faultCategories->count()*20; | |
?> | |
<div class="chart"> | |
<canvas id="canvas_breakdown" style="height:{{$canvas_breakdown_height}}px;"></canvas> | |
</div> | |
<br /> | |
</div> | |
</div> | |
</div> | |
<script src="{{ asset('js/chart.js') }}"></script> | |
<script src="{{ asset('js/chartjs-plugin-datalabels.js') }}"></script> | |
<script src="{{ asset('js/chartjs-plugin-piechart-outlabels.js') }}"></script> | |
<style> | |
[class$="-legend"] { | |
list-style: none; | |
cursor: pointer; | |
padding-left: 0; | |
margin:0 auto; | |
text-align:center; | |
} | |
[class$="-legend"] li { | |
display: inline-block; | |
padding: 0 5px; | |
} | |
[class$="-legend"] li.hidden { | |
text-decoration: line-through; | |
} | |
[class$="-legend"] li span { | |
border-radius: 5px; | |
display: inline-block; | |
height: 10px; | |
margin-right: 10px; | |
width: 10px; | |
} | |
.multiselect-all{padding-left:0px!important;padding-top:8px!important;} | |
.multiselect-group{display: none;} | |
.multiselect-container>li>a>label{line-height:16px;padding-top:0;padding-bottom:0px} | |
</style> | |
<script> | |
$('.datepicker').datepicker({autoclose: true}) | |
$('.select2').multiselect({ | |
filterBehavior: 'text', | |
includeSelectAllOption: true, | |
enableClickableOptGroups: true, | |
enableCollapsibleOptGroups: true | |
}); | |
$('#trades_select').multiselect({ | |
enableFiltering: true, | |
filterBehavior: 'text' | |
}); | |
$('.daterange').daterangepicker({ | |
opens: 'right', | |
showDropdowns: true, | |
locale: { cancelLabel: 'Clear' } | |
}, function(start, end, label) { | |
$('#start_date').val(start.format('YYYY-MM-DD')); | |
$('#end_date').val(end.format('YYYY-MM-DD')); | |
}); | |
$('.daterange').on('cancel.daterangepicker', function(ev, picker) { | |
$(this).val(''); | |
$('#start_date').val(''); | |
$('#end_date').val(''); | |
var start_date = $('#start_date').val(); | |
var end_date = $('#end_date').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_overview") }}', | |
data: { | |
"start_date": start_date, | |
"end_date": end_date | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
if(chartData.labels.length == 1){ | |
$('#overview_none').removeClass("d-none") | |
} else { | |
$('#overview_none').addClass("d-none") | |
} | |
myPie.data = chartData; | |
myPie.update(); | |
} | |
}); | |
}); | |
$('.daterange').val(''); | |
var MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; | |
window.onload = function() { | |
var sites=$('.site_overview').val(); | |
var building_id= $('#building_id_filter_overview').val(); | |
var floor_id= $('#floor_id_filter_overview').val(); | |
var year= $('#year_filter_overview').val(); | |
var month= $('#month_filter_overview').val(); | |
var start_date= $('#start_date_filter_overview').val(); | |
var end_date= $('#end_date_filter_overview').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_overview") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id, | |
"year": year, | |
"month": month, | |
"start_date": start_date, | |
"end_date": end_date, | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
if (chartData.labels.length == 1) { | |
$('#overview_none').removeClass("d-none") | |
} else { | |
$('#overview_none').addClass("d-none") | |
var ctx0 = document.getElementById('canvas_overview').getContext('2d'); | |
var options = { | |
layout: { | |
padding: { | |
left: 120, | |
right: 120, | |
top: 100, | |
bottom: 100 | |
} | |
}, | |
responsive: true, | |
legendCallback: function (chart) { | |
var text = []; | |
text.push('<ul class="chart1-legend">'); | |
var data = chart.data; | |
var datasets = data.datasets; | |
var labels = data.labels; | |
var trade = data.trade; | |
if (datasets.length) { | |
for (var i = 0; i < datasets[0].data.length; ++i) { | |
text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>'); | |
if (labels[i]) { | |
//text.push(labels[i] + ' (' + datasets[0].data[i] + '%)'); | |
text.push(labels[i]); | |
} | |
text.push('</li>'); | |
} | |
} | |
text.push('</ul>'); | |
return text.join(''); | |
}, | |
legend: { | |
position: 'bottom', | |
labels: { | |
fontColor: "#000000", | |
fontSize: 12, | |
padding: 15, | |
boxWidth: 20, | |
}, | |
display: false, | |
}, | |
tooltips: { | |
callbacks: { | |
label: function(tooltipItem, data) { | |
//return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '% ('+ data['datasets'][0]['number'][tooltipItem['index']]+')'; | |
return data['labels'][tooltipItem['index']]; | |
} | |
} | |
}, | |
plugins: { | |
outlabels: { | |
//text: '%l %p', | |
text: '%l', | |
color: 'white', | |
stretch: 10, | |
borderRadius: 4, | |
borderWidth: 0, | |
display: true, | |
font: { | |
resizable: false, | |
minSize: 10, | |
maxSize: 12 | |
} | |
}, | |
datalabels: { | |
color: '#ffffff', | |
align: 'end', | |
anchor: 'end', | |
font: { | |
size: 11, | |
}, | |
offset: 0, | |
formatter: (value, ctx0) => { | |
let datasets = ctx0.chart.data.datasets; | |
let percentage = value + '%'; | |
if(value==0){ | |
return ''; | |
} else { | |
//return percentage; | |
return ''; | |
} | |
}, | |
} | |
}, | |
hover: { | |
onHover: function(e, el) { | |
$("canvas").css("cursor", el[0] ? "pointer" : "default"); | |
} | |
} | |
}; | |
window.myPie = new Chart(ctx0, { | |
type: 'pie', | |
data: chartData, | |
options: options | |
}); | |
var legend = myPie.generateLegend(); | |
document.getElementById("overview-legend").innerHTML = legend; | |
var canvas = document.getElementById('canvas_overview'); | |
canvas.onclick = function(evt) { | |
var activePoint = myPie.getElementAtEvent(evt)[0]; | |
var selectedIndex = activePoint._index; | |
if(activePoint !== undefined){ | |
var data = activePoint._chart.data; | |
var trade = encodeURIComponent(data.trade[activePoint._index]); | |
start_date=$('#start_date').val(); | |
end_date=$('#end_date').val(); | |
url="{{ url('/faults?trade=') }}"+trade; | |
if(start_date != undefined){ | |
url = url+"&start_date="+start_date+"&end_date="+end_date; | |
} | |
site_id_filter=$('.site_overview').val(); | |
building_id_filter=$('#building_id_filter_overview').val(); | |
floor_id_filter=$('#floor_id_filter_overview').val(); | |
month=$('#month_filter_overview').val(); | |
year=$('#year_filter_overview').val(); | |
selectedMonthName=""; | |
if(month!=""){ | |
var month_list = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; | |
var selectedMonthName = month_list[month-1]; | |
} | |
if(site_id_filter.length>0){ | |
if(site_id_filter != null && site_id_filter != ""){ | |
url = url + "&site_id="+site_id_filter; | |
} | |
if(building_id_filter != null && building_id_filter != ""){ | |
url = url + "&building_id="+building_id_filter; | |
} | |
if(floor_id_filter != null && floor_id_filter != ""){ | |
url = url + "&floor_id="+floor_id_filter; | |
} | |
if(month != null){ | |
url = url + "&month="+selectedMonthName; | |
} | |
if(year != null){ | |
url = url + "&year="+year; | |
} | |
window.location.href = url; | |
} | |
} | |
}; | |
} | |
} | |
}); | |
var year= $('#year_filter').val(); | |
var month= $('#month_filter').val(); | |
var sites=$('#site_id_filter').val(); | |
var building_id= $('#building_id_filter').val(); | |
var floor_id= $('#floor_id_filter').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_num_fault_stat") }}', | |
data: { | |
"year": year, | |
"month": month, | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
var ctx = document.getElementById('canvas').getContext('2d'); | |
window.myBar = new Chart(ctx, { | |
type: 'bar', | |
data: chartData, | |
options: { | |
responsive: true, | |
legend: { | |
position: 'bottom', | |
labels: { | |
fontSize: 11, | |
padding: 20, | |
boxWidth: 20, | |
}, | |
}, | |
title: { | |
display: false, | |
text: 'Total Number of Fault by System' | |
}, | |
scales: { | |
xAxes: [{ | |
barPercentage: 1, | |
categoryPercentage: 0.9 | |
}], | |
yAxes: [{ | |
display: true, | |
ticks: { | |
beginAtZero: true, | |
callback: function(value) {if (value % 1 === 0) {return value;}} | |
} | |
}] | |
}, | |
plugins: { | |
datalabels: { | |
color: '#222222', | |
align: 'end', | |
anchor: 'end', | |
padding: 0, | |
offset: 0, | |
font: { | |
size: 12, | |
}, | |
formatter: (value, ctx) => { | |
let datasets = ctx.chart.data.datasets; | |
let percentage = value; | |
if(value==0){ | |
return ''; | |
} else { | |
return percentage; | |
} | |
} | |
} | |
}, | |
layout: { | |
padding: { | |
top: 32, | |
} | |
}, | |
hover: { | |
onHover: function(e, el) { | |
$("canvas").css("cursor", el[0] ? "pointer" : "default"); | |
} | |
} | |
} | |
}); | |
var canvas = document.getElementById('canvas'); | |
canvas.onclick = function(evt) { | |
var activePoint = myBar.getElementAtEvent(evt)[0]; | |
if(activePoint !== undefined){ | |
var data = activePoint._chart.data; | |
var xValue = data.labels[activePoint._index]; | |
var datasetIndex = activePoint._datasetIndex; | |
var label = encodeURIComponent(data.datasets[datasetIndex].label); | |
var value = data.datasets[datasetIndex].data[activePoint._index]; | |
site_id_filter=$('#site_id_filter').val(); | |
building_id_filter=$('#building_id_filter').val(); | |
floor_id_filter=$('#floor_id_filter').val(); | |
year=$('#year_filter').val(); | |
month=xValue; | |
url="{{ url('/faults?trade=') }}"+label; | |
if(site_id_filter.length>0){ | |
if(site_id_filter != null && site_id_filter != ""){ | |
url = url + "&site_id="+site_id_filter; | |
} | |
if(building_id_filter != null && building_id_filter != ""){ | |
url = url + "&building_id="+building_id_filter; | |
} | |
if(floor_id_filter != null && floor_id_filter != ""){ | |
url = url + "&floor_id="+floor_id_filter; | |
} | |
if(month != null){ | |
url = url + "&month="+month; | |
} | |
if(year != null){ | |
url = url + "&year="+year; | |
} | |
window.location.href = url; | |
} | |
} | |
}; | |
} | |
}); | |
var year= $('#year_filter_status').val(); | |
var month= $('#month_filter_status').val(); | |
var sites= $('#site_id_filter_status').val(); | |
var building_id= $('#building_id_filter_status').val(); | |
var floor_id= $('#floor_id_filter_status').val(); | |
var trade_id= $('#trade_id_filter_status').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_status_stat") }}', | |
data: { | |
"year": year, | |
"month": month, | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id, | |
"trade_id": trade_id | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
var ctxStatus = document.getElementById('canvas_status').getContext('2d'); | |
window.myBarStatus = new Chart(ctxStatus, { | |
type: 'bar', | |
data: chartData, | |
options: { | |
responsive: true, | |
legend: { | |
position: 'bottom', | |
}, | |
title: { | |
display: false, | |
text: 'Fault Status' | |
}, | |
scales: { | |
yAxes: [{ | |
display: true, | |
ticks: { | |
beginAtZero: true, | |
callback: function(value) {if (value % 1 === 0) {return value;}} | |
} | |
}] | |
}, | |
plugins: { | |
datalabels: { | |
color: '#222222', | |
align: 'end', | |
anchor: 'end', | |
padding: 3, | |
offset: 0, | |
font: { | |
size: 12, | |
}, | |
formatter: (value, ctxStatus) => { | |
let datasets = ctxStatus.chart.data.datasets; | |
if(value==0){ | |
return ''; | |
} else { | |
return value; | |
} | |
} | |
} | |
}, | |
layout: { | |
padding: { | |
top: 32 | |
} | |
}, | |
hover: { | |
onHover: function(e, el) { | |
$("canvas").css("cursor", el[0] ? "pointer" : "default"); | |
} | |
} | |
} | |
}); | |
var canvas = document.getElementById('canvas_status'); | |
canvas.onclick = function(evt) { | |
var activePoint = myBarStatus.getElementAtEvent(evt)[0]; | |
if(activePoint !== undefined){ | |
var data = activePoint._chart.data; | |
var xValue = data.labels[activePoint._index]; | |
var datasetIndex = activePoint._datasetIndex; | |
var label = data.datasets[datasetIndex].label; | |
var value = data.datasets[datasetIndex].data[activePoint._index]; | |
site_id_filter=$('#site_id_filter_status').val(); | |
building_id_filter=$('#building_id_filter_status').val(); | |
floor_id_filter=$('#floor_id_filter_status').val(); | |
year=$('#year_filter_status').val(); | |
month=xValue; | |
url="{{ url('/faults?status=') }}"+label; | |
if(site_id_filter.length>0){ | |
if(site_id_filter != null && site_id_filter != ""){ | |
url = url + "&site_id="+site_id_filter; | |
} | |
if(building_id_filter != null && building_id_filter != ""){ | |
url = url + "&building_id="+building_id_filter; | |
} | |
if(floor_id_filter != null && floor_id_filter != ""){ | |
url = url + "&floor_id="+floor_id_filter; | |
} | |
if(month != null){ | |
url = url + "&month="+month; | |
} | |
if(year != null){ | |
url = url + "&year="+year; | |
} | |
window.location.href = url; | |
} | |
} | |
}; | |
} | |
}); | |
var sites= $('#site_id_filter2').val(); | |
var building_id= $('#building_id_filter2').val(); | |
var floor_id= $('#floor_id_filter2').val(); | |
var year_filter2= $('#year_filter2').val(); | |
var month_filter2= $('#month_filter2').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_responded_stat") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id, | |
"year": year_filter2, | |
"month": month_filter2 | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
var ctx2 = document.getElementById('canvas2').getContext('2d'); | |
window.myBar2 = new Chart(ctx2, { | |
type: 'bar', | |
data: chartData, | |
options: { | |
title: { | |
display: false, | |
text: 'Percentage of Fault Responded within 1 Hour' | |
}, | |
tooltips: { | |
mode: 'index', | |
intersect: false, | |
callbacks: { | |
label: function(tooltipItem, data) { | |
var dataset = data.datasets[tooltipItem.datasetIndex]; | |
var currentValue = dataset.data[tooltipItem.index]; | |
var percentage = currentValue; | |
return percentage + "% ("+dataset.number[tooltipItem.index]+")"; | |
} | |
} | |
}, | |
responsive: true, | |
scales: { | |
xAxes: [{ | |
stacked: true, | |
barPercentage: 0.8 | |
}], | |
yAxes: [{ | |
stacked: true, | |
scaleLabel: { | |
display: true, | |
labelString: "Percentage" | |
}, | |
ticks: { | |
beginAtZero: true | |
} | |
}] | |
}, | |
plugins: { | |
datalabels: { | |
color: 'white', | |
display: function(context) { | |
return context.dataset.data[context.dataIndex] > 0; | |
}, | |
formatter: (value, ctx2) => { | |
let datasets = ctx2.chart.data.datasets; | |
let percentage = value + '%'; | |
if(value==0){ | |
return ''; | |
} else { | |
return percentage; | |
} | |
} | |
} | |
}, | |
hover: { | |
onHover: function(e, el) { | |
$("canvas").css("cursor", el[0] ? "pointer" : "default"); | |
} | |
} | |
} | |
}); | |
var canvas = document.getElementById('canvas2'); | |
canvas.onclick = function(evt) { | |
var activePoint = myBar2.getElementAtEvent(evt)[0]; | |
if(activePoint !== undefined){ | |
var data = activePoint._chart.data; | |
var xValue = encodeURIComponent(data.labels[activePoint._index]); | |
var datasetIndex = activePoint._datasetIndex; | |
var label = data.datasets[datasetIndex].label; | |
var value = data.datasets[datasetIndex].data[activePoint._index]; | |
site_id_filter=$('#site_id_filter2').val(); | |
building_id_filter=$('#building_id_filter2').val(); | |
floor_id_filter=$('#floor_id_filter2').val(); | |
month=$('#month_filter2').val(); | |
year=$('#year_filter2').val(); | |
selectedMonthName=""; | |
if(month!=""){ | |
var month_list = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; | |
var selectedMonthName = month_list[month-1]; | |
} | |
url="{{ url('/faults?trade=') }}"+xValue; | |
if(site_id_filter.length>0){ | |
if(site_id_filter != null && site_id_filter != ""){ | |
url = url + "&site_id="+site_id_filter; | |
} | |
if(building_id_filter != null && building_id_filter != ""){ | |
url = url + "&building_id="+building_id_filter; | |
} | |
if(floor_id_filter != null && floor_id_filter != ""){ | |
url = url + "&floor_id="+floor_id_filter; | |
} | |
if(label == "Respondend within 1 hour"){ | |
url = url + "&response_time=quick"; | |
} else { | |
url = url + "&response_time=fail"; | |
} | |
if(month != null){ | |
url = url + "&month="+selectedMonthName; | |
} | |
if(year != null){ | |
url = url + "&year="+year; | |
} | |
window.location.href = url; | |
} | |
} | |
}; | |
} | |
}); | |
var sites= $('#site_id_filter_floor').val(); | |
var building_id= $('#building_id_filter_floor').val(); | |
var year= $('#year_filter_floor').val(); | |
var month= $('#month_filter_floor').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_by_floor") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"year": year, | |
"month": month | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
var ctx3 = document.getElementById('canvas_floor').getContext('2d'); | |
window.myBarFloor = new Chart(ctx3, { | |
type: 'horizontalBar', | |
data: chartData, | |
options: { | |
elements: { | |
rectangle: { | |
borderWidth: 1, | |
} | |
}, | |
scales: { | |
yAxes: [{ | |
barPercentage: 0.8, | |
ticks: { | |
fontSize: 11 | |
} | |
}] | |
}, | |
plugins: { | |
datalabels: { | |
color: '#222222', | |
align: 'end', | |
anchor: 'end', | |
padding: 3, | |
offset: 0, | |
font: { | |
size: 12, | |
}, | |
display: function(context) { | |
return context.dataset.data[context.dataIndex] > 0; | |
}, | |
formatter: (value, ctx3) => { | |
let datasets = ctx3.chart.data.datasets; | |
if(value==0){ | |
return ''; | |
} else { | |
return value; | |
} | |
} | |
} | |
}, | |
layout: { | |
padding: { | |
right: 32 | |
} | |
}, | |
legend: { | |
display: false | |
}, | |
responsive: true, | |
maintainAspectRatio: false, | |
hover: { | |
onHover: function(e, el) { | |
$("#canvas_floor").css("cursor", el[0] ? "pointer" : "default"); | |
} | |
} | |
} | |
}); | |
var canvas = document.getElementById('canvas_floor'); | |
canvas.onclick = function(evt) { | |
var activePoint = myBarFloor.getElementAtEvent(evt)[0]; | |
if(activePoint !== undefined){ | |
var data = activePoint._chart.data; | |
site_id=data.locations[activePoint._index]['site_id']; | |
building_id=data.locations[activePoint._index]['building_id']; | |
floor_id=data.locations[activePoint._index]['floor_id']; | |
url="{{ url('/faults?site_id=') }}"+site_id+ "&building_id="+building_id+ "&floor_id="+floor_id; | |
var year= $('#year_filter_floor').val(); | |
var month= $('#month_filter_floor').val(); | |
if(month != null){ | |
url = url + "&month="+month; | |
} | |
if(year != null){ | |
url = url + "&year="+year; | |
} | |
window.location.href = url; | |
} | |
}; | |
} | |
}); | |
var year= $('#year_filter_breakdown').val(); | |
var month= $('#month_filter_breakdown').val(); | |
var sites= $('#site_id_filter_breakdown').val(); | |
var building_id= $('#building_id_filter_breakdown').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_breakdown") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"year": year, | |
"month": month, | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
var ctx4 = document.getElementById('canvas_breakdown').getContext('2d'); | |
window.myBarBreakdown = new Chart(ctx4, { | |
type: 'horizontalBar', | |
data: chartData, | |
options: { | |
elements: { | |
rectangle: { | |
borderWidth: 1, | |
} | |
}, | |
scales: { | |
yAxes: [{ | |
barPercentage: 0.8, | |
ticks: { | |
fontSize: 12 | |
} | |
}] | |
}, | |
plugins: { | |
datalabels: { | |
color: '#222222', | |
align: 'end', | |
anchor: 'end', | |
padding: 3, | |
offset: 0, | |
font: { | |
size: 12, | |
}, | |
display: function(context) { | |
return context.dataset.data[context.dataIndex] > 0; | |
}, | |
formatter: (value, ctx4) => { | |
let datasets = ctx4.chart.data.datasets; | |
if(value==0){ | |
return ''; | |
} else { | |
return value; | |
} | |
} | |
} | |
}, | |
layout: { | |
padding: { | |
right: 32 | |
} | |
}, | |
legend: { | |
display: false | |
}, | |
responsive: true, | |
maintainAspectRatio: false, | |
hover: { | |
onHover: function(e, el) { | |
$("#canvas_breakdown").css("cursor", el[0] ? "pointer" : "default"); | |
} | |
} | |
} | |
}); | |
var canvas = document.getElementById('canvas_breakdown'); | |
canvas.onclick = function(evt) { | |
var activePoint = myBarBreakdown.getElementAtEvent(evt)[0]; | |
if(activePoint !== undefined){ | |
var data = activePoint._chart.data; | |
fault_category_id=data.fault_category_id[activePoint._index]; | |
month=data.month[activePoint._index]; | |
site_id_filter=$('#site_id_filter_breakdown').val(); | |
building_id_filter=$('#building_id_filter_breakdown').val(); | |
floor_id_filter=$('#floor_id_filter_breakdown').val(); | |
year=$('#year_filter_breakdown').val(); | |
url="{{ url('/faults?fault_category_id=') }}"+fault_category_id; | |
if(site_id_filter.length>0){ | |
if(site_id_filter != null && site_id_filter != ""){ | |
url = url + "&site_id="+site_id_filter; | |
} | |
if(building_id_filter != null && building_id_filter != ""){ | |
url = url + "&building_id="+building_id_filter; | |
} | |
if(floor_id_filter != null && floor_id_filter != ""){ | |
url = url + "&floor_id="+floor_id_filter; | |
} | |
if(month != null){ | |
url = url + "&month="+month; | |
} | |
if(year != null){ | |
url = url + "&year="+year; | |
} | |
window.location.href = url; | |
} | |
} | |
}; | |
} | |
}); | |
}; | |
<?php if($site_count==1) { ?> | |
var sites = $('.site_overview').val(); | |
var site_id = sites[0]; | |
if(site_id!=""){ | |
$('#building_id_filter_overview').removeAttr('disabled'); | |
$('#building_id_filter').removeAttr('disabled'); | |
$('#building_id_filter2').removeAttr('disabled'); | |
$('#building_id_filter_status').removeAttr('disabled'); | |
$('#building_id_filter_floor').removeAttr('disabled'); | |
$('#building_id_filter_breakdown').removeAttr('disabled'); | |
var url = "{{ url('get_buildings') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter_overview').append('<option value="">- All buildings -</option>'); | |
$('#building_id_filter').append('<option value="">- All buildings -</option>'); | |
$('#building_id_filter2').append('<option value="">- All buildings -</option>'); | |
$('#building_id_filter_status').append('<option value="">- All buildings -</option>'); | |
$('#building_id_filter_floor').append('<option value="">- All buildings -</option>'); | |
$('#building_id_filter_breakdown').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter_overview').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
$('#building_id_filter').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
$('#building_id_filter2').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
$('#building_id_filter_status').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
$('#building_id_filter_floor').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
$('#building_id_filter_breakdown').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} | |
<?php }?> | |
$('#daterange_filter').change(function() { | |
var daterange = $(this).val(); | |
if(daterange!=""){ | |
var start_date = $('#start_date').val(); | |
var end_date = $('#end_date').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_overview") }}', | |
data: { | |
"start_date": start_date, | |
"end_date": end_date | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
myPie.data = chartData; | |
myPie.update(); | |
} | |
}); | |
} | |
}); | |
$('#site_id_filter_overview').change(function() { | |
var site_id = $(this).val(); | |
$('#building_id_filter_overview').html(''); | |
$('#floor_id_filter_overview').html(''); | |
$('#building_id_filter_overview').val(''); | |
$('#floor_id_filter_overview').val(''); | |
if(site_id!=""){ | |
$('#building_id_filter_overview').removeAttr('disabled'); | |
$('#floor_id_filter_overview').attr('disabled','disabled'); | |
var url = "{{ url('get_buildings') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter_overview').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter_overview').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#building_id_filter_overview').attr('disabled','disabled'); | |
$('#floor_id_filter_overview').attr('disabled','disabled'); | |
} | |
}); | |
$('#building_id_filter_overview').change(function() { | |
var sites=$('.site_overview').val(); | |
var site_id = sites[0]; | |
var building_id= $('#building_id_filter_overview').val(); | |
var floor_id= $('#floor_id_filter_overview').val(); | |
$('#floor_id_filter_overview').html(''); | |
$('#floor_id_filter_overview').val(''); | |
if(site_id!=""){ | |
$('#floor_id_filter_overview').removeAttr('disabled'); | |
var url = "{{ url('get_floors') }}/"+building_id; | |
$.getJSON(url, function (data) { | |
$('#floor_id_filter_overview').append('<option value="">- All floors -</option>'); | |
$.each(data, function (index, value) { | |
$('#floor_id_filter_overview').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#floor_id_filter_overview').attr('disabled','disabled'); | |
} | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_overview") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
if(chartData.labels.length == 1){ | |
$('#overview_none').removeClass("d-none") | |
} else { | |
$('#overview_none').addClass("d-none") | |
} | |
myPie.data = chartData; | |
myPie.update(); | |
var legend = myPie.generateLegend(); | |
document.getElementById("overview-legend").innerHTML = legend; | |
} | |
}); | |
}); | |
$('#floor_id_filter_overview').change(function() { | |
var sites=$('.site_overview').val(); | |
var site_id = sites[0]; | |
var building_id= $('#building_id_filter_overview').val(); | |
var floor_id= $('#floor_id_filter_overview').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_overview") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
if(chartData.labels.length == 1){ | |
$('#overview_none').removeClass("d-none") | |
} else { | |
$('#overview_none').addClass("d-none") | |
} | |
myPie.data = chartData; | |
myPie.update(); | |
var legend = myPie.generateLegend(); | |
document.getElementById("overview-legend").innerHTML = legend; | |
} | |
}); | |
}); | |
$('.site_overview').change(function() { | |
var sites=$(this).val(); | |
var building_id= $('#building_id_filter_overview').val(); | |
var floor_id= $('#floor_id_filter_overview').val(); | |
$('#location_overview').hide(); | |
$('#building_id_filter_overview').attr('disabled','disabled'); | |
$('#floor_id_filter_overview').attr('disabled','disabled'); | |
$('#building_id_filter_overview').html(''); | |
$('#floor_id_filter_overview').html(''); | |
$('#building_id_filter_overview').val(''); | |
$('#floor_id_filter_overview').val(''); | |
if(sites.length>1){ | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_overview") }}', | |
data: { | |
"sites": sites | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
if(chartData.labels.length == 1){ | |
$('#overview_none').removeClass("d-none") | |
} else { | |
$('#overview_none').addClass("d-none") | |
} | |
myPie.data = chartData; | |
myPie.update(); | |
var legend = myPie.generateLegend(); | |
document.getElementById("overview-legend").innerHTML = legend; | |
} | |
}); | |
} else { | |
if(sites.length==1){ | |
$('#location_overview').show(); | |
} | |
var site_id = sites[0]; | |
$('#building_id_filter_overview').html(''); | |
$('#floor_id_filter_overview').html(''); | |
$('#building_id_filter_overview').val(''); | |
$('#floor_id_filter_overview').val(''); | |
if(site_id!=""){ | |
$('#building_id_filter_overview').removeAttr('disabled'); | |
$('#floor_id_filter_overview').attr('disabled','disabled'); | |
var url = "{{ url('get_buildings') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter_overview').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter_overview').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#building_id_filter_overview').attr('disabled','disabled'); | |
$('#floor_id_filter_overview').attr('disabled','disabled'); | |
} | |
} | |
}); | |
$('.filter_overview').change(function() { | |
var sites= $('.site_overview').val(); | |
var building_id= $('#building_id_filter_overview').val(); | |
var floor_id= $('#floor_id_filter_overview').val(); | |
var year= $('#year_filter_overview').val(); | |
var month= $('#month_filter_overview').val(); | |
var start_date= $('#start_date_filter_overview').val(); | |
var end_date= $('#end_date_filter_overview').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_overview") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id, | |
"year": year, | |
"month": month, | |
"start_date": start_date, | |
"end_date": end_date, | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
if(chartData.labels.length == 1){ | |
$('#overview_none').removeClass("d-none") | |
} else { | |
$('#overview_none').addClass("d-none") | |
} | |
myPie.data = chartData; | |
myPie.update(); | |
var legend = myPie.generateLegend(); | |
document.getElementById("overview-legend").innerHTML = legend; | |
} | |
}); | |
}); | |
$('#site_id_filter').change(function() { | |
var sites = $(this).val(); | |
$('#building_id_filter').html(''); | |
$('#floor_id_filter').html(''); | |
$('#building_id_filter').val(''); | |
$('#floor_id_filter').val(''); | |
if(sites.length==1){ | |
$('#location_defect').show(); | |
var site_id = sites[0]; | |
if(site_id!=""){ | |
$('#building_id_filter').removeAttr('disabled'); | |
$('#floor_id_filter').attr('disabled','disabled'); | |
var url = "{{ url('get_buildings') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#building_id_filter').attr('disabled','disabled'); | |
$('#floor_id_filter').attr('disabled','disabled'); | |
} | |
} else { | |
$('#location_defect').hide(); | |
} | |
}); | |
$('#building_id_filter').change(function() { | |
var building_id = $(this).val(); | |
$('#floor_id_filter').html(''); | |
$('#floor_id_filter').val(''); | |
if(building_id!=""){ | |
$('#floor_id_filter').removeAttr('disabled'); | |
var url = "{{ url('get_floors') }}/"+building_id; | |
$.getJSON(url, function (data) { | |
$('#floor_id_filter').append('<option value="">- All floors -</option>'); | |
$.each(data, function (index, value) { | |
$('#floor_id_filter').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#floor_id_filter').attr('disabled','disabled'); | |
} | |
}); | |
$('.filter').change(function() { | |
var year= $('#year_filter').val(); | |
var month= $('#month_filter').val(); | |
var sites= $('#site_id_filter').val(); | |
var building_id= $('#building_id_filter').val(); | |
var floor_id= $('#floor_id_filter').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_num_fault_stat") }}', | |
data: { | |
"year": year, | |
"month": month, | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
myBar.data = chartData; | |
myBar.update(); | |
} | |
}); | |
}); | |
$('#site_id_filter2').change(function() { | |
var sites = $(this).val(); | |
$('#building_id_filter2').html(''); | |
$('#floor_id_filter2').html(''); | |
$('#building_id_filter2').val(''); | |
$('#floor_id_filter2').val(''); | |
if(sites.length==1){ | |
$('#location_percentage').show(); | |
var site_id = sites[0]; | |
if(site_id!=""){ | |
$('#building_id_filter2').removeAttr('disabled'); | |
$('#floor_id_filter2').attr('disabled','disabled'); | |
var url = "{{ url('get_buildings') }}/"+sites; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter2').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter2').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#building_id_filter2').attr('disabled','disabled'); | |
$('#floor_id_filter2').attr('disabled','disabled'); | |
} | |
} else { | |
$('#location_percentage').hide(); | |
} | |
}); | |
$('#building_id_filter2').change(function() { | |
var building_id = $(this).val(); | |
$('#floor_id_filter2').html(''); | |
$('#floor_id_filter2').val(''); | |
if(building_id!=""){ | |
$('#floor_id_filter2').removeAttr('disabled'); | |
var url = "{{ url('get_floors') }}/"+building_id; | |
$.getJSON(url, function (data) { | |
$('#floor_id_filter2').append('<option value="">- All floors -</option>'); | |
$.each(data, function (index, value) { | |
$('#floor_id_filter2').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#floor_id_filter2').attr('disabled','disabled'); | |
} | |
}); | |
$('.filter2').change(function() { | |
var sites= $('#site_id_filter2').val(); | |
var building_id= $('#building_id_filter2').val(); | |
var floor_id= $('#floor_id_filter2').val(); | |
var year_filter2= $('#year_filter2').val(); | |
var month_filter2= $('#month_filter2').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_responded_stat") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id, | |
"year": year_filter2, | |
"month": month_filter2 | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
myBar2.data = chartData; | |
myBar2.update(); | |
} | |
}); | |
}); | |
$('#site_id_filter_status').change(function() { | |
var sites = $(this).val(); | |
$('#building_id_filter_status').html(''); | |
$('#floor_id_filter_status').html(''); | |
$('#building_id_filter_status').val(''); | |
$('#floor_id_filter_status').val(''); | |
if(sites.length==1){ | |
$('#location_status').show(); | |
var site_id = sites[0]; | |
if(site_id!=""){ | |
$('#building_id_filter_status').removeAttr('disabled'); | |
$('#floor_id_filter_status').attr('disabled','disabled'); | |
var url = "{{ url('get_buildings') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter_status').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter_status').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#building_id_filter_status').attr('disabled','disabled'); | |
$('#floor_id_filter_status').attr('disabled','disabled'); | |
} | |
} else { | |
$('#location_status').hide(); | |
} | |
}); | |
$('#building_id_filter_status').change(function() { | |
var site_id = $(this).val(); | |
$('#floor_id_filter_status').html(''); | |
$('#floor_id_filter_status').val(''); | |
if(site_id!=""){ | |
$('#floor_id_filter_status').removeAttr('disabled'); | |
var url = "{{ url('get_floors') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#floor_id_filter_status').append('<option value="">- All floors -</option>'); | |
$.each(data, function (index, value) { | |
$('#floor_id_filter_status').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#floor_id_filter_status').attr('disabled','disabled'); | |
} | |
}); | |
$('.filter_status').change(function() { | |
var year= $('#year_filter_status').val(); | |
var month= $('#month_filter_status').val(); | |
var sites= $('#site_id_filter_status').val(); | |
var building_id= $('#building_id_filter_status').val(); | |
var floor_id= $('#floor_id_filter_status').val(); | |
var trade_id= $('#trade_id_filter_status').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_status_stat") }}', | |
data: { | |
"year": year, | |
"month": month, | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id, | |
"trade_id": trade_id | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
myBarStatus.data = chartData; | |
myBarStatus.update(); | |
} | |
}); | |
}); | |
$('#site_id_filter_floor').change(function() { | |
var sites = $(this).val(); | |
$('#building_id_filter_floor').html(''); | |
$('#floor_id_filter2').html(''); | |
if(sites.length==1){ | |
$('#location_floor').show(); | |
var site_id = sites[0]; | |
if(site_id!=""){ | |
$('#building_id_filter_floor').removeAttr('disabled'); | |
var url = "{{ url('get_buildings') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter_floor').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter_floor').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#building_id_filter_floor').attr('disabled','disabled'); | |
} | |
} else { | |
$('#location_floor').hide(); | |
} | |
}); | |
$('.filter_floor').change(function() { | |
var sites= $('#site_id_filter_floor').val(); | |
var building_id= $('#building_id_filter_floor').val(); | |
var year= $('#year_filter_floor').val(); | |
var month= $('#month_filter_floor').val(); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_by_floor") }}', | |
data: { | |
"sites": sites, | |
"building_id": building_id, | |
"year": year, | |
"month": month | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
myBarFloor.data = chartData; | |
myBarFloor.update(); | |
} | |
}); | |
}); | |
$('#site_id_filter_breakdown').change(function() { | |
var sites = $(this).val(); | |
$('#building_id_filter_breakdown').html(''); | |
$('#floor_id_filter_breakdown').html(''); | |
$('#building_id_filter_breakdown').val(''); | |
$('#floor_id_filter_breakdown').val(''); | |
if(sites.length==1){ | |
$('#location_breakdown').show(); | |
var site_id = sites[0]; | |
if(site_id!=""){ | |
$('#building_id_filter_breakdown').removeAttr('disabled'); | |
$('#floor_id_filter_breakdown').attr('disabled','disabled'); | |
var url = "{{ url('get_buildings') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#building_id_filter_breakdown').append('<option value="">- All buildings -</option>'); | |
$.each(data, function (index, value) { | |
$('#building_id_filter_breakdown').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#building_id_filter_breakdown').attr('disabled','disabled'); | |
$('#floor_id_filter_breakdown').attr('disabled','disabled'); | |
} | |
} else { | |
$('#location_breakdown').hide(); | |
} | |
}); | |
$('#building_id_filter_breakdown').change(function() { | |
var site_id = $(this).val(); | |
$('#floor_id_filter_breakdown').html(''); | |
$('#floor_id_filter_breakdown').val(''); | |
if(site_id!=""){ | |
$('#floor_id_filter_breakdown').removeAttr('disabled'); | |
var url = "{{ url('get_floors') }}/"+site_id; | |
$.getJSON(url, function (data) { | |
$('#floor_id_filter_breakdown').append('<option value="">- All floors -</option>'); | |
$.each(data, function (index, value) { | |
$('#floor_id_filter_breakdown').append('<option value="' + value.id + '">' + value.name + '</option>'); | |
}); | |
}); | |
} else { | |
$('#floor_id_filter_status').attr('disabled','disabled'); | |
} | |
}); | |
$('.filter_breakdown').change(function() { | |
var year= $('#year_filter_breakdown').val(); | |
var month= $('#month_filter_breakdown').val(); | |
var sites= $('#site_id_filter_breakdown').val(); | |
var building_id= $('#building_id_filter_breakdown').val(); | |
var floor_id= $('#floor_id_filter_breakdown').val(); | |
console.log(sites); | |
$.ajax({ | |
type: 'GET', | |
url: '{{ url("get_fault_breakdown") }}', | |
data: { | |
"year": year, | |
"month": month, | |
"sites": sites, | |
"building_id": building_id, | |
"floor_id": floor_id | |
}, | |
error: function (msg) { | |
}, | |
dataType: "json", | |
success: function (chartData, textStatus, jqXHR){ | |
myBarBreakdown.data = chartData; | |
myBarBreakdown.update(); | |
} | |
}); | |
}); | |
</script> | |
</div> | |
<div class="clearfix"></div> | |
<?php } else {?> | |
<div class="row"> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="service_provider" || $role_name=="end_user" || $role_name=="help_desk" || $role_name=="site_staff" || $role_name=="ordinary") {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/faults') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead font-size-large"><i class="display-block fa fa-chain-broken text-xlarge"></i> Faults</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="service_provider" || $role_name=="help_desk" || $role_name=="site_staff" || $role_name=="ordinary") {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/adhoc_works') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-server text-xlarge"></i> Corrective Maintenance</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="service_provider" || $role_name=="help_desk" || $role_name=="account" || $role_name=="site_staff") {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/purchase_orders') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-money text-xlarge"></i> Purchase Orders</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || Auth::user()->position_id==16 || Auth::user()->position_id==14 ||Auth::user()->position_id==4) {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/claims') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-list-alt text-xlarge"></i> Claims</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="service_provider" || $role_name=="help_desk" || $role_name=="site_staff") {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/work_orders') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-clipboard text-xlarge"></i> Work Orders</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="help_desk" || $role_name=="site_staff" || $role_name=="service_provider" || $role_name=="end_user" || $role_name=="ordinary") {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/schedule_calendar') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-calendar text-xlarge"></i> Schedules</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="help_desk" || $role_name=="site_staff" || $role_name=="service_provider" || $role_name=="other" || $role_name=="ordinary") {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/assets') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-folder text-xlarge"></i> Assets</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin" || $role_name=="help_desk" || $role_name=="site_staff" || $role_name=="service_provider" || $role_name=="other" || $role_name=="ordinary" || $role_name=="end_user" ) {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/inventory_request_listing') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-archive text-xlarge"></i> Inventories</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<?php if($role_name=="super_admin" || $role_name=="admin") {?> | |
<div class="col-md-4"> | |
<a href="{{ url('/users') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-comments text-xlarge"></i> Users</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<?php }?> | |
<div class="col-md-4"> | |
<a href="{{ url('/broadcasts') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-bullhorn text-xlarge"></i> Broadcast</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
<div class="col-md-4"> | |
<a href="{{ url('/logout') }}" class="widget widget-icon default innerAll inner-2x text-center text-regular"> | |
<span class="lead"><i class="display-block fa fa-sign-out text-xlarge"></i> Logout</span> | |
</a> | |
<div class="separator"></div> | |
</div> | |
</div> | |
<?php }?> | |
</div> | |
</section> | |
</div> | |
<div class="clearfix"></div> | |
@endsection |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment