File: /home/barbeatleanalyti/www/baris.beatleanalytics.com/site 19-2-2019 1.29PM/template/dashboardma.php
<?php
// Declare new object
$objDashboard = object;
// Assing object
$objDashboard = $objDB->objController;
// Assign all variable's value
$pg = $objDashboard->pg;
$acn = $objDashboard->acn;
$Email = $objDashboard->Email;
$Password = $objDashboard->Password;
$error = $objDashboard->error;
$msg = $objDashboard->msg;
$p = $objDashboard->p;
$m = $objDashboard->m;
$y = $objDashboard->y;
$FromDate = $objDashboard->FromDate;
$ToDate = $objDashboard->ToDate;
$PageID = $objDashboard->PageID;
$PageConID = $objDashboard->PageConID;
$atype = $objDashboard->atype;
$BranchID = $objDashboard->BranchID;
$IndustryID = $objDashboard->IndustryID;
$NoData = $objDashboard->NoData;
if(!method_exists($objDashboard,$acn)){
ReturnPostFormData($ValidateArr = array(),"error.html","<span class='error-msg'>Method <strong>".$acn."</strong> does not exist in <strong>".$pg."</strong> file !</span>",2);
}
$feedCount = fetchTotalFeedbackNewReport(0);
$performanceArr = $objDashboard->fetchRatingForNewReportWeekly();
/*echo "<pre>";
print_r($performanceArr);*/
$days = "'".implode("','",$performanceArr['days'])."'";
$weeklyPerformanceFinalArr = array();
$weeklyPerformanceFinalArr['weekly_feedback_total'][] = $performanceArr['weekly_feedback_total'];
$perforArr = array();
$perforArr['wfbtotal'] = array(0,0,0,0,0,0,0);
for($wpday = 0; $wpday < 7; $wpday++) {
$perforArr['wfbtotal'][$wpday];
for($wp = 0; $wp<count($weeklyPerformanceFinalArr['weekly_feedback_total']); $wp++ ){
$perforArr['wfbtotal'][$wpday] = (float)number_format(($perforArr['wfbtotal'][$wpday] + $weeklyPerformanceFinalArr['weekly_feedback_total'][$wp][$wpday]),2);
}
}
/*echo "<pre>";
print_r($perforArr['wfbtotal']);
echo "<pre>"*/
?>
<!--
data table
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
--->
<link rel="stylesheet" href="<?php echo $curImagePath?>/dist/css/Custom.css">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<!-- <h1>
Dashboard
<small>Control panel</small>
</h1>-->
<!--<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li class="active"></li>
</ol>
</section>-->
<?php
?>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-2 col-xs-6">
<!-- small box -->
<a href="reports.html" class="">
<div class="small-box bg-aqua">
<div class="inner">
<h3>9</h3>
<h3 class="bx_title">Stations </h3>
</div>
<div class="icon">
<img class="view_icon" src="<?php echo $curImagePath?>/dist/img/trainstation_icon.png">
</div>
</div>
</a>
</div>
<!-- ./col -->
<div class="col-lg-2 col-xs-6">
<!-- small box -->
<a href="#" class="">
<div class="small-box bg-green">
<div class="inner">
<h3>2</h3>
<h3 class="bx_title">Auditors </h3>
</div>
<div class="icon">
<img class="view_icon" src="<?php echo $curImagePath?>/dist/img/auditor_icon.png">
</div>
</div>
</a>
</div>
<!-- ./col -->
<div class="col-lg-2 col-xs-6">
<!-- small box -->
<a href="#" class="">
<div class="small-box bg-yellow">
<div class="inner">
<!-- <img class="coming-soon" src="<?php echo $curImagePath?>/dist/img/coming-soon.png"> -->
<h3><?php echo $feedCount;?></h3>
<h3 class="bx_title">Audits </h3>
</div>
<div class="icon">
<img class="view_icon" src="<?php echo $curImagePath?>/dist/img/total_feedback.png">
</div>
</div>
</a>
</div>
<!-- ./col -->
<!--<div class="col-lg-2 col-xs-6">
<a href="#" class="">
<div class="small-box bg-red">
<div class="inner">
<img class="coming-soon" src="<?php echo $curImagePath?>/dist/img/coming-soon.png">
<h3>-</h3>
<h3 class="bx_title">Score </h3>
</div>
<div class="icon">
<img class="view_icon" src="<?php echo $curImagePath?>/dist/img/overall_score_icon.png">
</div>
</div>
</a>
</div>--->
<!-- ./col -->
<div class="col-lg-4 col-xs-6">
<!-- small box -->
<a href="#" class="">
<div class="small-box bg-red">
<div class="inner week_inner">
<div class="progress-group">
<div id="interactive" style="height:90px;"></div>
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-xs-6">
<a href="#" class="">
<div class="small-box bg-red">
<div class="inner" style="padding: 0px !IMPORTANT; margin: 0px !IMPORTANT;">
<div class="clock clock_bg">
<div class="main_clock ">
<div class="clock ClockDesign">
<ul class="text-gray" style="">
<li id="hours">13</li>
<li id="point">:</li>
<li id="min">27</li>
</ul>
<div id="Date_Clock" style=" font-weight: bold; font-size: 20px;" class="text-gray">10<sup>th</sup> November 2017, Friday</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- ./col -->
</div>
<div class="row">
<div class="col-lg-4 col-xs-12">
<div clas="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-server" aria-hidden="true"></i>
<h3 class="box-title">Weekly Feedback</h3>
<div class="box-tools pull-right">
<!-- <div class="btn-group" id="realtime" data-toggle="btn-toggle">
<button type="button" class="btn btn-default btn-xs active" data-toggle="on">On</button>
<button type="button" class="btn btn-default btn-xs" data-toggle="off">Off</button>
</div>-->
</div>
</div>
<div class="box-body">
<script src="<?php echo $curImagePath?>/rgraph/RGraph.svg.common.core.js"></script>
<script src="<?php echo $curImagePath?>/rgraph/RGraph.svg.common.tooltips.js"></script>
<script src="<?php echo $curImagePath?>/rgraph/RGraph.svg.bar.js"></script>
<div style="width: 100%; height: 190px; background:#FFF; display: inline-block" id="chart-container-fcount" ></div>
<script>
new RGraph.SVG.Bar({
id: 'chart-container-fcount',
data: [<?php echo implode(',',$perforArr['wfbtotal']);?>],
options: {
colorsSequential: true,
colors: ['Gradient(#4dc68f:#2196F3)','Gradient(#86B5BC:#2196F3)','Gradient(#86B5BC:#2196F3)','Gradient(#86B5BC:#2196F3)','Gradient(#86B5BC:#2196F3)','Gradient(#86B5BC:#2196F3)','Gradient(#86B5BC:#2196F3)'],
xaxisLabels: [<?php echo $days;?>],
xaxisColor: '#000',
yaxisColor: '#000',
yaxisLabelsCount: 5,
labelsAbove: true,
gutterLeft: 10,
gutterTop: 10,
gutterRight: 10,
gutterBottom: 10,
gutterLeft: 10,
yaxisScaleUnitsPost: '',
marginLeft: 20,
marginBottom: 20,
marginTop: 20,
marginRight: 20,
textColor: '#000',
textSize: 9,
hmargin: 15
}
}).draw().on('beforetooltip', function ()
{
RGraph.SVG.tooltips.style.backgroundColor = '#fff';
RGraph.SVG.tooltips.style.color = 'white';
RGraph.SVG.tooltips.style.fontWeight = 'bold';
});
</script>
</div>
<!-- /.box-body-->
</div>
</div>
<div clas="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-newspaper-o" aria-hidden="true"></i>
<h3 class="box-title">Notice Board</h3>
<div class="box-tools pull-right">
<!-- <div class="btn-group" id="realtime" data-toggle="btn-toggle">
<button type="button" class="btn btn-default btn-xs active" data-toggle="on">On</button>
<button type="button" class="btn btn-default btn-xs" data-toggle="off">Off</button>
</div>-->
</div>
</div>
<div class="box-body">
<marquee direction = "up" scrolldelay="300" onmouseover="this.stop();" onmouseout="this.start();" style="height:241px;"> <div class="news_scroll">
<ul class="news ">
<li><strong>Notification Active - Beatle Corporate</strong><br /> <em>Notifications are live now for Low Rating Feedback and Complaints. Get to know the details in real time in your Corporate Application. Download now from Play Store - Beatle Analytics - Corporate.</em>
<span class="pull-right">06/02/2019</span>
</li>
</ul>
<ul class="news ">
<li><strong>Tool - Tip on Weekly Feedback CountChart</strong><br /> <em>We have introduce this click option on Weekly Feedback Count Chart. Click on the bar and a pop up will display the detailed count of feedback/s for that particular day. This will display the count w.r.t your industries.</em>
<span class="pull-right">01/02/2019</span>
</li>
</ul>
<ul class="news ">
<li><strong>The Shift Report is ready now</strong><br /> <em>As promised, we have completed our research and development on Shift Report. The report is now live and accurate. Also we have introduced a sub feature "Detailed Shift Report". Now you can get into more deeper analysis. Also we have given access to print and download your reports while keeping your data security in mind.</em>
<span class="pull-right">30/01/2019</span>
</li>
</ul>
<ul class="news ">
<li><strong>The 6th option</strong><br /> <em>We are adding one more option - "The 6th Option". This will help the customers to skip parameter/s while giving the feedback. This will not effect your overall score. If a customer chooses the 6th option, the average will be calculated by the remaining parameters count. More information in our help.</em>
<span class="pull-right">29/01/2019</span>
</li>
</ul>
<ul class="news ">
<li><strong>Shift Reports Update Going On</strong><br /> <em>All users who have opted for Shift Reports in their Dashboards, please be informed that we are still working on the shift reports calculations. We are testing the score accuracy. Please do not consider the current scores that are being displayed. Once fixed, all calculations will fall in place. We will let you know soon.</em>
<span class="pull-right">24/01/2019</span>
</li>
</ul>
<ul class="news ">
<li><strong>Sign Up Update</strong><br /> <em>The new Sign Up update is active now. No need to create an ID, it will be done automatically by our smart system. End User just need to Enter their Full Name, Mobile Number and Email Address to move ahead.
Email Address is not mandatory but it is the key factor to earn bonus points.</em>
<span class="pull-right">19/01/2019</span>
</li>
</ul>
</div>
</marquee>
</div>
<!-- /.box-body-->
</div>
</div>
</div>
<div class="col-lg-8 col-xs-12">
<div class="box box-info summer_report">
<div class="box-header with-border">
<h3 class="box-title">Summary Details (All Stations)</h3>
<div class=" pull-right ">
<input class="station_scr" id="myInput" type="text" placeholder="Search Station..">
</div>
</div>
<!-- /.box-header -->
<div class="box-body summery_info">
<div class="table-responsive">
<table id="example" class="table no-margin display" style="width:100%">
<thead>
<tr>
<th style=" min-width:90px;"> Station Id</th>
<th>Location</th>
<th style="min-width: 124px;">No of Auditor</th>
<th>Subscription</th>
<th>%</th>
<th style=" min-width:114px;">Audits </th>
<th style=" min-width:133px;">Score</th>
</tr>
</thead>
<tbody id="myTable">
<?php
$SQL = "SELECT * FROM baris_station";
$rsStaInfo = $objDB->sql_query($SQL);
for($i=0; $i<count($rsStaInfo); $i++){ ?>
<?php $subscription = getSubscriptionDetailsInPer($rsStaInfo[$i]['stationId'])?>
<tr>
<td><a href="#"><?php echo $rsStaInfo[$i]['db_stLoginId']?></a></td>
<td class="lo_location"><?php echo $rsStaInfo[$i]['stationName']?></td>
<td><span class="label label-success"><?php echo count(getTotalUserOfStation($rsStaInfo[$i]['stationId']))?></span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="">
<div class="progress progress-xs progress-striped active">
<div class="progress-bar <?php if($subscription > 90) echo "progress-bar-danger"; else echo "progress-bar-success";?>" style="width: <?php echo $subscription;?>%"></div>
</div>
</div>
</td>
<td> <span class="badge badge <?php if($subscription > 90) echo "bg-red"; else echo "bg-green";?>"><?php echo $subscription;?>%</span></td>
<td><?php echo fetchTotalFeedbackNewReport($rsStaInfo[$i]['stationId']);?></td>
<td>Coming Soon</td>
</tr>
<?php } ?>
<tr>
<td><a href="#">J7429</a></td>
<td class="lo_location">Durgapura railway station</td>
<td><span class="label label-success">2</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="">
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 30%"></div>
</div>
</div>
</td>
<td> <span class="badge bg-green">30%</span></td>
<td>Coming Soon</td>
<td>Coming Soon</td>
</tr>
<tr>
<td><a href="#">J7429</a></td>
<td class="lo_location">Dahar Ka Balaji railway station</td>
<td><span class="label label-success">3</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="">
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
</div>
</td>
<td > <span class="badge bg-green">40%</span></td>
<td>Coming Soon</td>
<td><a href="#"> Coming Soon</a></td>
</tr>
<tr>
<td><a href="#">J1848</a></td>
<td class="lo_location">Bais Godam railway station</td>
<td><span class="label label-success">5</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="">
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 75%"></div>
</div>
</div>
</td>
<td> <span class="badge bg-green">75%</span></td>
<td>Coming Soon</td>
<td>Coming Soon</td>
</tr>
<tr>
<td><a href="#">J7429</a></td>
<td class="lo_location">Kanakpura railway station</td>
<td><span class="label label-success">2</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="">
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 10%"></div>
</div>
</div>
</td>
<td> <span class="badge bg-green">10%</span></td>
<td>Coming Soon</td>
<td>Coming Soon</td>
</tr>
<tr>
<td><a href="#">J9842</a></td>
<td class="lo_location">Sanganer railway station</td>
<td><span class="label label-success">7</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="">
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 80%"></div>
</div>
</div>
</td>
<td> <span class="badge bg-green">80%</span></td>
<td>Coming Soon</td>
<td>Coming Soon</td>
</tr>
<tr>
<td><a href="#">J1952</a></td>
<td class="lo_location">Getor Jagatpura railway station</td>
<td><span class="label label-success">5</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="">
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 50%"></div>
</div>
</div>
</td>
<td> <span class="badge bg-green">50%</span></td>
<td>Coming Soon<!--<span class="sparkline-1">100,100,0,0,0,0,1,4,100,10,100,10,100,0,0,0,4,6,5,9,10</span> <span id="mousespeed10">Loading..</span>--></td>
<td>Coming Soon</td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td class="lo_location"></td>
<td></td>
<td>
</td>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td class="lo_location"></td>
<td></td>
<td>
</td>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td class="lo_location"></td>
<td></td>
<td>
</td>
<td> </td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.box-body -->
<!-- /.box-footer -->
</div>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-md-3">
<div class="box box-primary direct-chat direct-chat-primary">
<div class="box-header with-border">
<h3 class="box-title"> Station </h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="" class="badge bg-light-blue" data-original-title="Total Station 4">4</span>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="direct-chat-messages">
<marquee direction="up" scrolldelay="300" onmouseover="this.stop();" onmouseout="this.start();" style="height:241px;">
<div class="direct-chat-msg">
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">J</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Jaipur Jn.
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">D</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Durgapura
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">G</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Gandhinagar Jaipur
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">K</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Kanakpura
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">D</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Dahar Ka Balaji
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">G</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Getor Jagatpura
</div>
</div>
</div>
</marquee>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Search Station..." class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-flat">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="box box-warning direct-chat direct-chat-warning">
<div class="box-header with-border">
<h3 class="box-title">Top 10 Station </h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="" class="badge bg-yellow" data-original-title="Total Feedback 1500">1500</span>
</div>
</div>
<div class="box-body">
<div class="direct-chat-messages">
<div class="box-body no-padding">
<ul class="users-list clearfix">
<li>
<div class="round_logo round_lg"> <span>J</span></div>
<a class="users-list-name" href="#">Jaipur Jn.</a>
<span class="users-list-date">Rajasthan </span>
</li>
<li>
<div class="round_logo_2 round_lg"> <span>G</span></div>
<a class="users-list-name" href="#">Gandhinagar Jaipur</a>
<span class="users-list-date">Rajasthan</span>
</li>
<li>
<div class="round_logo_3 round_lg"> <span>D</span></div>
<a class="users-list-name" href="#">Durgapura</a>
<span class="users-list-date">Rajasthan</span>
</li>
<li>
<div class="round_logo_4 round_lg"> <span>S</span></div>
<a class="users-list-name" href="#">Sanganer</a>
<span class="users-list-date">Gujarat</span>
</li>
<li>
<div class="round_logo_5 round_lg"> <span>J</span></div>
<a class="users-list-name" href="#">jaipur raiways station</a>
<span class="users-list-date">Rajasthan</span>
</li>
<li>
<div class="round_logo_6 round_lg"> <span>B</span></div>
<a class="users-list-name" href="#">Bindaykya Railway Station</a>
<span class="users-list-date">Rajasthan</span>
</li>
<li>
<div class="round_logo_7 round_lg"> <span>S</span></div>
<a class="users-list-name" href="#">Sanganer Railway Station</a>
<span class="users-list-date">Rajasthan</span>
</li>
<li>
<div class="round_logo_8 round_lg"> <span>N</span></div>
<a class="users-list-name" href="#">Nora</a>
<span class="users-list-date">Rajasthan</span>
</li>
<li>
<div class="round_logo_9 round_lg"> <span>N</span></div>
<a class="users-list-name" href="#">Nadia</a>
<span class="users-list-date">Rajasthan</span>
</li>
</ul>
<!-- /.users-list -->
</div>
</div>
</div>
<div class="box-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Search Station ..." class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-warning btn-flat">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="box box-danger direct-chat direct-chat-danger">
<div class="box-header with-border">
<h3 class="box-title"> Weekly Score</h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="" class="badge bg-red" data-original-title="---">----</span>
</div>
</div>
<div class="box-body">
<div class="direct-chat-messages">
<div class="direct-chat-msg">
aaaaaaaaaaa
</div>
</div>
</div>
<br>
<br><br>
</div>
</div>
<div class="col-md-3">
<div class="box box-success direct-chat direct-chat-success">
<div class="box-header with-border">
<h3 class="box-title">Auditor </h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="" class="badge bg-green" data-original-title="Total Auditor 15">15</span>
</div>
</div>
<div class="box-body">
<div class="direct-chat-messages">
<marquee direction="up" scrolldelay="300" onmouseover="this.stop();" onmouseout="this.start();" style="height:241px;">
<div class="direct-chat-msg">
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">J</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Rahul Patel- Jaipur Jn.
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">D</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Shivam Parmar - Durgapura
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">G</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Ronak Patel - Jaipur
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">R</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Rahul Patel - Kanakpura
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">S</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Shivam Parmar - Dahar Ka Balaji
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-img" alt="Message User Image"> <span class="first word">R</span></div><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Ronak Patel - Getor Jagatpura
</div>
</div>
</div>
</marquee>
</div>
</div>
<div class="box-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Search Auditor..." class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-success btn-flat">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- jQuery 3 -->
<script src="theme/black/bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="theme/black/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="theme/black/bower_components/raphael/raphael.min.js"></script>
<script src="theme/black/bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src="theme/black/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="theme/black/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="theme/black/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="theme/black/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="theme/black/bower_components/moment/min/moment.min.js"></script>
<script src="theme/black/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="theme/black/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="theme/black/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="theme/black/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="theme/black/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="theme/black/dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="theme/black/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="theme/black/dist/js/demo.js"></script>
<style>
.small-box>.inner {
border-radius: 0px !IMPORTANT;
}
</style>
<!-- FLOT CHARTS -->
<script src="theme/black/bower_components/Flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="theme/black/bower_components/Flot/jquery.flot.resize.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="theme/black/bower_components/Flot/jquery.flot.pie.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="theme/black/bower_components/Flot/jquery.flot.categories.js"></script>
<script>
function date_time(id)
{
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
</script>
<!--
data table
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": 450,
"scrollX": true
} );
} );
</script>
-->
<script>
$(function () {
/*
* Flot Interactive Chart
* -----------------------
*/
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [], totalPoints = 130
function getRandomData() {
if (data.length > 0)
data = data.slice(1)
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5
if (y < 0) {
y = 0
} else if (y > 100) {
y = 100
}
data.push(y)
}
// Zip the generated y values with the x values
var res = []
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res
}
var interactive_plot = $.plot('#interactive', [getRandomData()], {
grid : {
borderColor: '#f3f3f3',
borderWidth: 1,
tickColor : '#f3f3f3'
},
series: {
shadowSize: 0, // Drawing is faster without shadows
color : '#3c8dbc'
},
lines : {
fill : true, //Converts the line chart to area chart
color: '#3c8dbc'
},
yaxis : {
min : 0,
max : 100,
show: true
},
xaxis : {
show: true
}
})
var updateInterval = 100 //Fetch data ever x milliseconds
var realtime = 'on' //If == to on then fetch data every x seconds. else stop fetching
function update() {
interactive_plot.setData([getRandomData()])
// Since the axes don't change, we don't need to call plot.setupGrid()
interactive_plot.draw()
if (realtime === 'on')
setTimeout(update, updateInterval)
}
//INITIALIZE REALTIME DATA FETCHING
if (realtime === 'on') {
update()
}
//REALTIME TOGGLE
$('#realtime .btn').click(function () {
if ($(this).data('toggle') === 'on') {
realtime = 'on'
}
else {
realtime = 'off'
}
update()
})
})
function labelFormatter(label, series) {
return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
+ label
+ '<br>'
+ Math.round(series.percent) + '%</div>'
}
</script>
<script>
$(function () {
/* jQueryKnob */
$(".knob").knob({
/*change : function (value) {
//console.log("change : " + value);
},
release : function (value) {
console.log("release : " + value);
},
cancel : function () {
console.log("cancel : " + this.value);
},*/
draw: function () {
// "tron" case
if (this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = true;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.value);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.previousColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
/* END JQUERY KNOB */
//INITIALIZE SPARKLINE CHARTS
$(".sparkline").each(function () {
var $this = $(this);
$this.sparkline('html', $this.data());
});
/* SPARKLINE DOCUMENTATION EXAMPLES http://omnipotent.net/jquery.sparkline/#s-about */
drawDocSparklines();
drawMouseSpeedDemo();
});
function drawDocSparklines() {
// Bar + line composite charts
$('#compositebar').sparkline('html', {type: 'bar', barColor: '#aaf'});
$('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
{composite: true, fillColor: false, lineColor: 'red'});
// Line charts taking their values from the tag
$('.sparkline-1').sparkline();
// Larger line charts for the docs
$('.largeline').sparkline('html',
{type: 'line', height: '2.5em', width: '4em'});
// Customized line chart
$('#linecustom').sparkline('html',
{
height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3
});
// Bar charts using inline values
$('.sparkbar-').sparkline('html', {type: 'bar'});
$('.barformat').sparkline([1, 3, 5, 3, 8], {
type: 'bar',
tooltipFormat: '{{value:levels}} - {{value}}',
tooltipValueLookups: {
levels: $.range_map({':2': 'Low', '3:6': 'Medium', '7:': 'High'})
}
});
// Tri-state charts using inline values
$('.sparktristate').sparkline('html', {type: 'tristate'});
$('.sparktristatecols').sparkline('html',
{type: 'tristate', colorMap: {'-2': '#fa7', '2': '#44f'}});
// Composite line charts, the second using values supplied via javascript
$('#compositeline').sparkline('html', {fillColor: false, changeRangeMin: 0, chartRangeMax: 10});
$('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
{composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10});
// Line charts with normal range marker
$('#normalline').sparkline('html',
{fillColor: false, normalRangeMin: -1, normalRangeMax: 8});
$('#normalExample').sparkline('html',
{fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#4f4'});
// Discrete charts
$('.discrete1').sparkline('html',
{type: 'discrete', lineColor: 'blue', xwidth: 18});
$('#discrete2').sparkline('html',
{type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4});
// Bullet charts
$('.sparkbullet').sparkline('html', {type: 'bullet'});
// Pie charts
$('.sparkpie').sparkline('html', {type: 'pie', height: '1.0em'});
// Box plots
$('.sparkboxplot').sparkline('html', {type: 'box'});
$('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
{type: 'box', raw: true, showOutliers: true, target: 6});
// Box plot with specific field order
$('.boxfieldorder').sparkline('html', {
type: 'box',
tooltipFormatFieldlist: ['med', 'lq', 'uq'],
tooltipFormatFieldlistKey: 'field'
});
// click event demo sparkline
$('.clickdemo').sparkline();
$('.clickdemo').bind('sparklineClick', function (ev) {
var sparkline = ev.sparklines[0],
region = sparkline.getCurrentRegionFields();
value = region.y;
alert("Clicked on x=" + region.x + " y=" + region.y);
});
// mouseover event demo sparkline
$('.mouseoverdemo').sparkline();
$('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
var sparkline = ev.sparklines[0],
region = sparkline.getCurrentRegionFields();
value = region.y;
$('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
}).bind('mouseleave', function () {
$('.mouseoverregion').text('');
});
}
/**
** Draw the little mouse speed animated graph
** This just attaches a handler to the mousemove event to see
** (roughly) how far the mouse has moved
** and then updates the display a couple of times a second via
** setTimeout()
**/
function drawMouseSpeedDemo() {
var mrefreshinterval = 500; // update display every 500ms
var lastmousex = -1;
var lastmousey = -1;
var lastmousetime;
var mousetravel = 0;
var mpoints = [];
var mpoints_max = 30;
$('html').mousemove(function (e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1) {
mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
}
lastmousex = mousex;
lastmousey = mousey;
});
var mdraw = function () {
var md = new Date();
var timenow = md.getTime();
if (lastmousetime && lastmousetime != timenow) {
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
mpoints.push(pps);
if (mpoints.length > mpoints_max)
mpoints.splice(0, 1);
mousetravel = 0;
$('#mousespeed').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed1').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed2').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed3').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed4').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed5').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed6').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed7').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed8').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed9').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed10').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
$('#mousespeed11').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
}
lastmousetime = timenow;
setTimeout(mdraw, mrefreshinterval);
};
// We could use setInterval instead, but I prefer to do it this way
setTimeout(mdraw, mrefreshinterval);
}
</script>
<!--------small clock------------->
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#000');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#000');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
<!--------table search------->
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<!-----clock----->
<script>
$(document).ready(function(){
var d = new Date();
var n = d.getHours();
if(n >= 6 && n < 11){
//sunshine
$(".clock_bg").addClass("day");
}else if(n >= 11 && n < 16){
//noon
$(".clock_bg").addClass("noonday");
}else if(n >= 16 && n < 19){
//sunset
$(".clock_bg").addClass("sunset");
}else{
//night
$(".clock_bg").addClass("night");
}
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year
$('#Date_Clock').html(newDate.getDate()+'<sup>'+ordinal(newDate.getDate()) + '</sup> ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear()+', '+dayNames[newDate.getDay()] );
setInterval( function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
setInterval( function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
});
function ordinal(date) {
if(date > 20 || date < 10) {
switch(date%10) {
case 1:
return "st";
case 2:
return "nd";
case 3:
return "rd";
}
}
return "th";
}
</script>
<style type="text/css">
.clock.clock_bg.day { background: url('<?php echo $curImagePath?>/dist/img/tree-2916763_960_720.gif'); }
.clock.clock_bg.sunset { background: url('<?php echo $curImagePath?>/dist/img/sunset-2191645_960_720.jpg'); }
.clock.clock_bg.night { background: url('<?php echo $curImagePath?>/dist/img/moon-1859616_960_720.jpg'); }
.clock.clock_bg.noonday { background: url('<?php echo $curImagePath?>/dist/img/noonday_2.jpg'); }
</style>
<!----//-clock----->