From 230e1f2ec3501c8981abbda525b7499f621ed402 Mon Sep 17 00:00:00 2001
From: Rsl1122 <djrapitops@hotmail.com>
Date: Sat, 3 Mar 2018 18:04:33 +0200
Subject: [PATCH] Help bubbles to Player page

---
 Plan/src/main/resources/web/css/main.css |  5 ++
 Plan/src/main/resources/web/js/admin.js  | 23 +++++---
 Plan/src/main/resources/web/player.html  | 73 +++++++++++++++++++++---
 3 files changed, 84 insertions(+), 17 deletions(-)

diff --git a/Plan/src/main/resources/web/css/main.css b/Plan/src/main/resources/web/css/main.css
index 0f11586e4..19ddc2f88 100644
--- a/Plan/src/main/resources/web/css/main.css
+++ b/Plan/src/main/resources/web/css/main.css
@@ -150,6 +150,11 @@
     margin: 0;
 }
 
+.help {
+    text-decoration: none;
+!important;
+}
+
 @media only screen and (max-width: 1680px) {
     .nav-button {
         font-size: 19px;
diff --git a/Plan/src/main/resources/web/js/admin.js b/Plan/src/main/resources/web/js/admin.js
index d96d275ef..ac115137d 100644
--- a/Plan/src/main/resources/web/js/admin.js
+++ b/Plan/src/main/resources/web/js/admin.js
@@ -40,7 +40,7 @@ $.AdminBSB.options = {
         effectIn: 'fadeIn',
         effectOut: 'fadeOut'
     }
-}
+};
 
 /* Left Sidebar - Function =================================================================================================
 *  You can manage the left sidebar menu options
@@ -124,7 +124,7 @@ $.AdminBSB.leftSideBar = {
 
             //Scroll active menu item when page load, if option set = true
             if ($.AdminBSB.options.leftSideBar.scrollActiveItemWhenPageLoad) {
-                var activeItemOffsetTop = $('.menu .list li.active')[0].offsetTop
+                var activeItemOffsetTop = $('.menu .list li.active')[0].offsetTop;
                 if (activeItemOffsetTop > 150) $el.slimscroll({ scrollTo: activeItemOffsetTop + 'px' });
             }
         }
@@ -184,7 +184,7 @@ $.AdminBSB.rightSideBar = {
     isOpen: function () {
         return $('.right-sidebar').hasClass('open');
     }
-}
+};
 //==========================================================================================================================
 
 /* Searchbar - Function ================================================================================================
@@ -221,7 +221,7 @@ $.AdminBSB.search = {
         $searchBar.removeClass('open');
         $searchBar.find('input[type="text"]').val('');
     }
-}
+};
 //==========================================================================================================================
 
 /* Navbar - Function =======================================================================================================
@@ -251,7 +251,7 @@ $.AdminBSB.navbar = {
             }
         });
     }
-}
+};
 //==========================================================================================================================
 
 /* Input - Function ========================================================================================================
@@ -288,7 +288,7 @@ $.AdminBSB.input = {
             }
         });
     }
-}
+};
 //==========================================================================================================================
 
 /* Form - Select - Function ================================================================================================
@@ -299,7 +299,7 @@ $.AdminBSB.select = {
     activate: function () {
         if ($.fn.selectpicker) { $('select:not(.ms)').selectpicker(); }
     }
-}
+};
 //==========================================================================================================================
 
 /* DropdownMenu - Function =================================================================================================
@@ -377,7 +377,7 @@ $.AdminBSB.dropdownMenu = {
             }
         });
     }
-}
+};
 //==========================================================================================================================
 
 /* Browser - Function ======================================================================================================
@@ -441,7 +441,7 @@ $.AdminBSB.browser = {
             return '';
         }
     }
-}
+};
 //==========================================================================================================================
 
 $(function () {
@@ -455,4 +455,9 @@ $(function () {
     $.AdminBSB.search.activate();
 
     setTimeout(function () { $('.page-loader-wrapper').fadeOut(); }, 50);
+});
+
+$(function () {
+    //Popover (For Help texts)
+    $('[data-toggle="popover"]').popover();
 });
\ No newline at end of file
diff --git a/Plan/src/main/resources/web/player.html b/Plan/src/main/resources/web/player.html
index 0a1285124..6e59c4c68 100644
--- a/Plan/src/main/resources/web/player.html
+++ b/Plan/src/main/resources/web/player.html
@@ -237,9 +237,18 @@
                         <div class="card">
                             <div class="header">
                                 <div class="row clearfix">
-                                    <div class="col-xs-12 col-sm-6">
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
                                         <h2><i class="fa fa-drivers-license"></i> ${playerName}</h2>
                                     </div>
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
+                                        <a href="javascript:void(0)" class="help material-icons pull-right"
+                                           data-trigger="focus" data-toggle="popover" data-placement="left"
+                                           data-container="body" data-html="true"
+                                           data-original-title="Overview"
+                                           data-content="Quick overview of the Player.
+                                           <br><br><b>Activity Index:</b> Calculated using the sessions in the last 3 weeks. From 0 to 5."
+                                        >help_outline</a>
+                                    </div>
                                 </div>
                             </div>
                             <div class="panel panel-default">
@@ -335,9 +344,17 @@
                         <div class="card">
                             <div class="header">
                                 <div class="row clearfix">
-                                    <div class="col-xs-12 col-sm-6">
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
                                         <h2><i class="fa fa-braille"></i> Punchcard</h2>
                                     </div>
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
+                                        <a href="javascript:void(0)" class="help material-icons pull-right"
+                                           data-trigger="focus" data-toggle="popover" data-placement="left"
+                                           data-container="body" data-html="true"
+                                           data-original-title="Player Join PunchCard"
+                                           data-content="Chart displays the time and days the player usually joins.<br>It includes all sessions.<br><br><b>Relative Activity:</b> Size of a dot is relative to amount of sessions started in that hour."
+                                        >help_outline</a>
+                                    </div>
                                 </div>
                             </div>
                             <div class="body">
@@ -380,9 +397,17 @@
                         <div class="card">
                             <div class="header">
                                 <div class="row clearfix">
-                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                                    <div class="col-xs-8 col-sm-8 col-lg-8">
                                         <h2><i class="fa fa-wifi"></i> Connection Information</h2>
                                     </div>
+                                    <div class="col-xs-4 col-sm-4 col-lg-4">
+                                        <a href="javascript:void(0)" class="help material-icons pull-right"
+                                           data-trigger="focus" data-toggle="popover" data-placement="left"
+                                           data-container="body" data-html="true"
+                                           data-original-title="Connection Information"
+                                           data-content="IP-addresses and Geolocations linked to the addresses<br><br>Last two digits of the IP are hidden by default. If IP displays 'Hidden' the display has been disabled in the config.<br><br>Any connections from the server machine are labeled 'Local Machine'"
+                                        >help_outline</a>
+                                    </div>
                                 </div>
                             </div>
                             <div class="panel panel-default">
@@ -413,9 +438,17 @@
                         <div class="card">
                             <div class="header">
                                 <div class="row clearfix">
-                                    <div class="col-xs-12 col-sm-6">
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
                                         <h2><i class="col-teal fa fa-calendar"></i> Most Recent Sessions</h2>
                                     </div>
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
+                                        <a href="javascript:void(0)" class="help material-icons pull-right"
+                                           data-trigger="focus" data-toggle="popover" data-placement="left"
+                                           data-container="body" data-html="true"
+                                           data-original-title="Sessions Accordion"
+                                           data-content="Latest sessions.<br><br>Each header can be clicked to open a detailed overview of the session.<br><br>World & GameMode playtime is available for each Session."
+                                        >help_outline</a>
+                                    </div>
                                 </div>
                             </div>
                             ${accordionSessions}
@@ -427,9 +460,17 @@
                         <div class="card">
                             <div class="header">
                                 <div class="row clearfix">
-                                    <div class="col-xs-12 col-sm-12">
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
                                         <h2><i class="col-teal fa fa-clock-o"></i> World Playtime</h2>
                                     </div>
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
+                                        <a href="javascript:void(0)" class="help material-icons pull-right"
+                                           data-trigger="focus" data-toggle="popover" data-placement="left"
+                                           data-container="body" data-html="true"
+                                           data-original-title="Total World Playtime"
+                                           data-content="Total Playtime & GameMode split for each world.<br><br>Slices can be hidden by clicking a world name in the legend.<br><br>World Aliases (config) can be used to group multiple worlds together."
+                                        >help_outline</a>
+                                    </div>
                                 </div>
                             </div>
                             <div class="body">
@@ -441,9 +482,17 @@
                         <div class="card">
                             <div class="header">
                                 <div class="row clearfix">
-                                    <div class="col-xs-12 col-sm-12">
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
                                         <h2><i class="col-light-green fa fa-server"></i> Server Preference</h2>
                                     </div>
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
+                                        <a href="javascript:void(0)" class="help material-icons pull-right"
+                                           data-trigger="focus" data-toggle="popover" data-placement="left"
+                                           data-container="body" data-html="true"
+                                           data-original-title="Server Playtime"
+                                           data-content="Total Playtime for each server in the network.<br><br>Slices can be hidden by clicking a server name in the legend.<br><br>Displays server preference in terms of Playtime."
+                                        >help_outline</a>
+                                    </div>
                                 </div>
                             </div>
                             <div class="body">
@@ -532,6 +581,14 @@
                                     <div class="col-xs-12 col-sm-6">
                                         <h2><i class="col-light-green fa fa-server"></i> Servers</h2>
                                     </div>
+                                    <div class="col-xs-6 col-sm-6 col-lg-6">
+                                        <a href="javascript:void(0)" class="help material-icons pull-right"
+                                           data-trigger="focus" data-toggle="popover" data-placement="left"
+                                           data-container="body" data-html="true"
+                                           data-original-title="Server Accordion"
+                                           data-content="In depth detail about sessions on each server in the network.<br><br>Each header can be clicked to open a detailed overview of the sessions on the server.<br><br>World & GameMode playtime is available for each server."
+                                        >help_outline</a>
+                                    </div>
                                 </div>
                             </div>
                             ${accordionServers}
@@ -591,13 +648,13 @@
         time: {
             timezoneOffset: ${timeZone} * 60
         }
-    });
+    })
     var serverSeries = {
         name: 'Server Playtime',
         colorByPoint: true,
         colors: [${serverPieColors}],
         data: ${serverPieSeries}
-    }
+    };
     var worldSeries = {
         name: 'World Playtime',
         colorByPoint: true,