ปรับ code ลงเวลาเข้า-ออกงาน (USER)

src/components/MapCheckin.vue

@@ -7,13 +7,13 @@ const center = ref<any>()
 const location = ref<string>('')
 const test = ref()
 
-const emit = defineEmits(["update:location"]);
+const emit = defineEmits(['update:location'])
 const updateLocation = (location: any, namePOI: string) => {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:location", location, namePOI);
+  emit('update:location', location, namePOI)
-};
+}
 
-// หาตำแหน่ง
+/** function  หาตำแหน่ง*/
 function findNearestPlace() {
   if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(
@@ -37,7 +37,10 @@ function findNearestPlace() {
   }
 }
 
-
+/**
+ * function หาสถานที่ที่ใกล้ที่สุด
+ * @param userLocation   พิกัดละติจูด พิกัดลองจิจูด
+ */
 function findNearestPlaceFromAPI(userLocation: any) {
   const placesService = new google.maps.places.PlacesService(
     document.createElement('div')
@@ -55,8 +58,7 @@ function findNearestPlaceFromAPI(userLocation: any) {
       const place = results[0]
       location.value = place.name
       test.value = place.geometry.location
-      updateLocation(center.value,location.value)
+      updateLocation(center.value, location.value)
-      
     } else {
       console.error('Error fetching nearby places:', status)
     }

src/views/HomeView.vue

@@ -1,40 +1,45 @@
 <script setup lang="ts">
-import { ref,reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
-import http from "@/plugins/http";
+import http from '@/plugins/http'
-import config from "@/app.config";
+import config from '@/app.config'
 
 // import Type
 import type { FormRef } from '@/interface/response/checkin'
+
 // import components
 import MapCheck from '@/components/MapCheckin.vue'
+
 // import Stores
 import { useCounterMixin } from '@/stores/mixin'
 
 const mixin = useCounterMixin()
-const { date2Thai, showLoader,hideLoader } = mixin
+const { date2Thai, showLoader, hideLoader } = mixin
 const router = useRouter()
 const $q = useQuasar()
 
-
+const dialogTime = ref<boolean>(false)
 const stetusCheckin = ref<boolean>(true)
-const checkInId = ref<string|null> (null)
+
 /** function เช็คเวลาต้องลงเวลาเข้าหรือออกงาน */
 async function fetchCheckTime() {
   showLoader()
-  await http.get(config.API.checkTime())
+  await http
-  .then((res) => {
+    .get(config.API.checkTime())
-    const data = res.data.result
+    .then((res) => {
-    stetusCheckin.value = data.checkInId ? false :true;
+      const data = res.data.result
-    checkInId.value =  data.checkInId ? data.checkInId : ""
+      stetusCheckin.value = data.checkInId ? false : true
-  }).catch((err) => {
+      checkInId.value = data.checkInId ? data.checkInId : ''
-    console.log(err);
+    })
-  }).finally(() => {
+    .catch((err) => {
-      hideLoader();
+      console.log(err)
-  })
+    })
+    .finally(() => {
+      hideLoader()
+    })
 }
 
 /** ref อัพเดทเวลา*/
@@ -55,27 +60,33 @@ function updateClock() {
 }
 setInterval(updateClock, 1000)
 
-// const lat = ref<number>()
+/** form-data */
-// const lng = ref<number>()
-// const POI = ref<string>("")
 const formLocation = reactive({
-  lat: null,
+  lat: 0, //พิกัดละติจูด
-  lng: null,
+  lng: 0, //พิกัดลองจิจูด
-  POI: "",
+  POI: '', //ชื่อสถานที่
 })
-async function updateLocation(location:any,namePOI:string) {
+const workplace = ref<string>('in-place') //ณ สถานที่ตั้ง, นอกสถานที่ตั้ง
+const useLocation = ref<string>('') //กรณีเลือกนอกสถานที่ตั้ง ต้องระบุข้อมูลชื่อสถานะที่
+const fileImg = ref<any>() //รูปถ่ายสถานที่
+const remark = ref<string>('') //ข้อความหมายเหตุที่ต้องการระบุเพิ่ม
+const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าสุดที่ยังไม่ลงเวลาออก
+
+/**
+ *  funciton เรียกพิกัดละติจูด พิกัดลองติจูด
+ * @param location  พิกัดละติจูด พิกัดลองติจูด
+ * @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
+ */
+async function updateLocation(location: any, namePOI: string) {
   formLocation.lat = location.lat
   formLocation.lng = location.lng
   formLocation.POI = namePOI
 }
 
 //location
-const remark = ref<string>('')
 const location = ref<string>('')
 const coordinates = ref<string>('')
-const workplace = ref<string>('in-place')
+const model = ref<string>('')
-const useLocation = ref<string | null>('')
-const model = ref<string | null>('')
 const options = ref<string[]>([
   'ปฏิบัติงานที่บ้าน',
   'ลืมลงเวลาปฏิบัติงาน',
@@ -83,6 +94,8 @@ const options = ref<string[]>([
   'ขออนุญาตออกนอกสถานที่',
   'อื่นๆ',
 ])
+
+/** function เลือกสถานที่*/
 function selectLocation() {
   if (model.value === 'อื่นๆ') {
     useLocation.value = ''
@@ -90,16 +103,16 @@ function selectLocation() {
     useLocation.value = model.value
   }
 }
-//camera
 
+/** Camera */
 const camera = ref<InstanceType<typeof Camera>>()
 const cameraIsOn = ref<boolean>(false)
-const fileImg = ref<any>()
 const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
 
-const openCamera = async () => {
+/** function เปิดกล้อง */
+async function openCamera() {
   // change camera device
   if (cameraIsOn.value) {
     camera.value?.stop()
@@ -110,37 +123,37 @@ const openCamera = async () => {
   cameraIsOn.value = !cameraIsOn.value
 }
 
-// change camera device
+/** change camera device */
-const changeCamera = async () => {
+async function changeCamera() {
   const devices: any = await camera.value?.devices(['videoinput'])
   const device = await devices[0]
   camera.value?.changeCamera(device.deviceId)
- 
 }
+
+/** function ถ่ายรูป*/
 async function capturePhoto() {
   const imageBlob: any = await camera.value?.snapshot(
     { width: photoWidth.value, height: photoHeight.value },
     'image/png',
     0.5
   )
-  console.log(imageBlob);
+  const fileName = 'photo.png'
-  const fileName = 'photo.image';
-
-  const file = new File([imageBlob], fileName, { type: 'image/png' });
-  fileImg.value = file
-  
   //ไฟล์รูป
+  const file = new File([imageBlob], fileName, { type: 'image/png' })
+  fileImg.value = file
+  //แสดงรูป
   camera.value?.stop()
   const url = URL.createObjectURL(imageBlob)
-  img.value = url 
+  img.value = url
 }
 
+/** function เปลี่ยนรูปภาพ*/
 function refreshPhoto() {
   img.value = undefined
   camera.value?.start()
 }
 
-// validate
+/** ref validate*/
 const useLocationRef = ref<object | null>(null)
 const modelRef = ref<object | null>(null)
 const objectRef: FormRef = {
@@ -148,7 +161,7 @@ const objectRef: FormRef = {
   useLocation: useLocationRef,
 }
 
-
+/** function ตรวจสอบค่าว่างของ input*/
 function validateForm() {
   const hasError = []
   for (const key in objectRef) {
@@ -166,35 +179,36 @@ function validateForm() {
     console.log('ไม่ผ่าน ')
   }
 }
-// ยืนยันการลงเวลา
+
-const dialogTime = ref<boolean>(false)
+/** function ยืนยันการลงเวลาเข้า - ออก*/
-async function  confirm  ()  {
+async function confirm() {
-  const isLocation = workplace.value === "in-place";
+  const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
-  const formdata = new FormData();
+  const formdata = new FormData()
-  formdata.append("lat", formLocation.lat);
+  formdata.append('lat', formLocation.lat.toString())
-  formdata.append("lon", formLocation.lng);
+  formdata.append('lon', formLocation.lng.toString())
-  formdata.append("POI", formLocation.POI);
+  formdata.append('POI', formLocation.POI)
-  formdata.append("isLocation", isLocation.toString());
+  formdata.append('isLocation', isLocation.toString())
-  formdata.append("locationName", useLocation.value);
+  formdata.append('locationName', useLocation.value)
-  formdata.append("Img", fileImg.value);
+  formdata.append('Img', fileImg.value)
-  formdata.append("remark", remark.value);
+  formdata.append('remark', remark.value)
-  formdata.append("CheckInId", checkInId.value);
+  formdata.append('CheckInId', checkInId.value)
-  await http.post(config.API.checkin(),formdata)
+  await http
-  .then(async(res) => {
+    .post(config.API.checkin(), formdata)
-    const data = res.data.result
+    .then(async (res) => {
-    console.log(res.data.result);
+      const data = res.data.result
-    const dateTimeString =  data.date.toString()
+      console.log(res.data.result)
-    const timeOnly = dateTimeString.split(" ")[1];
+      const dateTimeString = data.date.toString()
-    console.log(timeOnly);
+      const timeOnly = dateTimeString.split(' ')[1]
-    dialogTime.value = true
+      console.log(timeOnly)
-    await fetchCheckTime()
+      dialogTime.value = true
-  }).catch((err) => {
+      await fetchCheckTime()
-    console.log(err);  
+    })
-  });
+    .catch((err) => {
-  
+      console.log(err)
+    })
+
   // ยิงไปที่ api แล้วแสดง popup
- 
+}
-} 
 
 // class
 const getClass = (val: boolean) => {
@@ -204,7 +218,7 @@ const getClass = (val: boolean) => {
   }
 }
 /** Hook*/
-onMounted(async() => {
+onMounted(async () => {
   await fetchCheckTime()
 
   updateClock()