From cab322500c64f7695a123b1bd36886d499c8ed7f Mon Sep 17 00:00:00 2001
From: Manuel Kasper <manuel.kasper@threema.ch>
Date: Sun, 14 Mar 2021 12:10:51 +0100
Subject: [PATCH] Add button to load more new photos

---
 jsconfig.json           |  5 +++++
 src/views/NewPhotos.vue | 22 ++++++++++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 jsconfig.json

diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..a3bb48e
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,5 @@
+{
+    "include": [
+        "./src/**/*"
+    ]
+}
diff --git a/src/views/NewPhotos.vue b/src/views/NewPhotos.vue
index 7934923..7fc8b5e 100644
--- a/src/views/NewPhotos.vue
+++ b/src/views/NewPhotos.vue
@@ -4,8 +4,13 @@
     <template v-slot:title-right>
       <b-field>
         <b-dropdown class="control" v-model="selectedAssociations" multiple aria-role="list" position="is-bottom-left" :scrollable="$mq.desktop" @change="loadNewPhotos">
-          <b-button icon-right="angle-down" slot="trigger">
-            Associations {{ selectedAssociations.length > 0 ? ('(' + selectedAssociations.length + ')') : '' }}
+          <b-button icon-left="globe" icon-right="angle-down" slot="trigger">
+            <template v-if="$mq.mobile">
+              {{ selectedAssociations.length > 0 ? (selectedAssociations.length) : '' }}
+            </template>
+            <template v-else>
+              Associations {{ selectedAssociations.length > 0 ? ('(' + selectedAssociations.length + ')') : '' }}
+            </template>
           </b-button>
           <b-dropdown-item v-for="association in associations" :key="association.code" :value="association.code" aria-role="listitem">
             {{ association.code }} – {{ association.name }}
@@ -18,6 +23,9 @@
         <div class="container">
           <SummitPhotos v-for="summit in summits" :key="summit.code" :summit="summit" :minDate="minDate" :showSummitName="true" />
         </div>
+        <div v-if="hasMore" class="has-text-centered">
+          <b-button type="is-info" @click="loadMore">Load more</b-button>
+        </div>
       </section>
       <section v-else-if="summits != null" class="section">
         <div class="container">
@@ -51,7 +59,7 @@ export default {
     loadNewPhotos () {
       this.loadingComponent = this.$buefy.loading.open({ canCancel: true })
 
-      let recentPhotosParams = { limit: this.limit }
+      let recentPhotosParams = { limit: this.limit + 1 }
       let associations = '*'
       if (this.selectedAssociations.length > 0) {
         associations = this.selectedAssociations.join('|')
@@ -59,7 +67,8 @@ export default {
       axios.get('https://api.sotl.as/summits/recent_photos/' + associations + '/' + this.days, { params: recentPhotosParams })
         .then(response => {
           this.loadingComponent.close()
-          this.summits = response.data
+          this.summits = response.data.slice(0, -1)
+          this.hasMore = (this.limit < response.data.length)
         })
     },
     loadAssociations () {
@@ -67,6 +76,10 @@ export default {
         .then(response => {
           this.associations = response.data
         })
+    },
+    loadMore () {
+      this.limit += 20
+      this.loadNewPhotos()
     }
   },
   computed: {
@@ -85,6 +98,7 @@ export default {
       summits: null,
       days: 7,
       limit: 20,
+      hasMore: false,
       associations: null,
       selectedAssociations: []
     }