101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { ref } from 'vue'
|
|
import config from '@/app.config'
|
|
import { getToken } from '@/plugins/auth'
|
|
import { defineStore } from 'pinia'
|
|
import { Notify } from 'quasar'
|
|
import { io, Socket } from 'socket.io-client'
|
|
interface sockeBackup {
|
|
message: string
|
|
success?: boolean
|
|
}
|
|
|
|
export const useSocketStore = defineStore('socket', () => {
|
|
let socket: Socket
|
|
const notificationCounter = ref(0);
|
|
|
|
async function init() {
|
|
socket = io(new URL(config.API.socket).origin, {
|
|
auth: { token: await getToken() },
|
|
path: '/api/v1/org-socket',
|
|
})
|
|
|
|
socket.on('socket-notification', (payload) => {
|
|
let body: sockeBackup = JSON.parse(payload)
|
|
notificationCounter.value++
|
|
notifyStatus(body.message, body.success)
|
|
})
|
|
}
|
|
|
|
function notifyStatus(message: string, success?: boolean) {
|
|
Notify.create({
|
|
group: false,
|
|
type: success === undefined || success ? 'positive' : 'negative',
|
|
message: `${message}`,
|
|
position: 'top',
|
|
classes: 'custom-notification-top', // ใส่ class ที่เราสร้างไว้
|
|
timeout: success === undefined || success ? 3000 : 0,
|
|
actions:
|
|
success === undefined || success
|
|
? []
|
|
: [
|
|
{
|
|
icon: 'close',
|
|
color: 'white',
|
|
round: true,
|
|
},
|
|
],
|
|
progress: true,
|
|
})
|
|
}
|
|
|
|
function fnStyleNotiOrg() {
|
|
if (document.getElementById('notify-link-style')) return
|
|
const style = document.createElement('style')
|
|
style.id = 'notify-link-style'
|
|
style.textContent = `
|
|
.notify-link {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
border: 1px solid #fff;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
margin:0 0 0 5px;
|
|
}
|
|
.notify-link:hover {
|
|
background-color: #ffffff;
|
|
color: #21BA45;
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
}
|
|
;(window as any).resetOrgPage = (type: string) => {
|
|
localStorage.setItem('org_type', type)
|
|
window.location.reload()
|
|
}
|
|
function notifyStatusOrg(type: string, message: string, success?: boolean) {
|
|
fnStyleNotiOrg()
|
|
Notify.create({
|
|
message: `${message} <a href="#" onclick="window.resetOrgPage('${type}')" class="notify-link">${
|
|
type == 'draft' ? 'ไปยังโครงสร้างแบบร่าง' : 'ไปยังโครงสร้างปัจจุบัน'
|
|
}</a>`,
|
|
html: true,
|
|
group: false,
|
|
type: success === undefined || success ? 'positive' : 'negative',
|
|
position: 'top',
|
|
timeout: 0,
|
|
actions: [
|
|
{
|
|
icon: 'close',
|
|
color: 'white',
|
|
round: true,
|
|
},
|
|
],
|
|
})
|
|
}
|
|
|
|
init()
|
|
|
|
return { notificationCounter }
|
|
})
|