fixed loading select

client/app/components/coordinator/coordinator.html

@@ -396,11 +396,11 @@
                                             <i class="fas fa-times-circle" onclick="hideTaggingOptions('play', false)"></i>
                                         </div>
                                     </div>
-                                    <div class="slider-options loading-options">
+                                    <div class="slider-options loading-options" id="loadBags">
                                         <div class="col-md-10">
                                             <div class="dropdown">
                                                 <div>
-                                                        <select id="bagList" placeholder="Select bag to play">
+                                                        <select id="loadBagList" placeholder="Select bag to play">
                                                         </select>
                                                 </div>
                                                 <!-- <i class="fas fa-sync-alt" onclick="updateRecordingsList()"></i> -->
@@ -408,7 +408,7 @@
                                         </div>
                                         <div class="col-md-2">
                                             <i class="fas fa-check-circle" onclick="loadSelectedBagFile()"></i>
-                                            <i class="fas fa-times-circle" onclick=""></i>
+                                            <i class="fas fa-times-circle" onclick="hideLoadingOptions()"></i>
                                         </div>
                                     </div>
                                     <div id="playTagError" class="col-md-10 error"></div>

client/app/components/coordinator/js/update_guis.js

@@ -67,7 +67,7 @@ function displayTaggingOptions(mode) {
   document.querySelector(modeTag).classList.add('open');
   //Putting this in a timeout to wait for the animation to finish completing
   setTimeout(function(){
-    document.querySelector(modeTag).setAttribute('overflow', 'visible');
+    document.querySelector(modeTag).style.overflow = "visible";
   }, 600)
 
   var $fileNameSelect = $(fileNameSelector).selectize({
@@ -144,7 +144,7 @@ function hideTaggingOptions(mode, updateValues=false) {
     updateBagMetadata(mode, bag_name, filename, category, tags)
   }
   //TO DO: Wait for the response from the backend before setting the display to none
-  document.querySelector(modeTag).setAttribute('overflow', 'hidden');
+  document.querySelector(modeTag).style.overflow = "hidden";
   document.querySelector(modeTag).classList.remove('open');
 }
 
@@ -169,11 +169,15 @@ function updateBagMetadata(mode, bag_name, modified_bag_name, category, tags) {
 
 function displayLoadingOptions() {
 
-  selector = "#bagList"
+  selector = "#loadBags";
 
   document.querySelector(selector).classList.add('open');
+  //Putting this in a timeout to wait for the animation to finish completing
+  setTimeout(function(){
+    document.querySelector(selector).style.overflow = "visible";
+  }, 420)
 
-    var $select = $('#bagList').selectize({
+    var $select = $('#loadBagList').selectize({
       valueField: 'filename',
       labelField: 'filename',
       searchField: ['filename', 'category', 'tags'],
@@ -182,17 +186,29 @@ function displayLoadingOptions() {
       placeholder : "Select bag to play", 
       render : {
         item: function(item, escape) {
-            return '<div>' +
+            return '<div class="bag-select-element">' +
-                (item.filename ? '<span class="name">' + escape(item.filename) + '</span>' : '') +
+              '<div class="bag-select-element">' +
-                (item.category ? '<span class="email">' + escape(item.category) + '</span>' : '') +
+                '<span class="filename">' + escape(item.filename) + '</span>' +
+                '<span class="category">' + ' (' + escape(item.category) + ') ' + '</span>' + 
+              '</div>' + 
             '</div>';
         },
         option: function(item, escape) {
             var label = item.filename || item.category;
             var caption = item.filename ? item.category : null;
-            return '<div>' +
+            return '<div class="bag-select-element bag-option">' +
-                '<span class="label">' + escape(label) + '</span>' +
+              '<div class="primary">' + 
-                (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
+                '<div class="filename">' + escape(item.filename) + '</div>' +
+                '<div class="category">' + escape(item.category) + '</div>' + 
+              '</div>' + 
+              '<div class="secondary">' + 
+                '<div class="tags">' + 
+                  item.tags.map(function(tag) {
+                    return '<span class="tag label label-info">' + escape(tag) + '</span>' 
+                  }).join(' ') + 
+                '</div>' +
+                '<div class="timestamp">' + escape('27 Jun 10:10am')  + '</div>' + 
+              '</div>' + 
             '</div>';
         }
       }
@@ -200,7 +216,8 @@ function displayLoadingOptions() {
   
     getBagList(function(results){
       var selectize = $select[0].selectize;
-      selectize.clearOptions()
+      selectize.clearOptions();
+      //results = [{filename : 'testfile', category: 'testcategory', tags : ['testtag1', 'testtag2', 'testtag3']}, {filename : 'testfile2', category: 'testcategory2', tags : ['testtag21', 'testtag22', 'testtag23']}]
       selectize.addOption(results);
       if(results[0]) {
         selectize.setValue(results[0].filename);
@@ -209,9 +226,9 @@ function displayLoadingOptions() {
 }
 
 function hideLoadingOptions() {
-  var selector = '#bagList';
+  var selector = '#loadBags';
 
-  document.querySelector(selector).setAttribute('overflow', 'hidden');
+  document.querySelector(selector).style.overflow = "hidden";
   document.querySelector(selector).classList.remove('open');
 }
 

client/app/main.css

@@ -409,11 +409,64 @@ html, body {
         transition: height 600ms ease 0ms;
     }
     .loading-options {
-        transition: height 600ms ease 0ms;
+        transition: height 420ms ease 0ms;
     }
     .tagging-options.open {
         height: 122px;
     }
     .loading-options.open {
         height: 85px;
-    }
+    }
+
+    
+    .bag-option > div {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+
+    .bag-option .filename {
+        width: 60%;
+        font-size: 12pt;
+        font-weight: 600;
+    }
+
+    .bag-option .category {
+        width: 40%;
+        font-weight: 600;
+        
+    }
+
+    .bag-option .tags {
+        width: 60%;
+        
+    }
+
+    .bag-option .timestamp {
+        width: 40%;
+        
+    }
+
+
+
+    .loading-options .selectize-input {
+        font-size: 13pt;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: 600;
+    }
+
+    /*
+    .selectize-dropdown, .selectize-dropdown.form-control{
+        height: 90vh !important;
+    }
+    
+    .selectize-dropdown-content{
+        max-height: 100% !important;
+        height: 100% !important;
+    }
+    */
+