UI checkin

src/modules/04_checkin/router.ts

@@ -0,0 +1,28 @@
+/**
+ * Router Checkin
+ */
+
+const Checkin = () => import("@/modules/04_checkin/views/Checkin.vue");
+
+/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
+ */
+export default [
+  {
+    path: "/check-in",
+    name: "Checkin",
+    component: Checkin,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
+  /* {
+    path: "/check-out",
+    name: "Checkout",
+    component: Checkout,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  }, */
+];

src/modules/04_checkin/views/Checkin.vue

@@ -0,0 +1,112 @@
+<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">
+									<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'
+
+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();
+
+</script>
+
+<style></style>