scan.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title> Admin dashboard </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="css/scan.css">
  <link rel="stylesheet" href="css/color.css">
  <link rel="stylesheet" href="css/common.css">
  <!-- <link rel="stylesheet" href="css/common.css"> -->
  <link rel="stylesheet" href="css/button.css">

  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <!--sidebar begins here-->
  <div class="sidebar">
    <div class="logo-details">
      <i class='bx bxl-t-plus-plus'></i>
      <!--type of icon-->
      <span class="logo_name">TrackMe</span>
    </div>
    <ul class="nav-links">
      <li>
        <a href="index.html">
          <i class='bx bx-grid-alt'></i>
          <span class="links_name">Dashboard</span>
        </a>
      </li>
      <li>
        <a href="report.html">
          <i class='bx bx-edit'></i>
          <span class="links_name">Info Reports</span>
        </a>
      </li>
      <li>
        <a href="barcode.html">
          <i class='bx bx-barcode'></i>
          <span class="links_name">Generate QR</span>
        </a>
      </li>
      <li>
        <a href="#" class="active">
          <i class='bx bx-scan'></i>
          <span class="links_name">Scan QR</span>
        </a>
      </li>
      <li>
        <a href="workers.html">
          <i class='bx bx-user'></i>
          <span class="links_name">Employees</span>
        </a>
      </li>
      <li class="log_out">
        <a href="#">
          <i class='bx bx-log-out'></i>
          <span class="links_name">Log out</span>
        </a>
      </li>
    </ul>
  </div>

  <!-- sidebar ends here -->
  <section class="home-section">
    <nav>
      <div class="sidebar-button">
        <i class='bx bx-menu sidebarBtn'></i>
        <span class="dashboard">Dashboard</span>
      </div>

      <!-- <div class="profile-details">
        <img src="images/profile.jpg" alt="">
        <span class="admin_name">Admin</span>
        <i class='bx bx-chevron-down'></i>
      </div> -->
    </nav>

    <div class="scan-body">
      <div class="card-section">
        <div class="box-container">
          <div class="box">
            <img src="assets/images/package.png">
            <p>Click on the button to open up the scanner</p>
            <div class="check-in-section">
              <button id="scan-user" class="user-trigger">Scan Employee</button>
              <button id="scan-user-logout" class="stop-empl-trigger red-btn hide-btn">Stop Employee</button>
              <button id="check-in" class="checkIn-trigger hide-btn">Check-in goods</button>
              <button id="check-out" class="checkOut-trigger hide-btn">Check-out goods</button>
              <button id="user-count" class="userCount-trigger hide-btn">Input FFB Count</button>
            </div>
            <button id="loginEmp" class="login-trigger">Login Employee</button>
            <!-- <button id="logoutEmp" class="logout-trigger">Logout Employee</button> -->
            <p>---------------------------------</p>
        <form class="weight">
        <label for="tons">Weight/tons</label>
        <input type="number" id="tons" name="tons"><br><br>
        <button type="button" id="savebtn" class="submit-btn-short">submit</button>
        </form>

      <div class="reader-modal">
        <div class="modal-content">
          <span class="reader-close-button"><i class="bx bx-x"></i></span>
          <h1>QR code Scanner</h1>
          <hr />
          <div class="col">
            <div id="reader-user-ckeck" width="00px"></div>
          </div>
        </div>
      </div>


      <div class="checkin-modal">
        <div class="modal-content">
          <span class="checkin-close-button"><i class="bx bx-x"></i></span>
          <h1>Check-In Goods</h1>
          <hr />
          <div class="col">
            <div id="reader-code-checkin" width="00px"></div>
          </div>
        </div>
      </div>

      <div class="checkout-modal">
        <div class="modal-content">
          <span class="checkout-close-button"><i class="bx bx-x"></i></span>
          <h1>Checkout Goods</h1>
          <hr />
          <div class="col">
            <div id="reader-code-checkout" width="00px"></div>
          </div>
        </div>
      </div>

      <div class="login-modal">
        <div class="modal-content">
          <span class="login-close-button"><i class="bx bx-x"></i></span>
          <h1>Login Employee</h1>
          <hr />
          <div class="col">
            <div id="reader-code-login" width="00px"></div>
          </div>
        </div>
      </div>


      <div class="userCount-modal">
        <div class="modal-content">
          <span class="userCount-close-button"><i class="bx bx-x"></i></span>
          <h1>Enter harvest count</h1>
          <hr />
          <input type="number" id="count" name="count"><br><br>
          <button type="button" id="saveCount" class="submit-btn-short">submit</button>
          <div class="col">
            <div id="reader-code-userCount" width="00px"></div>
          </div>
        </div>
      </div>

     
  </section>


  <script>
    let sidebar = document.querySelector(".sidebar");
    let sidebarBtn = document.querySelector(".sidebarBtn");
    sidebarBtn.onclick = function () {
      sidebar.classList.toggle("active");
      if (sidebar.classList.contains("active")) {
        sidebarBtn.classList.replace("bx-menu", "bx-menu-alt-right");
      } else
        sidebarBtn.classList.replace("bx-menu-alt-right", "bx-menu");
    }

  </script>


  <script src="./js/date.js"></script>
  <script src="./js/generate_dashboard_table.js"></script>
  <script src="./js/utils.js"></script>
  <script src="./js/firebase.js"></script>
  <script src="js/html5-qrcode.min.js"></script>

  <!-- Firebase sdk setup -->
  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp, } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
    import {
      getFirestore,
      getDocs,
      collection,
      setDoc,
      updateDoc,
      deleteDoc,
      doc,
      query,
      where,
    } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: config.apiKey,
      authDomain: config.authDomain,
      projectId: config.projectId,
      storageBucket: config.storageBucket,
      messagingSenderId: config.messagingSenderId,
      appId: config.appId
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);


    //Firestore connection
    const database = getFirestore(app);

    window.lastId = null;

    const updateCheckInRef = (code) => {
      return updateDoc(doc(database, BARCODE, code.id), code);
    };

    const updateEmplDataRef = (emplData) => {
      return updateDoc(doc(database, EMPLOYEE_TABLE, emplData.id), emplData.data);
    }

    const empLoginRef = (code) => {
      const q = query(collection(database, EMPLOYEE_TABLE), where("NID", "==", code));
      return getDocs(q);
    }

    const fbbCountRef = (userId) => {
      const q = query(collection(database, USER_FBB_COUNT), where("userId", "==", userId));
      return getDocs(q);
    }

    const updateCode = async (code) => {
      const querySnapshot = await updateCheckInRef(code);
      //add update code
      alert("Code value updated");
    }

    const addFBBCountQuery = async (fbbCount) => {
      // Generate unique id
      const newIdRef = await doc(collection(database, USER_FBB_COUNT));
      const newId = newIdRef.id;
      fbbCount.id = newId;
      window.lastId = newId;
      return setDoc(newIdRef, fbbCount);
    };

    const addFBBCount = async (fbbCount) => {
      try {
        const querySnapshot = await addFBBCountQuery(fbbCount);
        alert("fbb count added");
      } catch (error) {
        console.log("Opps! FBB Count could not be added");
      }
    }

    const empLogin = async (code) => {
      const employeeData = await getEmplData(code);
      console.log(employeeData);
      const userData = {
        id: employeeData.id,
        data: {
          last_active: getTodayDate(),
        }
      }
     await updateEmplDataRef(userData); 
      alert("Emplyee login successful");
    }

    const getEmplData = async (code) => {
      const querySnapshot = await empLoginRef(code);
      let employee;
      querySnapshot.forEach((doc) => {
        employee = doc.data();
      });

      return employee;
    }

    const getUserFBBCountData = async (data, code) => {
      const querySnapshot = await fbbCountRef(data.userId);
      let count = 0;
      querySnapshot.forEach((doc) => {
        console.log(doc.data());
        if ((data.date === doc.data().date) && (code === doc.data().code.id)) {
          count = + 1;
        }
      });

      return count;
    }

    const getUserCount = async (data, code) => {
      const querySnapshot = await empLoginRef(data.nid);
      let count = 0;
      querySnapshot.forEach((doc) => {
        console.log(doc.data());
        if ((data.date === doc.data().date) && (code == doc.data().employee.nid)) {
          count = + 1;
        }
      });
      return count;

      console.log (count);
    }
    
    // This function builds the query for daily fbb count in firestore database
    const getBarcodeQuery = () => {
      return getDocs(collection(database, BARCODE));
    };

    // This function builds the query for all users count in firestore database
    const getCodeQuery = (code) => {
      const q = query(collection(database, BARCODE), where("code", "==", code));
      return getDocs(q);

    };

    const getCode = async (code) => {
      const querySnapshot = await getCodeQuery(code);
      let barcodes = [];
      querySnapshot.forEach((doc) => {
        barcodes.push({ ...doc.data() });
      });

      return barcodes[0];
    }

     // This function saves weight/tons input
     const submitTonsQuery = async (tonsData) => {
      // Generate unique id
      const newTonsRef = await doc(collection(database, COUNTER));
      tonsData.id = newTonsRef.id;
      return setDoc(newTonsRef, tonsData);
    };

    const tonsCounter = async (tonsData) => {
      try {
        const querySnapshot = await submitTonsQuery(tonsData);
        alert("tons saved");
      } catch (error) {
        console.log(error);
      }
    }

    savebtn.addEventListener('click', async (e) => {

      var Tons = document.getElementById('tons').value;

      const counterData = {
        tons: Number(Tons),
        day: getTodayDate()
      }

      tons.value = "";
      await tonsCounter(counterData);    
    });

    // const fruitCounter = async (fruitData) => {
    //   try {
    //     const querySnapshot = await submitFruitQuery(fruitData);
    //     alert("Fruit count saved");
    //   } catch (error) {
    //     console.log(error);
    //   }
    // }

    document.getElementById("saveCount").addEventListener('click', async (e) => {
      // var userHarvest = document.getElementById('count').value;

      // const userCount = {
      //   count: Number(userHarvest)
      // }
      // count.value = "";
      // await fruitCounter(userCount);
      console.log(window.lastId);
    })

    const scanUser = document.getElementById("scan-user");
    const checkIn = document.getElementById("check-in");
    const checkOut = document.getElementById("check-out");
    const loginEmp = document.getElementById("loginEmp");
    const userCount = document.getElementById("user-count");


    const onScanSuccess = async (decodedText, decodedResult) => {
      let data = await getCode(parseInt(decodedText));
      let checkoutCode = await getCode(parseInt(decodedText));
      let loginCode = await getCode(parseInt(decodedText));
      let scanEmployee = await getCode(parseInt(decodedText));
      let loginEmpVal = await getCode(parseInt(decodedText));
      // let logoutEmpVal = await getCode(parseInt(decodedText));

      // data.checked_in = true; //update 1 value ie check-in
      // checkoutCode.checked_out = true;
      // loginEmpVal.last_active = getTodayDate();

      // await updateCode(data);
      // await updateCheckOut(checkoutCode);
      // await getScanEmployee(scanEmployee);
      // await empLogin(loginEmpVal);
    }


    let QRconfig = {
      fps: 10,
      qrbox: { width: 250, height: 250 },
      rememberLastUsedCamera: true,
      // Only support camera scan type.
      supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA]
    };

    // ***************************************** START USER SCAN ***********************************************

    // Handle user check verification using the scanner.
    // 0. Create variables "activeUser" and "activeFBBCount" to store
    // scanned user id and its check in/ check out count.
    // 1. Create a new instance of the scanner using the "reader-user-ckeck" id.
    // 2. create onSuccess function for "reader-user-ckeck" scanner to get the 
    // current user id.
    // This function should display the chick-in | check-out buttons

    //TODO: cnahe scan employee to finish

    let activeUser = {
      userId: "",
      name: "",
      date: ""
    };

    let userCheckScanner = new Html5QrcodeScanner(
      "reader-user-ckeck", QRconfig, /* verbose= */ false
    );

    // const userTrigger1 = document.querySelector(".user-trigger"); //Remove this later

    const userCheckScanOnSuccess = async (decodedText, decodedResult) => {
      // TODO:
      // Display loader here

      // let data = await getCode(parseInt(decodedText));
      //  let data = await getCode(decodedText);
      let data = decodedText;

      // console.log("QR data: ", data);
      const emplData = await getEmplData(data);
      activeUser.userId = emplData.id;
      activeUser.name = emplData.name;
      activeUser.date = getTodayDate();

      console.log(emplData);

      const stopUsrCheckOutBtn = document.querySelector(".stop-empl-trigger");
      const checkInBtn = document.querySelector(".checkIn-trigger");
      const checkOutBtn = document.querySelector(".checkOut-trigger");
      const userCountBtn = document.querySelector(".userCount-trigger")

      stopUsrCheckOutBtn.classList.toggle("hide-btn");
      checkInBtn.classList.toggle("hide-btn");
      checkOutBtn.classList.toggle("hide-btn");
      userTrigger.classList.toggle("hide-btn");
      // userTrigger1.classList.toggle("hide-btn");
      userCountBtn.classList.toggle("hide-btn");
    }
    userTrigger.addEventListener("click", userCheckScanOnSuccess);

    userCheckScanner.render(userCheckScanOnSuccess);

    // ***************************************** END USER SCAN ***********************************************

    // ***************************************** START CODE CHECK IN SCAN ***********************************************

    let codeCheckInScanner = new Html5QrcodeScanner(
      "reader-code-checkin", QRconfig, /* verbose= */ false
    );

    const checkIn1 = document.querySelector(".checkIn-trigger"); //Remove this later

    const checkInScanOnSuccess = async (decodedText, decodedResult) => {
      let data = await getCode(parseInt(decodedText));

      // let data = await getCode(parseInt("1431357264597"));
      console.log(data);
      data.checked_in = true;
      const codeData = await updateCode(data);
    }

    checkIn1.addEventListener("click", checkInScanOnSuccess);

    codeCheckInScanner.render(checkInScanOnSuccess);

    // ***************************************** STOP CODE CHECK IN SCAN ***********************************************

    // ***************************************** START USER LOGOUT SCAN ***********************************************

    // const userLogout1 = document.querySelector(".stop-empl-trigger"); //Remove this later

    // const userLogoutScanOnSuccess = async () => {
    //   const checkInBtn = document.querySelector(".checkIn-trigger");
    //   const checkOutBtn = document.querySelector(".checkOut-trigger");
    //   checkInBtn.classList.toggle("hide-btn");
    //   checkOutBtn.classList.toggle("hide-btn");
    //   userLogout1.classList.toggle("hide-btn");
    //   userTrigger1.classList.toggle("hide-btn");
    // }

    // userLogout1.addEventListener("click", userLogoutScanOnSuccess);

    // ***************************************** STOP USER LOGOUT SCAN ***********************************************

    // ***************************************** START CODE CHECK OUT SCAN ***********************************************

    let codeCheckoutScanner = new Html5QrcodeScanner(
      "reader-code-checkout", QRconfig, /* verbose= */ false
    );

    const checkout1 = document.querySelector(".checkOut-trigger"); //Remove this later

    const checkoutScanOnSuccess = async (decodedText, decodedResult) => {

      let data = await getCode(parseInt(decodedText));

      // let data = await getCode(parseInt("1431357264597"));
      console.log(data);
      data.checked_out = true;
      const codeData = await updateCode(data);
      }

    //   let data;
    //   if(typeof data === undefined) {
    //     data = await getCode(parseInt(decodedText));

    //      // let data = await getCode(parseInt("1651155588702"));
    //   console.log(data);
    //   data.checked_out = true;
    //   const codeData = await updateCode(data);

    //   Add data in fbb_count table
    //   let fbbCount = await getUserFBBCountData(activeUser, data.code)
    //   if (fbbCount === 0) {
    //     const fbb_count = {
    //       code: {
    //         id: data.code
    //       },
    //       date: activeUser.date,
    //       name: activeUser.name,
    //       userId: activeUser.userId,
    //       packages: +1
    //       // count: fruitCounter(usercount)
    //     }
    //     await addFBBCount(fbb_count);
    // }
    //   }
    // }

    checkout1.addEventListener("click", checkoutScanOnSuccess);

    codeCheckoutScanner.render(checkoutScanOnSuccess);

    // ***************************************** STOP CODE CHECK OUT SCAN ***********************************************

    let employeeLoginScanner = new Html5QrcodeScanner (
      "reader-code-login", QRconfig, /* verbose= */ false
    );

    const empLogin1 = document.querySelector(".login-trigger"); //Remove this later


    const empLoginScanOnSuccess = async (decodedText, decodedResult) => {

      let data = decodedText;

      console.log(decodedText);

      // let data = await getCode(parseInt("6342839839021"));
      // let data = "563489476235";
      console.log(data);
      // data.login = true;

      if (data !== undefined) {
      // data.empLogin = true;
      const empLoginData = await empLogin(data);
      // console.log(empLoginData);
    }  
    
    }
    empLogin1.addEventListener("click", empLoginScanOnSuccess);

    employeeLoginScanner.render(empLoginScanOnSuccess);

    // ***************************************** STOP EMPLOYEE LOGIN SCAN ***********************************************

    // let employeeLogoutScanner = new Html5QrcodeScanner (
    //   "reader-code-logout", QRconfig, /* verbose= */ false
    // );

    // const empLogout1 = document.querySelector(".logout-trigger"); //Remove this later


    // const empLogoutScanOnSuccess = async (decodedText, decodedResult) => {
    //   // let data = await getCode(parseInt(decodedText));

    //   let data = await getCode(parseInt("1645071189110"));
    //   console.log(data);
    //   data.empLogout = true;
    //   const codeData = await updateCode(data);
    // }

    // empLogout1.addEventListener("click", empLogoutScanOnSuccess);

    // employeeLogoutScanner.render(empLogoutScanOnSuccess);
  </script>

  <script>
    // User FBB count check-in modal functionality
    const userModal = document.querySelector(".reader-modal");
    const userTrigger = document.querySelector(".user-trigger");
    const userCloseButton = document.querySelector(".reader-close-button");

    const toggleModal = () => {
      userModal.classList.toggle("show-modal");
    }

    userTrigger.addEventListener("click", toggleModal);
    userCloseButton.addEventListener("click", toggleModal);
  </script>

  <script>
    // modal functionality
    const checkinModal = document.querySelector(".checkin-modal");
    const checkinTrigger = document.querySelector(".checkIn-trigger");
    const checkinCloseButton = document.querySelector(".checkin-close-button");

    const toggleModal2 = () => {
      checkinModal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
      if (event.target === checkinModal) {
        toggleModal2();
      }
    }

    checkinTrigger.addEventListener("click", toggleModal2);
    checkinCloseButton.addEventListener("click", toggleModal2);
    window.addEventListener("click", windowOnClick);
  </script>

  <script>
    // modal functionality
    const checkoutModal = document.querySelector(".checkout-modal");
    const checkoutTrigger = document.querySelector(".checkOut-trigger");
    const checkoutCloseButton = document.querySelector(".checkout-close-button");

    const toggleModal3 = () => {
      checkoutModal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
      if (event.target === checkoutModal) {
        toggleModal3();
      }
    }

    checkoutTrigger.addEventListener("click", toggleModal3);
    checkoutCloseButton.addEventListener("click", toggleModal3);
    window.addEventListener("click", windowOnClick);
  </script>

   <script>
    // modal functionality
    const loginModal = document.querySelector(".login-modal");
    const loginTrigger = document.querySelector(".login-trigger");
    const loginCloseButton = document.querySelector(".login-close-button");

    const toggleModal4 = () => {
      loginModal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
      if (event.target === loginModal) {
        toggleModal4();
      }
    }

    loginTrigger.addEventListener("click", toggleModal4);
    loginCloseButton.addEventListener("click", toggleModal4);
    window.addEventListener("click", windowOnClick);
  </script>


   <script>
  //   // modal functionality
    const userCountModal = document.querySelector(".userCount-modal");
    const userCountTrigger = document.querySelector(".userCount-trigger");
    const userCountCloseButton = document.querySelector(".userCount-close-button");

    const toggleModal5 = () => {
      userCountModal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
      if (event.target === userCountModal) {
        toggleModal5();
      }
    }

    userCountTrigger.addEventListener("click", toggleModal5);
    userCountCloseButton.addEventListener("click", toggleModal5);
    window.addEventListener("click", windowOnClick);
  </script>

</body>

</html>

 <!-- git pull --rebase upstream main  git push origin main     -->