Differential D3932 Diff 11237 src/resources/vue/CompanionApp/Info.vue

Changeset View

Standalone View

src/resources/vue/CompanionApp/Info.vue

This file was added.

				<template>
				<div class="container">
				<div class="card">
				<div class="card-body">
				<div class="card-title" v-if="companion_id === 'new'">{{ $t('companion.new') }}</div>
				<div class="card-title" v-else-if="companion_id === 'recovery'">{{ $t('companion.recovery') }}</div>
				<div class="card-title" v-else>{{ $t('form.companion') }}
				<btn class="btn-outline-danger button-delete float-end" @click="$refs.deleteDialog.show()" icon="trash-can">{{ $t('companion.delete') }}</btn>
				</div>
				<div class="card-text">
				<form @submit.prevent="submit" class="card-body">
				<div class="row mb-3">
				<label for="name" class="col-sm-4 col-form-label">{{ $t('companion.name') }}</label>
				<div class="col-sm-8">
				<input type="text" class="form-control" id="name" v-model="companion.name" :disabled="companion.id">
				</div>
				</div>
				<btn v-if="!companion.id" class="btn-primary mt-3" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
				</form>
				<hr class="m-0" v-if="companion.id">
				<div v-if="companion.id && !companion.isPaired" class="card-body" id="companion-verify">
				<h5 class="mb-3">{{ $t('companion.pair-new') }}</h5>
				<btn class="btn-success float-end" @click="printQRCode()" icon="trash-can">{{ $t('companion.print') }}</btn>
				machniakUnsubmitted Done Inline Actions I think we can remove this h5 element. It looks better without it. machniak: I think we can remove this h5 element. It looks better without it.
				<div class="card-text">
				machniakUnsubmitted Done Inline Actions `icon="print"`, I'd also make the button using btn-outline-secondary (or -primary). machniak: `icon="print"`, I'd also make the button using btn-outline-secondary (or -primary).
				<p>
				{{ $t('companion.pairing-instructions') }}
				</p>
				<p>
				<img :src="qrcode" />
				</p>
				</div>
				</div>
				<div v-if="companion.isPaired" class="card-body" id="companion-config">
				<div class="card-text">
				<p>{{ $t('companion.pairing-successful', { app: $root.appName }) }}</p>
				</div>
				</div>
				</div>
				</div>
				</div>

				<modal-dialog id="delete-warning" ref="deleteDialog" @click="deleteCompanion()" :buttons="['delete']" :cancel-focus="true"
				:title="$t('companion.delete-companion', { companion: companion.name })"
				>
				<p>{{ $t('companion.delete-text') }}</p>
				</modal-dialog>
				</div>
				</template>

				<script>
				import ListInput from '../Widgets/ListInput'
				import ModalDialog from '../Widgets/ModalDialog'
				import StatusComponent from '../Widgets/Status'
				import SubscriptionSelect from '../Widgets/SubscriptionSelect'

				import { library } from '@fortawesome/fontawesome-svg-core'

				library.add(
				require('@fortawesome/free-solid-svg-icons/faRotate').definition,
				)
				machniakUnsubmitted Done Inline Actions require('@fortawesome/free-solid-svg-icons/faPrint').definition machniak: require('@fortawesome/free-solid-svg-icons/faPrint').definition

				export default {
				components: {
				ListInput,
				ModalDialog,
				StatusComponent,
				SubscriptionSelect
				},
				data() {
				return {
				companion_id: null,
				companion: {},
				qrcode: "",
				status: {}
				}
				},
				created() {
				this.companion_id = this.$route.params.companion

				if (this.companion_id !== 'new' && this.companion_id !== 'recovery') {
				axios.get('/api/v4/companions/' + this.companion_id, { loader: true })
				.then(response => {
				this.companion = response.data
				this.status = response.data.statusInfo
				})
				.catch(this.$root.errorHandler)

				axios.get('/api/v4/companions/' + this.companion_id + '/pairing/', { loader: true })
				.then(response => {
				this.qrcode = response.data.qrcode
				})
				.catch(this.$root.errorHandler)
				} else if (this.companion_id == 'recovery') {
				this.companion = { name: this.$t("companion.recovery-device") }
				}
				},
				methods: {
				printQRCode() {
				window.print();
				},
				deleteCompanion() {
				axios.delete('/api/v4/companions/' + this.companion_id)
				.then(response => {
				if (response.data.status == 'success') {
				this.$toast.success(response.data.message)
				this.$router.push({ name: 'companions' })
				}
				})
				machniakUnsubmitted Not Done Inline Actions I think we could improve the printing feature so it prints only the qr code, and no other page elements, but it's not a show-stopper. machniak: I think we could improve the printing feature so it prints only the qr code, and no other page…
				mollekopfAuthorUnsubmitted Done Inline Actions Yeah, I looked briefly into this, but couldn't get it to work quickly, so I'll leave it at this for now. mollekopf: Yeah, I looked briefly into this, but couldn't get it to work quickly, so I'll leave it at this…
				},
				statusUpdate(companion) {
				this.companion = Object.assign({}, this.companion, companion)
				},
				submit() {
				this.$root.clearFormValidation($('#general form'))

				let post = this.$root.pick(this.companion, ['name'])

				axios.post('/api/v4/companions', post)
				.then(response => {
				this.$toast.success(response.data.message)
				this.$router.push({ name: 'companions' })
				})
				machniakUnsubmitted Done Inline Actions We definitely should make the pairing/device creation process a two-step operation, i.e. don't jump to the list after the first step. machniak: We definitely should make the pairing/device creation process a two-step operation, i.e. don't…
				}
				}
				}
				machniakUnsubmitted Done Inline Actions There's a trick to do that. See `beforeRouteUpdate()` in `resources/vue/Admin/User.vue`. machniak: There's a trick to do that. See `beforeRouteUpdate()` in `resources/vue/Admin/User.vue`.
				</script>