ผูก API checkIn checkOut
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
9f6fffd73c
commit
f80af4ebf1
3 changed files with 122 additions and 25 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
backgroundColor: "white",
|
||||
});
|
||||
};
|
||||
spinnerColor: 'primary',
|
||||
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,
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue