Add back button functionality for sidenav

meteor/app/client/vr.html

@@ -25,12 +25,17 @@ Avijit Gupta 526avijit@gmail.com
     <h3>Summary</h3>
     <a><em>{{attackDetails.host}}</em></a>
     <a>Rank <em># {{attackDetails.rank}}</em></a>
-    <!-- <a class="text-left attacks-list" id="show-attacks-list">List of attacks <span class="pull-right glyphicon glyphicon-arrow-right"></span></a> -->
-    <ul class="text-center" id="attacks-list" style="list-style: none; color: white;">
+
+    {{#if isShowAttackDetails}}
+    <i class="glyphicon glyphicon-chevron-left back-button"></i>
+    <h5>Hello</h5>
+    {{else}}
+    <ul class="text-center attacks-list">
         {{#each attackDetails.attacks}}
-        <li class="text-center">{{category}}</li>
+        <li class="text-center attacks-list-item">{{category}}</li>
         {{/each}}
     </ul>
+    {{/if}}
 
 </nav>
 

meteor/app/client/vr.js

@@ -210,7 +210,6 @@ if (Meteor.isClient) {
           }
         });
       });
-      console.log(" world = ",  world);
 
       var attacks = Object.keys(world).sort(function(prev, current) {
         return world[current].length - world[prev].length;
@@ -262,6 +261,9 @@ if (Meteor.isClient) {
   Template.vr.helpers({
     attackDetails: function() {
       return Session.get('attackDetails');
+    },
+    isShowAttackDetails: function() {
+      return Session.get('isShowAttackDetails');
     }
   });
 
@@ -286,6 +288,7 @@ if (Meteor.isClient) {
           var attackRegion = intersect.object.host;
           var attacks = intersect.object.attacks;
           if (typeof attackRank !== "undefined") {
+            Session.set('isShowAttackDetails', false);
             var sessionAttackObj = {
               host: attackRegion,
               rank: attackRank,
@@ -302,12 +305,16 @@ if (Meteor.isClient) {
       else if(sideNav.hasClass(OPENNAV)) {
         sideNav.removeClass(OPENNAV);
       }
+    },
+
+    "click .attacks-list-item": function() {
+      Session.set('isShowAttackDetails', true);
+    },
+
+    "click .back-button": function() {
+      Session.set('isShowAttackDetails', false);
     }
 
-    // "click #show-attacks-list": function() {
-
-    // }
-
   });
 
   Template.vr.destroyed = function () {

meteor/public/css/mozdef.css

@@ -537,11 +537,33 @@ circle:hover{
     padding: 8px 10px;
 }
 
-
-.vr-sidenav a {
-    height: 4em;
+.vr-sidenav {
+    color: white;
 }
 
-.vr-sidenav a.attacks-list:hover {
+.vr-sidenav .back-button {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    color: white;
+    font-size: 18px;
+}
+
+.vr-sidenav .back-button:hover {
     cursor: pointer;
+}
+
+.vr-sidenav .attacks-list {
+    list-style: none;
+    color: white;
+    margin-left: -40px;
+}
+
+.vr-sidenav .attacks-list .attacks-list-item {
+    padding: 5px;
+}
+
+.vr-sidenav .attacks-list .attacks-list-item:hover {
+    cursor: pointer;
+    text-decoration: underline;
 }