Add statistics table

assets/App.vue

@@ -18,6 +18,16 @@
       </span>
     </section>
     <p class="profile-info">Профиль: {{ profileId }}</p>
+    <a href="#" v-on:click.prevent="show_stat = !show_stat">Статистика</a>
+    <div v-if="show_stat">
+      <table class="stat-table">
+        <tr v-for="item in statistics">
+          <td>{{ item.date }}</td>
+          <td>{{ item.planned.total_minutes }}</td>
+          <td>{{ item.worked.total_minutes }}</td>
+        </tr>
+      </table>
+    </div>
   </div>
 </template>
 
@@ -31,11 +41,14 @@ export default {
       started: false,
       total_time: null,
       today_time: null,
+      show_stat: false,
+      statistics: [],
     };
   },
   created() {
     this.profileId = h.extract_profile_id();
     this.get_status();
+    this.get_statistics();
     setInterval(() => this.get_status(), 60 * 1000);
   },
   methods: {
@@ -46,6 +59,11 @@ export default {
         this.today_time = TimeSpan.fromObject(data.today.time);
       });
     },
+    get_statistics() {
+      h.get_statistics(this.profileId).then(data => {
+        this.statistics = data;
+      });
+    },
     start() {
       h.start(this.profileId).then(() => this.get_status());
     },
@@ -85,4 +103,8 @@ export default {
 .profile-info {
   margin-top: 2em;
 }
+
+.stat-table {
+  display: inline-table;
+}
 </style>

assets/helpers.js

@@ -32,4 +32,19 @@ async function finish(profileId) {
   });
 }
 
-export default { extract_profile_id, check_profile, get_status, start, finish };
+async function get_statistics(profileId) {
+  const response = await fetch('/api/statistics?profile_id=' + profileId, {
+    method: 'GET',
+  });
+  const data = await response.json();
+  return data;
+}
+
+export default {
+  extract_profile_id,
+  check_profile,
+  get_status,
+  start,
+  finish,
+  get_statistics,
+};