Still trying

This commit is contained in:
Donald Zou 2025-01-02 11:38:21 +08:00
parent cca5fd859c
commit 31e7f02b8d
3 changed files with 45 additions and 12 deletions

View File

@ -22,13 +22,21 @@ const PeerSettingsModal = defineAsyncComponent(() => import("@/components/config
<template>
<Transition name="zoom">
<PeerSettingsModal v-if="configurationModals.peerSetting.modalOpen"
key="settings"
:selectedPeer="configurationModalSelectedPeer"
@refresh="emits('refresh')"
@close="configurationModals.peerSetting.modalOpen = false">
<PeerSettingsModal
v-if="configurationModals.peerSetting.modalOpen"
key="settings"
:selectedPeer="configurationModalSelectedPeer"
@refresh="emits('refresh')"
@close="configurationModals.peerSetting.modalOpen = false">
</PeerSettingsModal>
</Transition>
<Transition name="zoom">
<PeerQRCodeModal
v-if="configurationModals.peerQRCode.modalOpen"
:selectedPeer="configurationModalSelectedPeer"
@close="configurationModals.peerQRCode.modalOpen = false">
</PeerQRCodeModal>
</Transition>
</template>
<style scoped>

View File

@ -20,7 +20,7 @@ const route = useRoute()
const configurationInfo = ref({})
const configurationPeers = ref([])
const configurationToggling = ref(false)
const configurationModalSelectedPeer = ref("")
const configurationModalSelectedPeer = ref({})
const configurationModals = ref({
peerSetting: {
modalOpen: false,
@ -345,7 +345,7 @@ const searchPeers = computed(() => {
@refresh="fetchPeerList()"
@jobs="configurationModals.peerScheduleJobs.modalOpen = true; configurationModals.peerScheduleJobs.selectedPeer = this.configurationPeers.find(x => x.id === peer.id)"
@setting="configurationModals.peerSetting.modalOpen = true; configurationModalSelectedPeer = peer"
@qrcode="(file) => {configurationModals.peerQRCode.peerConfigData = file; configurationModals.peerQRCode.modalOpen = true;}"
@qrcode="(file) => {configurationModalSelectedPeer = peer; configurationModals.peerQRCode.modalOpen = true;}"
@configurationFile="(file) => {configurationModals.peerConfigurationFile.peerConfigData = file; configurationModals.peerConfigurationFile.modalOpen = true;}"
></Peer>
</div>

View File

@ -1,15 +1,35 @@
<script>
import QRCode from "qrcode";
import LocaleText from "@/components/text/localeText.vue";
import {fetchGet} from "@/utilities/fetch.js";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
export default {
name: "peerQRCode",
components: {LocaleText},
props: {
peerConfigData: String
selectedPeer: Object
},
setup(){
const dashboardStore = DashboardConfigurationStore();
return {dashboardStore}
},
data(){
return{
loading: true
}
},
mounted() {
QRCode.toCanvas(document.querySelector("#qrcode"), this.peerConfigData , (error) => {
if (error) console.error(error)
fetchGet("/api/downloadPeer/"+this.$route.params.id, {
id: this.selectedPeer.id
}, (res) => {
this.loading = false;
if (res.status){
QRCode.toCanvas(document.querySelector("#qrcode"), res.data.file, (error) => {
if (error) console.error(error)
})
}else{
this.dashboardStore.newMessage("Server", res.message, "danger")
}
})
}
}
@ -26,8 +46,13 @@ export default {
</h4>
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
</div>
<div class="card-body">
<canvas id="qrcode" class="rounded-3 shadow" ref="qrcode"></canvas>
<div class="card-body p-4">
<div style="width: 292px; height: 292px;" class="d-flex">
<canvas id="qrcode" class="rounded-3 shadow animate__animated animate__fadeIn animate__faster" :class="{'d-none': loading}"></canvas>
<div class="spinner-border m-auto" role="status" v-if="loading">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>