ผูก API checkIn checkOut

src/components/MapCheckin.vue

@@ -83,7 +83,11 @@ onMounted(() => {
         api-key="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
         style="width: 100%; height: 100%"
         :center="center"
-        :zoom="17"
+        :zoom="15"
+        disable-default-ui
+        disable-double-click-zoom
+        :scrollwheel="false"
+        gesture-handling="none"
       >
         <Marker :options="{ position: center }" />
         <Marker

src/stores/mixin.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import CustomComponent from '@/components/CustomDialog.vue'
-import { Loading, QSpinnerCube } from "quasar";
+import { Loading, QSpinnerCube } from 'quasar'
 
 export const useCounterMixin = defineStore('mixin', () => {
   function date2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
@@ -75,14 +75,14 @@ export const useCounterMixin = defineStore('mixin', () => {
     Loading.show({
       spinner: QSpinnerCube,
       spinnerSize: 140,
-      spinnerColor: "primary",
+      spinnerColor: 'primary',
-      backgroundColor: "white",
+      backgroundColor: 'white',
-    });
+    })
-  };
+  }
 
   const hideLoader = () => {
-    Loading.hide();
+    Loading.hide()
-  };
+  }
 
   function covertDateObject(date: string) {
     if (date) {
@@ -128,11 +128,92 @@ export const useCounterMixin = defineStore('mixin', () => {
       })
   }
 
+  function messageError(q: any, e: any = '') {
+    // q.dialog.hide();
+    if (e.response !== undefined) {
+      if (e.response.data.status !== undefined) {
+        if (e.response.data.status == 401) {
+          //invalid_token
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        } else {
+          const message = e.response.data.result ?? e.response.data.message
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `${message}`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        }
+      } else {
+        if (e.response.status == 401) {
+          //invalid_token
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        } else if (e.response.data.successful === false) {
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: e.response.data.message,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        } else {
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        }
+      }
+    } else {
+      q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `พบข้อผิดพลาด`,
+          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+          icon: 'warning',
+          color: 'red',
+          onlycancel: true,
+        },
+      })
+    }
+  }
+
   return {
     date2Thai,
     showLoader,
     hideLoader,
     covertDateObject,
     dialogConfirm,
+    messageError,
   }
 })

src/views/HomeView.vue

@@ -17,7 +17,7 @@ import MapCheck from '@/components/MapCheckin.vue'
 import { useCounterMixin } from '@/stores/mixin'
 
 const mixin = useCounterMixin()
-const { date2Thai, showLoader, hideLoader } = mixin
+const { date2Thai, showLoader, hideLoader, messageError } = mixin
 const router = useRouter()
 const $q = useQuasar()
 
@@ -85,7 +85,7 @@ async function updateLocation(location: any, namePOI: string) {
 
 //location
 const location = ref<string>('')
-const coordinates = ref<string>('')
+// const coordinates = ref<string>('')
 const model = ref<string>('')
 const options = ref<string[]>([
   'ปฏิบัติงานที่บ้าน',
@@ -180,6 +180,7 @@ function validateForm() {
   }
 }
 
+const timeChickin = ref<string>()
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
@@ -196,18 +197,30 @@ async function confirm() {
     .post(config.API.checkin(), formdata)
     .then(async (res) => {
       const data = res.data.result
-      console.log(res.data.result)
+      const dateObject = new Date(data.date)
-      const dateTimeString = data.date.toString()
+      const options: Intl.DateTimeFormatOptions = {
-      const timeOnly = dateTimeString.split(' ')[1]
+        hour12: false,
-      console.log(timeOnly)
+        hour: '2-digit',
+        minute: '2-digit',
+      }
+      const timeString = new Intl.DateTimeFormat('en-US', options).format(
+        dateObject
+      )
+      timeChickin.value = timeString
       dialogTime.value = true
-      await fetchCheckTime()
+      // await fetchCheckTime()
     })
     .catch((err) => {
       console.log(err)
+      messageError($q, err)
     })
+}
 
-  // ยิงไปที่ api แล้วแสดง popup
+async function onClickConfirm() {
+  await fetchCheckTime()
+  cameraIsOn.value = false
+  img.value = undefined
+  dialogTime.value = false
 }
 
 // class
@@ -428,11 +441,7 @@ onMounted(async () => {
                       :label="
                         stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'
                       "
-                      :color="
+                      :color="img == null ? 'grey-6' : 'primary'"
-                        stetusCheckin == true && img == null
-                          ? 'grey-6'
-                          : 'primary'
-                      "
                       push
                       size="14px"
                       :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
@@ -449,7 +458,7 @@ onMounted(async () => {
     </div>
   </div>
 
-  <q-dialog v-model="dialogTime">
+  <q-dialog v-model="dialogTime" persistent>
     <q-card class="full-width cardNone">
       <div :class="getClass(stetusCheckin)">
         <div class="text-body1 text-center col-12 text-weight-bold">
@@ -464,16 +473,18 @@ onMounted(async () => {
           </div>
           <div class="row col-12 justify-center q-pt-sm">
             <div class="text-h3 text-weight-bold">
-              {{ formattedH }}<span class="q-ma-md">:</span>
+              <!-- {{ formattedH }}<span class="q-ma-md">:</span> -->
             </div>
-            <div class="text-h3 text-weight-bold">{{ formattedM }}</div>
+            <div class="text-h3 text-weight-bold">{{ timeChickin }}</div>
           </div>
         </div>
         <div class="col-12 text-center row q-pt-md">
           <div class="col-12 text-subtitle1 text-weight-medium text-secondary">
             {{ location }}
           </div>
-          <div class="col-12 text-grey-7">{{ coordinates }}</div>
+          <div class="col-12 text-grey-7">
+            {{ formLocation.lat }} , {{ formLocation.lng }}
+          </div>
         </div>
       </q-card-section>
 
@@ -484,6 +495,7 @@ onMounted(async () => {
           label="ตกลง"
           color="secondary"
           v-close-popup
+          @click="onClickConfirm"
         />
       </q-card-actions>
     </q-card>