출퇴근
This commit is contained in:
yoon
parent
495c714b80
commit
8ef12c66d6
45
package-lock.json
generated
45
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tinymce/tinymce-vue": "^5.1.1",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"@vueuse/core": "^13.0.0",
|
||||
"axios": "^1.7.9",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
@ -938,6 +939,12 @@
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@types/web-bluetooth": {
|
||||
"version": "0.0.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
|
||||
"integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "5.2.1",
|
||||
"dev": true,
|
||||
@ -1129,6 +1136,44 @@
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.0.0.tgz",
|
||||
"integrity": "sha512-rkgb4a8/0b234lMGCT29WkCjPfsX0oxrIRR7FDndRoW3FsaC9NBzefXg/9TLhAgwM11f49XnutshM4LzJBrQ5g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.21",
|
||||
"@vueuse/metadata": "13.0.0",
|
||||
"@vueuse/shared": "13.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/metadata": {
|
||||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.0.0.tgz",
|
||||
"integrity": "sha512-TRNksqmvtvqsuHf7bbgH9OSXEV2b6+M3BSN4LR5oxWKykOFT9gV78+C2/0++Pq9KCp9KQ1OQDPvGlWNQpOb2Mw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/shared": {
|
||||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.0.0.tgz",
|
||||
"integrity": "sha512-9MiHhAPw+sqCF/RLo8V6HsjRqEdNEWVpDLm2WBRW2G/kSQjb8X901sozXpSCaeLG0f7TEfMrT4XNaA5m1ez7Dg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.14.0",
|
||||
"dev": true,
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tinymce/tinymce-vue": "^5.1.1",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"@vueuse/core": "^13.0.0",
|
||||
"axios": "^1.7.9",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
|
||||
@ -423,3 +423,11 @@ cursor: not-allowed !important;
|
||||
background-color: #ddd !important;
|
||||
}
|
||||
/* project list end */
|
||||
|
||||
/* commuters project list */
|
||||
.commuter-list {
|
||||
max-height: 358px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
/* commuters project list end */
|
||||
@ -28,11 +28,12 @@
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
|
||||
import $api from '@api';
|
||||
import { useGeolocation } from '@vueuse/core';
|
||||
import { useToastStore } from '@/stores/toastStore';
|
||||
|
||||
const props = defineProps({
|
||||
userId: {
|
||||
type: [Number],
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
checkedInProject: {
|
||||
@ -44,9 +45,62 @@ const props = defineProps({
|
||||
const emit = defineEmits(['workTimeUpdated', 'leaveTimeUpdated']);
|
||||
|
||||
const workTime = ref(null);
|
||||
const leaveTime = ref(null);
|
||||
const leaveTime = ref(null)
|
||||
const userLocation = ref(null);
|
||||
const toastStore = useToastStore();
|
||||
|
||||
// 위치 정보 가져오기 설정
|
||||
const { coords, isSupported, error } = useGeolocation({
|
||||
enableHighAccuracy: true,
|
||||
});
|
||||
|
||||
// 주소 변환 함수
|
||||
const getAddress = (lat, lng) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const geocoder = new kakao.maps.services.Geocoder();
|
||||
const coord = new kakao.maps.LatLng(lat, lng);
|
||||
|
||||
geocoder.coord2Address(coord.getLng(), coord.getLat(), (result, status) => {
|
||||
if (status === kakao.maps.services.Status.OK) {
|
||||
const address = result[0].address.address_name;
|
||||
resolve(address);
|
||||
} else {
|
||||
reject('주소를 가져올 수 없습니다.');
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 위치 정보 가져오기 함수
|
||||
const getLocation = async () => {
|
||||
if (!isSupported.value) {
|
||||
toastStore.onToast('브라우저가 위치 정보를 지원하지 않습니다.', 'e');
|
||||
return null;
|
||||
}
|
||||
|
||||
if (error.value) {
|
||||
toastStore.onToast(`위치 정보를 가져오는데 실패했습니다: ${error.value.message}`, 'e');
|
||||
return null;
|
||||
}
|
||||
|
||||
if (coords.value) {
|
||||
userLocation.value = {
|
||||
lat: coords.value.latitude,
|
||||
lng: coords.value.longitude,
|
||||
};
|
||||
|
||||
try {
|
||||
const address = await getAddress(coords.value.latitude, coords.value.longitude);
|
||||
return address;
|
||||
} catch (error) {
|
||||
toastStore.onToast(error, 'e');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// 오늘 사용자의 출근 정보 조회
|
||||
const todayCommuterInfo = async () => {
|
||||
if (!props.userId) return;
|
||||
@ -67,10 +121,17 @@ const todayCommuterInfo = async () => {
|
||||
};
|
||||
|
||||
// 출근 시간
|
||||
const setWorkTime = () => {
|
||||
const setWorkTime = async () => {
|
||||
// 이미 출근 시간이 설정된 경우 중복 실행 방지
|
||||
if (workTime.value) return;
|
||||
|
||||
// 현재 위치 주소 가져오기
|
||||
const address = await getLocation();
|
||||
|
||||
console.log(address);
|
||||
|
||||
return;
|
||||
|
||||
$api.post('commuters/insert', {
|
||||
memberSeq: props.userId,
|
||||
projctSeq: props.checkedInProject.PROJCTSEQ,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="max-height: 590px; overflow-y: auto;">
|
||||
<div class="commuter-list">
|
||||
<div v-for="post in project" :key="post.PROJCTSEQ"
|
||||
class="border border-2 mt-3 card p-2"
|
||||
:style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user