fix: msgCheckTime

src/views/HomeView.vue

@@ -30,8 +30,7 @@ const hasOrganization = computed(() => {
 
   const org = data.organization
   // ตรวจสอบว่ามีค่าที่ไม่ใช่ null, undefined หรือ string ว่าง
-  const hasValue = (val: string | null | undefined) =>
-    val && val.trim() !== ''
+  const hasValue = (val: string | null | undefined) => val && val.trim() !== ''
 
   return !!(
     hasValue(org.root) ||
@@ -782,6 +781,7 @@ watch(
           >
             <q-skeleton width="100%" height="50px" />
           </div>
+
           <div v-else :class="getClass(statusCheckin)" class="gt-xs">
             <div class="col">
               <div class="row col-12 justify-center q-py-sm text-subtitle1">
@@ -826,8 +826,23 @@ watch(
                   </div>
                 </div>
               </div>
+
+              <div v-if="isDisabledCheckTime && msgCheckTime">
+                <div class="col-12 column items-center justify-center q-pa-xl">
+                  <q-icon
+                    name="mdi-map-marker-radius"
+                    size="8em"
+                    class="text-primary q-mb-md"
+                  />
+                  <div class="text-h6 text-center text-red q-mt-sm">
+                    *{{ msgCheckTime }}
+                  </div>
+                </div>
+              </div>
+
               <div
                 class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg"
+                v-if="!isDisabledCheckTime"
               >
                 <div class="col-xs-12 col-sm-8 gt-xs">
                   <div class="col-12">
@@ -1260,10 +1275,10 @@ watch(
               </div>
             </div>
 
-            <div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
+            <!-- <div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
               <q-separator />
               <div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
-            </div>
+            </div> -->
           </div>
         </q-card>
       </div>
@@ -1373,10 +1388,10 @@ watch(
         :loading="inQueue"
       />
     </div>
-    <div v-if="isDisabledCheckTime" class="col-12">
+    <!-- <div v-if="isDisabledCheckTime" class="col-12">
       <q-separator />
       <div class="text-red q-pa-md text-left">*{{ msgCheckTime }}</div>
-    </div>
+    </div> -->
   </q-footer>
 
   <!-- แสดงการลงเวลา -->
@@ -1505,4 +1520,18 @@ watch(
     rgba(2, 169, 152, 1) 100%
   );
 }
+
+.icon-bounce {
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
 </style>