Merge pull request #77

* added timestamp to comicstatus.

* added timestamp to comicstatus.

frontend/src/components/HistoryTable.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col d-flex align-items-center">
+        <form class="form-inline ">
+          <label class="my-1 px-1" for="selectChoices">Show</label>
+          <select class="custom-select my-1 mr-sm-2 " id="selectChoices" v-model="this.page_size" @change="this.setPage(this.page)">
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+          <label class="my-1 px-1" for="selectChoices">entries</label>
+        </form>
+      </div>
+      <div class="col d-flex justify-content-end">
+        <form class="form-inline">
+          <div class="form-floating">
+            <input type="text" class="form-control" id="floatingInput" placeholder="name@example.com" v-model="search_text" @keyup="this.debounceInput()">
+            <label for="floatingInput">Search</label>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="row">
+      <caption>
+        <h2>Reading History</h2>
+      </caption>
+    </div>
+    <div class="row">
+      <table class="table table-striped table-bordered">
+        <caption>Recent Comics</caption>
+        <thead>
+          <tr>
+            <th scope="col"></th>
+            <th scope="col">Comic</th>
+            <th scope="col">Date Read</th>
+            <th scope="col">status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="item in comics" :key="item.id">
+            <tr>
+              <th scope="row"><font-awesome-icon icon='book' class="" /></th>
+              <td><router-link :to="{name: 'read', params: { selector: item.selector }}" class="" >{{ item.file_name }}</router-link></td>
+              <td>{{ timeago(item.last_read_time) }}</td>
+              <td>{{ get_status(item) }}</td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+    <div class="row">
+      <div class="col">
+        Showing page {{ this.page }} of {{ this.page_count }} pages.
+      </div>
+      <div class="col d-flex justify-content-end">
+        <paginate
+          v-model="this.page"
+          :page-count="this.page_count"
+          :click-handler="this.setPage"
+          :prev-text="'Prev'"
+          :next-text="'Next'"
+          :container-class="'pagination '"
+        >
+        </paginate>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Paginate from "vuejs-paginate-next";
+import api from "@/api";
+import * as timeago from "timeago.js";
+
+export default {
+  name: "HistoryTable",
+  components: {
+    Paginate
+  },
+  data () {
+    return {
+      page: 1,
+      page_size: 10,
+      page_count: 2,
+      search_text: '',
+      comics: [],
+      timeout: null,
+      func_selected: 'choose',
+      feed_id: ''
+  }},
+  methods: {
+    updateComicList () {
+      let comic_list_url = '/api/history/'
+      let params = { params: { page: this.page, page_size: this.page_size } }
+
+      if (this.search_text) {
+        params.params.search_text = this.search_text
+      }
+
+      api.get(comic_list_url, params)
+      .then(response => {
+        this.comics = response.data.results
+        this.page_count = Math.ceil(response.data.count / this.page_size)
+      })
+      .catch((error) => {
+        if (error.response.data.detail === 'Invalid page.') {
+          this.setPage(1)
+        } else {
+          console.log(error)
+        }
+      })
+    },
+    timeago(input) {
+      return timeago.format(input)
+    },
+    get_status(item) {
+      if (item.unread || item.unread === null) {
+        return "Unread"
+      } else if (item.finished) {
+        return "Finished"
+      } else {
+        return item.last_read_page + ' / ' + item.page_count
+      }
+    },
+    setPage(page) {
+      this.page = page
+      this.updateComicList()
+    },
+    debounceInput() {
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.setPage(this.page)
+      }, 500)
+    },
+  },
+  mounted() {
+    this.updateComicList()
+  },
+}
+</script>
+
+<style scoped>
+
+</style>