Verified Commit bb927ae9 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Added view to debug profile

parent 7fd619af
Pipeline #4494 passed with stages
in 2 minutes and 32 seconds
......@@ -22,6 +22,12 @@ export default new Router({
props: true,
component: () => import(/* webpackChunkName: "main" */ './views/ConnectForm.vue')
},
{
path: '/debug',
name: 'debug',
props: (route) => ({ source: route.query.source || null, id: route.query.id || null }),
component: () => import(/* webpackChunkName: "main" */ './views/Debug.vue')
},
{
path: '/connect/:sourceId/callback',
name: 'connect.source.callback',
......
<template>
<section class="text container">
<h2>Check your Retribute profile</h2>
<p>If you're a creator and want to see what kind of information Retribute extract your profile, use the form below.
This will also refresh any cached data we may have for this profile.</p>
<form @submit.prevent="check" class="section">
<div class="row">
<div class="input-field col s12 l6">
<select required v-model="currentSourceType">
<option v-for="sources in sources" :key="sources.id" :value="sources.id">{{ sources.label }}</option>
</select>
<label>Account Type</label>
</div>
<div class="input-field col s12 l6" v-if="currentSource">
<input required v-model="currentId" id="id" type="text" :placeholder="currentSource.example" class="validate">
<label class="active" for="username">Account ID</label>
</div>
</div>
<button type="submit" class="waves-effect waves-light btn">Check</button>
</form>
<div v-if="isLoading" class="progress">
<div class="indeterminate"></div>
</div>
<div v-else-if="checkResult">
<h5>Results</h5>
<div v-if="checkResult && checkResult.status === 'ok'" class="card-panel">
<div>
<p>
The following Retribute data was extracted from the profile:
</p>
<table class="responsive-table">
<thead>
<tr>
<th>Platform</th>
<th>ID</th>
<th>
Label
<span class="tooltipped" v-tooltip data-tooltip="Labels are extracted from the link anchor or profile metadata and can be used to customize how a contribution platform is presented to your supporters.">
<i class="tiny material-icons">help</i>
</span>
</th>
<th>
Weight
<span class="tooltipped" v-tooltip data-tooltip="Links that are found first in your profile get a higher weight and are displayed first by Retribute">
<i class="tiny material-icons">help</i>
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="mean in checkResult.data.means" :key="JSON.stringify(mean)">
<td>{{ mean.provider }}</td>
<td>
<a v-if="mean.url" target="_blank" rel="noopener noreferrer" :href="mean.url">{{ mean.id }}</a>
<span v-else>{{ mean.id }}</span>
</td>
<td>
<span v-if="mean.summary">{{ mean.summary }}</span>
</td>
<td>
{{ mean.weight }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-else-if="checkResult && checkResult.status === 'error' && checkResult.error.response && checkResult.error.response.status === 400" class="card-panel yellow lighten-3">
<h5>No Retribute information found</h5>
<p>
This profile was successfully checked, but no meaningful Retribute info was found in it. Ensure
the profile includes one or more links to the following donation platforms:
</p>
<ul class="browser-default">
<li v-for="provider in providers" :key="provider.id">{{ provider.label }}</li>
</ul>
</div>
<div v-else-if="checkResult && checkResult.status === 'error'" class="card-panel pink lighten-1">
<h5 class="white-text">Error: {{ checkResult.error.message }}</h5>
<p class="white-text">
We cannot fetch info for this profile. Ensure the account type and ID are valid.
</p>
</div>
</div>
</section>
</template>
<script>
import sources from "@/sources"
import axios from "axios"
import config from "@/config"
export default {
props: ['source', 'id'],
data () {
return {
isLoading: false,
currentSourceType: this.source,
currentId: this.id,
sources: [],
providers: [],
checkResult: null,
}
},
async created () {
await this.fetchSources()
await this.fetchProviders()
if (this.currentSourceType && this.currentId) {
await this.check()
}
},
computed: {
currentSource () {
let self = this
return this.sources.filter((s) => {
return s.id == self.currentSourceType
})[0]
}
},
methods: {
async fetchProviders () {
const client = axios.create()
let url = config.RetributeAPIUrl + `v1/providers`
const response = await axios.get(url)
this.providers = response.data
},
async fetchSources () {
const client = axios.create()
let url = config.RetributeAPIUrl + `v1/sources`
const response = await axios.get(url)
this.sources = response.data
this.$nextTick(()=> {
let elems = document.querySelectorAll('select')
M.FormSelect.init(elems, {})
})
},
async check () {
this.isLoading = true
this.checkResult = null
const client = axios.create()
let url = config.RetributeAPIUrl + `v1/search/` + encodeURIComponent(`${this.currentSourceType.trim()}:${this.currentId.trim()}`)
try {
const response = await axios.get(url, {params: {nocache: 'true'}})
this.checkResult = {
status: 'ok',
data: response.data
}
} catch (e) {
this.checkResult = {
status: 'error',
error: e,
}
}
this.isLoading = false
}
},
}
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment