mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-22 22:25:28 +01:00
121 lines
4.7 KiB
Text
121 lines
4.7 KiB
Text
<div id="scan-qr-modal-app">
|
|
<div class="modal" tabindex="-1" role="dialog" :id="modalId">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{title}} <template v-if="fragments && fragments.length > 1">({{index+1}}/{{fragments.length}})</template></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
|
|
<vc:icon symbol="close"/>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<div class="text-center my-2" :style="{height: `${qrOptions.height}px`}">
|
|
<component v-if="currentFragment" :is="currentMode.href ? 'a': 'div'" class="qr-container d-inline-block" :href="currentMode.href">
|
|
<qrcode :value="currentFragment" :options="qrOptions"></qrcode>
|
|
</component>
|
|
</div>
|
|
<ul class="nav btcpay-pills justify-content-center mt-4 mb-3" v-if="modes && Object.keys(modes).length > 1">
|
|
<li class="nav-item" v-for="(item, key) in modes">
|
|
<a class="btcpay-pill" :class="{ 'active': key === mode }" href="#" v-on:click="mode = key">{{item.title}}</a>
|
|
</li>
|
|
</ul>
|
|
<div class="input-group input-group-sm mt-3" v-if="currentFragment && currentMode.showData">
|
|
<input type="text" class="form-control" readonly :value="currentFragment" id="qr-code-data-input">
|
|
<button type="button" class="btn btn-outline-secondary px-3" data-clipboard-target="#qr-code-data-input">
|
|
<vc:icon symbol="copy" />
|
|
</button>
|
|
</div>
|
|
<div v-if="note" v-html="note" class="text-muted mt-3" id="scan-qr-modal-note"></div>
|
|
</div>
|
|
<div class="mb-4 text-center" v-if="continueCallback">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" v-on:click="continueCallback()">{{ continueTitle || 'Continue' }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
#scan-qr-modal-note :last-child { margin-bottom: 0; }
|
|
</style>
|
|
<script>
|
|
function initQRShow(data) {
|
|
return new Vue({
|
|
el: '#scan-qr-modal-app',
|
|
components: {
|
|
qrcode: VueQrcode
|
|
},
|
|
data() {
|
|
const res = Object.assign({}, {
|
|
title: "Scan QR",
|
|
modalId: "scan-qr-modal",
|
|
modes: {},
|
|
index: -1,
|
|
speed: 500,
|
|
active: false,
|
|
note: null,
|
|
continueTitle: null,
|
|
continueCallback: null,
|
|
qrOptions: {
|
|
width: 256,
|
|
height: 256,
|
|
margin: 1,
|
|
color: {
|
|
dark: '#000',
|
|
light: '#f5f5f7'
|
|
}
|
|
}
|
|
}, data || {});
|
|
|
|
if (!Object.values(res.modes || {}).length) {
|
|
res.modes = { default: { title: 'Default', fragments: [res.data] } };
|
|
}
|
|
|
|
if (!res.mode) {
|
|
res.mode = Object.keys(res.modes)[0];
|
|
}
|
|
|
|
return res;
|
|
},
|
|
computed: {
|
|
fragments() {
|
|
return this.currentMode && this.currentMode.fragments;
|
|
},
|
|
currentMode() {
|
|
return this.modes[this.mode];
|
|
},
|
|
currentFragment() {
|
|
return this.fragments && this.fragments[this.index];
|
|
}
|
|
},
|
|
mounted() {
|
|
$(`#${this.modalId}`)
|
|
.on("shown.bs.modal", () => { this.start(); })
|
|
.on("hide.bs.modal", () => { this.active = false; });
|
|
},
|
|
methods: {
|
|
start() {
|
|
this.active = true;
|
|
this.index = -1;
|
|
this.playNext();
|
|
},
|
|
playNext() {
|
|
if (!this.active) return;
|
|
|
|
this.index++;
|
|
if (this.index > (this.fragments.length - 1)) {
|
|
this.index = 0;
|
|
}
|
|
setTimeout(this.playNext, this.speed);
|
|
},
|
|
showData(data) {
|
|
this.modes = { default: { title: 'Default', fragments: [data] } };
|
|
this.mode = "default";
|
|
this.show();
|
|
},
|
|
show() {
|
|
$(`#${this.modalId}`).modal("show");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|