diff --git a/package.json b/package.json index 503f2f9..c36ed30 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "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", diff --git a/src/App.vue b/src/App.vue index 867210e..ea76d33 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,12 +1,3 @@ - - diff --git a/src/api/socket.ts b/src/api/socket.ts deleted file mode 100644 index b018666..0000000 --- a/src/api/socket.ts +++ /dev/null @@ -1,7 +0,0 @@ -import env from "./index"; - -const socket = `${env.API_URI}/org-socket`; - -export default { - socket, -}; diff --git a/src/app.config.ts b/src/app.config.ts index 085d287..c6dbe0c 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -4,7 +4,6 @@ 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 */ @@ -13,7 +12,6 @@ const API = { ...history, /**message */ ...message, - ...socket, } export default { diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue index bfe0e9c..ec1eb0b 100644 --- a/src/components/AscGISMap.vue +++ b/src/components/AscGISMap.vue @@ -163,19 +163,8 @@ function reattachAndResizeMap(retry = 0) { mapView.value.container = activeContainer } - // เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่ - try { - if (typeof mapView.value.resize === 'function') { - mapView.value.resize() - } - } catch (error) { - console.warn('Map resize failed:', error) - } - - if (typeof mapView.value.requestRender === 'function') { - mapView.value.requestRender?.() - } - + mapView.value.resize() + mapView.value.requestRender?.() mapView.value .goTo( { @@ -296,11 +285,7 @@ async function initializeMap() { geometry: userPoint, symbol: userSymbol, }) - - // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics - if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) { - mapView.value.graphics.add(userGraphic) - } + mapView.value.graphics.add(userGraphic) // Get POI place ยิงไปขอที่ server ของกทม.ก่อน // await axios // .get( @@ -396,22 +381,12 @@ async function initializeMap() { geometry: poiPoint, symbol: poiSymbol, }) - - // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo - if (mapView.value && !mapView.value.destroyed) { - if (mapView.value.graphics) { - mapView.value.graphics.add(poiGraphic) - } - // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI - if (typeof mapView.value.goTo === 'function') { - mapView.value.goTo({ - target: [userPoint, poiPoint], - zoom: zoomMap.value, - }).catch(() => { - // Ignore goTo errors - }) - } - } + mapView.value.graphics.add(poiGraphic) + // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI + mapView.value.goTo({ + target: [userPoint, poiPoint], + zoom: zoomMap.value, + }) updateLocation(latitude, longitude, poiPlaceName.value) }) diff --git a/src/stores/socket.ts b/src/stores/socket.ts deleted file mode 100644 index 28c1e3b..0000000 --- a/src/stores/socket.ts +++ /dev/null @@ -1,101 +0,0 @@ -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} ${ - type == 'draft' ? 'ไปยังโครงสร้างแบบร่าง' : 'ไปยังโครงสร้างปัจจุบัน' - }`, - html: true, - group: false, - type: success === undefined || success ? 'positive' : 'negative', - position: 'top', - timeout: 0, - actions: [ - { - icon: 'close', - color: 'white', - round: true, - }, - ], - }) - } - - init() - - return { notificationCounter } -}) diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass index e590103..f2c3dc4 100644 --- a/src/style/quasar-variables.sass +++ b/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 - white-space: nowrap - overflow: hidden - text-overflow: ellipsis + max-width: 200px + white-space: nowrap + overflow: hidden + text-overflow: ellipsis .table_ellipsis:hover - word-wrap: break-word - overflow: visible - white-space: normal + word-wrap: break-word + overflow: visible + white-space: normal .table_ellipsis2 - max-width: 25vw - white-space: nowrap - overflow: hidden - text-overflow: ellipsis + max-width: 25vw + white-space: nowrap + overflow: hidden + text-overflow: ellipsis .table_ellipsis2:hover - word-wrap: break-word - overflow: visible - white-space: normal - transition: width 2s + word-wrap: break-word + overflow: visible + white-space: normal + transition: width 2s $muti-tab: #87d4cc .text-muti-tab @@ -100,33 +100,35 @@ $muti-tab: #87d4cc .bg-muti-tab background: $muti-tab !important + /* editor */ .q-editor font-size: 1rem line-height: 1.5rem font-weight: 400 - + .q-editor h1, .q-menu h1 - font-size: 1.5rem - line-height: 2rem - font-weight: 400 - margin-block-start: 0em - margin-block-end: 0em + font-size: 1.5rem + line-height: 2rem + font-weight: 400 + margin-block-start: 0em + margin-block-end: 0em .q-editor h2, .q-menu h2 - font-size: 1.25rem - line-height: 1.5rem - font-weight: 400 - margin-block-start: 0em - margin-block-end: 0em + font-size: 1.25rem + line-height: 1.5rem + font-weight: 400 + margin-block-start: 0em + margin-block-end: 0em + .q-editor h3, .q-menu h3 - font-size: 1.1rem - line-height: 1.5rem - font-weight: 400 - margin-block-start: 0em - margin-block-end: 0em + font-size: 1.1rem + line-height: 1.5rem + font-weight: 400 + margin-block-start: 0em + margin-block-end: 0em .q-editor p, .q-menu p margin: 0 @@ -134,7 +136,4 @@ $muti-tab: #87d4cc /* q-tree */ .q-tree - color: #c8d3db - -.custom-notification-top - margin-top: 180px !important + color: #c8d3db diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 84a3e77..9b76ae3 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -11,7 +11,6 @@ import { import { useQuasar } from 'quasar' import { format } from 'date-fns' import Camera from 'simple-vue-camera' -import { storeToRefs } from 'pinia' import config from '@/app.config' import http from '@/plugins/http' @@ -19,7 +18,6 @@ import { useCounterMixin } from '@/stores/mixin' import { usePermissions } from '@/composables/usePermissions' import { usePrivacyStore } from '@/stores/privacy' import { usePositionKeycloakStore } from '@/stores/positionKeycloak' -import { useSocketStore } from '@/stores/socket' import type { FormRef, OptionReason } from '@/interface/response/checkin' @@ -34,8 +32,6 @@ const { syncPermissionStates, requestCameraPermission, } = usePermissions() -const socketStore = useSocketStore() -const { notificationCounter } = storeToRefs(socketStore) const privacyStore = usePrivacyStore() const positionKeycloakStore = usePositionKeycloakStore() const MOCK_CHECK_DELAY_MS = 800 @@ -638,18 +634,19 @@ async function fetchCheckStatus() { /** inQueue เป็น true */ isDisabledCheckTime.value = true msgCheckTime.value = 'ระบบกำลังประมวลผล' - // if (intervalId.value === undefined) { - // intervalId.value = setInterval(async () => { - // try { - // await fetchCheckStatus() - // } catch (error) { - // console.error('Error in interval fetchCheckStatus:', error) - // // หยุด interval ถ้าเกิด error - // stopChecking() - // } - // }, 3000) - // console.log('startChecking called, intervalId:', intervalId.value) - // } + if (intervalId.value === undefined) { + intervalId.value = setInterval(async () => { + try { + await fetchCheckStatus() + } catch (error) { + console.error('Error in interval fetchCheckStatus:', error) + // หยุด interval ถ้าเกิด error + stopChecking() + } + }, 3000) + console.log('startChecking called, intervalId:', intervalId.value) + } + // hideLoader() } else { /** inQueue เป็น false */ isDisabledCheckTime.value = false @@ -1251,11 +1248,6 @@ watch( } } ) - -/** Watch notification counter on socket */ -watch(notificationCounter, () => { - startChecking() -})