372 lines
13 KiB
Vue
372 lines
13 KiB
Vue
<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">
|
||
<div :class="getClass(checkIn)">
|
||
<div class="col-2">
|
||
<!-- <q-btn
|
||
icon="mdi-arrow-left"
|
||
unelevated
|
||
round
|
||
dense
|
||
flat
|
||
color="white"
|
||
@click="router.go(-1)"
|
||
/> -->
|
||
</div>
|
||
<span class="text-body1 text-weight-bold col-8 text-center">
|
||
<span v-if="checkIn">ลงเวลาเข้างาน</span>
|
||
<span v-else>ลงเวลาออกงาน</span>
|
||
</span>
|
||
<div class="col-2 text-right">
|
||
<q-btn
|
||
icon="history"
|
||
unelevated
|
||
rounded
|
||
dense
|
||
flat
|
||
color="white"
|
||
:label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
|
||
:class="$q.screen.gt.xs ? 'q-px-sm' : ''"
|
||
@click="router.push('/check-in/history')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 q-pa-md text-grey-9">
|
||
<div class="col-12 row justify-center">
|
||
<div class="col-12 row q-py-sm 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 row q-col-gutter-md">
|
||
<div class="col-12 col-sm-8">
|
||
<q-card
|
||
bordered
|
||
flat
|
||
class="col-12 bg-grey-2 shadow-0"
|
||
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
|
||
>
|
||
<q-img
|
||
src="@/assets/map1.png"
|
||
:style="
|
||
$q.screen.gt.xs ? 'height: 300px;' : 'height: 168px;'
|
||
"
|
||
></q-img>
|
||
<div class="q-pa-md text-weight-medium text-grey-8">
|
||
พื้นที่ใกล้เคียง
|
||
<span class="q-px-sm">:</span>
|
||
{{ location }}
|
||
</div>
|
||
</q-card>
|
||
</div>
|
||
<div class="col-12 col-sm-4">
|
||
<q-card
|
||
flat
|
||
bordered
|
||
class="cardImg col-12 bg-grey-2 items-center row cursor-pointer shadow-0"
|
||
@click="photo()"
|
||
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
|
||
>
|
||
<div class="column col-12" v-if="!camera">
|
||
<div class="text-center">
|
||
<q-icon
|
||
name="photo_camera"
|
||
color="blue-grey-3"
|
||
size="100px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div v-if="hasPhoto">
|
||
<video
|
||
ref="video"
|
||
autoplay
|
||
:style="{
|
||
width: videoWidth + 'px',
|
||
height: videoHeight + 'px',
|
||
}"
|
||
></video>
|
||
<canvas
|
||
ref="canvas"
|
||
:width="videoWidth"
|
||
:height="videoHeight"
|
||
></canvas>
|
||
</div>
|
||
|
||
<div v-else class="q-mt-sm">
|
||
<q-img
|
||
:src="img"
|
||
:style="{
|
||
width: videoWidth + 'px',
|
||
height: videoHeight + 'px',
|
||
}"
|
||
class="q-mt-lg"
|
||
></q-img>
|
||
<canvas
|
||
ref="canvas"
|
||
:width="canvasWidth"
|
||
:height="canvasHeight"
|
||
:style="{
|
||
width: videoWidth + 'px',
|
||
height: videoHeight + 'px',
|
||
}"
|
||
></canvas>
|
||
</div>
|
||
|
||
<div class="absolute-bottom-right q-ma-md">
|
||
<q-btn
|
||
round
|
||
push
|
||
icon="photo_camera"
|
||
size="md"
|
||
color="positive"
|
||
@click="capturePhoto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</q-card>
|
||
</div>
|
||
<div class="col-12 q-mb-md">
|
||
<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="ในสถานที่"
|
||
/>
|
||
<q-radio
|
||
v-model="workplace"
|
||
checked-icon="task_alt"
|
||
unchecked-icon="panorama_fish_eye"
|
||
val="off-site"
|
||
label="นอกสถานที่"
|
||
/>
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-4">
|
||
<q-select
|
||
v-if="workplace == 'off-site'"
|
||
dense
|
||
class="q-ml-md"
|
||
outlined
|
||
v-model="model"
|
||
:options="options"
|
||
prefix="ระบุสถานที่ :"
|
||
/>
|
||
</div>
|
||
</q-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 text-right" v-if="camera">
|
||
<div class="col-12">
|
||
<q-separator />
|
||
</div>
|
||
<div class="col-12 q-pa-md">
|
||
<q-btn
|
||
:label="checkIn == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
|
||
:color="checkIn == true ? 'primary' : 'red-9'"
|
||
push
|
||
size="14px"
|
||
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
|
||
@click="confirm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</q-card>
|
||
</div>
|
||
</div>
|
||
|
||
<q-dialog v-model="dialogTime">
|
||
<q-card class="full-width cardNone">
|
||
<div :class="getClass(checkIn)">
|
||
<div class="text-body1 text-center col-12 text-weight-bold">
|
||
<span v-if="checkIn">ลงเวลาเข้างานของคุณ</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">
|
||
{{ Thai }}
|
||
</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>
|
||
</div>
|
||
<div class="text-h3 text-weight-bold">{{ formattedM }}</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>
|
||
</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
|
||
/>
|
||
</q-card-actions>
|
||
</q-card>
|
||
</q-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from "vue";
|
||
import { useCounterMixin } from "@/stores/mixin";
|
||
import { useRouter } from "vue-router";
|
||
import moment, { Moment } from "moment";
|
||
const mixin = useCounterMixin();
|
||
const { date2Thai } = mixin;
|
||
|
||
const router = useRouter();
|
||
const dateNow = ref(new Date());
|
||
const Thai = ref(dateNow.value);
|
||
const checkIn = ref(true); //เช็คการเช็คอิน ถ้าลงเวลาครั้งแรกเป็นเช็คอิน(สีเขียว) true แต่ถ้าครั้ง 2 เป็นเช็คเอ้าท์(สีแดง)
|
||
|
||
const location = ref("สำนักงาน ก.ก");
|
||
const coordinates = ref("13° 43’ 45” N 100° 31’ 26” E");
|
||
const workplace = ref("in-place");
|
||
const model = ref(null);
|
||
const options = ref([
|
||
"ปฏิบัติงานที่บ้าน",
|
||
"ลืมลงเวลาปฏิบัติงาน",
|
||
"ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่",
|
||
"ขออนุญาตออกนอกสถานที่",
|
||
]);
|
||
|
||
const camera = ref(false);
|
||
const dialogTime = ref(false);
|
||
|
||
const mediaStream = ref<MediaStream | null>(null);
|
||
const video = ref<HTMLVideoElement | null>(null);
|
||
const canvas = ref<HTMLCanvasElement | null>(null);
|
||
const hasPhoto = ref<boolean>(true);
|
||
const img = ref<any>();
|
||
|
||
const videoWidth = ref<number>(335);
|
||
const videoHeight = ref<number>(350);
|
||
const canvasWidth = ref<number>(335);
|
||
const canvasHeight = ref<number>(350);
|
||
|
||
const photo = () => {
|
||
camera.value = true;
|
||
camera.value && setupCamera();
|
||
};
|
||
const confirm = () => {
|
||
dialogTime.value = true;
|
||
};
|
||
|
||
function capturePhoto() {
|
||
const videoElement = video.value;
|
||
const canvasElement = canvas.value;
|
||
if (!videoElement || !canvasElement) {
|
||
console.error("Video or Canvas element not available");
|
||
return;
|
||
}
|
||
const context = canvasElement.getContext("2d");
|
||
if (!context) {
|
||
console.error("Canvas context not available");
|
||
return;
|
||
}
|
||
context.drawImage(videoElement, 0, 0, 335, 270);
|
||
//ไฟล์รูป
|
||
const dataURL = canvasElement.toDataURL(".image/.png");
|
||
img.value = dataURL;
|
||
console.log(img.value);
|
||
|
||
if (mediaStream.value) {
|
||
mediaStream.value.getTracks().forEach((track) => track.stop());
|
||
videoElement.srcObject = null;
|
||
hasPhoto.value = false;
|
||
}
|
||
}
|
||
const setupCamera = async () => {
|
||
try {
|
||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||
if (video.value) {
|
||
video.value.srcObject = stream;
|
||
}
|
||
mediaStream.value = stream;
|
||
} catch (error) {
|
||
console.error("Error accessing camera:", error);
|
||
}
|
||
};
|
||
|
||
// const time = new Date().toLocaleTimeString();
|
||
const formattedS = ref();
|
||
const formattedM = ref();
|
||
const formattedH = ref();
|
||
|
||
onMounted(() => {
|
||
updateClock();
|
||
});
|
||
|
||
function updateClock() {
|
||
const date = Date.now();
|
||
let hh = moment(date).format("HH");
|
||
let mm = moment(date).format("mm");
|
||
let ss = moment(date).format("ss");
|
||
formattedS.value = ss;
|
||
formattedM.value = mm;
|
||
formattedH.value = hh;
|
||
}
|
||
setInterval(updateClock, 1000);
|
||
|
||
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,
|
||
};
|
||
};
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style scoped>
|
||
.q-card.cardImg:hover {
|
||
border: 1px solid #02a998 !important;
|
||
}
|
||
</style>
|