เพิ่ม ปุ่มแสดง noti

src/components/MapCheckin.vue

@@ -88,6 +88,7 @@ onMounted(() => {
         disable-double-click-zoom
         :scrollwheel="false"
         gesture-handling="none"
+        :clickable-icons="false"
       >
         <Marker :options="{ position: center }" />
         <Marker

src/interface/index/Main.ts

@@ -7,4 +7,10 @@ interface FormRef {
   reason: object | null
   [key: string]: any
 }
-export type { DataOption, FormRef }
+interface notiType {
+  id: string
+  sender: string
+  body: string
+  timereceive: Date
+}
+export type { DataOption, FormRef, notiType }

src/views/HomeView.vue

@@ -9,6 +9,7 @@ import config from '@/app.config'
 
 // import Type
 import type { FormRef } from '@/interface/response/checkin'
+import type { notiType } from '@/interface/index/Main'
 
 // import components
 import MapCheck from '@/components/MapCheckin.vue'
@@ -223,6 +224,16 @@ async function onClickConfirm() {
   dialogTime.value = false
 }
 
+const notiTrigger = ref<boolean>(false)
+const notiList = ref<notiType[]>([
+  {
+    id: '1',
+    sender: 'ท',
+    body: 'ลงเวลา',
+    timereceive: new Date(),
+  },
+])
+
 // class
 const getClass = (val: boolean) => {
   return {
@@ -244,21 +255,6 @@ onMounted(async () => {
       <q-card flat class="row col-12 cardNone">
         <div :class="getClass(stetusCheckin)">
           <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="stetusCheckin">ลงเวลาเข้างาน</span>
-            <span v-else>ลงเวลาออกงาน</span>
-          </span>
-          <div class="col-2 text-right">
             <q-btn
               icon="history"
               unelevated
@@ -271,6 +267,72 @@ onMounted(async () => {
               @click="router.push('/history')"
             />
           </div>
+          <span class="text-body1 text-weight-bold col-8 text-center">
+            <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
+            <span v-else>ลงเวลาออกงาน</span>
+          </span>
+          <div class="col-2 text-right">
+            <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"
+                    ></q-btn>
+                  </q-item>
+                  <q-separator color="grey-2" />
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <div class="col-12 row justify-center">