From c1bc3ce0fc249cb420bbcc149b848fd08b66a2f3 Mon Sep 17 00:00:00 2001
From: Rohit <rnand@aescape.co>
Date: Wed, 26 Jun 2019 15:34:16 -0400
Subject: [PATCH] work on load bags button

---
 .../components/coordinator/coordinator.html   | 15 ++--
 .../components/coordinator/js/ros_scripts.js  |  2 +-
 .../components/coordinator/js/update_guis.js  | 89 ++++++++++++-------
 client/app/main.css                           |  5 +-
 4 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/client/app/components/coordinator/coordinator.html b/client/app/components/coordinator/coordinator.html
index fa0424a..c9265a3 100644
--- a/client/app/components/coordinator/coordinator.html
+++ b/client/app/components/coordinator/coordinator.html
@@ -357,7 +357,7 @@
                                         <button type="button" onclick="triggerService('/left/aescape/mode/activateReadyController')" class="btn col-md-3">
                                             Activate Ready Mode
                                         </button>
-                                        <button id="executionLoadButton" type="button" onclick="triggerService('/aescape/bags/startPlayingLastRecording')" class="btn btn-primary col-md-3">
+                                        <button id="executionLoadButton" type="button" onclick="displayLoadingOptions()" class="btn btn-primary col-md-3">
                                             Load Recording
                                         </button>
                                         <button id="executionStartButton" type="button" onclick="triggerService('/left/aescape/mode/activateExecutionController'); triggerTopic('/left/run_trajectory')" class="btn btn-primary col-md-3">
@@ -396,8 +396,8 @@
                                             <i class="fas fa-times-circle" onclick="hideTaggingOptions('playTags', false)"></i>
                                         </div>
                                     </div>
-                                    <div>
-                                        <div class="col-md-8">
+                                    <div class="loading options open">
+                                        <div class="col-md-10">
                                             <div class="dropdown">
                                                 <div>
                                                         <select id="bagList" placeholder="Select bag to play">
@@ -406,12 +406,9 @@
                                                 <!-- <i class="fas fa-sync-alt" onclick="updateRecordingsList()"></i> -->
                                             </div>
                                         </div>
-                                        <div class="col-md-4">
-                                            <button class="btn btn-primary" type="button" onclick="loadSelectedBagFile()">
-                                                <span>
-                                                    Load Bag
-                                                </span>
-                                            </button>
+                                        <div class="col-md-2">
+                                            <i class="fas fa-check-circle" onclick="loadSelectedBagFile()"></i>
+                                            <i class="fas fa-times-circle" onclick=""></i>
                                         </div>
                                     </div>
                                     <div id="playTagError" class="col-md-10"></div>
diff --git a/client/app/components/coordinator/js/ros_scripts.js b/client/app/components/coordinator/js/ros_scripts.js
index 519156b..5f031c9 100644
--- a/client/app/components/coordinator/js/ros_scripts.js
+++ b/client/app/components/coordinator/js/ros_scripts.js
@@ -421,7 +421,7 @@ function invokeSafetyController(event)
 {
    var keyID = event.keyCode;
    //8 == backspace, 46 == delete
-   if(keyID == 8 || keyID == 46) {
+   if(keyID == 46) {
     triggerService('/aescape/safety_activate')
    }
 }
diff --git a/client/app/components/coordinator/js/update_guis.js b/client/app/components/coordinator/js/update_guis.js
index b6621c0..bedf070 100644
--- a/client/app/components/coordinator/js/update_guis.js
+++ b/client/app/components/coordinator/js/update_guis.js
@@ -47,36 +47,6 @@ function getBagTagList(callback)
 }
 
 
-
-
-setTimeout(function(){
-  var $select = $('#bagList').selectize({
-    valueField: 'name',
-    labelField: 'name',
-    searchField: ['name'],
-    options: [], 
-    create: false,
-    placeholder : "Select bag to play"
-  });  
-
-  function updateRecordingsList()
-  {
-    getBagList(function(results){
-      var selectize = $select[0].selectize;
-      selectize.clearOptions()
-      selectize.addOption(results.map(function(bagName){
-        return {name : bagName}
-      }));
-    }) 
-  };
-
-  window.setInterval(function(){
-    updateRecordingsList()
-  }, 1000);
-
-}, 1000);
-
-
 setTimeout(function(){
   document.querySelector('.hand-panel-right .status-bar').style.height = document.querySelector('.hand-panel-left .status-bar').offsetHeight + 20 + "px";
   $(function () {
@@ -155,14 +125,16 @@ function displayTaggingOptions(mode) {
 
 }
 
-function hideTaggingOptions(id, updateValues=false) {
+function hideTaggingOptions(mode, updateValues=false) {
+  var modeTag = '#' + mode + 'Tag';
+
   if(updateValues) {
     //get values from the elements
     updateBagMetadata(mode, bag_name, modified_bag_name, category, tags)
   }
   //TO DO: Wait for the response from the backend before setting the display to none
-  document.getElementById(id).setAttribute('overflow', 'hidden');
-  document.getElementById(id).classList.remove('open');
+  document.getElementById(modeTag).setAttribute('overflow', 'hidden');
+  document.getElementById(modeTag).classList.remove('open');
 }
 
 function updateBagMetadata(mode, bag_name, modified_bag_name, category, tags) {
@@ -181,4 +153,55 @@ function updateBagMetadata(mode, bag_name, modified_bag_name, category, tags) {
   })
 }
 
+function displayLoadingOptions() {
+
+  selector = "#bagList"
+
+  document.querySelector(selector).classList.add('open');
+
+  //get bag list
+    //select last recorded bag
+    //do animation
+    var $select = $('#bagList').selectize({
+      valueField: 'filename',
+      labelField: 'filename',
+      searchField: ['filename', 'category', 'tags'],
+      options: [], 
+      create: false,
+      placeholder : "Select bag to play", 
+      render : {
+        item: function(item, escape) {
+            return '<div>' +
+                (item.filename ? '<span class="name">' + escape(item.filename) + '</span>' : '') +
+                (item.category ? '<span class="email">' + escape(item.category) + '</span>' : '') +
+            '</div>';
+        },
+        option: function(item, escape) {
+            var label = item.filename || item.category;
+            var caption = item.filename ? item.category : null;
+            return '<div>' +
+                '<span class="label">' + escape(label) + '</span>' +
+                (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
+            '</div>';
+        }
+      }
+    });  
+  
+    getBagList(function(results){
+      var selectize = $select[0].selectize;
+      selectize.clearOptions()
+      results = [{'filename' : 'hellobiathco', 'category' : 'hellobiathcat', 'tags' : ['hellobiathtag', 'hellobiatag2']}]
+      selectize.addOption(results);
+      if(results[0]) {
+        selectize.setValue(results[0].filename);
+      }
+    }) 
+}
+
+function hideLoadingOptions() {
+  var selector = '#bagList';
+
+  document.getElementById(selector).setAttribute('overflow', 'hidden');
+  document.getElementById(selector).classList.remove('open');
+}
 
diff --git a/client/app/main.css b/client/app/main.css
index bec11d3..8bb2d5a 100644
--- a/client/app/main.css
+++ b/client/app/main.css
@@ -402,11 +402,14 @@ html, body {
     }
 
 
-    .tagging-options {
+    .tagging-options, .loading-options {
         height: 0;
         overflow: hidden;
         transition: height 600ms ease 0ms;
     }
     .tagging-options.open {
         height: 122px;
+    }
+    .loading-options.open {
+        height: 85px;
     }
\ No newline at end of file