fix(camera): btn refreshPhoto

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/components/AscGISMap.vue

@@ -163,8 +163,19 @@ function reattachAndResizeMap(retry = 0) {
       mapView.value.container = activeContainer
     }
 
-    mapView.value.resize()
-    mapView.value.requestRender?.()
+    // เรียก 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
       .goTo(
         {
@@ -285,7 +296,11 @@ async function initializeMap() {
       geometry: userPoint,
       symbol: userSymbol,
     })
-    mapView.value.graphics.add(userGraphic)
+
+    // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics
+    if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) {
+      mapView.value.graphics.add(userGraphic)
+    }
     // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
     // await axios
     //   .get(
@@ -381,12 +396,22 @@ async function initializeMap() {
           geometry: poiPoint,
           symbol: poiSymbol,
         })
-        mapView.value.graphics.add(poiGraphic)
-        // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-        mapView.value.goTo({
-          target: [userPoint, poiPoint],
-          zoom: zoomMap.value,
-        })
+
+        // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง 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
+            })
+          }
+        }
 
         updateLocation(latitude, longitude, poiPlaceName.value)
       })

src/stores/socket.ts

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

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,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
-  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
@@ -136,4 +134,7 @@ $muti-tab: #87d4cc
 /* q-tree */
 
 .q-tree
-  color: #c8d3db
+    color: #c8d3db
+
+.custom-notification-top
+    margin-top: 180px !important

src/views/HomeView.vue

@@ -11,6 +11,7 @@ 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'
@@ -18,6 +19,7 @@ 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'
 
@@ -32,6 +34,8 @@ const {
   syncPermissionStates,
   requestCameraPermission,
 } = usePermissions()
+const socketStore = useSocketStore()
+const { notificationCounter } = storeToRefs(socketStore)
 const privacyStore = usePrivacyStore()
 const positionKeycloakStore = usePositionKeycloakStore()
 const MOCK_CHECK_DELAY_MS = 800
@@ -634,19 +638,18 @@ 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)
-      }
-      // hideLoader()
+      // 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)
+      // }
     } else {
       /** inQueue เป็น false  */
       isDisabledCheckTime.value = false
@@ -1248,6 +1251,11 @@ watch(
     }
   }
 )
+
+/** Watch notification counter on socket */
+watch(notificationCounter, () => {
+  startChecking()
+})
 </script>
 
 <template>
@@ -1405,13 +1413,13 @@ watch(
                         </div>
                       </div>
 
-                      <div v-if="cameraIsOn">
+                      <div v-if="cameraIsOn && img == null">
                         <div
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
                           <q-btn
-                            v-if="availableCameras.length > 1 && img == null"
+                            v-if="availableCameras.length > 1"
                             round
                             push
                             icon="flip_camera_ios"
@@ -1421,7 +1429,6 @@ watch(
                             @click="switchCamera"
                           />
                           <q-btn
-                            v-if="img == null"
                             round
                             push
                             icon="photo_camera"
@@ -1429,8 +1436,41 @@ watch(
                             color="positive"
                             @click="capturePhoto"
                           />
+                        </div>
+                        <div v-else>
+                          <div
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
+                            <q-btn
+                              v-if="availableCameras.length > 1"
+                              round
+                              icon="flip_camera_ios"
+                              size="16px"
+                              style="background: #424242; color: white"
+                              @click="switchCamera"
+                              unelevated
+                              class="q-mr-xs"
+                            />
+                            <q-btn
+                              round
+                              icon="photo_camera"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="capturePhoto"
+                              unelevated
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Refresh button - shows when photo is captured regardless of camera state -->
+                      <div v-if="img != null && !useNativePhotoCapture">
+                        <div
+                          v-if="$q.screen.gt.xs"
+                          class="absolute-bottom-right q-ma-md"
+                        >
                           <q-btn
-                            v-else
                             round
                             push
                             icon="refresh"
@@ -1445,31 +1485,12 @@ watch(
                             style="background: #00000021"
                           >
                             <q-btn
-                              v-if="availableCameras.length > 1 && img == null"
-                              round
-                              icon="flip_camera_ios"
-                              size="16px"
-                              style="background: #424242; color: white"
-                              @click="switchCamera"
-                              unelevated
-                              class="q-mr-xs"
-                            />
-                            <q-btn
-                              round
-                              v-if="img == null"
-                              icon="photo_camera"
-                              size="18px"
-                              style="background: #263238; color: white"
-                              @click="capturePhoto"
-                              unelevated
-                            />
-                            <q-btn
-                              v-else
                               round
                               icon="refresh"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="refreshPhoto"
+                              unelevated
                             />
                           </div>
                         </div>
@@ -1541,13 +1562,13 @@ watch(
                           </div>
                         </div>
 
-                        <div v-if="cameraIsOn">
+                        <div v-if="cameraIsOn && img == null">
                           <div
                             class="absolute-bottom text-subtitle2 text-center q-py-sm"
                             style="background: #00000021"
                           >
                             <q-btn
-                              v-if="availableCameras.length > 1 && img == null"
+                              v-if="availableCameras.length > 1"
                               round
                               icon="flip_camera_ios"
                               size="16px"
@@ -1558,15 +1579,22 @@ watch(
                             />
                             <q-btn
                               round
-                              v-if="img == null"
                               icon="photo_camera"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="capturePhoto"
                               unelevated
                             />
+                          </div>
+                        </div>
+
+                        <!-- Refresh button - shows when photo is captured regardless of camera state -->
+                        <div v-if="img != null && !useNativePhotoCapture">
+                          <div
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
                             <q-btn
-                              v-else
                               round
                               icon="refresh"
                               size="18px"