Differential D4196 Diff 12050 src/resources/vue/CompanionApp/List.vue

Changeset View

Standalone View

src/resources/vue/CompanionApp/List.vue

<template>		<template>
<div class="container">		<div class="container">
<div class="card" id="companionapp-list">		<div class="card" id="companionapp-list">
<div class="card-body">		<div class="card-body">
<div class="card-title">		<div class="card-title">
{{ $t('companion.title') }}		{{ $t('companion.title') }}
<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>		<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
<btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="companion/new" icon="mobile-screen">
		<btn class="btn-success float-end" @click="createDevice($t('companion.new-device'))" icon="mobile-screen">
{{ $t('companion.create') }}		{{ $t('companion.create') }}
</btn-router>		</btn>
</div>		</div>
<div class="card-text">		<div class="card-text">
<p>		<p>
{{ $t('companion.description') }}		{{ $t('companion.description') }}
</p>		</p>
<p v-if="appDownloadLink" v-html="$t('companion.download-description', { href: appDownloadLink})"></p>		<p v-if="appDownloadLink" v-html="$t('companion.download-description', { href: appDownloadLink})"></p>
<p>		<p>
{{ $t('companion.description-detailed') }}		{{ $t('companion.description-detailed') }}
</p>		</p>
<div class="alert alert-warning">		<div class="alert alert-warning">
<p>		<p>
{{ $t('companion.description-warning') }}		{{ $t('companion.description-warning') }}
</p>		</p>
<div>		<div>
<btn-router class="btn-success" to="companion/recovery" icon="mobile-screen">		<btn class="btn-success" @click="createDevice($t('companion.recovery-device'))" icon="mobile-screen">
{{ $t('companion.create-recovery-device') }}		{{ $t('companion.create-recovery-device') }}
</btn-router>		</btn>
</div>		</div>
</div>		</div>
</div>		</div>
<div class="card-text">		<div class="card-text">
<list-widget :list="companions"></list-widget>		<list-widget :list="companions"></list-widget>
</div>		</div>
</div>		</div>
</div>		</div>
Show All 19 Lines	export default {
},		},
created() {		created() {
axios.get('/api/v4/companions', { loader: true })		axios.get('/api/v4/companions', { loader: true })
.then(response => {		.then(response => {
//TODO show "NOt paired" in device-id field		//TODO show "NOt paired" in device-id field
this.companions = response.data.list		this.companions = response.data.list
})		})
.catch(this.$root.errorHandler)		.catch(this.$root.errorHandler)
		},
		methods: {
		createDevice(name) {
		// If we already have a device for this purpose, just show that.
		for (let device of this.companions) {
		if (device.name == name) {
		machniakUnsubmitted Not Done Inline Actions I think we should not use localized labels as an identifier (name). It will not work if user changes the name or UI language. machniak: I think we should not use localized labels as an identifier (name). It will not work if user…
		mollekopfAuthorUnsubmitted Done Inline Actions The name is not used as id, it's just a name for display. I agree that the mechanism used here to show existing instead of creating a new device by matching the name is not the prettiest approach, but it should normally work, and if it doesn't (because the language was changed) no harm is done either. The alternative would be to show the last device that was created that isn't paired, with the risk of picking the wrong one for recovery or regular. So I think we should just leave it as is, unless you have a good alternative approach. mollekopf: The name is not used as id, it's just a name for display. I agree that the mechanism used here…
		this.$router.push({ name: 'companion' , params: { companion: device.id }})
		return
		}
		}

		axios.post('/api/v4/companions', {'name': name})
		.then(response => {
		this.$toast.success(response.data.message)
		this.$router.push({ name: 'companion' , params: { companion: response.data.id }})
		})
		}
}		}
}		}
</script>		</script>