Skip to content
Snippets Groups Projects
Verified Commit 80f8d93d authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Better progress handling

parent 5daf1007
Branches
Tags
No related merge requests found
...@@ -2,18 +2,26 @@ ...@@ -2,18 +2,26 @@
<div> <div>
<ul class="collection with-header"> <ul class="collection with-header">
<li class="collection-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>
<li class="collection-item avatar" v-for="account in accounts" :key="account.id"> <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"> <img v-if="account._source.getAvatar(account)" :src="account._source.getAvatar(account)" alt="" class="circle">
<span class="title">{{ account._source.getDisplayName(account) }}</span> <span class="title">{{ account._source.getDisplayName(account) }}</span>
<p>{{ account._source.label }}</p> <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> </li>
</ul> </ul>
<h2>Suggestions</h2> <h2>Suggestions</h2>
<button <button
@click="fetch" @click="fetch()"
:class="['waves-effect', 'waves-light', {disabled: isLoading}, 'btn-small']" :disabled="isLoading"> :class="['waves-effect', 'waves-light', {disabled: isLoading}, 'btn-small']" :disabled="isLoading">
<i class="material-icons left">refresh</i>Fetch data <i class="material-icons left">refresh</i>Fetch data
</button> </button>
...@@ -42,10 +50,18 @@ export default { ...@@ -42,10 +50,18 @@ export default {
} }
}, },
methods: { 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.isLoading = true
this.accounts.forEach((a) => { accounts.forEach((a) => {
let r = {} let r = {isLoading: true, progress: 'indeterminate', status: ''}
let promise = a._source.fetch({account: a, store: this.$store, results: r, vue: this}) 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}) this.$set(this.results, a.id, {account: a, promise, results: r})
}) })
......
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
router.push({path: '/'}) router.push({path: '/'})
}, },
async fetch ({account, cache, store, results, vue}) { 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 token = store.state.sources.mastodon.appTokens[`${account.username}@${account.domain}`].access_token
const client = axios.create({ const client = axios.create({
baseURL: `https://${account.domain}`, baseURL: `https://${account.domain}`,
...@@ -92,6 +92,7 @@ export default { ...@@ -92,6 +92,7 @@ export default {
const maxFavorites = 100 const maxFavorites = 100
let url = '/api/v1/favourites' let url = '/api/v1/favourites'
let handledFavorites = 0 let handledFavorites = 0
results.progress = 0
vue.$set(results, 'accounts', {}) vue.$set(results, 'accounts', {})
while (handledFavorites < maxFavorites) { while (handledFavorites < maxFavorites) {
let response = await client.get(url, {params: {limit: 40}}) let response = await client.get(url, {params: {limit: 40}})
...@@ -103,6 +104,7 @@ export default { ...@@ -103,6 +104,7 @@ export default {
} else { } else {
results.accounts[account] = 1 results.accounts[account] = 1
} }
results.progress = Math.min(100, results.progress + 1)
}) })
let link = response.headers.link || '' let link = response.headers.link || ''
let parsed = parseLink(link) let parsed = parseLink(link)
...@@ -113,6 +115,7 @@ export default { ...@@ -113,6 +115,7 @@ export default {
} }
vue.$set(results, 'status', `Fetched favorites ${handledFavorites}/${maxFavorites}`) vue.$set(results, 'status', `Fetched favorites ${handledFavorites}/${maxFavorites}`)
} }
results.isLoading = false
return results return results
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment