hrms-user/src/modules/04_checkin/views/Checkin.vue

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.go(-1)"
        />
        เช็คอิน
      </div>
      <div class="col-12">
        <q-card bordered class="q-pa-md">
          <div class="col-12 row justify-center q-pb-sm">
            <div
              class="col-xs-12 col-sm-10 text-h6 text-primary text-center text-weight-bold"
            >
              เวลาในขณะนี้
            </div>
            <div class="row col-12 justify-center q-py-md">
              <div class="colunm">
                <div class="text-h2 text-weight-bold">
                  {{ formattedH }}<span class="q-ma-md">:</span>
                </div>
                <div>ชั่วโมง</div>
              </div>
              <div class="colunm">
                <div class="text-h2 text-weight-bold">
                  {{ formattedM }}<span class="q-ma-md">:</span>
                </div>
                <div>นาที</div>
              </div>
              <div class="colunm">
                <div class="text-h2 text-weight-bold">{{ formattedS }}</div>
                <div>วินาที</div>
              </div>
            </div>
            <!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> -->
            <div class="col-12 row q-col-gutter-md">
              <div class="col-12 col-sm-8">
                <q-card
                  bordered
                  flat
                  class="col-12 bg-grey-3"
                  :style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"
                >
                  <!-- <mapCheckin /> -->
                  <q-img
                    src="@/assets/map1.png"
                    :style="
                      $q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'
                    "
                  >
                  </q-img>
                </q-card>
              </div>
              <div class="col-12 col-sm-4">
                <q-card
                  flat
                  class="col-12 bg-grey-3 items-center row"
                  :style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"
                >
                  <div class="column col-12" v-if="!camera">
                    <div class="text-center">
                      <q-icon
                        name="mdi-image-off-outline"
                        size="100px"
                        color="grey-7"
                      />
                    </div>
                    <div class="text-center q-pt-md text-grey-7">
                      ไม่มีรูปภาพ
                    </div>
                  </div>
                  <q-img
                    v-else
                    src="@/assets/camera.jpg"
                    :style="
                      $q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'
                    "
                  >
                  </q-img>
                  <div class="absolute-bottom-right q-ma-md">
                    <q-btn
                      round
                      push
                      icon="mdi-camera"
                      size="md"
                      color="positive"
                      @click="photo()"
                    />
                  </div>
                </q-card>
              </div>
            </div>
          </div>
          <div class="col-12 text-right q-pt-md" v-if="camera">
            <q-btn
              label="ยืนยันเวลาเข้างาน"
              color="blue"
              push
              size="16px"
              :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
              @click="confirm"
            />
          </div>
        </q-card>
      </div>
    </div>
  </div>

  <q-dialog v-model="dialogTime">
    <q-card class="q-px-lg full-width">
      <q-card-section>
        <div class="text-h6 text-center q-pt-md">เวลาเข้างานของคุณคือ</div>
      </q-card-section>
      <q-card-section style="max-height: 50vh">
        <div class="row col-12 justify-center q-pb-md">
          <div class="text-h2 text-weight-bold">
            {{ formattedH }}<span class="q-ma-md">:</span>
          </div>
          <div class="text-h2 text-weight-bold">{{ formattedM }}</div>
        </div>
      </q-card-section>

      <q-card-actions align="center" class="q-mb-md">
        <q-btn push label="ตกลง" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import moment, { Moment } from "moment";
// import mapCheckin from "../componenst/mapCheck.vue";

const router = useRouter();
const $q = useQuasar();
const diff = ref({});
const timer = ref(undefined);
const dateNow = ref(new Date());
const google = ref(null);
const map = ref(null);
const camera = ref(false);
const dialogTime = ref(false);

const photo = () => {
  camera.value = true;
};
const confirm = () => {
  dialogTime.value = true;
};

// var date = Date.now();
// let formattedH = moment(date).format("HH");
// let formattedM = moment(date).format("mm");
// let formattedS = moment(date).format("ss");
const time = new Date().toLocaleTimeString();
const formattedS = ref();
const formattedM = ref();
const formattedH = ref();

onMounted(() => {
  updateClock();
});

// อัพเดทเวลา
function updateClock() {
  const date = Date.now();
  let hh = moment(date).format("HH");
  let mm = moment(date).format("mm");
  let ss = moment(date).format("ss");
  formattedS.value = ss;
  formattedM.value = mm;
  formattedH.value = hh;
}
setInterval(updateClock, 1000); // เรียกอัพเดททุกๆ 1 วิ
</script>

<style></style>