mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2025-02-05 23:11:56 +01:00
player.html
This commit is contained in:
Rsl1122
parent
41877238f1
commit
d16c50669a
File diff suppressed because it is too large
Load Diff
618
Plan/src/main/resources/web/player.html
Normal file
618
Plan/src/main/resources/web/player.html
Normal file
@ -0,0 +1,618 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<title>Plan | ${playerName}</title>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet"
|
||||
type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Bootstrap Core Css -->
|
||||
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Waves Effect Css -->
|
||||
<link href="plugins/node-waves/waves.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Animation Css -->
|
||||
<link href="plugins/animate-css/animate.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Custom Css -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<!-- Plan Stylesheet -->
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
|
||||
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
|
||||
<link href="css/themes/all-themes.css" rel="stylesheet"/>
|
||||
</head>
|
||||
|
||||
<body class="theme-red">
|
||||
<script>
|
||||
var worldPieColors = [${worldPieColors}];
|
||||
var gmPieColors = [${gmPieColors}];
|
||||
</script>
|
||||
<!-- Page Loader -->
|
||||
<div class="page-loader-wrapper">
|
||||
<div class="loader">
|
||||
<div class="preloader">
|
||||
<div class="spinner-layer pl-red">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Page Loader -->
|
||||
<!-- Overlay For Sidebars -->
|
||||
<div class="overlay"></div>
|
||||
<!-- #END# Overlay For Sidebars -->
|
||||
<!-- Search Bar -->
|
||||
<div class="search-bar">
|
||||
<div class="search-icon">
|
||||
<i class="material-icons">search</i>
|
||||
</div>
|
||||
<input type="text" placeholder="START TYPING...">
|
||||
<div class="close-search">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Search Bar -->
|
||||
<!-- Top Bar -->
|
||||
<nav class="navbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse"
|
||||
data-target="#navbar-collapse" aria-expanded="false"></a>
|
||||
<a href="javascript:void(0);" class="bars"></a>
|
||||
<a class="navbar-brand">${networkName} | ${playerName}</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<!-- Call Search (Disabled)
|
||||
<li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
|
||||
<!-- #END# Call Search -->
|
||||
<li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i
|
||||
class="material-icons">settings</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- #Top Bar -->
|
||||
<section>
|
||||
<!-- Left Sidebar -->
|
||||
<aside id="leftsidebar" class="sidebar">
|
||||
<!-- Menu -->
|
||||
<div class="menu">
|
||||
<ul class="list">
|
||||
<li class="active">
|
||||
<a class="nav-button" href="javascript:void(0)">
|
||||
<i class="material-icons">info_outline</i>
|
||||
<span>Information</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-button" href="javascript:void(0)">
|
||||
<i class="material-icons">event</i>
|
||||
<span>Sessions</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-button" href="javascript:void(0)">
|
||||
<i class="material-icons">timeline</i>
|
||||
<span>Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);" class="menu-toggle">
|
||||
<i class="material-icons">extension</i>
|
||||
<span>Plugins</span>
|
||||
</a>
|
||||
<ul class="ml-menu">
|
||||
${navPluginsTabs}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- #Menu -->
|
||||
<!-- Footer -->
|
||||
<div class="legal">
|
||||
<div class="version">
|
||||
<b>Player Analytics: </b> v${version}
|
||||
</div>
|
||||
</div>
|
||||
<!-- #Footer -->
|
||||
</aside>
|
||||
<!-- #END# Left Sidebar -->
|
||||
<!-- Right Sidebar -->
|
||||
<aside id="rightsidebar" class="right-sidebar">
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
|
||||
<ul class="demo-choose-skin">
|
||||
<li data-theme="red" class="active">
|
||||
<div class="red"></div>
|
||||
<span>Red</span>
|
||||
</li>
|
||||
<li data-theme="pink">
|
||||
<div class="pink"></div>
|
||||
<span>Pink</span>
|
||||
</li>
|
||||
<li data-theme="purple">
|
||||
<div class="purple"></div>
|
||||
<span>Purple</span>
|
||||
</li>
|
||||
<li data-theme="deep-purple">
|
||||
<div class="deep-purple"></div>
|
||||
<span>Deep Purple</span>
|
||||
</li>
|
||||
<li data-theme="indigo">
|
||||
<div class="indigo"></div>
|
||||
<span>Indigo</span>
|
||||
</li>
|
||||
<li data-theme="blue">
|
||||
<div class="blue"></div>
|
||||
<span>Blue</span>
|
||||
</li>
|
||||
<li data-theme="light-blue">
|
||||
<div class="light-blue"></div>
|
||||
<span>Light Blue</span>
|
||||
</li>
|
||||
<li data-theme="cyan">
|
||||
<div class="cyan"></div>
|
||||
<span>Cyan</span>
|
||||
</li>
|
||||
<li data-theme="teal">
|
||||
<div class="teal"></div>
|
||||
<span>Teal</span>
|
||||
</li>
|
||||
<li data-theme="green">
|
||||
<div class="green"></div>
|
||||
<span>Green</span>
|
||||
</li>
|
||||
<li data-theme="light-green">
|
||||
<div class="light-green"></div>
|
||||
<span>Light Green</span>
|
||||
</li>
|
||||
<li data-theme="lime">
|
||||
<div class="lime"></div>
|
||||
<span>Lime</span>
|
||||
</li>
|
||||
<li data-theme="yellow">
|
||||
<div class="yellow"></div>
|
||||
<span>Yellow</span>
|
||||
</li>
|
||||
<li data-theme="amber">
|
||||
<div class="amber"></div>
|
||||
<span>Amber</span>
|
||||
</li>
|
||||
<li data-theme="orange">
|
||||
<div class="orange"></div>
|
||||
<span>Orange</span>
|
||||
</li>
|
||||
<li data-theme="deep-orange">
|
||||
<div class="deep-orange"></div>
|
||||
<span>Deep Orange</span>
|
||||
</li>
|
||||
<li data-theme="brown">
|
||||
<div class="brown"></div>
|
||||
<span>Brown</span>
|
||||
</li>
|
||||
<li data-theme="grey">
|
||||
<div class="grey"></div>
|
||||
<span>Grey</span>
|
||||
</li>
|
||||
<li data-theme="blue-grey">
|
||||
<div class="blue-grey"></div>
|
||||
<span>Blue Grey</span>
|
||||
</li>
|
||||
<li data-theme="black">
|
||||
<div class="black"></div>
|
||||
<span>Black</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- #END# Right Sidebar -->
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="main-limiter">
|
||||
<div id="main">
|
||||
<div id="tab-information" class="tab">
|
||||
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<h2><i class="fa fa-drivers-license"></i> ${playerName}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
${playerStatus}
|
||||
<p><i class="col-brown fa fa-gavel"></i> Times Kicked: ${kickCount}</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="center-block" src="https://cravatar.eu/avatar/${playerName}/100">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p><i class="col-red fa fa-crosshairs"></i> Player Kills: ${playerKillCount}</p>
|
||||
<p><i class="col-green fa fa-crosshairs"></i> Mob Kills: ${mobKillCount}</p>
|
||||
<p><i class="col-red fa fa-frown-o"></i> Deaths: ${deathCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><i class="col-teal fa fa-calendar-check-o"></i> Sessions <span
|
||||
class="pull-right"><b>${sessionCount}</b></span></p>
|
||||
<p><i class="col-green fa fa-clock-o"></i> Total Playtime <span
|
||||
class="pull-right">${playtimeTotal}</span></p>
|
||||
<p><i class="col-teal fa fa-clock-o"></i> Longest Session <span
|
||||
class="pull-right">${sessionLengthLongest}</span>
|
||||
</p>
|
||||
<p><i class="col-teal fa fa-clock-o"></i> Session Median <span
|
||||
class="pull-right">${sessionLengthMedian}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><i class="col-amber fa fa-user"></i> Activity Index <span
|
||||
class="pull-right"><b>${activityIndexNumber}</b></span></p>
|
||||
<p> <span class="col-${activityIndexColor} font-bold pull-right">${activityIndex}</span></p>
|
||||
<p>
|
||||
</p>
|
||||
<p><i class="col-green fa fa-server"></i> Favorite Server<span
|
||||
class="pull-right">${favoriteServer}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<table class="table table-striped">
|
||||
<thead class="bg-blue-grey">
|
||||
<tr>
|
||||
<th><i class="fa fa-clock-o"></i> Time</th>
|
||||
<th><i class="fa fa-signing"></i> Action</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${tableBodyActions}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Widgets -->
|
||||
<div class="row clearfix">
|
||||
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="info-box bg-light-green hover-expand-effect">
|
||||
<div class="icon">
|
||||
<i class="material-icons">person_add</i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="text">REGISTERED</div>
|
||||
<div class="font-16">${registered}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="info-box bg-teal hover-expand-effect">
|
||||
<div class="icon">
|
||||
<i class="material-icons">event</i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="text">LAST SEEN</div>
|
||||
<div class="font-16">${lastSeen}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<h2><i class="fa fa-braille"></i> Punchcard</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div id="punchCard" class="dashboard-flot-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Widgets -->
|
||||
</div>
|
||||
<!-- #END# Tab Information -->
|
||||
<div id="tab-sessions" class="tab">
|
||||
<div class="row clearfix">
|
||||
<!-- Sessions -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<h2><i class="col-teal fa fa-calendar"></i> Last 50 Sessions</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${accordionSessions}
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Sessions -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<!-- World Pie -->
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<h2><i class="col-teal fa fa-clock-o"></i> World Playtime</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div id="worldPie" class="dashboard-donut-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# World Pie -->
|
||||
<!-- Server Preference Pie -->
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<h2><i class="col-light-green fa fa-server"></i> Server Preference</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div id="serverPie" class="dashboard-donut-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Server Preference Pie -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Tab Sessions -->
|
||||
<div id="tab-overview" class="tab">
|
||||
<div class="row clearfix">
|
||||
<!-- Information -->
|
||||
<!-- Last 30 Days -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="body bg-white">
|
||||
<div class="m-b--35 font-bold">LAST 30 DAYS</div>
|
||||
<ul class="dashboard-stat-list">
|
||||
<li><i class="col-teal fa fa-calendar-check-o"></i> Sessions <span
|
||||
class="pull-right"><b>${sessionCountMonth}</b></span></li>
|
||||
<li><i class="col-green fa fa-clock-o"></i> Total Playtime <span
|
||||
class="pull-right">${playtimeMonth}</span></li>
|
||||
<li><i class="col-teal fa fa-clock-o"></i> Longest Session <span
|
||||
class="pull-right">${sessionLongestMonth}</span>
|
||||
</li>
|
||||
<li><i class="col-teal fa fa-clock-o"></i> Session Median <span
|
||||
class="pull-right">${sessionMedianMonth}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Last 30 Days -->
|
||||
<!-- Last 7 Days -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="body bg-white">
|
||||
<div class="m-b--35 font-bold">LAST 7 DAYS</div>
|
||||
<ul class="dashboard-stat-list">
|
||||
<li><i class="col-teal fa fa-calendar-check-o"></i> Sessions <span
|
||||
class="pull-right"><b>${sessionCountWeek}</b></span></li>
|
||||
<li><i class="col-green fa fa-clock-o"></i> Total Playtime <span
|
||||
class="pull-right">${playtimeWeek}</span></li>
|
||||
<li><i class="col-teal fa fa-clock-o"></i> Longest Session <span
|
||||
class="pull-right">${sessionLongestWeek}</span>
|
||||
</li>
|
||||
<li><i class="col-teal fa fa-clock-o"></i> Session Median <span
|
||||
class="pull-right">${sessionMedianWeek}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Last 7 Days -->
|
||||
<!-- Last 24h -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="body bg-white">
|
||||
<div class="font-bold m-b--35">LAST 24 HOURS</div>
|
||||
<ul class="dashboard-stat-list">
|
||||
<li><i class="col-teal fa fa-calendar-check-o"></i> Sessions <span
|
||||
class="pull-right"><b>${sessionCountDay}</b></span></li>
|
||||
<li><i class="col-green fa fa-clock-o"></i> Total Playtime <span
|
||||
class="pull-right">${playtimeDay}</span></li>
|
||||
<li><i class="col-teal fa fa-clock-o"></i> Longest Session <span
|
||||
class="pull-right">${sessionLongestDay}</span>
|
||||
</li>
|
||||
<li><i class="col-teal fa fa-clock-o"></i> Session Median <span
|
||||
class="pull-right">${sessionMedianDay}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Last 24h -->
|
||||
<!-- #END# Information -->
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<!-- Sessions -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<h2><i class="col-light-green fa fa-server"></i> Servers</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${accorionServer}
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Sessions -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Tab Overview -->
|
||||
${pluginsTabs}
|
||||
<!-- #END# Tabs Plugins -->
|
||||
<div class="tab"></div>
|
||||
<div class="tab"></div>
|
||||
<div class="tab"></div>
|
||||
<div class="tab"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Jquery Core Js -->
|
||||
<script src="plugins/jquery/jquery.min.js"></script>
|
||||
|
||||
<!-- Bootstrap Core Js -->
|
||||
<script src="plugins/bootstrap/js/bootstrap.js"></script>
|
||||
|
||||
<!-- Slimscroll Plugin Js -->
|
||||
<script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
|
||||
|
||||
<!-- Waves Effect Plugin Js -->
|
||||
<script src="plugins/node-waves/waves.js"></script>
|
||||
|
||||
<!-- Jquery Table Plugin Js -->
|
||||
<script src="plugins/jquery-datatable/jquery.dataTables.js"></script>
|
||||
<script src="plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
|
||||
|
||||
<!-- HighCharts -->
|
||||
<script src="https://code.highcharts.com/stock/highstock.js"></script>
|
||||
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
|
||||
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<script src="https://use.fontawesome.com/df48eb908b.js"></script>
|
||||
|
||||
<!-- Header, Sidenav & Skin changer -->
|
||||
<script src="js/admin.js"></script>
|
||||
|
||||
<!-- Plan Charts -->
|
||||
<script src="./js/charts/punchCard.js"></script>
|
||||
<script src="./js/charts/serverPie.js"></script>
|
||||
<script src="./js/charts/worldPie.js"></script>
|
||||
|
||||
<!-- Chart Data -->
|
||||
<script>
|
||||
Highcharts.setOptions({
|
||||
global: {
|
||||
timezoneOffset: ${timeZone} * 60
|
||||
}
|
||||
});
|
||||
var serverSeries = {
|
||||
name:'Server Playtime',
|
||||
colorByPoint:true,
|
||||
colors: [${serverPieColors}],
|
||||
data: ${serverPieSeries}
|
||||
}
|
||||
var worldSeries = {
|
||||
name:'World Playtime',
|
||||
colorByPoint:true,
|
||||
colors: worldPieColors,
|
||||
data: ${worldPieSeries}
|
||||
};
|
||||
var gmSeries = ${gmSeries};
|
||||
var punchcardSeries = {
|
||||
name: 'Relative Activity',
|
||||
color: '#222',
|
||||
data: ${punchCardSeries}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Plan laod script -->
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
$('.player-table').DataTable({
|
||||
responsive: true
|
||||
});
|
||||
|
||||
var navButtons = document.getElementsByClassName("nav-button");
|
||||
var tabs = document.getElementsByClassName("tab");
|
||||
var slideIndex = window.sessionStorage.getItem("AnalysisSlideIndex");
|
||||
if (slideIndex === null) {
|
||||
slideIndex = 0;
|
||||
}
|
||||
var x = document.getElementById("main");
|
||||
x.style.transform = "translate3d(0px,0px,0)";
|
||||
x.style.width = "" + navButtons.length * 100 + "%";
|
||||
for (var i = 0; i < navButtons.length; i++) {
|
||||
navButtons[i].onclick = openFunc(i);
|
||||
tabs[i].style.width = "" + 100 / navButtons.length + "%";
|
||||
}
|
||||
x.style.opacity = "1";
|
||||
openFunc(slideIndex)();
|
||||
|
||||
// Chart draw scripts
|
||||
worldPie('worldPie', worldSeries, gmSeries);
|
||||
serverPie('serverPie', serverSeries);
|
||||
punchCard('punchCard', punchcardSeries);
|
||||
${sessionTabGraphViewFunctions}
|
||||
/**/
|
||||
|
||||
function openFunc(i) {
|
||||
return function () {
|
||||
var max = navButtons.length;
|
||||
for (var j = 0; j < max; j++) {
|
||||
if (navButtons[j].parentElement.classList.contains('active')) {
|
||||
navButtons[j].parentElement.classList.remove('active');
|
||||
}
|
||||
if (j == i) {
|
||||
navButtons[j].parentElement.classList.add('active');
|
||||
}
|
||||
}
|
||||
var percent = -100 / navButtons.length;
|
||||
slideIndex = i;
|
||||
if (slideIndex > max) {
|
||||
slideIndex = 0
|
||||
}
|
||||
if (slideIndex < 0) {
|
||||
slideIndex = max
|
||||
}
|
||||
window.sessionStorage.setItem("AnalysisSlideIndex", slideIndex);
|
||||
var value = slideIndex * percent;
|
||||
x.style.transition = "0.5s";
|
||||
x.style.transform = "translate3d(" + value + "%,0px,0)";
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Demo Js -->
|
||||
<script src="js/demo.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -145,7 +145,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);" class="nav-button menu-toggle">
|
||||
<a href="javascript:void(0);" class="menu-toggle">
|
||||
<i class="material-icons">extension</i>
|
||||
<span>Plugins</span>
|
||||
</a>
|
||||
@ -616,7 +616,7 @@
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<h2><i class="col-amber fa fa-pie-chart"></i> Current Playerbase</h2>
|
||||
<h2><i class="col-amber fa fa-users"></i> Current Playerbase</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1089,7 +1089,6 @@
|
||||
}
|
||||
if (j == i) {
|
||||
navButtons[j].parentElement.classList.add('active');
|
||||
continue;
|
||||
}
|
||||
}
|
||||
var percent = -100 / navButtons.length;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user