From 13a6ebf4e08af46a1d4150f2a0a6494cedb8b506 Mon Sep 17 00:00:00 2001
From: weijianli <leevi1044@outlook.com>
Date: Sun, 15 Sep 2019 23:29:01 -0500
Subject: [PATCH] update predict on date

---
 package.json                      |  1 +
 src/api/user.js                   |  9 ++++++++
 src/test.vue                      | 13 +++++++++++
 src/views/Analyzing/analyzing.vue | 12 +++++++----
 src/views/plot/plot.vue           | 36 +++++++++++++++++++++++++++++++
 5 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 src/test.vue

diff --git a/package.json b/package.json
index 9a9e6d99..3cb592c3 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/api/user.js b/src/api/user.js
index 68fbfe03..45c13b4d 100644
--- a/src/api/user.js
+++ b/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 }
+  })
+}
diff --git a/src/test.vue b/src/test.vue
new file mode 100644
index 00000000..98a84d7f
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/src/views/Analyzing/analyzing.vue b/src/views/Analyzing/analyzing.vue
index b138840e..6e162789 100644
--- a/src/views/Analyzing/analyzing.vue
+++ b/src/views/Analyzing/analyzing.vue
@@ -18,20 +18,24 @@
 </script> -->
 
 <template>
-  <div class="vue-spinner">
-    <Circle9></Circle9>
-    <h1>Analyzing....</h1>
-  </div>
+    <div class="vue-spinner">
+      <Circle9></Circle9>
+      <h1>Analyzing....</h1>
+    </div>
 </template>
  
 <script>
   import Circle9 from 'vue-loading-spinner/src/components/Circle9'
+  
   export default {
   	name: 'analyze',
     components: {
       Circle9
     }
+
   }
+
+
 </script>
 
 <style scoped>
diff --git a/src/views/plot/plot.vue b/src/views/plot/plot.vue
index b85df477..c8ad9a4c 100644
--- a/src/views/plot/plot.vue
+++ b/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>
\ No newline at end of file