connect basic function

assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js

@@ -84,7 +84,7 @@ export const drawSelectActions = function(container, store, siteno, agencyCode)
             mapStateToPropsFactory: createStructuredSelector
         });
 
-        timeSpanControlsApp.mount('#temp');
+        timeSpanControlsApp.mount('#change-time-span-container');
     };
 
 
@@ -99,8 +99,9 @@ export const drawSelectActions = function(container, store, siteno, agencyCode)
         });
         container.append('div')
             .attr('id', 'change-time-span-container')
-            .attr('hidden', true)
-            .call(drawTimeSpanControls, store, siteno, agencyCode);
+            .call(addTimeSpanControlsContainer);
+            // .attr('hidden', true)
+            // .call(drawTimeSpanControls, store, siteno, agencyCode);
     }
 
     appendButton(listContainer, {
@@ -113,6 +114,5 @@ export const drawSelectActions = function(container, store, siteno, agencyCode)
         .attr('id', 'download-graph-data-container-select-actions')
         .attr('class', 'download-graph-data-container')
         .attr('hidden', true)
-        .call(addDownloadContainer)
-        .call(addTimeSpanControlsContainer);
+        .call(addDownloadContainer);
 };

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-controls.vue

 <template>
-  <h2> control here</h2>
   <div id="change-time-span-container_demo">
     <div class="time-span-input-container">
       <div class="date-range-container">
@@ -200,6 +199,7 @@
       ga-on="click"
       ga-event-category="TimeSeriesGraph"
       ga-event-action="timeSpanChange"
+      @click="updateSelectedTimeSpan"
     >
       Change time span
     </button>
@@ -208,7 +208,17 @@
 
 <script>
 export default {
-  name: 'TimeSpanControls'
+  name: 'TimeSpanControls',
+  setup() {
+    const updateSelectedTimeSpan = function() {
+      console.log('clicked');
+    };
 
+
+
+    return {
+      updateSelectedTimeSpan
+    };
+  }
 };
 </script>
\ No newline at end of file

wdfn-server/waterdata/templates/monitoring_location.html

@@ -161,7 +161,6 @@
                         {% endif %}
                     </p>
                 </div>
-                <div id="temp">place holder for time span</div>
                 {% if browser == 'IE' %}
                     <div id="static-graph-div"></div>
                     <div class="usa-alert usa-alert--warning">