Merge pull request #106 from diggyk/quest_page_revamp

Quest page revamp
dropbox · Dec 10, 2015 · f3dcb7e · f3dcb7e
2 parents 4268d8a + bf129fd
commit f3dcb7e
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 63 deletions.
diff --git a/hermes/version.py b/hermes/version.py
@@ -1 +1 @@
-__version__ = "0.7.0"
+__version__ = "0.7.1"
diff --git a/hermes/webapp/src/css/main.less b/hermes/webapp/src/css/main.less
@@ -321,12 +321,12 @@ a {
 
 }
 
-.quest-list {
+.sidebar {
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
   background: @unselected-color;
-  padding: 0px;
+  padding: 0;
   h1 {
     font-size: 1.5em;
     font-weight: bold;
@@ -337,9 +337,8 @@ a {
   }
 }
 
-.quest-list-filter {
-  border-bottom: @selected-color 2px dotted;
-  padding: 20px 10px 10px 10px;
+.sidebar-filter {
+  padding: 10px 10px 10px 10px;
 }
 
 .quest-list-entry {

diff --git a/hermes/webapp/src/js/controllers/laborStatusCtrl.js b/hermes/webapp/src/js/controllers/laborStatusCtrl.js
@@ -1,7 +1,7 @@
 (function() {
     'use strict';
 
-    function LaborStatusCtrl(hermesService, $q, $routeParams, $location, $cookies) {
+    function LaborStatusCtrl(hermesService, $q, $routeParams, $location, $cookies, smoothScroll) {
         var vm = this;
 
         vm.errorMessage = null;
@@ -302,6 +302,17 @@
                     }
                 }
 
+                // finally, if we did request a labor, let's scroll to it
+                if ($routeParams.laborId) {
+                    setTimeout(function() {
+                        var laborDiv = document.getElementById("l" + $routeParams.laborId);
+                        smoothScroll(laborDiv, {
+                            duration: 700,
+                            easing: 'easeInOutQuad',
+                            offset: 100
+                        });
+                    }, 100);
+                }
                 getHostTags();
             }).catch(function(error) {
                 vm.errorMessage = "Could not load open labors!  Please try again later.";
@@ -436,6 +447,7 @@
         '$q',
         '$routeParams',
         '$location',
-        '$cookies'
+        '$cookies',
+        'smoothScroll'
     ];
 })();
diff --git a/hermes/webapp/src/js/controllers/questCreationCtrl.js b/hermes/webapp/src/js/controllers/questCreationCtrl.js
@@ -137,14 +137,11 @@
             hermesService.runQuery(vm.queryString).then(function(hosts) {
                 vm.queryInProgress = false;
                 if (hosts && hosts.length != 0) {
-                    console.log(hosts);
                     vm.queriedHosts = hosts;
                 } else {
-                    console.log("EMPTY!");
                     vm.queryErrorMessage = "Query returned no results.";
                 }
             }).catch(function(error) {
-                console.log("ERROR!");
                 vm.queryInProgress = false;
                 vm.queryErrorMessage = "Failed to run query!  " + error.statusText;
             });

diff --git a/hermes/webapp/src/js/controllers/questStatusCtrl.js b/hermes/webapp/src/js/controllers/questStatusCtrl.js
@@ -278,8 +278,6 @@
 
         function newQuestSelection(quest) {
             vm.errorMessage = null;
-            var detailsDiv = document.getElementById('quest-details');
-            smoothScroll(detailsDiv, {duration: 700, easing: 'easeInOutQuad', offset: 100});
             vm.selectedQuest = quest;
             vm.selectedQuestDetails = null;
             vm.selectedQuestUniqueLabors = 0;
@@ -291,6 +289,10 @@
             vm.selectedLabors = [];
             vm.countByTypes = null;
 
+            // Scroll back to the top of the page
+            var detailsDiv = document.getElementById('quest-details');
+            smoothScroll(detailsDiv, {duration: 700, easing: 'easeInOutQuad', offset: 100});
+
             // make an array of all the hostnames, and have the hermes service
             // give us back a hostname to owner mapping
             // NOTE: this will have duplicate entries for hostname because we
@@ -367,7 +369,7 @@
                     sortedLabors[creator] = {};
                 }
 
-                // if this labor is completed, we will file it by the complete event type
+                // if this labor is completed, we will file it by the completed event type
                 if (laborsUnique[idx]['completionEvent']) {
                     var key = laborsUnique[idx]['completionEvent']['eventType']['description'];
                     // update the count of labors by type
@@ -378,12 +380,20 @@
                         if (sortedLabors[owner][key]) {
                             sortedLabors[owner][key]['count']++;
                             sortedLabors[owner][key]['hosts'].push(
-                                laborsUnique[idx]['host']['hostname']
+                                {
+                                    'hostname': laborsUnique[idx]['host']['hostname'],
+                                    'laborId': laborsUnique[idx]['id']
+                                }
                             )
                         } else {
                             sortedLabors[owner][key] = {
                                 'count': 1,
-                                'hosts': [laborsUnique[idx]['host']['hostname']]
+                                'hosts': [
+                                    {
+                                        'hostname': laborsUnique[idx]['host']['hostname'],
+                                        'laborId': laborsUnique[idx]['id']
+                                    }
+                                ]
                             }
                         }
                     }
@@ -393,12 +403,20 @@
                         if (sortedLabors[creator][key]) {
                             sortedLabors[creator][key]['count']++;
                             sortedLabors[creator][key]['hosts'].push(
-                                laborsUnique[idx]['host']['hostname']
+                                {
+                                    'hostname': laborsUnique[idx]['host']['hostname'],
+                                    'laborId': laborsUnique[idx]['id']
+                                }
                             )
                         } else {
                             sortedLabors[creator][key] = {
                                 'count': 1,
-                                'hosts': [laborsUnique[idx]['host']['hostname']]
+                                'hosts': [
+                                    {
+                                        'hostname': laborsUnique[idx]['host']['hostname'],
+                                        'laborId': laborsUnique[idx]['id']
+                                    }
+                                ]
                             }
                         }
                     }
@@ -416,12 +434,20 @@
                         if (sortedLabors[owner][key]) {
                             sortedLabors[owner][key]['count']++;
                             sortedLabors[owner][key]['hosts'].push(
-                                laborsUnique[idx]['host']['hostname']
+                                {
+                                    'hostname': laborsUnique[idx]['host']['hostname'],
+                                    'laborId': laborsUnique[idx]['id']
+                                }
                             )
                         } else {
                             sortedLabors[owner][key] = {
                                 'count': 1,
-                                'hosts': [laborsUnique[idx]['host']['hostname']]
+                                'hosts': [
+                                   {
+                                        'hostname': laborsUnique[idx]['host']['hostname'],
+                                        'laborId': laborsUnique[idx]['id']
+                                    }
+                                ]
                             }
                         }
                     }
@@ -431,12 +457,20 @@
                         if (sortedLabors[creator][key]) {
                             sortedLabors[creator][key]['count']++;
                             sortedLabors[creator][key]['hosts'].push(
-                                laborsUnique[idx]['host']['hostname']
+                                {
+                                    'hostname': laborsUnique[idx]['host']['hostname'],
+                                    'laborId': laborsUnique[idx]['id']
+                                }
                             )
                         } else {
                             sortedLabors[creator][key] = {
                                 'count': 1,
-                                'hosts': [laborsUnique[idx]['host']['hostname']]
+                                'hosts': [
+                                    {
+                                        'hostname': laborsUnique[idx]['host']['hostname'],
+                                        'laborId': laborsUnique[idx]['id']
+                                    }
+                                ]
                             }
                         }
                     }

