596 lines
20 KiB
Vue
596 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { useQuasar } from 'quasar'
|
|
import moment from 'moment'
|
|
import Camera from 'simple-vue-camera'
|
|
|
|
import config from '@/app.config'
|
|
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 modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
|
|
const stetusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
|
|
|
|
const msgCheckTime = ref<string>('') // ข้อความแจ้งเตือน
|
|
const isDisabledCheckTime = ref<boolean>(false) // ข้อความแจ้งเตือน
|
|
/**
|
|
* fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
|
|
*/
|
|
async function fetchCheckTime() {
|
|
showLoader()
|
|
await http
|
|
.get(config.API.checkTime())
|
|
.then(async (res) => {
|
|
const data = await res.data.result
|
|
stetusCheckin.value = data.checkInId ? false : true
|
|
checkInId.value = data.checkInId ? data.checkInId : ''
|
|
})
|
|
.catch((err) => {
|
|
if (err.response.status === 500) {
|
|
isDisabledCheckTime.value = true
|
|
msgCheckTime.value = err.response.data.message
|
|
} else messageError($q, err)
|
|
})
|
|
.finally(() => {
|
|
hideLoader()
|
|
})
|
|
}
|
|
|
|
/** 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')
|
|
const mm = moment(date).format('mm')
|
|
const ss = moment(date).format('ss')
|
|
formattedS.value = ss
|
|
formattedM.value = mm
|
|
formattedH.value = hh
|
|
}
|
|
setInterval(updateClock, 1000)
|
|
|
|
/** form-data */
|
|
const formLocation = reactive({
|
|
lat: 0, //พิกัดละติจูด
|
|
lng: 0, //พิกัดลองจิจูด
|
|
POI: '', //ชื่อสถานที่
|
|
})
|
|
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(
|
|
latitude: number,
|
|
longitude: number,
|
|
namePOI: string
|
|
) {
|
|
formLocation.lat = latitude
|
|
formLocation.lng = longitude
|
|
formLocation.POI = namePOI
|
|
}
|
|
|
|
const location = ref<string>('') // พื้นที่ใกล้เคียง
|
|
const model = ref<string>('') // สถานที่ทำงาน
|
|
// ตัวเลือกสถานที่ทำงาน
|
|
const options = ref<string[]>([
|
|
'ปฏิบัติงานที่บ้าน',
|
|
'ลืมลงเวลาปฏิบัติงาน',
|
|
'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่',
|
|
'ขออนุญาตออกนอกสถานที่',
|
|
'อื่นๆ',
|
|
])
|
|
|
|
/**
|
|
* function เลือกสถานที่
|
|
*/
|
|
function selectLocation() {
|
|
if (model.value === 'อื่นๆ') {
|
|
useLocation.value = ''
|
|
} else {
|
|
useLocation.value = model.value
|
|
}
|
|
}
|
|
|
|
/** Camera */
|
|
const camera = ref<InstanceType<typeof Camera>>()
|
|
const cameraIsOn = ref<boolean>(false)
|
|
const img = ref<any>(undefined)
|
|
const photoWidth = ref<number>(350)
|
|
const photoHeight = ref<number>(350)
|
|
|
|
/**
|
|
* function เปิดกล้อง
|
|
*/
|
|
async function openCamera() {
|
|
// change camera device
|
|
if (cameraIsOn.value) {
|
|
camera.value?.stop()
|
|
} else {
|
|
await camera.value?.start()
|
|
changeCamera()
|
|
}
|
|
cameraIsOn.value = !cameraIsOn.value
|
|
}
|
|
|
|
/**
|
|
* 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 ถ่ายรูป
|
|
*/
|
|
async function capturePhoto() {
|
|
const imageBlob: any = await camera.value?.snapshot(
|
|
{ width: photoWidth.value, height: photoHeight.value },
|
|
'image/png',
|
|
0.5
|
|
)
|
|
const fileName = 'photo.png'
|
|
//ไฟล์รูป
|
|
const file = new File([imageBlob], fileName, { type: 'image/png' })
|
|
fileImg.value = file
|
|
//แสดงรูป
|
|
camera.value?.stop()
|
|
const url = URL.createObjectURL(imageBlob)
|
|
img.value = url
|
|
}
|
|
|
|
/**
|
|
* function เปลี่ยนรูปภาพ
|
|
*/
|
|
function refreshPhoto() {
|
|
img.value = undefined
|
|
camera.value?.start()
|
|
}
|
|
|
|
/** ref validate*/
|
|
const useLocationRef = ref<object | null>(null)
|
|
const modelRef = ref<object | null>(null)
|
|
const objectRef: FormRef = {
|
|
model: modelRef,
|
|
useLocation: useLocationRef,
|
|
}
|
|
|
|
/**
|
|
* function ตรวจสอบค่าว่างของ input
|
|
*/
|
|
function validateForm() {
|
|
const hasError = []
|
|
for (const key in objectRef) {
|
|
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
|
|
const property = objectRef[key]
|
|
if (property.value && typeof property.value.validate === 'function') {
|
|
const isValid = property.value.validate()
|
|
hasError.push(isValid)
|
|
}
|
|
}
|
|
}
|
|
if (hasError.every((result) => result === true)) {
|
|
confirm()
|
|
}
|
|
}
|
|
|
|
const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
|
|
|
|
/**
|
|
* function ยืนยันการลงเวลาเข้า - ออก
|
|
*/
|
|
async function confirm() {
|
|
showLoader()
|
|
const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
|
|
const locationName = workplace.value === 'in-place' ? '' : useLocation.value
|
|
const formdata = new FormData()
|
|
formdata.append('lat', formLocation.lat.toString())
|
|
formdata.append('lon', formLocation.lng.toString())
|
|
formdata.append('POI', formLocation.POI)
|
|
formdata.append('isLocation', isLocation.toString())
|
|
formdata.append('locationName', locationName)
|
|
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 = await res.data.result
|
|
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
|
|
setTimeout(() => {
|
|
modalTime.value = true
|
|
remark.value = ''
|
|
hideLoader()
|
|
}, 2000)
|
|
})
|
|
.catch((err) => {
|
|
hideLoader()
|
|
messageError($q, err)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* ปิด popup แสดงการลงเวลา
|
|
*/
|
|
async function onClickConfirm() {
|
|
showLoader()
|
|
setTimeout(async () => {
|
|
if (!stetusCheckin.value) {
|
|
stetusCheckin.value = true
|
|
}
|
|
await fetchCheckTime()
|
|
}, 2000)
|
|
cameraIsOn.value = false
|
|
img.value = undefined
|
|
modalTime.value = false
|
|
}
|
|
|
|
/**
|
|
* เลือกสถานที่ทำงาน
|
|
*/
|
|
function updateWorkplace() {
|
|
useLocation.value = ''
|
|
model.value = ''
|
|
}
|
|
|
|
/**
|
|
* รี้เทินร์ 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,
|
|
'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>
|
|
<div class="col-12 row justify-center">
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
<q-card flat class="row col-12 cardNone">
|
|
<!-- <q-header elevated class="bg-purple"> -->
|
|
<q-toolbar :class="getClass(stetusCheckin)">
|
|
<div class="row col-12 justify-center">
|
|
<strong v-if="stetusCheckin" style="font-size: 1rem">
|
|
ลงเวลาเข้างาน
|
|
</strong>
|
|
<strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong>
|
|
</div>
|
|
</q-toolbar>
|
|
<div class="col-12 text-grey-9">
|
|
<div class="col-12 row justify-center">
|
|
<div class="col-12 row q-pt-md justify-center">
|
|
<div
|
|
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
|
>
|
|
{{ date2Thai(Thai) }}
|
|
</div>
|
|
<div class="row col-12 justify-center q-py-sm">
|
|
<div class="colunm">
|
|
<div class="text-h3 text-weight-bold">
|
|
{{ formattedH }}<span class="q-ma-md">:</span>
|
|
</div>
|
|
</div>
|
|
<div class="colunm">
|
|
<div class="text-h3 text-weight-bold">
|
|
{{ formattedM }}<span class="q-ma-md">:</span>
|
|
</div>
|
|
</div>
|
|
<div class="colunm">
|
|
<div class="text-h3 text-weight-bold">{{ formattedS }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row">
|
|
<div class="col-xs-12 col-sm-8">
|
|
<MapCheck @update:location="updateLocation" class="col-12" />
|
|
<!-- <AscMaps /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4">
|
|
<q-card flat bordered class="card-container">
|
|
<div
|
|
v-if="!cameraIsOn && img == null"
|
|
class="preview-placeholder"
|
|
@click="() => !isDisabledCheckTime && openCamera()"
|
|
>
|
|
<div class="text-center">
|
|
<q-icon
|
|
name="photo_camera"
|
|
color="blue-grey-3"
|
|
size="100px"
|
|
class="center-icon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 row items-center">
|
|
<!-- แสดงกล้องตอนกดถ่ายภาพ -->
|
|
<Camera
|
|
:resolution="{ width: photoWidth, height: photoHeight }"
|
|
ref="camera"
|
|
:autoplay="false"
|
|
:style="!img ? 'display: block' : 'display: none'"
|
|
/>
|
|
|
|
<!-- แสดงรูปเมื่อกด capture -->
|
|
<div v-if="img" class="image-container">
|
|
<q-img :src="img" class="image-element"></q-img>
|
|
</div>
|
|
|
|
<div
|
|
v-if="cameraIsOn"
|
|
class="absolute-bottom-right q-ma-md"
|
|
>
|
|
<q-btn
|
|
v-if="img == null"
|
|
round
|
|
push
|
|
icon="photo_camera"
|
|
size="md"
|
|
color="positive"
|
|
@click="capturePhoto"
|
|
/>
|
|
<q-btn
|
|
v-else
|
|
round
|
|
push
|
|
icon="refresh"
|
|
size="md"
|
|
color="negative"
|
|
@click="refreshPhoto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!isDisabledCheckTime"
|
|
class="col-xs-12 col-sm-12 items-center"
|
|
>
|
|
<q-card
|
|
bordered
|
|
flat
|
|
:class="
|
|
$q.screen.gt.xs
|
|
? 'q-px-md q-py-sm row items-center shadow-0'
|
|
: 'q-pa-md row items-center shadow-0'
|
|
"
|
|
>
|
|
<div class="text-weight-bold">สถานที่ทำงาน</div>
|
|
<div
|
|
:class="
|
|
$q.screen.gt.xs
|
|
? 'row q-gutter-md q-pl-md col-sm-6 col-md-3'
|
|
: 'column col-12'
|
|
"
|
|
>
|
|
<q-radio
|
|
v-model="workplace"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="in-place"
|
|
label="ในสถานที่"
|
|
@update:model-value="updateWorkplace"
|
|
/>
|
|
<q-radio
|
|
v-model="workplace"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="off-site"
|
|
label="นอกสถานที่"
|
|
@update:model-value="updateWorkplace"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-12 col-sm-6 col-md-4"
|
|
v-if="workplace == 'off-site'"
|
|
>
|
|
<q-select
|
|
ref="modelRef"
|
|
dense
|
|
class="q-ml-md"
|
|
outlined
|
|
v-model="model"
|
|
:options="options"
|
|
prefix="ระบุสถานที่ :"
|
|
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
|
lazy-rules
|
|
@update:model-value="selectLocation()"
|
|
hide-bottom-space
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-12 col-sm-6 col-md-4"
|
|
v-if="model == 'อื่นๆ' && workplace === 'off-site'"
|
|
>
|
|
<q-input
|
|
ref="useLocationRef"
|
|
dense
|
|
class="q-ml-md"
|
|
outlined
|
|
v-model="useLocation"
|
|
label="ระบุสถานที่"
|
|
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
|
lazy-rules
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="!isDisabledCheckTime" class="col-xs-12 col-sm-12">
|
|
<q-card
|
|
bordered
|
|
flat
|
|
:class="
|
|
$q.screen.gt.xs
|
|
? 'q-px-md q-py-sm row items-center shadow-0'
|
|
: 'q-pa-md row items-center shadow-0'
|
|
"
|
|
>
|
|
<div class="text-weight-bold">หมายเหตุ</div>
|
|
<div class="col-12 q-pt-sm">
|
|
<q-input outlined v-model="remark" lazy-rules dense />
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!isDisabledCheckTime" class="col-12 text-right">
|
|
<q-separator />
|
|
<div class="col-12 q-pa-md">
|
|
<p
|
|
:class="
|
|
$q.screen.gt.xs
|
|
? 'text-red text-caption '
|
|
: 'text-red text-caption text-center'
|
|
"
|
|
>
|
|
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
|
</p>
|
|
<q-btn
|
|
:label="
|
|
stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'
|
|
"
|
|
:color="img == null ? 'grey-6' : 'primary'"
|
|
push
|
|
size="18px"
|
|
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
|
|
:disable="camera && img ? false : true"
|
|
@click="validateForm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="col-12">
|
|
<q-separator />
|
|
<div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- แสดงการลงเวลา -->
|
|
<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">
|
|
<span v-if="stetusCheckin">ลงเวลาเข้างานของคุณ</span>
|
|
<span v-else>ลงเวลาออกงานของคุณ</span>
|
|
</div>
|
|
</div>
|
|
<q-card-section class="row col-12 justify-center">
|
|
<div class="bg-grey-2 rounded-borders q-pa-md col-11">
|
|
<div class="col-12 text-subtitle1 text-center text-weight-medium">
|
|
{{ date2Thai(Thai) }}
|
|
</div>
|
|
<div class="row col-12 justify-center q-pt-sm">
|
|
<div class="text-h3 text-weight-bold"></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">
|
|
พื้นที่ใกล้เคียง {{ formLocation.POI ?? formLocation.POI }}
|
|
</div>
|
|
<div class="col-12 text-subtitle1 text-weight-medium text-secondary">
|
|
{{ location }}
|
|
</div>
|
|
<div class="col-12 text-grey-7">
|
|
{{ formLocation.lat }} , {{ formLocation.lng }}
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="center" class="q-mb-md row">
|
|
<q-btn
|
|
class="col-xs-11 col-sm-6"
|
|
push
|
|
label="ตกลง"
|
|
color="secondary"
|
|
v-close-popup
|
|
@click="onClickConfirm"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
<style scoped>
|
|
.q-card.cardImg:hover {
|
|
border: 1px solid #02a998 !important;
|
|
}
|
|
|
|
.center-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.card-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: autu; /* Adjust as needed */
|
|
background: #f6f5f5;
|
|
height: 35vh !important;
|
|
}
|
|
.image-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.image-element {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 8px; /* Adjust as needed */
|
|
}
|
|
|
|
.preview-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|