Init

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  extends: [
+    '@nuxtjs',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended',
+  ],
+  plugins: [],
+  // add your custom rules here
+  rules: {},
+}

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    branches:
+      - main
+      - master
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14]
+
+    steps:
+      - name: Checkout 🛎
+        uses: actions/checkout@master
+
+      - name: Setup node env 🏗
+        uses: actions/[email protected]
+        with:
+          node-version: ${{ matrix.node }}
+          check-latest: true
+
+      - name: Cache node_modules 📦
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies 👨🏻‍💻
+        run: npm ci
+
+      - name: Run linter 👀
+        run: npm run lint
+

.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -0,0 +1,20 @@
+# client
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/variables.scss

@@ -0,0 +1,4 @@
+// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
+//
+// The variables you want to modify
+// $font-size-root: 20px;

components/Attendance.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-row justify="center">
+    <v-col md="6" class="text-center">
+      <v-card>
+        <v-card-text>
+          <video
+            ref="video"
+            autoplay
+            :class="camera === 'user' ? 'flipX' : ''"
+            width="100%"
+          ></video>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            v-if="camera === 'environment'"
+            icon
+            fab
+            @click.stop="reverseCamera('user')"
+            ><v-icon color="green darken-3">mdi-camera-outline</v-icon></v-btn
+          >
+          <v-btn
+            v-if="camera === 'user'"
+            icon
+            fab
+            @click.stop="reverseCamera('environment')"
+            ><v-icon color="green darken-3">mdi-fingerprint</v-icon></v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: new Date().toISOString().substr(0, 10),
+      modal: false,
+      mediaStream: null,
+      camera: 'user',
+    }
+  },
+  computed: {
+    rearCamera: {
+      get() {
+        return this.camera
+      },
+      set(value) {
+        // Stop video stream
+        this.$refs.video.srcObject &&
+          this.$refs.video.srcObject.getTracks().map((track) => track.stop())
+        // Assign facingmode
+        this.camera = value
+        // Start video stream
+        this.init()
+      },
+    },
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    reverseCamera(value) {
+      this.rearCamera = value
+    },
+    init() {
+      if (
+        navigator.getUserMedia ||
+        navigator.webkitGetUserMedia ||
+        navigator.mozGetUserMedia ||
+        navigator.msGetUserMedia ||
+        navigator.oGetUserMedia
+      ) {
+        navigator.mediaDevices
+          .getUserMedia({
+            video: { facingMode: this.camera },
+          })
+          .then((mediaStream) => {
+            this.mediaStream = mediaStream
+            this.$refs.video.srcObject = mediaStream
+            this.$refs.video.play()
+          })
+      } else {
+        alert('Cannot get media devices')
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.flipX {
+  transform: scaleX(-1);
+}
+</style>

components/CardDash.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-row class="text-center" justify="center" dense>
+    <v-col v-for="(item, i) in items" :key="i" md="1" cols="4">
+      <v-card>
+        <v-list-item>
+          <v-list-item-content>
+            <v-list-item-avatar>
+              <v-icon size="48" :color="item.colorIcon">{{ item.icon }}</v-icon>
+            </v-list-item-avatar>
+            <v-list-item-subtitle>{{ item.title }}</v-list-item-subtitle>
+            <v-list-item-subtitle class="caption">
+              <span v-if="item.title === 'Over Time' || item.title === 'Late'">
+                {{ item.countMinute }} Minutes
+              </span>
+              <span v-else>
+                {{ item.countDays }} Day{{ item.countDays > 1 ? 's' : '' }}
+              </span>
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        {
+          icon: 'mdi-fingerprint',
+          colorIcon: 'green lighten-3',
+          title: 'Present',
+          countDays: '10',
+          countMinute: '320',
+        },
+        {
+          icon: 'mdi-fingerprint-off',
+          colorIcon: 'red lighten-3',
+          title: 'OFF',
+          countDays: '1',
+          countMinute: '',
+        },
+        {
+          icon: 'mdi-clock-alert-outline',
+          colorIcon: 'yellow lighten-3',
+          title: 'Late',
+          countDays: '14',
+          countMinute: '320',
+        },
+        {
+          icon: 'mdi-timelapse',
+          colorIcon: '',
+          title: 'Over Time',
+          countDays: '2',
+          countMinute: '120',
+        },
+        {
+          icon: 'mdi-wallet-travel',
+          colorIcon: '',
+          title: 'Paid Leave',
+          countDays: '2',
+          countMinute: '320',
+        },
+        {
+          icon: 'mdi-email-alert',
+          colorIcon: 'red',
+          title: 'Permit',
+          countDays: '6',
+          countMinute: '320',
+        },
+      ],
+    }
+  },
+}
+</script>