เช็คเวลาต้องลงเวลาเข้าหรือออกงาน (USER)

src/components/MapCheckin.vue

@@ -7,10 +7,11 @@ const center = ref<any>()
 const location = ref<string>('')
 const test = ref()
 
-// hook
-onMounted(() => {
-  findNearestPlace()
-})
+const emit = defineEmits(["update:location"]);
+const updateLocation = (location: any, namePOI: string) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:location", location, namePOI);
+};
 
 // หาตำแหน่ง
 function findNearestPlace() {
@@ -25,7 +26,6 @@ function findNearestPlace() {
         // ส่ง Location ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
         findNearestPlaceFromAPI(userLocation)
         center.value = userLocation
-        console.log(center.value)
       },
       (error) => {
         console.error(error)
@@ -36,6 +36,8 @@ function findNearestPlace() {
     console.error('เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง')
   }
 }
+
+
 function findNearestPlaceFromAPI(userLocation: any) {
   const placesService = new google.maps.places.PlacesService(
     document.createElement('div')
@@ -49,15 +51,22 @@ function findNearestPlaceFromAPI(userLocation: any) {
 
   placesService.nearbySearch(request, (results: any, status: any) => {
     if (status === google.maps.places.PlacesServiceStatus.OK) {
-      console.log('Nearby places:', results[0])
+      // console.log('Nearby places:', results[0])
       const place = results[0]
       location.value = place.name
       test.value = place.geometry.location
+      updateLocation(center.value,location.value)
+      
     } else {
       console.error('Error fetching nearby places:', status)
     }
   })
 }
+
+// hook
+onMounted(() => {
+  findNearestPlace()
+})
 </script>
 
 <template>

src/stores/mixin.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import CustomComponent from '@/components/CustomDialog.vue'
+import { Loading, QSpinnerCube } from "quasar";
 
 export const useCounterMixin = defineStore('mixin', () => {
   function date2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
@@ -70,6 +71,19 @@ export const useCounterMixin = defineStore('mixin', () => {
     )
   }
 
+  const showLoader = () => {
+    Loading.show({
+      spinner: QSpinnerCube,
+      spinnerSize: 140,
+      spinnerColor: "primary",
+      backgroundColor: "white",
+    });
+  };
+
+  const hideLoader = () => {
+    Loading.hide();
+  };
+
   function covertDateObject(date: string) {
     if (date) {
       const dateParts = date.split('/')
@@ -116,6 +130,8 @@ export const useCounterMixin = defineStore('mixin', () => {
 
   return {
     date2Thai,
+    showLoader,
+    hideLoader,
     covertDateObject,
     dialogConfirm,
   }

src/views/HomeView.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, 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 config from "@/app.config";
 
 // import Type
 import type { FormRef } from '@/interface/response/checkin'
@@ -13,23 +15,35 @@ import MapCheck from '@/components/MapCheckin.vue'
 import { useCounterMixin } from '@/stores/mixin'
 
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm } = mixin
+const { date2Thai, showLoader,hideLoader } = mixin
 const router = useRouter()
 const $q = useQuasar()
 
-const stetusCheckin = ref(true)
 
-onMounted(() => {
-  updateClock()
-})
+const stetusCheckin = ref<boolean>(true)
+const checkInId = ref<string|null> (null)
+/** function เช็คเวลาต้องลงเวลาเข้าหรือออกงาน */
+async function fetchCheckTime() {
+  showLoader()
+  await http.get(config.API.checkTime())
+  .then((res) => {
+    const data = res.data.result
+    stetusCheckin.value = data.checkInId ? false :true;
+    checkInId.value =  data.checkInId ? data.checkInId : ""
+  }).catch((err) => {
+    console.log(err);
+  }).finally(() => {
+      hideLoader();
+  })
+}
 
-//time
+/** ref อัพเดทเวลา*/
 const dateNow = ref<Date>(new Date())
 const Thai = ref<Date>(dateNow.value)
 const formattedS = ref()
 const formattedM = ref()
 const formattedH = ref()
-
+/** function อัพเดทเวลา*/
 function updateClock() {
   const date = Date.now()
   const hh = moment(date).format('HH')
@@ -41,9 +55,24 @@ function updateClock() {
 }
 setInterval(updateClock, 1000)
 
+// const lat = ref<number>()
+// const lng = ref<number>()
+// const POI = ref<string>("")
+const formLocation = reactive({
+  lat: null,
+  lng: null,
+  POI: "",
+})
+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>('13° 43’ 45” N  100° 31’ 26” E')
+const coordinates = ref<string>('')
 const workplace = ref<string>('in-place')
 const useLocation = ref<string | null>('')
 const model = ref<string | null>('')
@@ -62,28 +91,48 @@ function selectLocation() {
   }
 }
 //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 = () => {
-  cameraIsOn.value ? camera.value?.stop() : camera.value?.start()
+const openCamera = async () => {
+  // change camera device
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+  } else {
+    await camera.value?.start()
+    changeCamera()
+  }
   cameraIsOn.value = !cameraIsOn.value
 }
 
+// change camera device
+const changeCamera = async () => {
+  const devices: any = await camera.value?.devices(['videoinput'])
+  const device = await devices[0]
+  camera.value?.changeCamera(device.deviceId)
+ 
+}
 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.image';
 
+  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 refreshPhoto() {
@@ -98,6 +147,8 @@ const objectRef: FormRef = {
   model: modelRef,
   useLocation: useLocationRef,
 }
+
+
 function validateForm() {
   const hasError = []
   for (const key in objectRef) {
@@ -117,10 +168,33 @@ function validateForm() {
 }
 // ยืนยันการลงเวลา
 const dialogTime = ref<boolean>(false)
-const confirm = () => {
+async function  confirm  ()  {
+  const isLocation = workplace.value === "in-place";
+  const formdata = new FormData();
+  formdata.append("lat", formLocation.lat);
+  formdata.append("lon", formLocation.lng);
+  formdata.append("POI", formLocation.POI);
+  formdata.append("isLocation", isLocation.toString());
+  formdata.append("locationName", useLocation.value);
+  formdata.append("Img", fileImg.value);
+  formdata.append("remark", remark.value);
+  formdata.append("CheckInId", checkInId.value);
+  await http.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);
+    dialogTime.value = true
+    await fetchCheckTime()
+  }).catch((err) => {
+    console.log(err);  
+  });
+  
   // ยิงไปที่ api แล้วแสดง popup
-  dialogTime.value = true
-}
+ 
+} 
 
 // class
 const getClass = (val: boolean) => {
@@ -129,6 +203,12 @@ const getClass = (val: boolean) => {
     'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm': !val,
   }
 }
+/** Hook*/
+onMounted(async() => {
+  await fetchCheckTime()
+
+  updateClock()
+})
 </script>
 
 <template>
@@ -192,7 +272,7 @@ const getClass = (val: boolean) => {
 
             <div class="col-xs-12 col-md-11 row q-col-gutter-md">
               <div class="col-12 col-sm-8">
-                <MapCheck />
+                <MapCheck @update:location="updateLocation" />
               </div>
               <div class="col-12 col-sm-4">
                 <q-card flat bordered class="card-container">