Pagination bar is now zero-based numbering

src/components/ImageList.vue

@@ -42,8 +42,8 @@ export default {
   data: () => {
     return {
       deleteArray: [],
-      currentPage: 1,
-      lastPage: 1,
+      currentPage: 0,
+      lastPage: 0,
     };
   },
   computed: {
@@ -58,10 +58,8 @@ export default {
       this.currentPage = Number(
         window.location.pathname.split("/").pop().match(/^\d+$/)
       );
-      if (this.currentPage === 0) this.currentPage++;
-      if (this.currentPage > this.lastPage) this.currentPage = this.lastPage;
       window.scrollTo(0, 0);
-      this.setStateHashArray(await this.getHashArray(this.currentPage - 1));
+      this.setStateHashArray(await this.getHashArray(this.currentPage));
     },
     async getHashArray(pageEntry) {
       const response = await fetch(`/api/page/${pageEntry}/image`);

src/components/PaginationBar.vue

@@ -31,21 +31,15 @@ export default {
   computed: {
     // TODO: Rewrite this less confusingly if possible.
     // This returns an array that represents the pagination bar
-    // Demonstration:
-    // 1 ... 3 [4] 5 ... 12 (4 is the selected page)
-    // [1] 2 ... 12
-    // 1 2 [3] 4 ... 12
-    // The bar always shows the first and last pages, the selected page and 2 pages
-    // that are offset by 1 to the selected page
     pages: function () {
       return [
-        this.currentPage - 1 > 1 ? 1 : null,
-        this.currentPage - 1 > 2 ? "..." : null,
-        this.currentPage !== 1 ? this.currentPage - 1 : null,
+        this.currentPage > 1 ? 0 : null,
+        this.currentPage > 2 ? "..." : null,
+        this.currentPage > 0 ? this.currentPage - 1 : null,
         this.currentPage,
-        this.currentPage !== this.lastPage ? this.currentPage + 1 : null,
-        this.lastPage - this.currentPage > 2 ? "..." : null,
-        this.lastPage - this.currentPage > 1 ? this.lastPage : null,
+        this.currentPage < this.lastPage - 1 ? this.currentPage + 1 : null,
+        this.currentPage < this.lastPage - 3 ? "..." : null,
+        this.currentPage < this.lastPage - 2 ? this.lastPage - 1 : null,
       ].filter((element) => element !== null);
     },
   },