laout

src/views/HomeView.vue

@@ -638,38 +638,43 @@ onMounted(async () => {
                         @update:model-value="updateWorkplace"
                       />
                     </div>
-                    <div
+                    <div class="col-sm-12 col-md-8">
-                      class="col-xs-12 col-sm-6 col-md-4"
+                      <div class="row items-top">
-                      v-if="workplace == 'off-site'"
+                        <div
-                    >
+                          class="col-xs-12 col-sm-6 col-md-6"
-                      <q-select
+                          v-if="workplace == 'off-site'"
-                        ref="modelRef"
+                        >
-                        dense
+                          <q-select
-                        class="q-ml-md"
+                            ref="modelRef"
-                        outlined
+                            dense
-                        v-model="model"
+                            class="q-ml-md"
-                        :options="options"
+                            outlined
-                        prefix="ระบุสถานที่ :"
+                            v-model="model"
-                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                            :options="options"
-                        lazy-rules
+                            prefix="ระบุสถานที่ :"
-                        @update:model-value="selectLocation()"
+                            :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
-                        hide-bottom-space
+                            lazy-rules
-                      />
+                            @update:model-value="selectLocation()"
-                    </div>
+                            hide-bottom-space
-                    <div
+                          />
-                      class="col-xs-12 col-sm-6 col-md-4"
+                        </div>
-                      v-if="model == 'อื่นๆ' && workplace === 'off-site'"
+                        <div
-                    >
+                          class="col-xs-12 col-sm-6 col-md-6"
-                      <q-input
+                          v-if="model == 'อื่นๆ' && workplace === 'off-site'"
-                        ref="useLocationRef"
+                        >
-                        dense
+                          <q-input
-                        class="q-ml-md"
+                            ref="useLocationRef"
-                        outlined
+                            dense
-                        v-model="useLocation"
+                            class="q-ml-md"
-                        label="ระบุสถานที่"
+                            outlined
-                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                            v-model="useLocation"
-                        lazy-rules
+                            label="ระบุสถานที่"
-                      />
+                            hide-bottom-space
+                            :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                            lazy-rules
+                          />
+                        </div>
+                      </div>
                     </div>
                   </q-card>
                 </div>
@@ -712,9 +717,25 @@ onMounted(async () => {
                   *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
                 </p>
                 <q-btn
-                  :label="statusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+                  :label="
+                    !statusCheckin && inQueue
+                      ? 'ลงเวลาเข้างาน (ระบบกำลังประมวลผล)'
+                      : statusCheckin && inQueue
+                      ? 'ลงเวลาออกงาน (ระบบกำลังประมวลผล)'
+                      : statusCheckin && !inQueue
+                      ? 'ลงเวลาเข้างาน'
+                      : 'ลงเวลาออกงาน'
+                  "
                   :color="
-                    img == null ? 'grey-6' : statusCheckin ? 'primary' : 'red-8'
+                    img == null
+                      ? 'grey-6'
+                      : !statusCheckin && inQueue
+                      ? 'primary'
+                      : statusCheckin && inQueue
+                      ? 'red-8'
+                      : statusCheckin && !inQueue
+                      ? 'primary'
+                      : 'red-8'
                   "
                   push
                   size="18px"
@@ -794,8 +815,26 @@ onMounted(async () => {
         *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
       </p>
       <q-btn
-        :label="statusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+        :label="
-        :color="img == null ? 'grey-6' : statusCheckin ? 'primary' : 'red-8'"
+          !statusCheckin && inQueue
+            ? 'ลงเวลาเข้างาน (ระบบกำลังประมวลผล)'
+            : statusCheckin && inQueue
+            ? 'ลงเวลาออกงาน (ระบบกำลังประมวลผล)'
+            : statusCheckin && !inQueue
+            ? 'ลงเวลาเข้างาน'
+            : 'ลงเวลาออกงาน'
+        "
+        :color="
+          img == null
+            ? 'grey-6'
+            : !statusCheckin && inQueue
+            ? 'primary'
+            : statusCheckin && inQueue
+            ? 'red-8'
+            : statusCheckin && !inQueue
+            ? 'primary'
+            : 'red-8'
+        "
         push
         size="18px"
         :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
@@ -822,7 +861,15 @@ onMounted(async () => {
       <q-card-section class="row col-12 justify-center">
         <div
           class="rounded-borders q-pa-md col-11"
-          :class="statusCheckin ? 'bg-primary' : 'bg-red-8'"
+          :class="
+            !statusCheckin && inQueue
+              ? 'bg-primary'
+              : statusCheckin && inQueue
+              ? 'bg-red-8'
+              : statusCheckin && !inQueue
+              ? 'bg-primary'
+              : 'bg-red-8'
+          "
         >
           <div
             class="col-12 text-subtitle1 text-center text-white text-weight-medium"

src/views/MapView.vue

@@ -407,6 +407,7 @@ onMounted(async () => {
                       v-model="model"
                       :options="options"
                       prefix="ระบุสถานที่ :"
+                      hide-bottom-space
                       :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
                       lazy-rules
                       @update:model-value="selectLocation()"
@@ -422,6 +423,7 @@ onMounted(async () => {
                       class="q-ml-md"
                       outlined
                       v-model="useLocation"
+                      hide-bottom-space
                       label="ระบุสถานที่"
                       :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
                       lazy-rules