added skeleton for the tagging flow

client/app/components/coordinator/coordinator.html

@@ -272,8 +272,23 @@
                             </div>
                             <div class="action-area panel-footer">
                                 <div id="RecordingStatusLabel" class="message">
-                                    <!--Bag manager not connected! -->
+                                    <!-- TO DO: Show errors in bag manager -->
                                 </div>
+                                <div class="tagging-options" id="teaching-tags">
+                                    <div class="col-md-10">
+                                        <!--full with naming box search:no new:yes-->
+                                        <select id="playBagFileName" placeholder="Filename"> <option value="test">Test</option> </select>
+                                        <!--full width category box search:yes new:yes-->
+                                        <select id="playBagCategory" placeholder="Category"> <option value="test">Test</option> </select>
+                                        <!--full width tags box search:yes new:yes-->
+                                        <select id="playBagTags" placeholder="Tags"> <option value="test">Test</option> </select>
+                                    </div>
+                                    <div class="col-md-2">
+                                        <i class="fas fa-check" onclick="hideTaggingOptions('teaching-tags', true)"></i>
+                                        <i class="fas fa-times" onclick="hideTaggingOptions('teaching-tags', false)"></i>
+                                    </div>
+                                </div>
+                                <div class="clearfix"></div>
                             </div>
                         </div>                        
                     </div>
@@ -289,7 +304,7 @@
                                             Activate Ready Mode
                                         </button>
                                         <button id="executionLoadButton" type="button" onclick="triggerService('/aescape/bags/startPlayingLastRecording')" class="btn btn-primary col-md-3">
-                                            Load Last Recording
+                                            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">
                                             Play Loaded Recording
@@ -490,7 +505,7 @@
                                 <div class="control-card-six control-card panel panel-default">
                                     <div class="panel-heading">
                                         Operation Mode
-                                        <i class="fas fa-info-circle" tabindex="0" data-toggle="popover" data-trigger="focus" data-content="This selects the operation mode of the right arm."></i>
+                                        <i class="fas fa-info-circle" tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-content="This selects the operation mode of the right arm."></i>
                                     </div>
                                     <div class="panel-body text-center">
                                         <div class="button-area">

client/app/components/coordinator/js/ros_scripts.js

@@ -404,105 +404,15 @@ function triggerService(serviceName, toSend)
   }, 1000);
 }
 
-
-function triggerMessageService(serviceName, text)
-{
-  var service = new ROSLIB.Service({
-    ros : ros,
-    name : serviceName,
-    serviceType : 'demobot.TriggerMessage'
-  });
-  
-  var request = new ROSLIB.ServiceRequest({
-    message : text
-  });
-
-  var serviceCallTimeStamp = Date.now();
-  var serviceCallReturned = false;
-  
-  service.callService(request, function(result) {
-    console.log('Result for service call on '
-      + serviceName
-      + ': '
-      + result);
-      //check for result.success == false
-      if(result.success == true) {
-        $(document).ready(function(){
-          $.notify({
-            message: "Going good! "+ serviceName
-          }, {
-            "placement" : {
-              from: "bottom",
-              align: "right"
-            }, 
-            type: 'success', 
-            delay: 1000 
-          });
-        });
-      } else {
-        $(document).ready(function(){
-          $.notify({
-            message: "Something went wrong :( " + serviceName
-          }, {
-            "placement" : {
-              from: "bottom",
-              align: "right"
-            }, 
-            type: 'danger', 
-            delay: 1000 
-          });
-        });
-      }
-      serviceCallReturned = true;
-
-  }, function(error){
-      console.log("errored");
-      $(document).ready(function(){
-        $.notify({
-          message: "Something went wrong :( " + serviceName
-        }, {
-          "placement" : {
-            from: "bottom",
-            align: "right"
-          }, 
-          type: 'danger', 
-          delay: 1000 
-        });
-      });
-      serviceCallReturned = true;
-  });
-  var responseCheckInterval = setInterval(function() {
-    var timeElapsedSinceServiceCall = Date.now() - serviceCallTimeStamp; // milliseconds elapsed since start
-    if(serviceCallReturned) {
-      clearInterval(responseCheckInterval);
-      return;
-    } else if (timeElapsedSinceServiceCall > 3000){
-        $(document).ready(function(){
-          $.notify({
-            message: "Timeout on " + serviceName
-          }, {
-            "placement" : {
-              from: "bottom",
-              align: "right"
-            }, 
-            type: 'danger', 
-            delay: 1000 
-          });
-        });
-        clearInterval(responseCheckInterval);
-        return;
-    }
-  }, 1000);
-}
-
-
-
 function loadSelectedBagFile() {
   var selectedBagName = $('#bagList').val();
 
-  triggerMessageService('/aescape/bags/startPlayingRecording', selectedBagName)
+  var toSend = {
-}
+    message : selectedBagName
+  }
 
+  triggerService('/aescape/bags/startPlayingRecording', toSend)
+}
 
 
 
@@ -517,3 +427,37 @@ function invokeSafetyController(event)
 }
 
 
+
+function displayTaggingOptions(id) {
+
+  //populate the values in the select boxes on every display
+  // /aescape/bags/getCategoryList
+  // /aescape/bags/getTagList
+  // /aescape/bags/getBagList
+
+
+  //Subscribe to topics from the backend which indicate recording or playback is complete
+  document.getElementById(id).style.display = '';
+}
+
+function hideTaggingOptions(id, updateValues=false) {
+  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).style.display = 'none'
+}
+
+function updateBagMetadata(mode, bag_name, modified_bag_name, category, tags) {
+  if(!mode) {
+    return //error
+  }
+  if(!bag_name) {
+    return // error
+  }
+  triggerService('/aescape/bags/updateBagMeta')
+}
+
+
+

client/app/main.css

@@ -370,7 +370,16 @@ html, body {
 
     .popover {
         color: black;
+        width: 500px;
     }
 
+    .tagging-options {
+        display: flex;
+        align-items: center;
+    }
+
+    .tagging-options select{
+        width: 100%;
+    }