Compare commits
No commits in common. "dev" and "v1.1.27" have entirely different histories.
8 changed files with 86 additions and 260 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,3 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
|
||||
onMounted(() => {
|
||||
useSocketStore()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
import env from "./index";
|
||||
|
||||
const socket = `${env.API_URI}/org-socket`;
|
||||
|
||||
export default {
|
||||
socket,
|
||||
};
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
.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)
|
||||
}
|
||||
// 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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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} <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 }
|
||||
})
|
||||
|
|
@ -100,6 +100,7 @@ $muti-tab: #87d4cc
|
|||
.bg-muti-tab
|
||||
background: $muti-tab !important
|
||||
|
||||
|
||||
/* editor */
|
||||
|
||||
.q-editor
|
||||
|
|
@ -121,6 +122,7 @@ $muti-tab: #87d4cc
|
|||
margin-block-start: 0em
|
||||
margin-block-end: 0em
|
||||
|
||||
|
||||
.q-editor h3, .q-menu h3
|
||||
font-size: 1.1rem
|
||||
line-height: 1.5rem
|
||||
|
|
@ -135,6 +137,3 @@ $muti-tab: #87d4cc
|
|||
|
||||
.q-tree
|
||||
color: #c8d3db
|
||||
|
||||
.custom-notification-top
|
||||
margin-top: 180px !important
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -1413,13 +1405,13 @@ watch(notificationCounter, () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="cameraIsOn && img == null">
|
||||
<div v-if="cameraIsOn">
|
||||
<div
|
||||
v-if="$q.screen.gt.xs"
|
||||
class="absolute-bottom-right q-ma-md"
|
||||
>
|
||||
<q-btn
|
||||
v-if="availableCameras.length > 1"
|
||||
v-if="availableCameras.length > 1 && img == null"
|
||||
round
|
||||
push
|
||||
icon="flip_camera_ios"
|
||||
|
|
@ -1429,6 +1421,7 @@ watch(notificationCounter, () => {
|
|||
@click="switchCamera"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="img == null"
|
||||
round
|
||||
push
|
||||
icon="photo_camera"
|
||||
|
|
@ -1436,41 +1429,8 @@ watch(notificationCounter, () => {
|
|||
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"
|
||||
|
|
@ -1485,12 +1445,31 @@ watch(notificationCounter, () => {
|
|||
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>
|
||||
|
|
@ -1562,13 +1541,13 @@ watch(notificationCounter, () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="cameraIsOn && img == null">
|
||||
<div v-if="cameraIsOn">
|
||||
<div
|
||||
class="absolute-bottom text-subtitle2 text-center q-py-sm"
|
||||
style="background: #00000021"
|
||||
>
|
||||
<q-btn
|
||||
v-if="availableCameras.length > 1"
|
||||
v-if="availableCameras.length > 1 && img == null"
|
||||
round
|
||||
icon="flip_camera_ios"
|
||||
size="16px"
|
||||
|
|
@ -1579,22 +1558,15 @@ watch(notificationCounter, () => {
|
|||
/>
|
||||
<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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue