From 66084d6d94fe151496c70327232b6c847a56728f Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 6 Jun 2019 09:51:02 +0200
Subject: [PATCH] collapsibleContainer.js: Adjust id handling

Id's are unique. Making this assumption is fine since anyone
not abiding by this isn't my problem.
---
 .../icinga/behavior/collapsibleContainer.js   | 66 +++++++++----------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/public/js/icinga/behavior/collapsibleContainer.js b/public/js/icinga/behavior/collapsibleContainer.js
index 730ef9d0b..2f8df651a 100644
--- a/public/js/icinga/behavior/collapsibleContainer.js
+++ b/public/js/icinga/behavior/collapsibleContainer.js
@@ -4,8 +4,7 @@
 
     'use strict';
 
-    var expandedContainers = [];
-    var maxLength = 32;
+    var expandedContainers = {};
     var defaultNumOfRows = 2;
     var defaultHeight = 36;
 
@@ -31,41 +30,37 @@
      * @param event  Event  The `onRender` event triggered by the rendered container
      */
     CollapsibleContainer.prototype.onRendered = function(event) {
-        $(event.target).find('.collapsible-container').each(function() {
+        $(event.target).find('.collapsible-container[data-collapsible-id]').each(function() {
             var $this = $(this);
 
-            if ($this.data('collapsible-id') && $('[data-collapsible-id=' + $this.data('collapsible-id') + ']').length < 2) {
-                if ($this.find('.collapsible').length > 0) {
-                    $this.addClass('has-collapsible');
-                    if ($this.find('.collapsible').innerHeight() > ($this.data('height') || defaultHeight)) {
-                        $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
-                        $this.addClass('can-collapse');
-                    }
-                } else {
-                    if ($this.innerHeight() > ($this.data('height') || defaultHeight)) {
-                        $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
-                        $this.addClass('can-collapse');
-                    }
+            if ($this.find('.collapsible').length > 0) {
+                $this.addClass('has-collapsible');
+                if ($this.find('.collapsible').innerHeight() > ($this.data('height') || defaultHeight)) {
+                    $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
+                    $this.addClass('can-collapse');
+                }
+            } else {
+                if ($this.innerHeight() > ($this.data('height') || defaultHeight)) {
+                    $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
+                    $this.addClass('can-collapse');
                 }
             }
             updateCollapsedState($this);
         });
 
-        $(event.target).find('.collapsible-table-container').each(function() {
+        $(event.target).find('.collapsible-table-container[data-collapsible-id]').each(function() {
             var $this = $(this);
 
-            if ($this.data('collapsible-id') && $('[data-collapsible-id=' + $this.data('collapsible-id') + ']').length < 2) {
-                if ($this.find('.collapsible').length > 0) {
-                    $this.addClass('has-collapsible');
-                    if ($this.find('tr').length > ($this.attr('data-numofrows') || defaultNumOfRows)) {
-                        $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
-                        $this.addClass('can-collapse');
-                    }
+            if ($this.find('.collapsible').length > 0) {
+                $this.addClass('has-collapsible');
+                if ($this.find('tr').length > ($this.attr('data-numofrows') || defaultNumOfRows)) {
+                    $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
+                    $this.addClass('can-collapse');
+                }
 
-                    if ($this.find('li').length > ($this.attr('data-numofrows') || defaultNumOfRows)) {
-                        $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
-                        $this.addClass('can-collapse');
-                    }
+                if ($this.find('li').length > ($this.attr('data-numofrows') || defaultNumOfRows)) {
+                    $this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
+                    $this.addClass('can-collapse');
                 }
             }
             updateCollapsedState($this);
@@ -81,14 +76,7 @@
         var $target = $(event.target);
         var $c = $target.closest('.collapsible-container, .collapsible-table-container');
 
-        if ($c.hasClass('collapsed')) {
-            if (expandedContainers.length > maxLength - 1) {
-                expandedContainers.shift();
-            }
-            expandedContainers.push($c.data('collapsible-id'));
-        } else {
-            expandedContainers.splice(expandedContainers.indexOf($c.data('collapsible-id')), 1);
-        }
+        expandedContainers[$c.data('collapsibleId')] = $c.is('.collapsed');
 
         console.log(expandedContainers);
 
@@ -108,7 +96,13 @@
         } else {
             $collapsible = $container;
         }
-        if (expandedContainers.indexOf($container.data('collapsible-id')) > -1) {
+
+        var collapsibleId = $container.data('collapsibleId');
+        if (typeof expandedContainers[collapsibleId] === 'undefined') {
+            expandedContainers[collapsibleId] = false;
+        }
+
+        if (expandedContainers[collapsibleId]) {
             $container.removeClass('collapsed');
             $collapsible.css({ maxHeight: 'none' });
         } else {