diff --git a/src/components/Suggestions.vue b/src/components/Suggestions.vue index 8744250b43126a3053c4e3a592caca4e8927aed8..2ca46df2d7cacc7f517649f8224f3d43ffd0b50d 100644 --- a/src/components/Suggestions.vue +++ b/src/components/Suggestions.vue @@ -2,18 +2,26 @@ <div> <ul class="collection with-header"> <li class="collection-header"> - <h4>Connected accounts</h4> + <router-link to="/connect" class="secondary-content">Add another account</router-link> + <h5>Connected accounts</h5> </li> <li class="collection-item avatar" v-for="account in accounts" :key="account.id"> <img v-if="account._source.getAvatar(account)" :src="account._source.getAvatar(account)" alt="" class="circle"> <span class="title">{{ account._source.getDisplayName(account) }}</span> <p>{{ account._source.label }}</p> - <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a> + <div v-if="isLoading && results[account.id] && results[account.id].results.isLoading"> + <div class="progress"> + <div v-if="results[account.id].results.progress === 'indeterminate'" :class="indeterminate"></div> + <div v-else class="determinate" :style="{width: `${results[account.id].results.progress}%`}"></div> + </div> + {{ results[account.id].results.status }} + </div> + <a @click="fetch(account.id)" class="secondary-content"><i class="material-icons">refresh</i></a> </li> </ul> <h2>Suggestions</h2> <button - @click="fetch" + @click="fetch()" :class="['waves-effect', 'waves-light', {disabled: isLoading}, 'btn-small']" :disabled="isLoading"> <i class="material-icons left">refresh</i>Fetch data </button> @@ -42,10 +50,18 @@ export default { } }, methods: { - async fetch () { + async fetch (id) { + let accounts + if (id) { + accounts = this.accounts.filter((a) => { + return a.id == id + }) + } else { + accounts = this.accounts + } this.isLoading = true - this.accounts.forEach((a) => { - let r = {} + accounts.forEach((a) => { + let r = {isLoading: true, progress: 'indeterminate', status: ''} let promise = a._source.fetch({account: a, store: this.$store, results: r, vue: this}) this.$set(this.results, a.id, {account: a, promise, results: r}) }) diff --git a/src/sources/mastodon.js b/src/sources/mastodon.js index 040f3be10cee17b42d1ce15b6edeaa226ea3ff10..615aa370f6eaa343d98b3cabcde8f6f098cf0e4a 100644 --- a/src/sources/mastodon.js +++ b/src/sources/mastodon.js @@ -83,7 +83,7 @@ export default { router.push({path: '/'}) }, async fetch ({account, cache, store, results, vue}) { - console.log(`Fetching favorites for ${account.id}...`) + vue.$set(results, 'status', `Fetching favorites...`) const token = store.state.sources.mastodon.appTokens[`${account.username}@${account.domain}`].access_token const client = axios.create({ baseURL: `https://${account.domain}`, @@ -92,6 +92,7 @@ export default { const maxFavorites = 100 let url = '/api/v1/favourites' let handledFavorites = 0 + results.progress = 0 vue.$set(results, 'accounts', {}) while (handledFavorites < maxFavorites) { let response = await client.get(url, {params: {limit: 40}}) @@ -103,6 +104,7 @@ export default { } else { results.accounts[account] = 1 } + results.progress = Math.min(100, results.progress + 1) }) let link = response.headers.link || '' let parsed = parseLink(link) @@ -113,6 +115,7 @@ export default { } vue.$set(results, 'status', `Fetched favorites ${handledFavorites}/${maxFavorites}`) } + results.isLoading = false return results } }