refector code

src/views/HomeView.vue

@@ -3,26 +3,31 @@ import { ref, reactive, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
-import http from '@/plugins/http'
+
 import config from '@/app.config'
-import type { FormRef } from '@/interface/response/checkin'
-import MapCheck from '@/components/AscGISMap.vue'
+import http from '@/plugins/http'
 import { useCounterMixin } from '@/stores/mixin'
 
+import type { FormRef } from '@/interface/response/checkin'
+
+import MapCheck from '@/components/AscGISMap.vue'
+
 const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError } = mixin
 const $q = useQuasar()
 
-const dialogTime = ref<boolean>(false)
-const stetusCheckin = ref<boolean>(true)
+const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
+const stetusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
 
-/** function เช็คเวลาต้องลงเวลาเข้าหรือออกงาน */
+/**
+ * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
+ */
 async function fetchCheckTime() {
   showLoader()
   await http
     .get(config.API.checkTime())
-    .then((res) => {
-      const data = res.data.result
+    .then(async (res) => {
+      const data = await res.data.result
       stetusCheckin.value = data.checkInId ? false : true
       checkInId.value = data.checkInId ? data.checkInId : ''
     })
@@ -40,7 +45,10 @@ const Thai = ref<Date>(dateNow.value)
 const formattedS = ref()
 const formattedM = ref()
 const formattedH = ref()
-/** function อัพเดทเวลา*/
+
+/**
+ * function อัพเดทเวลา
+ */
 function updateClock() {
   const date = Date.now()
   const hh = moment(date).format('HH')
@@ -69,16 +77,19 @@ const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าส
  * @param location  พิกัดละติจูด พิกัดลองติจูด
  * @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
  */
-async function updateLocation(latitude: any, longitude: any, namePOI: string) {
+async function updateLocation(
+  latitude: number,
+  longitude: number,
+  namePOI: string
+) {
   formLocation.lat = latitude
   formLocation.lng = longitude
   formLocation.POI = namePOI
 }
 
-//location
-const location = ref<string>('')
-// const coordinates = ref<string>('')
-const model = ref<string>('')
+const location = ref<string>('') // พื้นที่ใกล้เคียง
+const model = ref<string>('') //  สถานที่ทำงาน
+// ตัวเลือกสถานที่ทำงาน
 const options = ref<string[]>([
   'ปฏิบัติงานที่บ้าน',
   'ลืมลงเวลาปฏิบัติงาน',
@@ -87,7 +98,9 @@ const options = ref<string[]>([
   'อื่นๆ',
 ])
 
-/** function เลือกสถานที่*/
+/**
+ * function เลือกสถานที่
+ */
 function selectLocation() {
   if (model.value === 'อื่นๆ') {
     useLocation.value = ''
@@ -103,7 +116,9 @@ const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
 
-/** function เปิดกล้อง */
+/**
+ * function เปิดกล้อง
+ */
 async function openCamera() {
   // change camera device
   if (cameraIsOn.value) {
@@ -115,14 +130,18 @@ async function openCamera() {
   cameraIsOn.value = !cameraIsOn.value
 }
 
-/** change camera device */
+/**
+ * change camera device
+ */
 async function changeCamera() {
   const devices: any = await camera.value?.devices(['videoinput'])
   const device = await devices[0]
   camera.value?.changeCamera(device.deviceId)
 }
 
-/** function ถ่ายรูป*/
+/**
+ * function ถ่ายรูป
+ */
 async function capturePhoto() {
   const imageBlob: any = await camera.value?.snapshot(
     { width: photoWidth.value, height: photoHeight.value },
@@ -139,7 +158,9 @@ async function capturePhoto() {
   img.value = url
 }
 
-/** function เปลี่ยนรูปภาพ*/
+/**
+ * function เปลี่ยนรูปภาพ
+ */
 function refreshPhoto() {
   img.value = undefined
   camera.value?.start()
@@ -153,7 +174,9 @@ const objectRef: FormRef = {
   useLocation: useLocationRef,
 }
 
-/** function ตรวจสอบค่าว่างของ input*/
+/**
+ * function ตรวจสอบค่าว่างของ input
+ */
 function validateForm() {
   const hasError = []
   for (const key in objectRef) {
@@ -170,8 +193,11 @@ function validateForm() {
   }
 }
 
-const timeChickin = ref<string>()
-/** function ยืนยันการลงเวลาเข้า - ออก*/
+const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
+
+/**
+ * function ยืนยันการลงเวลาเข้า - ออก
+ */
 async function confirm() {
   showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
@@ -188,7 +214,7 @@ async function confirm() {
   await http
     .post(config.API.checkin(), formdata)
     .then(async (res) => {
-      const data = res.data.result
+      const data = await res.data.result
       const dateObject = new Date(data.date)
       const options: Intl.DateTimeFormatOptions = {
         hour12: false,
@@ -199,8 +225,7 @@ async function confirm() {
         dateObject
       )
       timeChickin.value = timeString
-      dialogTime.value = true
-      // await fetchCheckTime()
+      modalTime.value = true
     })
     .catch((err) => {
       messageError($q, err)
@@ -210,19 +235,28 @@ async function confirm() {
     })
 }
 
+/**
+ * ปิด popup แสดงการลงเวลา
+ */
 async function onClickConfirm() {
   await fetchCheckTime()
   cameraIsOn.value = false
   img.value = undefined
-  dialogTime.value = false
+  modalTime.value = false
 }
 
+/**
+ * เลือกสถานที่ทำงาน
+ */
 function updateWorkplace() {
   useLocation.value = ''
   model.value = ''
 }
 
-// class
+/**
+ *  รี้เทินร์ class สีพื้นหลัง
+ * @param val ค่า stetusCheckin
+ */
 const getClass = (val: boolean) => {
   return {
     'bg-primary text-white col-12 row items-center q-px-md q-py-sm': val,
@@ -230,7 +264,6 @@ const getClass = (val: boolean) => {
   }
 }
 
-const fullName = ref<string>('')
 /** Hook*/
 onMounted(async () => {
   await fetchCheckTime()
@@ -426,6 +459,7 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+
           <div class="col-12 text-right">
             <q-separator />
             <div class="col-12 q-pa-md">
@@ -456,7 +490,8 @@ onMounted(async () => {
     </div>
   </div>
 
-  <q-dialog v-model="dialogTime" persistent>
+  <!-- แสดงการลงเวลา -->
+  <q-dialog v-model="modalTime" persistent>
     <q-card class="full-width cardNone">
       <div :class="getClass(stetusCheckin)">
         <div class="text-body1 text-center col-12 text-weight-bold">