tools-legacy/public/capture/app.js

var app = new Vue({
    el: '#app',
    data: {
        step: 0,
        phone: '',
        domain: { code: 'uc', name: 'UNICAL' },
        errorMessage: '',
        version: '',
        otp: '',
        busy: {
            login: false,
            capture: false,
        },
        user: {
            phone: '',
            username: '',
            roles: []
        },
        staff: {
            reference: ''
        },
        fingerDetails: {
            'right-thumb': { },
            'right-index-finger': { }
        },
        socket: null
    },
    created: function () {
        var userStr = localStorage.getItem("user");
        if (userStr) {
            this.user = JSON.parse(userStr);
            this.step = 1;
        }

        this.socket = io();

        this.socket.on("connect", () => { })

        this.socket.on("config", (data) => {
            this.domain = data.domain;
            this.version = data.version;
            this.device = data.device;
        });

        this.socket.on("fprint-enroll-error", (data) => {
            console.log({ event: 'enroll-error', data });
            swal("Oops!", `Operation failed. ${data}.`, "error");
            this.busy.capture = false;
        });

        this.socket.on("fprint-enroll-done", (data) => {
            console.log({ event: 'enroll-done', data});
            if (data.ok) {
                let { id, fingerprint, data: { finger }} = data;
                this.step = 1.2;
                this.fingerDetails[finger] = { id, fingerprint, finger }
            }
            this.busy.capture = false;
        });

        this.socket.on("fprint-verify-done", (data) => {
            console.log({ event: 'verify-done', data});
        });
    },
    methods: {
        authenticateUrl: function (api, authenticate = true) {
            return `https://apis.a2loft.net/identity${api}` + (authenticate ? `?phone=${this.user.phone}&otp=${this.otp}` : '');
        },
        login: async function () {
            this.busy.login = true;
            var { data } = await axios.get(
                this.authenticateUrl(`/validate/uc/${this.phone}/${this.otp}`, false)
            );
            this.errorMessage = '';
            if (!data.ok)
                this.errorMessage = "Invalid OTP specified.";
            else {
                localStorage.setItem("user", JSON.stringify(data.data));
                this.user = data.data;
                this.step = 1.0;
            }
            this.busy.login = false;
        },
        logout: function () {
            localStorage.removeItem("user");
            this.step = 0;
        },
        loadUserByReference: async function () {
            this.busy.login = true;
            try {
                var { data } = await axios.get(
                    this.authenticateUrl(`/${this.domain.code}/${this.staff.reference}`)
                );
                if (!data.ok) {
                    swal("Oops!", `Operation failed. ${data.message}.` + this.staff.reference, "error");
                } else {
                    this.staff = data.data;
                    // this.staff.verified = false;
                    this.step = 1.1;
                }
            } finally {
                this.busy.login = false;
            }
        },
        captureFingerPrint: async function (finger) {
            this.busy.capture = true;
            this.step = 1.1;
            this.socket.emit("fprint-enroll", { finger });
        },
        cancelCapture: async function () {
            this.socket.emit("fprint-enroll-stop", { });
        },
        saveFingerPrint: async function () {
            this.busy.login = true;
            try {
                var fingerprints = Object.keys(this.fingerDetails).map(finger => {
                    return {
                        finger,
                        fingerprint: this.fingerDetails[finger].fingerprint
                    }
                });

                if (fingerprints.length < 2) {
                    swal("Oops!", 'Please capture the two fingers for this profile.', "error");
                    return;
                }
                
                var { data } = await axios.post(
                    this.authenticateUrl(`/${this.domain.code}/fingerprints/${this.staff.reference}`),
                    { fingerprints }
                );
                
                if (data.ok) {
                    swal("Saved", `Fingerprint saved for ${this.staff.name} with reference ${this.staff.reference}.`, "success");
                    this.newEnrolment();
                } else {
                    swal("Oops!", `Operation failed. ${data.message}.` + this.staff.reference, "error");
                }
            } finally {
                this.busy.login = false;
            }
        },
        newEnrolment: function () {
            this.step = 1.0;
            this.busy.login = false;
            this.busy.capture = false;
            this.staff.reference = "";    
            this.fingerDetails = {
                'right-thumb': { },
                'right-index-finger': { }
            };
        }
    }
})