README.md

@@ -2,15 +2,29 @@
 
 Worker Time Control is a project developed by Verdnatura Levante SL, designed to manage time-related functionalities. This application helps in efficient time tracking and management for workers.
 
+## Prerequisites
+
+Required applications.
+
+* Node.js
+* Docker
+
 ## Installation
 
-1. Clone the repository:
+1. Clone the repository.
+```text
+$ git clone https://gitea.verdnatura.es/verdnatura/worker-time-control
+```
+2. Install dependencies using npm.
+```text
+$ npm i
+```
+3. Duplicate the `.env.example` file and rename it to `.env`. Then, configure it.
+```
+$ cp .env.example .env
+```
 
-   git clone https://gitea.verdnatura.es/verdnatura/worker-time-control
-3. Install dependencies using npm:
-
-   npm install
-
-## Usage
-
-    npm start
+## Launch
+```
+$ npm start
+```

css/style.css

@@ -26,6 +26,15 @@ h1 {
 span {
     color: #ED4947;
 }
+.device {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    float: left;
+    font-size: 1em;
+    font-weight: 400;
+    color: white;
+}
 .total {
     float: right;
     font-weight: bold;

index.html

@@ -82,6 +82,9 @@ and open the template in the editor.
         <h1>
             developed with <span>&hearts;</span> by Verdnatura
         </h1>
+        <span class="device">
+            <p id="deviceLabel"></p>
+        </h2>
         
         <div class="confirm">
             <div class="contConfirm">

js/clockIn.js

@@ -45,7 +45,8 @@ function setView() {
 function fichar(direction) {
     const data = {
         workerFk: userData['userFk'],
-        direction
+        direction,
+        device: localStorage.getItem("device")
     }
 
     $.post({

js/index.js

@@ -7,12 +7,14 @@ $(document).ready(function () {
 
 function setEvents() {
     const heartEl = document.querySelector('body > h1 > span');
+    refreshDeviceLabel()
 
     heartEl.addEventListener('click', function() {
         Swal.fire({
             title: 'Iniciar sesión',
             html:
-                `<input id="user" class="swal2-input" type="text" placeholder="Usuario" value="${localStorage.getItem('user') ?? ''}">
+                `<input id="device" class="swal2-input" type="text" placeholder="Dispositivo" value="${localStorage.getItem('device') ?? ''}">
+                <input id="user" class="swal2-input" type="text" placeholder="Usuario" value="${localStorage.getItem('user') ?? ''}">
                 <input id="pass" class="swal2-input" type="password" placeholder="Contraseña">`,
             confirmButtonText: 'Login',
             showCloseButton: true,
@@ -21,7 +23,8 @@ function setEvents() {
             if(result.isConfirmed) {
                 const user = $('#user').val();
                 const pass = $('#pass').val();
-                signIn(user,pass);
+                const device = $('#device').val();
+                signIn(user, pass, device);
             }
         });
     }); 
@@ -36,8 +39,11 @@ function setEvents() {
         $("#txtPin").text("ID USUARIO");
     });
 
-    $(".btnOk").on("click", login);
-
+    $(".btnOk").on("click", function () {
+        if (pin) {
+            login();
+        };
+    });
 }
 
 function login() {
@@ -56,7 +62,7 @@ function login() {
     });
 }
 
-function signIn(user, password) {
+function signIn(user, password, device) {
     $.post({
         urlPath: 'vnUsers/sign-in',
         jsonData: {user, password},
@@ -65,9 +71,14 @@ function signIn(user, password) {
             localStorage.setItem("token", data.token);
             localStorage.setItem("ttl", data.ttl);
             localStorage.setItem("user", user);
-            localStorage.setItem("password", password);
+            localStorage.setItem("device", device);
             localStorage.setItem("created", Date.now());
             getTokenConfig();
+            refreshDeviceLabel();
         },
     })
 }
+
+function refreshDeviceLabel() {
+    $("#deviceLabel").text(localStorage.getItem('device') ?? '')
+}

js/main.js

@@ -45,7 +45,7 @@ function getTokenConfig() {
 }
 
 function checkValidity() {
-    const created = localStorage.getItem('created');
+    const created = +localStorage.getItem('created');
     const ttl = localStorage.getItem('ttl');
 
     if (isCheckingToken || !created) return;
@@ -66,11 +66,11 @@ $.ajaxPrefilter(function(xhr) {
     const token = localStorage.getItem('token')
 
     Object.assign(xhr, {
-        url: `api/${xhr.urlPath}`,
+        url: `/api/${xhr.urlPath}`,
         headers: {
             Authorization : token
         },
-        timeout: 1000,
+        timeout: 2000,
         contentType: 'application/json; charset=utf-8',
         dataType: 'json',
         processData: false,
@@ -97,10 +97,17 @@ $.ajaxPrefilter(function(xhr) {
                     mensaje = 'Ajax request aborted';
                     break;
                 case 'error':
+                    if (xhr?.responseJSON?.error?.name == 'UserError') {
+                        mensaje = xhr.responseJSON.error.message;
+                        break;
+                    }
                     switch (xhr.status){
                         case 0:
                             mensaje = 'Not connect: Verify Network';
                             break;
+                        case 504:
+                            mensaje = 'No se ha podido conectar con Salix, consulta con informática';
+                            break;
                         case 555:
                             mensaje = JSON.parse(xhr.statusText).Message;
                             break;

proxy.js

@@ -3,16 +3,23 @@ const dotenv = require('dotenv');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 const app = express();
+const env = process.env;
 dotenv.config();
+
+if (!env.TARGET || !env.PORT) {
+    console.error(`[ERROR] The '.env' file is not configured`);
+    process.exit();
+}
+
 const apiProxy = createProxyMiddleware('/api', {
-  target: process.env.TARGET,
-  changeOrigin: true,
+    target: env.TARGET,
+    changeOrigin: true,
 });
 
 app.use('/api', apiProxy);
 app.use('/', express.static(__dirname));
 
-const port = process.env.PORT;
+const port = env.PORT;
 app.listen(port, () => {
-  console.log(`Server running on port: ${port}`);
+    console.log(`[SERVER] Running on port: ${port}`);
 });