diff --git a/hermes/webapp/src/js/filters/encode.js b/hermes/webapp/src/js/filters/encode.js
@@ -0,0 +1,10 @@
+(function() {
+
+    'use strict';
+
+    function EncodeFilter() {
+        return window.encodeURIComponent;
+    }
+
+    angular.module('hermesApp').filter('encode', EncodeFilter);
+})();
diff --git a/hermes/webapp/src/js/services/hermesService.js b/hermes/webapp/src/js/services/hermesService.js
@@ -297,7 +297,6 @@
                         baseY += YINC;
                     }
                 }
-                console.log(graphData);
             }).then(function() {
                 fatesGraph = graphData;
                 return graphData;

diff --git a/hermes/webapp/src/templates/laborList.html b/hermes/webapp/src/templates/laborList.html
@@ -1,7 +1,9 @@
 <div ng-controller="LaborStatusCtrl as lsc">
     <div class="row">
-        <div class="col-md-3 labor-left-panel">
-            <div class="labor-left-panel-filter">
+        <!-- SIDEBAR-->
+        <div class="col-md-3 sidebar">
+            <!-- FILTERING INPUTS -->
+            <div class="sidebar-filter">
                  <div class="row">
                     <div class="col-md-10"><label for="filterOwn">Show only my
                         labors:</label></div>
@@ -131,6 +133,7 @@
                 <!--LABOR ENTRY REPEATER-->
                 <div class="labor-list-row" ng-if="lsc.laborData  && !lsc.errorMessage"
                      ng-repeat="labor in (pageData = (lsc.laborData | limitTo:lsc.limit:lsc.offset)) track by labor.id">
+                    <!-- QUEST HEADER -->
                     <div class="quest-info" ng-if="labor.quest && labor.quest.id != pageData[$index-1].quest.id">
                         <div class="title">
                             <a ng-href="/v1/quests/{{labor.quest.id}}">
@@ -148,11 +151,11 @@
                             The following labors were created as a result of events that were not part of a quest creation.
                         </div>
                     </div>
-                    <div class="labor-entry"
+                    <div id="l{{labor.id}}" class="labor-entry"
                          ng-click="lsc.toggleSelect(labor.id)"
                          ng-class="lsc.selected.indexOf(labor.id) != -1 ? 'selected': ''">
                         <div class="row">
-                            <div class="col-md-6">
+                            <div class="col-md-4">
                                 <div class="row">
                                     <div class="hostname col-md-12"><strong>{{labor.host.hostname}}:</strong> {{labor.fate.description}}</div>
                                     <div class="info-panel col-md-12">
@@ -170,7 +173,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="info-panel col-md-6">
+                            <div class="info-panel col-md-8">
                                 <div class="label-holder">
                                     <strong>Tags:</strong>
                                 </div>