Skip to content

Instantly share code, notes, and snippets.

@barrychapman
Created May 1, 2016 00:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barrychapman/2f2766c280b4cdb20e49654c1ea9bc99 to your computer and use it in GitHub Desktop.
Save barrychapman/2f2766c280b4cdb20e49654c1ea9bc99 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Digital2GO Media Networks | Admin/Dashboard </title>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" href="/ccss/global.css"/>
<script src="/cjs/d2go.jq.js"></script>
<script src="/cjs/global.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div id="LeftNavigation" class="col-md-3 left_col" style="width: 230px;">
<div class="left_col" style="width: 230px;">
<div class="navbar nav_title" style="border: 0; text-align: center;">
<a href="/" class="site_title">&nbsp;</a>
</div>
<div class="clearfix"></div>
<div class="profile" style="">
<div class="profile_pic">
<img src="/img/user.png" alt="..." class="img-circle profile_img">
</div> <div class="profile_info">
<span>Welcome,</span>
<h2 style="color: #004C87;">Barry Chapman</h2>
</div>
<div style="float: left; margin: 15px 0; width: 100%;">
<hr style="padding: 0; margin: 0 15px; height: 1px; border-top: 1px solid #ccc;"/>
</div>
</div>
<div class="clearfix"></div>
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General Configuration</h3>
<ul class="nav side-menu">
<li>
<a href="/admin"><i class="fa fa-home"></i> Dashboard</a>
</li>
<li><a><i class="fa fa-wrench"></i> Tools <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/tools/export_beacon_location">Export Beacon/Location</a></li>
<li><a href="/admin/locations_upload">Location Import Utility</a></li>
<li><a href="/admin/job_import_logs">View Import Logs</a>
<li><a href="/admin/flagged_beacons">Flagged Beacons</a>
</ul>
</li>
<li><a><i class="fa fa-cogs"></i> Configuration <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/configuration">Site Settings </a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Meta Data</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-spoon"></i> Lead Sources <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/lead_sources">Lead Sources Home</a></li>
<li><a href="/admin/lead_sources/add">Add Lead Source</a></li>
<li><a href="/admin/lead_sources/search">Search Lead Sources</a></li>
</ul>
</li>
<li><a><i class="fa fa-send"></i> Industries <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/industries">Industries Home</a></li>
<li><a href="/admin/industries/add">Add Industry</a></li>
<li><a href="/admin/industries/search">Search Industries</a></li>
</ul>
</li>
<li><a><i class="fa fa-cubes"></i> Applications <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/applications">Applications Home</a></li>
<li><a href="/admin/applications/search">Search Applications</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Groups</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-tags"></i> Customers <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/customers">Customers Home</a></li>
<li><a href="/admin/customers/add">Add Customer</a></li>
<li><a href="/admin/customers/search">Search Customers</a></li>
</ul>
</li>
<li><a><i class="fa fa-users"></i> Users <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/users">Users Home</a></li>
<li><a href="/admin/users/add">Add User</a></li>
<li><a href="/admin/users/search">Search Users</a></li>
</ul>
</li>
<li><a><i class="fa fa-cog"></i> User Roles <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/roles">User Roles Home</a></li>
<li><a href="/admin/roles/add">Add Role</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Inventory</h3>
<ul class="nav side-menu">
<li>
<a><i class="fa fa-wifi"></i> Beacons <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/beacons">Beacons Home</a></li>
<li><a href="/admin/beacons/add">Add New Beacon</a></li>
<li><a href="/admin/beacons/search">Search Beacons</a></li>
</ul>
</li>
<li>
<a><i class="fa fa-building"></i> Retailers <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/retailers">Retailers Home</a></li>
<li><a href="/admin/retailers/add">Add New Retailer</a></li>
<li><a href="/admin/retailers/search">Search Retailers</a></li>
</ul>
</li>
<li>
<a><i class="fa fa-anchor"></i> Retail Locations <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/locations">Locations Home</a></li>
<li><a href="/admin/locations/add">Add New Location</a></li>
<li><a href="/admin/locations/search">Search Locations</a></li>
</ul>
</li>
<li>
<a><i class="fa fa-compass"></i> Location Zones<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/zones">Zones Home</a></li>
<li><a href="/admin/zones/add">Add New Zone</a></li>
<li><a href="/admin/zones/search">Search Zones</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Marketing</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-map-pin"></i> Impressions <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/impressions">Impressions Home</a>
</li>
</ul>
</li>
<li><a><i class="fa fa-futbol-o"></i> Personas <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/personas">Personas Home</a></li>
</ul>
</li>
<li><a><i class="fa fa-cube"></i> Campaigns <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/campaigns">Campaigns Home</a>
</li>
<li><a href="projects.html">Projects</a>
</li>
<li><a href="project_detail.html">Project Detail</a>
</li>
<li><a href="contacts.html">Contacts</a>
</li>
<li><a href="profile.html">Profile</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Beacons</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-cube"></i> Beacons <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="e_commerce.html">E-commerce</a>
</li>
<li><a href="projects.html">Projects</a>
</li>
<li><a href="project_detail.html">Project Detail</a>
</li>
<li><a href="contacts.html">Contacts</a>
</li>
<li><a href="profile.html">Profile</a>
</li>
</ul>
</li>
<li><a><i class="fa fa-server"></i> Events <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="/admin/events">Events Home</a>
</li>
<li><a href="/admin/events/add">Add Event</a>
</li>
<li><a href="plain_page.html">Plain Page</a>
</li>
<li><a href="login.html">Login Page</a>
</li>
<li><a href="pricing_tables.html">Pricing Tables</a>
</li>
</ul>
</li>
<li><a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
</li>
</ul>
</div>
</div> </div>
</div>
<!-- page content -->
<div class="right_col" role="main" style="margin-left: 230px;">
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="" alt="">
Barry Chapman <span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu animated fadeInDown pull-right">
<li>
<a href="/profile">
<i class="fa fa-user fa-fw"></i>&nbsp;
Profile
</a>
</li>
<li>
<a href="/account">
<i class="fa fa-cogs fa-fw"></i>&nbsp;
<span>Account Settings</span>
</a>
</li>
<li>
<a href="/users/logout">
<i class="fa fa-fw fa-sign-out"></i>&nbsp;
Log Out
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div> </div>
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Dashboard</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<script src="/js/heatmap.js"></script><script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDlX58fu1SpplMBe262t_IPV2UcQDu9GDk&libraries=visualization"></script><script src="/js/gmaps-heatmap.js"></script>
<style>
html, body { height:100%; }
#legend {
position: relative;
width: 100%;
height: 50px;
margin-top: 20px;
}
#legendGradient {
width: 100%;
height: 35px;
border: 1px solid #555;
z-index: 1;
}
</style>
<div class="col-md-12">
<div class="row tile_count">
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-lg hidden-md">
<div class="right center">
<span class="count_top"><i class="fa fa-user"></i> Todays Impressions</span>
<div class="count">3,303</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>19.8% </i> from <span style="border-bottom: dashed 1px #999;" title="04/29/2016">yesterday</span></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-lg hidden-md">
<div class="right center">
<span class="count_top"><i class="fa fa-mobile-phone"></i> Total Devices</span>
<div class="count"><a href="/admin/devices">74,759</a></div>
<span class="count_bottom"></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-lg hidden-md">
<div class="right center">
<span class="count_top"><i class="fa fa-calendar"></i> Weekly Impressions</span>
<div class="count">23,014</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>15.1% </i> from last week</span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-lg hidden-md">
<div class="right center">
<span class="count_top"><i class="fa fa-flag"></i> Flagged Beacons</span>
<div class="count red"><a class="red" href="/admin/flagged_beacons" style="">520</a></div>
<span class="count_bottom red"></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-lg hidden-md">
<div class="right center">
<span class="count_top"><i class="fa fa-user"></i> Total Impressions</span>
<div class="count"><a href="/admin/impressions">542,275</a></div>
<span class="count_bottom"></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-lg hidden-md">
<div class="right center">
<span class="count_top"><i class="fa fa-user"></i> Content Sent</span>
<div class="count">0</div>
<span class="count_bottom"></span>
</div>
</div>
<!-- separator -->
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-sm hidden-xs">
<div class="left"></div>
<div class="right center">
<span class="count_top"><i class="fa fa-user"></i> Todays Impressions</span>
<div class="count">3,303</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>19.8% </i> from <span style="border-bottom: dashed 1px #999;" title="04/29/2016">yesterday</span></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-sm hidden-xs">
<div class="left"></div>
<div class="right center">
<span class="count_top"><i class="fa fa-mobile-phone"></i> Total Devices</span>
<div class="count"><a href="/admin/devices">74,759</a></div>
<span class="count_bottom"></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-sm hidden-xs">
<div class="left"></div>
<div class="right center">
<span class="count_top"><i class="fa fa-calendar"></i> Weekly Impressions</span>
<div class="count">23,014</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>15.1% </i> from last week</span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-sm hidden-xs">
<div class="left"></div>
<div class="right center">
<span class="count_top"><i class="fa fa-flag"></i> Flagged Beacons</span>
<div class="count red"><a class="red" href="/admin/flagged_beacons" style="">520</a></div>
<span class="count_bottom red"></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-sm hidden-xs">
<div class="left"></div>
<div class="right center">
<span class="count_top"><i class="fa fa-user"></i> Total Impressions</span>
<div class="count"><a href="/admin/impressions">542,275</a></div>
<span class="count_bottom"></span>
</div>
</div>
<div class="animated flipInY col-lg-2 col-md-4 col-sm-6 col-xs-12 tile_stats_count hidden-sm hidden-xs">
<div class="left"></div>
<div class="right center">
<span class="count_top"><i class="fa fa-user"></i> Content Sent</span>
<div class="count">0</div>
<span class="count_bottom"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="dashboard_graph">
<div class="row x_title">
<div class="col-md-6">
<h3>Network Activities <small>Graph title sub-title</small></h3>
</div>
<div class="col-md-6">
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span>December 14, 2015 - January 12, 2016</span> <b class="caret"></b>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div id="hc-1"></div>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript" src="//code.highcharts.com/highcharts.js"></script><script>Highcharts.setOptions({"colors":["#003771","#2363a6","#6ca4df","#dbe1e8","#879bb1","#75808c","#546372"]});</script>
<script type="text/javascript">chart = new Highcharts.Chart({"chart":{"renderTo":"hc-1","plotBackgroundColor":null,"plotBorderWidth":null,"plotShadow":false},"title":{"text":"Breakdown of Daily Visits"},"tooltip":{"formatter":function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
}},"plotOptions":{"pie":{"allowPointSelect":1,"cursor":"pointer","dataLabels":{"enabled":false},"showInLegend":1}},"series":[{"type":"pie","shadow":1,"name":"Visits by Day of Week","data":[["Sunday",12],["Monday",12],["Tuesday",13],["Wednesday",14],["Thursday",17],["Friday",22],["Saturday",14]]}]});</script> </div>
<div class="col-md-8">
<div id="hc-2"></div>
<script type="text/javascript">chart = new Highcharts.Chart({"chart":{"renderTo":"hc-2","type":"column","zoomType":"xy"},"title":{"text":"Locations and Impressions by Retailer"},"yAxis":[{"labels":{"style":{"color":"#89A54E"}},"title":{"text":"Locations","style":{"color":"#89A54E"}}},{"title":{"text":"Impressions","style":{"color":"#4572A7"}},"labels":{"style":{"color":"#4572A7"}},"opposite":1}],"xAxis":[{"categories":["Best Buy","Jacks","Frys Electronics","Sams Club","InMotion Entertainment","Sound Balance","Target","Unknown","United Pacific","Walmart","Meijer"],"labels":{"rotation":-45,"align":"right","style":{"font":"normal 11px Arial, sans-serif"}}}],"series":[{"shadow":1,"name":"Locations","type":"column","data":[239,32,39,663,90,0,2003,10,24,0,0]},{"shadow":1,"name":"Impressions","yAxis":1,"type":"column","data":[92075,0,2555,142673,27147,0,265774,12481,389,0,0]}],"legend":{"layout":"vertical","align":"left","x":120,"verticalAlign":"top","y":100,"floating":1,"backgroundColor":"#FFFFFF"}});</script> </div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div id="highcharts-container"></div>
<script type="text/javascript">chart = new Highcharts.Chart({"chart":{"renderTo":"highcharts-container","type":"column"},"title":{"text":"Impressions by Day (Last 7 days)"},"yAxis":{"min":0,"title":{"text":"Impressions"}},"xAxis":{"categories":["Sat, Apr 23","Sun, Apr 24","Mon, Apr 25","Tue, Apr 26","Wed, Apr 27","Thu, Apr 28","Fri, Apr 29","Sat, Apr 30"],"labels":{"rotation":-45,"align":"right","style":{"font":"normal 11px Arial, sans-serif"}}},"series":[{"shadow":1,"name":"Daily Impressions","data":[6219,4063,3238,3129,2305,2885,4116,3303]}]});</script> </div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div id="highcharts-container-2"></div>
<script type="text/javascript">chart = new Highcharts.Chart({"chart":{"renderTo":"highcharts-container-2","type":"column"},"title":{"text":"Total Impressions by Day"},"yAxis":{"min":0,"title":{"text":"Total Impressions"}},"xAxis":{"categories":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"labels":{"rotation":-45,"align":"right","style":{"font":"normal 11px Arial, sans-serif"}}},"series":[{"shadow":1,"name":"Total Impressions","data":[64486,62023,67419,72989,87646,116040,71672]}]});</script> </div>
</div>
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div style="width: 100%; height: 600px;" id="heatmapArea"></div>
<div id="legend">
<div id="legendGradient"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script>
var map, heatmap;
var myLatlng = new google.maps.LatLng(40.713129, -97.470701);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: true,
draggable: true,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
disableDoubleClickZoom: false,
// streetViewControlOptions: false,
// streetView: false,
streetViewControl: false
};
var gradient = [
'rgba(20, 255, 0, 0)',
'rgba(20, 255, 0, 1)',
'rgba(61, 255, 0, 1)',
'rgba(125, 255, 0, 1)',
'rgba(165, 255, 0, 1)',
'rgba(200, 255, 0, 1)',
'rgba(225, 255, 0, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 234, 0, 1)',
'rgba(255, 185, 0, 1)',
'rgba(255, 150, 0, 1)',
'rgba(255, 120, 0, 1)',
'rgba(255, 75, 0, 1)',
'rgba(255, 0, 0, 1)'
];
function initialize() {
map = new google.maps.Map($("#heatmapArea")[0], myOptions);
$.ajax({
type: 'GET',
url: '/admin/impressions/heatmap',
cache: true,
success: function (response) {
var json = JSON.parse(response);
var points = new Array;
var srt = new Array;
$(json.data).each(function (i, v) {
c = v.count;
var weighted = {
location: new google.maps.LatLng(v.lat, v.lng),
weight: c
};
points.push(weighted);
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: points,
map: map,
dissipating: false,
opacity: .6,
radius: 2,
gradient: gradient
});
var gradientCss = '(left';
for (var i = 0; i < gradient.length; ++i) {
gradientCss += ', ' + gradient[i];
}
gradientCss += ')';
heatmap.set('gradient', gradient);
google.maps.event.addListener(map, 'tilesloaded', function() {
// var maxIntensity = heatmap['gm_bindings_']['data'][275]['Rd']['j'];
console.log(heatmap);
var maxIntensity;
var getMax = heatmap['gm_bindings_']['data'];
if(typeof getMax !== 'undefined'){
for (var p in getMax){
for (var q in getMax[p]) {
if (typeof getMax[p][q]['j'] !== 'undefined') {
maxIntensity = getMax[p][q]['j'];
break;
}
}
break;
}
}
var legendWidth = $('#legendGradient').outerWidth();
var multiplier = Math.floor(maxIntensity / 7);
$lg = $('<div></div>').attr('id', 'legendGradient');
$('#legend').find(':not(#legendGradient)').remove().prepend($lg);
$('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
$('#legendGradient').css('background', 'linear-gradient' + gradientCss);
for (var i = 0; i <= maxIntensity; i = i + multiplier) {
var offset = i * legendWidth / maxIntensity;
if (i > 0 && i < maxIntensity) {
offset -= 0.5;
} else if (i == maxIntensity) {
offset -= 1;
}
$('#legend').append($('<div>').css({
'position': 'absolute',
'left': offset + 'px',
'top': '30px',
'width': '1px',
'height': '10px',
'background': '#555',
'z-index': 5
}));
$('#legend').append($('<div>').css({
'position': 'absolute',
'left': (offset - 5) + 'px',
'top': '42px',
// 'width': '10px',
'width': '32px',
'margin-left': '-11px',
'text-align': 'center'
}).html(i));
}
});
}
});
}
function ini2tialize() {
map = new google.maps.Map($("#heatmapArea")[0], myOptions);
$.ajax({
type: 'GET',
url: '/admin/impressions/heatmap',
cache: true,
success: function (response) {
var json = JSON.parse(response);
var points = new Array;
var srt = new Array;
var max = 0;
$(json.data).each(function (i, v) {
c = v.count;
var weighted = {
location: new google.maps.LatLng(v.lat, v.lng),
weight: c
};
points.push(weighted);
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: points,
map: map,
dissipating: false,
opacity: .6,
radius: 2,
gradient: gradient
});
var gradientCss = '(left';
for (var i = 0; i < gradient.length; ++i) {
gradientCss += ', ' + gradient[i];
}
gradientCss += ')';
heatmap.set('gradient', gradient);
google.maps.event.addListener(map, 'tilesloaded', function() {
// var maxIntensity = heatmap['gm_bindings_']['data'][275]['Rd']['j'];
console.log(heatmap.getData());
var maxIntensity;
var getMax = heatmap['gm_bindings_']['data'];
if(typeof getMax !== 'undefined'){
for (var p in getMax){
for (var q in getMax[p]) {
if (typeof getMax[p][q]['j'] !== 'undefined') {
maxIntensity = getMax[p][q]['j'];
break;
}
}
break;
}
}
var legendWidth = $('#legendGradient').outerWidth();
var multiplier = Math.floor(maxIntensity / 7);
$lg = $('<div></div>').attr('id', 'legendGradient');
$('#legend').find(':not(#legendGradient)').remove().prepend($lg);
$('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
$('#legendGradient').css('background', 'linear-gradient' + gradientCss);
for (var i = 0; i <= maxIntensity; i = i + multiplier) {
var offset = i * legendWidth / maxIntensity;
if (i > 0 && i < maxIntensity) {
offset -= 0.5;
} else if (i == maxIntensity) {
offset -= 1;
}
$('#legend').append($('<div>').css({
'position': 'absolute',
'left': offset + 'px',
'top': '30px',
'width': '1px',
'height': '10px',
'background': '#555',
'z-index': 5
}));
$('#legend').append($('<div>').css({
'position': 'absolute',
'left': (offset - 5) + 'px',
'top': '42px',
// 'width': '10px',
'width': '32px',
'margin-left': '-11px',
'text-align': 'center'
}).html(i));
}
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeRadius() {
heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
function changeOpacity() {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
</script>
</div>
<div class="clearfix"></div>
</div>
</div>
<footer>
<div class="">
<p class="pull-right"> |
<span class="lead"> <i class="fa fa-paw"></i> </span>
</p>
</div>
<div class="clearfix"></div>
</footer> </div>
</div>
<script>
$(function () {
var cnt = 10; //$("#custom_notifications ul.notifications li").length + 1;
TabbedNotification = function (options) {
var message = "<div id='ntf" + cnt + "' class='text alert-" + options.type + "' style='display:none'><h2><i class='fa fa-bell'></i> " + options.title + "</h2><div class='close'><a href='javascript:;' class='notification_close'><i class='fa fa-close'></i></a></div><p>" + options.text + "</p></div>";
if (document.getElementById('custom_notifications') == null) {
alert('doesnt exists');
} else {
$('#custom_notifications ul.notifications').append("<li><a id='ntlink" + cnt + "' class='alert-" + options.type + "' href='#ntf" + cnt + "'><i class='fa fa-bell animated shake'></i></a></li>");
$('#custom_notifications #notif-group').append(message);
cnt++;
CustomTabs(options);
}
}
CustomTabs = function (options) {
$('.tabbed_notifications > div').hide();
$('.tabbed_notifications > div:first-of-type').show();
$('#custom_notifications').removeClass('dsp_none');
$('.notifications a').click(function (e) {
e.preventDefault();
var $this = $(this),
tabbed_notifications = '#' + $this.parents('.notifications').data('tabbed_notifications'),
others = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
others.removeClass('active');
$this.addClass('active');
$(tabbed_notifications).children('div').hide();
$(target).show();
});
}
CustomTabs();
var tabid = idname = '';
$(document).on('click', '.notification_close', function (e) {
idname = $(this).parent().parent().attr("id");
tabid = idname.substr(-2);
$('#ntf' + tabid).remove();
$('#ntlink' + tabid).parent().remove();
$('.notifications a').first().addClass('active');
$('#notif-group div').first().css('display','block');
});
})
</script>
<script type="text/javascript">
var permanotice, tooltip, _alert;
</script>
<script src="/js/admin_scripts.js"></script>
<script id="__debug_kit" data-id="e8e3c15e-d3e5-4c01-b4ae-e8d3ceaef49c" data-url="http://app-dev.digital2go.com/" src="/debug_kit/js/toolbar.js"></script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment