update predict on date

package.json

@@ -74,6 +74,7 @@
     "vue-splitpane": "1.0.4",
     "vue-upload-component": "^2.8.20",
     "vuedraggable": "2.20.0",
+    "vuejs-datepicker": "^1.6.2",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },

src/api/user.js

@@ -31,3 +31,12 @@ export function sendAnalyzeRequest(token) {
     params: { token }
   })
 }
+
+export function sendAnalyzeOnDateRequest(token, fromDate, toDate) {
+  return request({
+    url: '/predictOnDate',
+    method: 'get',
+    baseURL: 'http://localhost:8888',
+    params: { token, fromDate, toDate }
+  })
+}

src/test.vue

@@ -0,0 +1,13 @@
+<div id="app">
+  <vuejs-datepicker></vuejs-datepicker>
+</div>
+<script src="https://unpkg.com/vue"></script>
+<script src="https://unpkg.com/vuejs-datepicker"></script>
+<script>
+export default {
+	name: 'testView',
+	components: {
+		vuejsDatepicker
+	}
+}
+</script> 

src/views/Analyzing/analyzing.vue

@@ -18,20 +18,24 @@
 </script> -->
 
 <template>
-  <div class="vue-spinner">
+    <div class="vue-spinner">
-    <Circle9></Circle9>
+      <Circle9></Circle9>
-    <h1>Analyzing....</h1>
+      <h1>Analyzing....</h1>
-  </div>
+    </div>
 </template>
  
 <script>
   import Circle9 from 'vue-loading-spinner/src/components/Circle9'
+  
   export default {
   	name: 'analyze',
     components: {
       Circle9
     }
+
   }
+
+
 </script>
 
 <style scoped>

src/views/plot/plot.vue

@@ -1,9 +1,45 @@
 <template>
+	<div>
+	  <span style="font-weight: bold">You could also run the analysis on the data from the specific date range</span><br>
+	  <span>From: </span>
+	  <Datepicker v-model="state.from" style="display: inline-block" :bootstrap-styling="true">
+	  </Datepicker>
+	  <span>To: </span>
+	  <Datepicker v-model="state.to" style="display: inline-block" :bootstrap-styling="true"></Datepicker>
+	  <button type="button" class="btn btn-success" @click="onSendAnalyzeOnDateRequest">Apply</button>
+    </div>
     <iframe src="http://localhost:808" width=1300 height=600></iframe>
 </template>
 
 <script>
+import Datepicker from 'vuejs-datepicker'
+import { sendAnalyzeOnDateRequest } from '@/api/user'
+import { getToken } from '@/utils/auth'
 export default {
   name: 'plot',
+  components: {
+  	 Datepicker
+  },
+
+  data() {
+	return {
+	state: { from: new Date(), to: new Date() }
+	};
+  },
+
+  methods: {
+	  onSendAnalyzeOnDateRequest() {
+	    this.$router.push({ name: "analyze" })
+	    this.listLoading = true
+	    sendAnalyzeOnDateRequest(getToken(), this.state.from, this.state.to).then(response => {
+	        var token = response['token']
+
+	        // if the response from the server indicating that it's running the analysis, then redirect to a loading view
+	        if (token == 'success') {
+	          this.$router.push({ name: "plot" })
+	        }
+	    })
+	  }
+  }
 }
 </script>