From b2f0c1214fff9cebe97a49a8ccaba7e1630435da Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Wed, 26 Mar 2014 00:32:54 -0400
Subject: [PATCH] Expanded new aw-accordion directive to update local storage
 with the active panel. When user navigates away from a page and returns the
 accordions are restored.

---
 awx/ui/static/lib/ansible/directives.js | 59 +++++++++++++++++++++++--
 awx/ui/static/partials/jobs.html        |  8 ++--
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js
index b805ceddab..ca7858ef5d 100644
--- a/awx/ui/static/lib/ansible/directives.js
+++ b/awx/ui/static/lib/ansible/directives.js
@@ -632,11 +632,62 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
     }])
 
 
-    .directive('awAccordion', function() {
-        return function(scope, element) {
+    .directive('awAccordion', ['Empty', '$location', 'Store', function(Empty, $location, Store) {
+        return function(scope, element, attrs) {
+            var active,
+                list = Store('accordions'),
+                id, base;
+            
+            if (!Empty(attrs.openFirst)) {
+                active = 0;
+            }
+            else {
+                // Look in storage for last active panel
+                if (list) {
+                    id = $(element).attr('id');
+                    base = ($location.path().replace(/^\//, '').split('/')[0]);
+                    list.every(function(elem) {
+                        if (elem.base === base && elem.id === id) {
+                            active = elem.active;
+                            return false;
+                        }
+                        return true;
+                    });
+                }
+                active = (Empty(active)) ? 0 : active;
+            }
+
             $(element).accordion({
                 collapsible: true,
-                heightStyle: "content"
+                heightStyle: "content",
+                active: active,
+                activate: function() {
+                    // When a panel is activated update storage
+                    var active = $(this).accordion('option', 'active'),
+                        id = $(this).attr('id'),
+                        base = ($location.path().replace(/^\//, '').split('/')[0]),
+                        list = Store('accordions'),
+                        found = false;
+                    if (!list) {
+                        list = [];
+                    }
+                    list.every(function(elem) {
+                        if (elem.base === base && elem.id === id) {
+                            elem.active = active;
+                            found = true;
+                            return false;
+                        }
+                        return true;
+                    });
+                    if (found === false) {
+                        list.push({
+                            base: base,
+                            id: id,
+                            active: active
+                        });
+                    }
+                    Store('accordions', list);
+                }
             });
         };
-    });
+    }]);
diff --git a/awx/ui/static/partials/jobs.html b/awx/ui/static/partials/jobs.html
index 8020a7215e..3180521f4f 100644
--- a/awx/ui/static/partials/jobs.html
+++ b/awx/ui/static/partials/jobs.html
@@ -6,25 +6,25 @@
         <div class="row">
             <div class="col-md-12">
                 <div id="jobs-page ">
-                    <div aw-accordion>
+                    <div id="job-page-accordion-0" aw-accordion>
                         <h3>Completed</h3>
                         <div class="job-list" id="completed-jobs-container">
                             <div id="completed-jobs"></div>
                         </div>
                     </div>
-                    <div aw-accordion>
+                    <div id="job-page-accordion-1" aw-accordion>
                         <h3>Active</h3>
                         <div class="job-list" id="active-jobs-container">
                             <div id="active-jobs"></div>
                         </div>
                     </div>
-                    <div aw-accordion>
+                    <div id="job-page-accordion-2" aw-accordion>
                         <h3>Queued</h3>
                         <div class="job-list" id="queued-jobs-container">
                             <div id="queued-jobs"></div>
                         </div>
                     </div>
-                    <div aw-accordion>
+                    <div id="job-page-accordion-3" aw-accordion>
                         <h3>Scheduled</h3>
                         <div class="job-list" id="scheduled-jobs-container">
                             <div id="scheduled-jobs"></div>