340 lines
14 KiB
PHP
Executable File
340 lines
14 KiB
PHP
Executable File
@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])
|
|
|
|
@section('css')
|
|
<!-- third party css -->
|
|
<link href="{{asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<link href="{{asset('assets/libs/selectize/selectize.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<link href="{{asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<!-- third party css end -->
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="page-title-box">
|
|
<h4 class="page-title">Dashboard</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mt-2">
|
|
<a href="/index?refresh=1" class="btn btn-dark rounded waves-effect waves-light float-end">Refresh Data</a>
|
|
</div>
|
|
</div>
|
|
@php
|
|
$roles = json_decode(auth()->user()->roles);
|
|
|
|
@endphp
|
|
|
|
<div class="row">
|
|
@foreach($metrics as $metric)
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-0">{{$metric->name}}</h4>
|
|
<h6>{{$metric->current_period}}</h6>
|
|
<div class="widget-chart text-center" dir="ltr">
|
|
<div id="chart-{{$metric->id}}" class="mt-0" data-colors="#f1556c"></div>
|
|
<h5 class="text-muted mt-0">{{$metric->label}}</h5>
|
|
<h2>{{$metric->value}} {{$metric->type=='verses' ? ' / ' . $metric->max : ''}} </h2>
|
|
<div class="button-list">
|
|
@foreach($metric->available_charts as $chart)
|
|
<a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}} Chart</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col-->
|
|
@endforeach
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="card p-2">
|
|
<h6 class="mb-2">Copy and share unique Paramedic register link.</h6>
|
|
<textarea name="" id="linkcontainer" rows="3" class="form-control">https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}</textarea>
|
|
<button type="button" class="btn btn-primary mt-2" id="copylink">Copy Link</button>
|
|
</div>
|
|
<div class="card p-2">
|
|
<h6 class="mb-2">Copy and share unique Chemist register link.</h6>
|
|
<textarea name="" id="linkcontainerchemist" rows="3" class="form-control">https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}</textarea>
|
|
<button type="button" class="btn btn-primary mt-2" id="copylinkchemist">Copy Link</button>
|
|
</div>
|
|
</div> <!-- end col -->
|
|
<div class="col-6">
|
|
<div class="card p-2">
|
|
<p class="mb-2">Download and share unique QR Code with register link.</p>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<h6>Paramedic QR Code</h6>
|
|
<div class="align-center">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}" class="img-fluid">
|
|
</div>
|
|
<a href="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}" target="_blank" download class="btn btn-primary mt-2">Paramedic QR Code</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<h6>Chemist QR Code</h6>
|
|
<div class="align-center">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}" class="img-fluid">
|
|
</div>
|
|
<a href="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}" target="_blank" download class="btn btn-primary mt-2">Chemist QR Code</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
@foreach($sessions as $sess)
|
|
<div class="col-md-6 col-xl-3">
|
|
<div class="card" id="tooltip-container">
|
|
<div class="card-body">
|
|
<i class="fa fa-info-circle text-muted float-end" data-bs-container="#tooltip-container" data-bs-toggle="tooltip" data-bs-placement="bottom" title="More Info"></i>
|
|
<h4 class="mt-0 font-16">{{$sess->number}} ({{$sess->type}})</h4>
|
|
<h2 class="text-primary my-3 text-center"><span data-plugin="counterup">{{$sess->reg_confirmed}}</span> / <span data-plugin="counterup">{{$sess->reg_count}}</span></h2>
|
|
<p class="text-muted mb-0">{{date("d M Y", strtotime($sess->start_date))}} <span class="float-end">{{$sess->venue}}</span></p>
|
|
<div class="button-list mt-2">
|
|
<a href="/session/visit?id={{$sess->id}}" class="btn btn-success btn-xs waves-effect waves-light"><i class="mdi mdi-web"></i> Microsite</a>
|
|
<a href="/analytic/sessionusers?id={{$sess->id}}" class="btn btn-danger btn-xs waves-effect waves-light"><i class="mdi mdi-account"></i> Analytics</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
|
|
</div> <!-- container -->
|
|
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- third party js -->
|
|
<script src="{{asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
|
|
<script src="{{ URL::asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.js')}}"></script>
|
|
<script src="{{ URL::asset('assets/js/pages/toastr.init.js')}}"></script>
|
|
<!-- third party js ends -->
|
|
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
$('#copylink').click(function(){
|
|
try {
|
|
copyToClipboard("https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}");
|
|
$.NotificationApp.send("success!", "Copied the link to your Clipboard", 'top-center', '#5ba035', 'success');
|
|
} catch (err) {
|
|
$.NotificationApp.send("Oops, unable to copy!", "Please copy the link manually.", 'top-center', '#bf441d', 'error');
|
|
//console.log('Oops, unable to copy');
|
|
}
|
|
});
|
|
$('#copylinkchemist').click(function(){
|
|
try {
|
|
copyToClipboard("https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}");
|
|
$.NotificationApp.send("success!", "Copied the link to your Clipboard", 'top-center', '#5ba035', 'success');
|
|
} catch (err) {
|
|
$.NotificationApp.send("Oops, unable to copy!", "Please copy the link manually.", 'top-center', '#bf441d', 'error');
|
|
//console.log('Oops, unable to copy');
|
|
}
|
|
});
|
|
});
|
|
function copyToClipboard(textToCopy) {
|
|
var textArea;
|
|
function isOS() {
|
|
//can use a better detection logic here
|
|
return navigator.userAgent.match(/ipad|iphone/i);
|
|
}
|
|
|
|
function createTextArea(text) {
|
|
textArea = document.createElement('textArea');
|
|
textArea.readOnly = true;
|
|
textArea.contentEditable = true;
|
|
textArea.value = text;
|
|
document.body.appendChild(textArea);
|
|
}
|
|
|
|
function selectText() {
|
|
var range, selection;
|
|
|
|
if (isOS()) {
|
|
range = document.createRange();
|
|
range.selectNodeContents(textArea);
|
|
selection = window.getSelection();
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
textArea.setSelectionRange(0, 999999);
|
|
} else {
|
|
textArea.select();
|
|
}
|
|
}
|
|
|
|
function copyTo() {
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textArea);
|
|
}
|
|
|
|
createTextArea(textToCopy);
|
|
selectText();
|
|
copyTo();
|
|
}
|
|
</script>
|
|
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
|
|
<!-- third party js ends -->
|
|
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
var colors = ['#01C14B', '#FF8050', '#4A5CD0', '#FECD00', '#707070'];
|
|
var dataColors = $("#total-revenue").data('colors');
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
let options = {}
|
|
let chart = {}
|
|
let values = []
|
|
@foreach($metrics as $metric)
|
|
@if($metric->agg_type == 'individual')
|
|
@if($metric->type == 'grouped')
|
|
values = {!!json_encode($metric->values)!!}
|
|
options = {
|
|
series: values.map(a => a.value),
|
|
chart: {
|
|
width: 250,
|
|
type: 'pie',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
labels: values.map(a => a.label),
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 250
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
@elseif($metric->type == 'simple')
|
|
options = {
|
|
series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
|
|
chart: {
|
|
height: 250,
|
|
type: 'radialBar',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -90,
|
|
endAngle: 270,
|
|
hollow: {
|
|
size: '58%',
|
|
}
|
|
},
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
shadeIntensity: 0.15,
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 7
|
|
},
|
|
colors: colors,
|
|
labels: ['{{$metric->label}}'],
|
|
};
|
|
@endif
|
|
|
|
@elseif($metric->agg_type == 'team')
|
|
@if($metric->type == 'grouped')
|
|
values = {!!json_encode($metric->values)!!}
|
|
options = {
|
|
series: values.map(a => a.value),
|
|
chart: {
|
|
width: 250,
|
|
type: 'pie',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
labels: values.map(a => a.label),
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 250
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
@elseif($metric->type == 'simple' || $metric->type == 'verses')
|
|
options = {
|
|
series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
|
|
chart: {
|
|
height: 250,
|
|
type: 'radialBar',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '68%',
|
|
}
|
|
},
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 4
|
|
},
|
|
colors: colors,
|
|
labels: ['{{$metric->label}}'],
|
|
};
|
|
@endif
|
|
@endif
|
|
chart['{{$metric->id}}'] = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
|
|
chart['{{$metric->id}}'].render();
|
|
@endforeach
|
|
});
|
|
</script>
|
|
|
|
|
|
@endsection |