From b3aeda65bd93fecea59198460bd0a90e6218cdbb Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 14 Mar 2025 18:13:33 +0700
Subject: [PATCH] move map last page

---
 src/views/HomeView.vue | 788 +++++++++++++++++++++--------------------
 1 file changed, 407 insertions(+), 381 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7ab94df..935dd5b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -59,8 +59,8 @@ function updateClock() {
   const hh = moment(date).format('HH')
   const mm = moment(date).format('mm')
   const ss = moment(date).format('ss')
-  const HH = moment(date).format('hh');
-  const A = moment(date).format('a');
+  const HH = moment(date).format('hh')
+  const A = moment(date).format('a')
 
   formattedS.value = ss
   formattedM.value = mm
@@ -325,134 +325,142 @@ onMounted(async () => {
 </script>
 
 <template>
-    <q-page :style="$q.screen.xs ? 'padding-top: 90px':''">
-      <div class="col-12 row justify-center">
-        <div class="col-xs-12 col-sm-12 col-md-12">
-          <q-card flat :class="$q.screen.gt.xs ? 'row col-12 cardNone': 'row col-12 bg-grey-2'">
-            <!-- <q-header elevated class="bg-purple"> -->
-            <div :class="getClass(stetusCheckin)" class="gt-xs">
-              <div class="col">
-                <div class="row col-12 justify-center q-py-sm text-subtitle1">
-                  <!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
+  <q-page :style="$q.screen.xs ? 'padding-top: 90px' : ''">
+    <div class="col-12 row justify-center">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-card
+          flat
+          :class="
+            $q.screen.gt.xs ? 'row col-12 cardNone' : 'row col-12 bg-grey-2'
+          "
+        >
+          <!-- <q-header elevated class="bg-purple"> -->
+          <div :class="getClass(stetusCheckin)" class="gt-xs">
+            <div class="col">
+              <div class="row col-12 justify-center q-py-sm text-subtitle1">
+                <!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
                     ลงเวลาเข้างาน
                   </strong> -->
-                  <!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
-                  <strong v-if="!stetusCheckin && inQueue" >
-                    ลงเวลาออกงาน (ระบบกำลังประมวลผล)
-                  </strong>
+                <!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
+                <strong v-if="!stetusCheckin && inQueue">
+                  ลงเวลาออกงาน (ระบบกำลังประมวลผล)
+                </strong>
 
-                  <strong
-                    v-else-if="stetusCheckin && inQueue"
-                  >
-                    ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
-                  </strong>
+                <strong v-else-if="stetusCheckin && inQueue">
+                  ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
+                </strong>
 
-                  <strong
-                    v-else-if="stetusCheckin && !inQueue"
-                  >
-                    ลงเวลาเข้างาน
-                  </strong>
+                <strong v-else-if="stetusCheckin && !inQueue">
+                  ลงเวลาเข้างาน
+                </strong>
 
-                  <strong v-else > ลงเวลาออกงาน </strong>
-                </div> 
-              </div> 
-            </div> 
-            <div class="col-12 text-grey-9">
-              <div class="col-12 row justify-center">
-                <div class="col-12 row q-pt-md justify-center gt-xs">
-                  <div
-                    class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
-                  >
-                    {{ date2Thai(Thai) }}
+                <strong v-else> ลงเวลาออกงาน </strong>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 text-grey-9">
+            <div class="col-12 row justify-center">
+              <div class="col-12 row q-pt-md justify-center gt-xs">
+                <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="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 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 class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg">
-                  <div class="col-12" v-if="$q.screen.xs">
+              </div>
+              <div
+                class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg"
+              >
+                <div class="col-xs-12 col-sm-8 gt-xs">
+                  <div class="col-12">
                     <MapCheck @update:location="updateLocation" />
                   </div>
-                  <div class="col-xs-12 col-sm-8 gt-xs">
-                    <div class="col-12">
-                      <MapCheck @update:location="updateLocation" />
+                  <!-- <AscMaps /> -->
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-card
+                    :class="
+                      $q.screen.xs ? 'card-container-xs' : 'card-container'
+                    "
+                  >
+                    <div
+                      v-if="!cameraIsOn && img == null"
+                      class="preview-placeholder"
+                      @click="() => !isDisabledCheckTime && openCamera()"
+                    >
+                      <div class="text-center">
+                        <q-icon
+                          name="mdi-camera"
+                          color="blue-grey-3"
+                          size="100px"
+                          class="center-icon"
+                        />
+                      </div>
                     </div>
-                    <!-- <AscMaps /> -->
-                  </div>
-                  <div class="col-xs-12 col-sm-4">
-                    <q-card  :class="$q.screen.xs? 'card-container-xs':'card-container'">
-                      <div
-                        v-if="!cameraIsOn && img == null"
-                        class="preview-placeholder"
-                        @click="() => !isDisabledCheckTime && openCamera()"
-                      >
-                        <div class="text-center">
-                          <q-icon
-                            name="mdi-camera"
-                            color="blue-grey-3"
-                            size="100px"
-                            class="center-icon"
+                    <div class="col-12 row items-center">
+                      <!-- แสดงกล้องตอนกดถ่ายภาพ -->
+
+                      <Camera
+                        :resolution="{ width: photoWidth, height: photoHeight }"
+                        ref="camera"
+                        :autoplay="false"
+                        :style="!img ? 'display: block' : 'display: none'"
+                      />
+
+                      <!-- แสดงรูปเมื่อกด capture -->
+                      <div v-if="img" class="image-container">
+                        <q-img :src="img" class="image-element"></q-img>
+                      </div>
+
+                      <div v-if="cameraIsOn">
+                        <div
+                          v-if="$q.screen.gt.xs"
+                          class="absolute-bottom-right q-ma-md"
+                        >
+                          <q-btn
+                            v-if="img == null"
+                            round
+                            push
+                            icon="photo_camera"
+                            size="md"
+                            color="positive"
+                            @click="capturePhoto"
+                          />
+                          <q-btn
+                            v-else
+                            round
+                            push
+                            icon="refresh"
+                            size="md"
+                            color="negative"
+                            @click="refreshPhoto"
                           />
                         </div>
-                      </div>
-                      <div class="col-12 row items-center">
-                        <!-- แสดงกล้องตอนกดถ่ายภาพ -->
-
-                        <Camera
-                          :resolution="{ width: photoWidth, height: photoHeight }"
-                          ref="camera"
-                          :autoplay="false"
-                          :style="!img ? 'display: block' : 'display: none'"
-                        />
-
-                        <!-- แสดงรูปเมื่อกด capture -->
-                        <div v-if="img" class="image-container">
-                          <q-img :src="img" class="image-element"></q-img>
-                        </div>
-
-                        <div
-                          v-if="cameraIsOn"
-                        >
-                          <div v-if="$q.screen.gt.xs" class="absolute-bottom-right q-ma-md">
+                        <div v-else>
+                          <div
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
                             <q-btn
-                              v-if="img == null"
-                              round
-                              push
-                              icon="photo_camera"
-                              size="md"
-                              color="positive"
-                              @click="capturePhoto"
-                            />
-                            <q-btn
-                              v-else
-                              round
-                              push
-                              icon="refresh"
-                              size="md"
-                              color="negative"
-                              @click="refreshPhoto"
-                            />
-                          </div>
-                          <div v-else>
-                            <div class="absolute-bottom text-subtitle2 text-center q-py-sm" style="background:#00000021">
-                              <q-btn
                               round
                               v-if="img == null"
                               icon="photo_camera"
                               size="18px"
-                              style="background: #263238; color: white;"
+                              style="background: #263238; color: white"
                               @click="capturePhoto"
                               unelevated
                             />
@@ -461,287 +469,300 @@ onMounted(async () => {
                               round
                               icon="refresh"
                               size="18px"
-                              style="background: #263238; color: white;"
+                              style="background: #263238; color: white"
                               @click="refreshPhoto"
                             />
-                            </div>
                           </div>
                         </div>
                       </div>
-                    </q-card>
-                  </div>
-
-                  <!-- กรอกข้อมูล หน้ามือถือ -->
-                  <div class="col-12 row q-col-gutter-y-md"  v-if="$q.screen.xs">
-                    <div class="col-12" v-if="!isDisabledCheckTime">
-                      <q-card flat bordered class="row col-12" style="border-radius: 10px">
-                        <q-input
-                          v-model="remark"
-                          filled
-                          type="textarea"
-                          label="กรอกหมายเหตุ"
-                          input-style="border-radius: 10px 10px 0 0;"
-                          class="col-12"
-                          bg-color="white"
-                        />
-                        <div class="col-12"><q-separator /></div>
-                        <q-btn-toggle
-                          v-model="workplace"
-                          @update:model-value="updateWorkplace"
-                          spread
-                          no-caps
-                          toggle-color="blue-grey-10"
-                          color="white"
-                          text-color="black"
-                          class="col-12"
-                          style="min-height:3em"
-                          size="15px"
-                          :options="[
-                            {label: 'ในสถานที่', value: 'in-place'},
-                            {label: 'นอกสถานที่', value: 'off-site'}
-                          ]"
-                        />
-                      </q-card>
                     </div>
-                    <div class="col-12" v-if="workplace == 'off-site'">
-                      <q-card class="col-12">                      
-                        <q-select
-                              ref="modelRef"
-                              filled
-                              v-model="model"
-                              :options="options"
-                              label="เลือกสถานที่"
-                              bg-color="white"
-                              :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
-                              lazy-rules
-                              @update:model-value="selectLocation()"
-                              hide-bottom-space
-                            />
-                      </q-card>
-                    </div>
-                    <div
-                      class="col-12"
-                      v-if="model == 'อื่นๆ' && workplace === 'off-site'"
-                    >
-                    <q-card class="col-12"> 
-                        <q-input
-                          ref="useLocationRef"
-                          filled
-                          v-model="useLocation"
-                          label="ระบุสถานที่"
-                          bg-color="white"
-                          :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
-                          hide-bottom-space
-                          lazy-rules
-                        />
-                      </q-card>
-                    </div>
-                  </div>
-                  <!-- กรอกข้อมูล หน้ามือถือ -->
-
-                  <div
-                    v-if="!isDisabledCheckTime"
-                    class="col-xs-12 col-sm-12 items-center gt-xs"
-                  >
-                    <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="ในสถานที่"
-                          @update:model-value="updateWorkplace"
-                        />
-                        <q-radio
-                          v-model="workplace"
-                          checked-icon="task_alt"
-                          unchecked-icon="panorama_fish_eye"
-                          val="off-site"
-                          label="นอกสถานที่"
-                          @update:model-value="updateWorkplace"
-                        />
-                      </div>
-                      <div
-                        class="col-xs-12 col-sm-6 col-md-4"
-                        v-if="workplace == 'off-site'"
-                      >
-                        <q-select
-                          ref="modelRef"
-                          dense
-                          class="q-ml-md"
-                          outlined
-                          v-model="model"
-                          :options="options"
-                          prefix="ระบุสถานที่ :"
-                          :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
-                          lazy-rules
-                          @update:model-value="selectLocation()"
-                          hide-bottom-space
-                        />
-                      </div>
-                      <div
-                        class="col-xs-12 col-sm-6 col-md-4"
-                        v-if="model == 'อื่นๆ' && workplace === 'off-site'"
-                      >
-                        <q-input
-                          ref="useLocationRef"
-                          dense
-                          class="q-ml-md"
-                          outlined
-                          v-model="useLocation"
-                          label="ระบุสถานที่"
-                          :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
-                          lazy-rules
-                        />
-                      </div>
-                    </q-card>
-                  </div>
-
-                  <div v-if="!isDisabledCheckTime" class="col-xs-12 col-sm-12 gt-xs">
-                    <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="col-12 q-pt-sm">
-                        <q-input outlined v-model="remark" lazy-rules dense />
-                      </div>
-                    </q-card>
-                  </div>
-
-
+                  </q-card>
                 </div>
-              </div>
 
-              <div v-if="!isDisabledCheckTime && $q.screen.gt.xs" class="col-12 text-right">
-                <q-separator />
-                <div class="col-12 q-pa-md">
-                  <p
+                <!-- กรอกข้อมูล หน้ามือถือ -->
+                <div class="col-12 row q-col-gutter-y-md" v-if="$q.screen.xs">
+                  <div class="col-12" v-if="!isDisabledCheckTime">
+                    <q-card
+                      flat
+                      bordered
+                      class="row col-12"
+                      style="border-radius: 10px"
+                    >
+                      <q-input
+                        v-model="remark"
+                        filled
+                        type="textarea"
+                        label="กรอกหมายเหตุ"
+                        input-style="border-radius: 10px 10px 0 0;"
+                        class="col-12"
+                        bg-color="white"
+                      />
+                      <div class="col-12"><q-separator /></div>
+                      <q-btn-toggle
+                        v-model="workplace"
+                        @update:model-value="updateWorkplace"
+                        spread
+                        no-caps
+                        toggle-color="blue-grey-10"
+                        color="white"
+                        text-color="black"
+                        class="col-12"
+                        style="min-height: 3em"
+                        size="15px"
+                        :options="[
+                          { label: 'ในสถานที่', value: 'in-place' },
+                          { label: 'นอกสถานที่', value: 'off-site' },
+                        ]"
+                      />
+                    </q-card>
+                  </div>
+                  <div class="col-12" v-if="workplace == 'off-site'">
+                    <q-card class="col-12">
+                      <q-select
+                        ref="modelRef"
+                        filled
+                        v-model="model"
+                        :options="options"
+                        label="เลือกสถานที่"
+                        bg-color="white"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        lazy-rules
+                        @update:model-value="selectLocation()"
+                        hide-bottom-space
+                      />
+                    </q-card>
+                  </div>
+                  <div
+                    class="col-12"
+                    v-if="model == 'อื่นๆ' && workplace === 'off-site'"
+                  >
+                    <q-card class="col-12">
+                      <q-input
+                        ref="useLocationRef"
+                        filled
+                        v-model="useLocation"
+                        label="ระบุสถานที่"
+                        bg-color="white"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        hide-bottom-space
+                        lazy-rules
+                      />
+                    </q-card>
+                  </div>
+
+                  <div class="col-12" v-if="$q.screen.xs">
+                    <MapCheck @update:location="updateLocation" />
+                  </div>
+                </div>
+                <!-- กรอกข้อมูล หน้ามือถือ -->
+
+                <div
+                  v-if="!isDisabledCheckTime"
+                  class="col-xs-12 col-sm-12 items-center gt-xs"
+                >
+                  <q-card
+                    bordered
+                    flat
                     :class="
                       $q.screen.gt.xs
-                        ? 'text-red text-caption '
-                        : 'text-red text-caption text-center'
+                        ? 'q-px-md q-py-sm row items-center  shadow-0'
+                        : 'q-pa-md row items-center  shadow-0'
                     "
                   >
-                    *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-                  </p>
-                  <q-btn
-                    :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
-                    :color="img == null ? 'grey-6' : 'primary'"
-                    push
-                    size="18px"
-                    :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
-                    :disable="camera && img ? false : true"
-                    @click="validateForm"
-                    :loading="inQueue"
-                  />
+                    <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="ในสถานที่"
+                        @update:model-value="updateWorkplace"
+                      />
+                      <q-radio
+                        v-model="workplace"
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        val="off-site"
+                        label="นอกสถานที่"
+                        @update:model-value="updateWorkplace"
+                      />
+                    </div>
+                    <div
+                      class="col-xs-12 col-sm-6 col-md-4"
+                      v-if="workplace == 'off-site'"
+                    >
+                      <q-select
+                        ref="modelRef"
+                        dense
+                        class="q-ml-md"
+                        outlined
+                        v-model="model"
+                        :options="options"
+                        prefix="ระบุสถานที่ :"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        lazy-rules
+                        @update:model-value="selectLocation()"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div
+                      class="col-xs-12 col-sm-6 col-md-4"
+                      v-if="model == 'อื่นๆ' && workplace === 'off-site'"
+                    >
+                      <q-input
+                        ref="useLocationRef"
+                        dense
+                        class="q-ml-md"
+                        outlined
+                        v-model="useLocation"
+                        label="ระบุสถานที่"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        lazy-rules
+                      />
+                    </div>
+                  </q-card>
+                </div>
+
+                <div
+                  v-if="!isDisabledCheckTime"
+                  class="col-xs-12 col-sm-12 gt-xs"
+                >
+                  <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="col-12 q-pt-sm">
+                      <q-input outlined v-model="remark" lazy-rules dense />
+                    </div>
+                  </q-card>
                 </div>
               </div>
+            </div>
 
-              <div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
-                <q-separator />
-                <div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
+            <div
+              v-if="!isDisabledCheckTime && $q.screen.gt.xs"
+              class="col-12 text-right"
+            >
+              <q-separator />
+              <div class="col-12 q-pa-md">
+                <p
+                  :class="
+                    $q.screen.gt.xs
+                      ? 'text-red text-caption '
+                      : 'text-red text-caption text-center'
+                  "
+                >
+                  *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
+                </p>
+                <q-btn
+                  :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+                  :color="img == null ? 'grey-6' : 'primary'"
+                  push
+                  size="18px"
+                  :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
+                  :disable="camera && img ? false : true"
+                  @click="validateForm"
+                  :loading="inQueue"
+                />
               </div>
             </div>
-          </q-card>
+
+            <div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
+              <q-separator />
+              <div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+
+  <!--  top page sticky  หน้ามือถือ-->
+  <q-page-sticky expand position="top" v-if="$q.screen.xs">
+    <div :class="getClassXS(stetusCheckin)">
+      <div class="col">
+        <div class="row col-12 justify-right items-center text-body1">
+          <strong v-if="!stetusCheckin && inQueue">
+            ลงเวลาออกงาน (ระบบกำลังประมวลผล)
+          </strong>
+
+          <strong v-else-if="stetusCheckin && inQueue">
+            ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
+          </strong>
+
+          <strong v-else-if="stetusCheckin && !inQueue"> ลงเวลาเข้างาน </strong>
+
+          <strong v-else> ลงเวลาออกงาน </strong>
+        </div>
+        <div
+          class="text-white text-body2 row col-12"
+          style="line-height: 1.5rem"
+        >
+          {{ date2Thai(Thai) }}
         </div>
       </div>
-     </q-page>
-
-    <!--  top page sticky  หน้ามือถือ-->
-     <q-page-sticky expand position="top"  v-if="$q.screen.xs">
-      <div :class="getClassXS(stetusCheckin)" >
-        <div class="col">
-          <div class="row col-12 justify-right items-center text-body1">
-            <strong v-if="!stetusCheckin && inQueue" >
-              ลงเวลาออกงาน (ระบบกำลังประมวลผล)
-            </strong>
-
-            <strong
-              v-else-if="stetusCheckin && inQueue"
-            >
-              ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
-            </strong>
-
-            <strong
-              v-else-if="stetusCheckin && !inQueue"
-            >
-              ลงเวลาเข้างาน
-            </strong>
-
-            <strong v-else > ลงเวลาออกงาน </strong>
-          </div> 
-          <div class="text-white text-body2 row col-12" style="line-height:1.5rem">
-            {{ date2Thai(Thai) }}
-          </div>
-        </div> 
-        <div class="col-6 row items-center" >
-          <div class="row col-12 justify-end">
-              <div class="colunm">
-                <div class="text-h4 text-weight-bold">
-                  {{ formattedHH }}<span class="q-ma-xs">:</span>
-                </div>
-              </div>
-              <div class="colunm">
-                <div class="text-h4 text-weight-bold">
-                  {{ formattedM }}
-                </div>
-              </div>
-              <div class="colunm">
-                <div class="text-caption q-pl-sm">{{ formattedA }}</div>
-              </div>
+      <div class="col-6 row items-center">
+        <div class="row col-12 justify-end">
+          <div class="colunm">
+            <div class="text-h4 text-weight-bold">
+              {{ formattedHH }}<span class="q-ma-xs">:</span>
             </div>
+          </div>
+          <div class="colunm">
+            <div class="text-h4 text-weight-bold">
+              {{ formattedM }}
+            </div>
+          </div>
+          <div class="colunm">
+            <div class="text-caption q-pl-sm">{{ formattedA }}</div>
+          </div>
         </div>
-      </div> 
-      </q-page-sticky>
-
-      <!--  footer  หน้ามือถือ-->
-      <q-footer reveal  v-if="!isDisabledCheckTime && $q.screen.xs" class="bg-grey-2">
-        <q-separator />
-        <div class="col-12 q-pa-md">
-          <p
-            :class="
-              $q.screen.gt.xs
-                ? 'text-red text-caption '
-                : 'text-red text-caption text-center'
-            "
-          >
-            *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-          </p>
-          <q-btn
-            :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
-            :color="img == null ? 'grey-6' : 'primary'"
-            push
-            size="18px"
-            :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
-            :disable="camera && img ? false : true"
-            @click="validateForm"
-            :loading="inQueue"
-          />
-        </div>
-      </q-footer>
+      </div>
+    </div>
+  </q-page-sticky>
 
+  <!--  footer  หน้ามือถือ-->
+  <q-footer
+    reveal
+    v-if="!isDisabledCheckTime && $q.screen.xs"
+    class="bg-grey-2"
+  >
+    <q-separator />
+    <div class="col-12 q-pa-md">
+      <p
+        :class="
+          $q.screen.gt.xs
+            ? 'text-red text-caption '
+            : 'text-red text-caption text-center'
+        "
+      >
+        *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
+      </p>
+      <q-btn
+        :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+        :color="img == null ? 'grey-6' : 'primary'"
+        push
+        size="18px"
+        :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
+        :disable="camera && img ? false : true"
+        @click="validateForm"
+        :loading="inQueue"
+      />
+    </div>
+  </q-footer>
 
   <!-- แสดงการลงเวลา -->
   <q-dialog v-model="modalTime" persistent>
@@ -789,8 +810,6 @@ onMounted(async () => {
   </q-dialog>
 </template>
 <style scoped>
-
-
 .q-card.cardImg:hover {
   border: 1px solid #02a998 !important;
 }
@@ -807,9 +826,8 @@ onMounted(async () => {
   height: autu; /* Adjust as needed */
   background: #f5f5f5;
   height: 35vh !important;
-  box-shadow: none !important;;
-  border: 1px solid #EDEDED;
-
+  box-shadow: none !important;
+  border: 1px solid #ededed;
 }
 .card-container-xs {
   position: relative;
@@ -839,13 +857,21 @@ onMounted(async () => {
   height: 100%;
 }
 
-.bg-topOut{
-  background: rgb(39,50,56);
-  background: linear-gradient(175deg, rgba(39,50,56,1) 76%, rgba(198,40,40,1) 100%);
+.bg-topOut {
+  background: rgb(39, 50, 56);
+  background: linear-gradient(
+    175deg,
+    rgba(39, 50, 56, 1) 76%,
+    rgba(198, 40, 40, 1) 100%
+  );
 }
 
-.bg-topIn{
-  background: rgb(39,50,56);
-  background: linear-gradient(175deg, rgba(39,50,56,1) 76%, rgba(2,169,152,1) 100%);
+.bg-topIn {
+  background: rgb(39, 50, 56);
+  background: linear-gradient(
+    175deg,
+    rgba(39, 50, 56, 1) 76%,
+    rgba(2, 169, 152, 1) 100%
+  );
 }
 </style>