updated

src/components/AscGISMap.vue

@@ -136,7 +136,7 @@ onMounted(async () => {
   </div>
 
   <q-card v-show="poiPlaceName" bordered flat class="col-12 bg-grey-2 shadow-0">
-    <div id="mapViewDisplay" style="height: 33vh"></div>
+    <div id="mapViewDisplay" style="height: 35vh"></div>
 
     <div
       :class="

src/stores/chekin.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { FormData, Datalist } from '@/interface/response/checkin'
 import { useCounterMixin } from '@/stores/mixin'
+import moment from 'moment'
 const mixin = useCounterMixin()
 const { date2Thai } = mixin
 

src/views/HomeView.vue

@@ -1,21 +1,20 @@
+
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
+import keycloak from '@/plugins/keycloak'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
 import http from '@/plugins/http'
 import config from '@/app.config'
-import keycloak from '@/plugins/keycloak'
 
 // import Type
 import type { FormRef } from '@/interface/response/checkin'
-import type { Noti } from '@/interface/response/Main'
 import type { notiType } from '@/interface/index/Main'
 
 // import components
-import MapCheck from '@/components/MapCheckin.vue'
+import MapCheck from '@/components/AscGISMap.vue'
-// import AscMaps from '@/components/AscMaps.vue'
 
 // import Stores
 import { useCounterMixin } from '@/stores/mixin'
@@ -140,9 +139,9 @@ const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าส
  * @param location  พิกัดละติจูด พิกัดลองติจูด
  * @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
  */
-async function updateLocation(location: any, namePOI: string) {
+async function updateLocation(latitude: any, longitude: any, namePOI: string) {
-  formLocation.lat = location.lat
+  formLocation.lat = latitude
-  formLocation.lng = location.lng
+  formLocation.lng = longitude
   formLocation.POI = namePOI
 }
 
@@ -246,6 +245,7 @@ function validateForm() {
 const timeChickin = ref<string>()
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
+  showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
   const formdata = new FormData()
   formdata.append('lat', formLocation.lat.toString())
@@ -277,6 +277,9 @@ async function confirm() {
       console.log(err)
       messageError($q, err)
     })
+    .finally(() => {
+      hideLoader()
+    })
 }
 
 async function onClickConfirm() {
@@ -306,6 +309,7 @@ const getClass = (val: boolean) => {
     'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm': !val,
   }
 }
+
 const fullName = ref<string>('')
 /** Hook*/
 onMounted(async () => {
@@ -324,7 +328,7 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-card flat class="row col-12 cardNone">
         <div :class="getClass(stetusCheckin)">
-          <q-toolbar class="text-primary">
+          <div class="col-2">
             <q-btn
               icon="history"
               unelevated
@@ -336,121 +340,12 @@ onMounted(async () => {
               :class="$q.screen.gt.xs ? 'q-px-md' : ''"
               @click="router.push('/history')"
             />
-            <q-toolbar-title>
+          </div>
-              <span class="text-white text-body1 text-weight-bold text-center">
+          <span class="text-body1 text-weight-bold col-8 text-center">
-                <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
-                <span v-else>ลงเวลาออกงาน</span>
-              </span>
-            </q-toolbar-title>
-            <q-btn
-              round
-              dense
-              flat
-              size="13px"
-              class="q-mx-md"
-              :disable="notiList.length === 0"
-            >
-              <q-icon name="notifications" size="24px" color="white" />
-
-              <q-badge
-                rounded
-                v-show="notiList.length > 0"
-                color="negative"
-                text-color="white"
-                floating
-                >{{ notiList.length }}</q-badge
-              >
-              <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
-                <div class="q-px-md q-py-sm row col-12 items-center">
-                  <div class="text-subtitle1 text-weight-medium">
-                    การแจ้งเตือน
-                  </div>
-                </div>
-
-                <q-list
-                  style="min-width: 300px"
-                  v-for="n in notiList"
-                  :key="n.id"
-                >
-                  <q-item v-ripple class="mytry q-py-xs" dense>
-                    <q-item-section avatar top style="min-width: 40px">
-                      <q-avatar color="primary" size="22px" text-color="white">
-                        <span class="text-weight-medium text-uppercase">{{
-                          n.sender
-                        }}</span>
-                      </q-avatar>
-                    </q-item-section>
-                    <q-item-section>
-                      <q-item-label caption class="text-black">{{
-                        n.body
-                      }}</q-item-label>
-                      <q-item-label
-                        caption
-                        class="row items-center text-grey-7"
-                        >{{ date2Thai(n.timereceive) }}</q-item-label
-                      >
-                    </q-item-section>
-                    <q-btn
-                      size="sm"
-                      unelevated
-                      dense
-                      icon="mdi-close"
-                      class="mybtn q-mx-xs"
-                      @click="onClickDelete(n.id)"
-                    ></q-btn>
-                  </q-item>
-                  <q-separator color="grey-2" />
-                </q-list>
-              </q-menu>
-            </q-btn>
-            <q-btn round dense flat size="13px" class="q-mx-md">
-              <q-icon name="account_circle" size="24px" color="white" />
-              <q-menu>
-                <div class="q-pa-md" style="max-width: 500px">
-                  <q-list>
-                    <q-item>
-                      <q-item-section avatar>
-                        <q-icon color="primary" name="account_circle" />
-                      </q-item-section>
-
-                      <q-item-section>{{ fullName }}</q-item-section>
-                    </q-item>
-
-                    <q-item class="text-center">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-btn
-                            color="primary"
-                            label="ออกจากระบบ"
-                            push
-                            size="sm"
-                            @click="onClickLogout"
-                        /></q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
-              </q-menu>
-            </q-btn>
-          </q-toolbar>
-          <!-- <div class="col-2">
-            <q-btn
-              icon="history"
-              unelevated
-              rounded
-              dense
-              flat
-              color="white"
-              :label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
-              :class="$q.screen.gt.xs ? 'q-px-md' : ''"
-              @click="router.push('/history')"
-            />
-          </div> -->
-          <!-- <span class="text-body1 text-weight-bold col-6 text-center">
             <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
             <span v-else>ลงเวลาออกงาน</span>
-          </span> -->
+          </span>
-          <!-- <div class="col-4 text-right">
+          <div class="col-2 text-right">
             <q-btn
               round
               dense
@@ -545,7 +440,7 @@ onMounted(async () => {
                   </q-list>
                 </div> </q-menu
             ></q-btn>
-          </div> -->
+          </div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <div class="col-12 row justify-center">
@@ -767,6 +662,9 @@ onMounted(async () => {
           </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>
@@ -803,7 +701,7 @@ onMounted(async () => {
 .card-container {
   position: relative;
   overflow: hidden;
-  height: 350px; /* Adjust as needed */
+  height: 39vh; /* Adjust as needed */
   background: #f6f5f5;
 }
 .image-container {
@@ -825,4 +723,4 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>

src/views/MapView.vue

@@ -2,18 +2,20 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
-import keycloak from '@/plugins/keycloak'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import keycloak from '@/plugins/keycloak'
 
 // import Type
 import type { FormRef } from '@/interface/response/checkin'
+import type { Noti } from '@/interface/response/Main'
 import type { notiType } from '@/interface/index/Main'
 
 // import components
-import MapCheck from '@/components/AscGISMap.vue'
+import MapCheck from '@/components/MapCheckin.vue'
+// import AscMaps from '@/components/AscMaps.vue'
 
 // import Stores
 import { useCounterMixin } from '@/stores/mixin'
@@ -138,9 +140,9 @@ const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าส
  * @param location  พิกัดละติจูด พิกัดลองติจูด
  * @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
  */
-async function updateLocation(latitude: any, longitude: any, namePOI: string) {
+async function updateLocation(location: any, namePOI: string) {
-  formLocation.lat = latitude
+  formLocation.lat = location.lat
-  formLocation.lng = longitude
+  formLocation.lng = location.lng
   formLocation.POI = namePOI
 }
 
@@ -244,7 +246,6 @@ function validateForm() {
 const timeChickin = ref<string>()
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
-  showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
   const formdata = new FormData()
   formdata.append('lat', formLocation.lat.toString())
@@ -276,9 +277,6 @@ async function confirm() {
       console.log(err)
       messageError($q, err)
     })
-    .finally(() => {
-      hideLoader()
-    })
 }
 
 async function onClickConfirm() {
@@ -308,7 +306,6 @@ const getClass = (val: boolean) => {
     'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm': !val,
   }
 }
-
 const fullName = ref<string>('')
 /** Hook*/
 onMounted(async () => {
@@ -327,7 +324,7 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-card flat class="row col-12 cardNone">
         <div :class="getClass(stetusCheckin)">
-          <div class="col-2">
+          <q-toolbar class="text-primary">
             <q-btn
               icon="history"
               unelevated
@@ -339,12 +336,121 @@ onMounted(async () => {
               :class="$q.screen.gt.xs ? 'q-px-md' : ''"
               @click="router.push('/history')"
             />
-          </div>
+            <q-toolbar-title>
-          <span class="text-body1 text-weight-bold col-8 text-center">
+              <span class="text-white text-body1 text-weight-bold text-center">
+                <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
+                <span v-else>ลงเวลาออกงาน</span>
+              </span>
+            </q-toolbar-title>
+            <q-btn
+              round
+              dense
+              flat
+              size="13px"
+              class="q-mx-md"
+              :disable="notiList.length === 0"
+            >
+              <q-icon name="notifications" size="24px" color="white" />
+
+              <q-badge
+                rounded
+                v-show="notiList.length > 0"
+                color="negative"
+                text-color="white"
+                floating
+                >{{ notiList.length }}</q-badge
+              >
+              <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
+                <div class="q-px-md q-py-sm row col-12 items-center">
+                  <div class="text-subtitle1 text-weight-medium">
+                    การแจ้งเตือน
+                  </div>
+                </div>
+
+                <q-list
+                  style="min-width: 300px"
+                  v-for="n in notiList"
+                  :key="n.id"
+                >
+                  <q-item v-ripple class="mytry q-py-xs" dense>
+                    <q-item-section avatar top style="min-width: 40px">
+                      <q-avatar color="primary" size="22px" text-color="white">
+                        <span class="text-weight-medium text-uppercase">{{
+                          n.sender
+                        }}</span>
+                      </q-avatar>
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label caption class="text-black">{{
+                        n.body
+                      }}</q-item-label>
+                      <q-item-label
+                        caption
+                        class="row items-center text-grey-7"
+                        >{{ date2Thai(n.timereceive) }}</q-item-label
+                      >
+                    </q-item-section>
+                    <q-btn
+                      size="sm"
+                      unelevated
+                      dense
+                      icon="mdi-close"
+                      class="mybtn q-mx-xs"
+                      @click="onClickDelete(n.id)"
+                    ></q-btn>
+                  </q-item>
+                  <q-separator color="grey-2" />
+                </q-list>
+              </q-menu>
+            </q-btn>
+            <q-btn round dense flat size="13px" class="q-mx-md">
+              <q-icon name="account_circle" size="24px" color="white" />
+              <q-menu>
+                <div class="q-pa-md" style="max-width: 500px">
+                  <q-list>
+                    <q-item>
+                      <q-item-section avatar>
+                        <q-icon color="primary" name="account_circle" />
+                      </q-item-section>
+
+                      <q-item-section>{{ fullName }}</q-item-section>
+                    </q-item>
+
+                    <q-item class="text-center">
+                      <q-item-section>
+                        <q-item-label>
+                          <q-btn
+                            color="primary"
+                            label="ออกจากระบบ"
+                            push
+                            size="sm"
+                            @click="onClickLogout"
+                        /></q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-menu>
+            </q-btn>
+          </q-toolbar>
+          <!-- <div class="col-2">
+            <q-btn
+              icon="history"
+              unelevated
+              rounded
+              dense
+              flat
+              color="white"
+              :label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
+              :class="$q.screen.gt.xs ? 'q-px-md' : ''"
+              @click="router.push('/history')"
+            />
+          </div> -->
+          <!-- <span class="text-body1 text-weight-bold col-6 text-center">
             <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
             <span v-else>ลงเวลาออกงาน</span>
-          </span>
+          </span> -->
-          <div class="col-2 text-right">
+          <!-- <div class="col-4 text-right">
             <q-btn
               round
               dense
@@ -439,7 +545,7 @@ onMounted(async () => {
                   </q-list>
                 </div> </q-menu
             ></q-btn>
-          </div>
+          </div> -->
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <div class="col-12 row justify-center">
@@ -719,4 +825,4 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>