feat: noti checkin

package.json

@@ -34,6 +34,7 @@
     "quasar": "^2.11.1",
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
+    "socket.io-client": "^4.8.3",
     "vite-plugin-pwa": "^0.16.7",
     "vue": "^3.4.15",
     "vue-router": "^4.1.6",

src/App.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useSocketStore } from '@/stores/socket'
+
+onMounted(() => {
+  useSocketStore()
+})
+</script>
+
 <template>
   <router-view />
 </template>

src/api/socket.ts

@@ -0,0 +1,7 @@
+import env from "./index";
+
+const socket = `${env.API_URI}/org-socket`;
+
+export default {
+  socket,
+};

src/app.config.ts

@@ -4,6 +4,7 @@
 import leave from '@/api/api.checkin'
 import history from '@/api/api.history'
 import message from '@/api/api.message'
+import socket from '@/api/socket'
 
 const API = {
   /**leave */
@@ -12,6 +13,7 @@ const API = {
   ...history,
   /**message */
   ...message,
+  ...socket,
 }
 
 export default {

src/stores/socket.ts

@@ -0,0 +1,98 @@
+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
+
+  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)
+      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 {}
+})

src/style/quasar-variables.sass

@@ -69,30 +69,30 @@ div
 $separator-color: #EDEDED !default
 
 .bg-teal-1
-  background: #e0f2f1a6 !important
+    background: #e0f2f1a6 !important
 
 .table_ellipsis
-  max-width: 200px
+    max-width: 200px
-  white-space: nowrap
+    white-space: nowrap
-  overflow: hidden
+    overflow: hidden
-  text-overflow: ellipsis
+    text-overflow: ellipsis
 
 .table_ellipsis:hover
-  word-wrap: break-word
+    word-wrap: break-word
-  overflow: visible
+    overflow: visible
-  white-space: normal
+    white-space: normal
 
 .table_ellipsis2
-  max-width: 25vw
+    max-width: 25vw
-  white-space: nowrap
+    white-space: nowrap
-  overflow: hidden
+    overflow: hidden
-  text-overflow: ellipsis
+    text-overflow: ellipsis
 
 .table_ellipsis2:hover
-  word-wrap: break-word
+    word-wrap: break-word
-  overflow: visible
+    overflow: visible
-  white-space: normal
+    white-space: normal
-  transition: width 2s
+    transition: width 2s
 
 $muti-tab: #87d4cc
 .text-muti-tab
@@ -100,7 +100,6 @@ $muti-tab: #87d4cc
 .bg-muti-tab
     background: $muti-tab !important
 
-    
 /* editor */
 
 .q-editor
@@ -109,26 +108,25 @@ $muti-tab: #87d4cc
     font-weight: 400
 
 .q-editor h1, .q-menu h1
-  font-size: 1.5rem
+    font-size: 1.5rem
-  line-height: 2rem
+    line-height: 2rem
-  font-weight: 400
+    font-weight: 400
-  margin-block-start: 0em
+    margin-block-start: 0em
-  margin-block-end: 0em
+    margin-block-end: 0em
 
 .q-editor h2,  .q-menu h2
-  font-size: 1.25rem
+    font-size: 1.25rem
-  line-height: 1.5rem
+    line-height: 1.5rem
-  font-weight: 400
+    font-weight: 400
-  margin-block-start: 0em
+    margin-block-start: 0em
-  margin-block-end: 0em
+    margin-block-end: 0em
-
 
 .q-editor h3, .q-menu h3
-  font-size: 1.1rem
+    font-size: 1.1rem
-  line-height: 1.5rem
+    line-height: 1.5rem
-  font-weight: 400
+    font-weight: 400
-  margin-block-start: 0em
+    margin-block-start: 0em
-  margin-block-end: 0em
+    margin-block-end: 0em
 
 .q-editor p, .q-menu p
     margin: 0
@@ -136,4 +134,7 @@ $muti-tab: #87d4cc
 /* q-tree */
 
 .q-tree
-  color: #c8d3db
+    color: #c8d3db
+
+.custom-notification-top
+    margin-top: 180px !important