3x-ui/web/html/common/qrcode_modal.html

{{define "qrcodeModal"}}
<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
    :dialog-style="{ top: '20px' }"
    :closable="true"
    :class="themeSwitcher.currentTheme"
    :footer="null" width="300px">
  <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
    {{ i18n "pages.inbounds.clickOnQRcode" }}
  </a-tag>
  <template v-if="app.subSettings.enable && qrModal.subId">
    <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas></div>
    <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas></div>
  </template>
  <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
  <template v-for="(row, index) in qrModal.qrcodes">
    <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas></div>
  </template>
</a-modal>

<script>

    const qrModal = {
        title: '',
        dbInbound: new DBInbound(),
        client: null,
        qrcodes: [],
        clipboard: null,
        visible: false,
        subId: '',
        show: function (title = '', dbInbound, client) {
            this.title = title;
            this.dbInbound = dbInbound;
            this.inbound = dbInbound.toInbound();
            this.client = client;
            this.subId = '';
            this.qrcodes = [];
            if (this.inbound.protocol == Protocols.WIREGUARD){
                this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l,index) =>{
                    this.qrcodes.push({
                        remark: "Peer " + (index+1),
                        link: l
                    });
                });
            } else {
                this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
                    this.qrcodes.push({
                        remark: l.remark,
                        link: l.link
                    });
                });
            }
            this.visible = true;
        },
        close: function () {
            this.visible = false;
        },
    };

    const qrModalApp = new Vue({
        delimiters: ['[[', ']]'],
        el: '#qrcode-modal',
        data: {
            qrModal: qrModal,
        },
        methods: {
            copyToClipboard(elmentId, content) {
                this.qrModal.clipboard = new ClipboardJS('#' + elmentId, {
                    text: () => content,
                });
                this.qrModal.clipboard.on('success', () => {
                    app.$message.success('{{ i18n "copied" }}')
                    this.qrModal.clipboard.destroy();
                });
            },
            setQrCode(elmentId, content) {
                new QRious({
                    element: document.querySelector('#' + elmentId),
                    size: 300,
                    value: content,
                    background: 'transparent',
                    foreground: 'black'
                });
            },
            genSubLink(subID) {
                return app.subSettings.subURI+subID;
            },
            genSubJsonLink(subID) {
                return app.subSettings.subJsonURI+subID;
            }
        },
        updated() {
            if (qrModal.client && qrModal.client.subId) {
                qrModal.subId = qrModal.client.subId;
                this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
                this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
            }
            qrModal.qrcodes.forEach((element, index) => {
                this.setQrCode("qrCode-" + index, element.link);
            });
        }
    });

</script>
{{end}}