ผูก API checkIn checkOut

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 dateTimeString = data.date.toString()
-      const timeOnly = dateTimeString.split(' ')[1]
-      console.log(timeOnly)
+      const dateObject = new Date(data.date)
+      const options: Intl.DateTimeFormatOptions = {
+        hour12: false,
+        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="
-                        stetusCheckin == true && img == null
-                          ? 'grey-6'
-                          : 'primary'
-                      "
+                      :color="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>