Compare commits
10 Commits
ca19ab418b
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
3b347681ba | ||
|
|
972749cee2 | ||
|
|
bb424ce537 | ||
|
|
7ad00e45bb | ||
|
|
ef90a045e6 | ||
|
|
62b0833fdf | ||
|
|
2545ea538e | ||
|
|
5fca6467db | ||
|
|
12b032b859 | ||
|
|
9e3e170db5 |
13
.env
Normal file
13
.env
Normal file
@@ -0,0 +1,13 @@
|
||||
# Server Configuration
|
||||
PORT=3001
|
||||
|
||||
# Database Configuration
|
||||
DB_HOST=192.168.10.150
|
||||
DB_PORT=3306
|
||||
DB_USER=admin
|
||||
DB_PASSWORD='Dx.1706%'
|
||||
DB_NAME=TELCOTRONICS
|
||||
|
||||
# Security / Session
|
||||
SESSION_SECRET='Microbot%'
|
||||
JWT_SECRET='Microbot&'
|
||||
13
.env.example
Normal file
13
.env.example
Normal file
@@ -0,0 +1,13 @@
|
||||
# Server Configuration
|
||||
PORT=3001
|
||||
|
||||
# Database Configuration
|
||||
DB_HOST=
|
||||
DB_PORT=3306
|
||||
DB_USER=
|
||||
DB_PASSWORD=
|
||||
DB_NAME=
|
||||
|
||||
# Security / Session
|
||||
SESSION_SECRET=
|
||||
JWT_SECRET=
|
||||
10
README.md
10
README.md
@@ -6,7 +6,7 @@
|
||||
|
||||
### Modulos Requeridos para el funcionamiento
|
||||
ejs
|
||||
mysql : se cambiara a mysql2
|
||||
mysql2
|
||||
express-myconnection
|
||||
express
|
||||
express-session: necesario para controlar las ssiones
|
||||
@@ -16,18 +16,16 @@ nodemon
|
||||
express-fileupload
|
||||
cors
|
||||
jsonwebtoken
|
||||
|
||||
npm install mysql2
|
||||
|
||||
|
||||
uuid
|
||||
|
||||
### recomendaciones previas
|
||||
npm install -s //-s para guardar los datos
|
||||
|
||||
|
||||
### instalacion de modulos
|
||||
Se recomienda usar `mysql2` en lugar de `mysql` por su soporte a Promises y mejor rendimiento.
|
||||
```bash
|
||||
npm install -s mysql express-myconnection express morgan telegraf nodemon ejs express-fileupload axios jsonwebtoken
|
||||
npm install -s mysql2 express-myconnection express morgan telegraf nodemon ejs express-fileupload axios jsonwebtoken cors express-session uuid
|
||||
```
|
||||
|
||||
### Modulo control de origenes
|
||||
|
||||
147
package-lock.json
generated
147
package-lock.json
generated
@@ -10,11 +10,14 @@
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.1",
|
||||
"ejs": "^3.0.2",
|
||||
"express": "^4.18.2",
|
||||
"express-fileupload": "^1.3.1",
|
||||
"express-myconnection": "^1.0.4",
|
||||
"express-session": "^1.17.3",
|
||||
"ffmpeg-static": "^5.2.0",
|
||||
"fluent-ffmpeg": "^2.1.3",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"morgan": "^1.10.0",
|
||||
"mysql": "^2.18.1",
|
||||
@@ -145,6 +148,20 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@derhuerst/http-basic": {
|
||||
"version": "8.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@derhuerst/http-basic/-/http-basic-8.2.4.tgz",
|
||||
"integrity": "sha512-F9rL9k9Xjf5blCz8HsJRO4diy111cayL2vkY2XE4r4t3n0yPXVYy3KD3nJ1qbrSn9743UWSXH4IwuCa/HWlGFw==",
|
||||
"dependencies": {
|
||||
"caseless": "^0.12.0",
|
||||
"concat-stream": "^2.0.0",
|
||||
"http-response-object": "^3.0.1",
|
||||
"parse-cache-control": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
|
||||
@@ -379,7 +396,6 @@
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
|
||||
"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"debug": "4"
|
||||
},
|
||||
@@ -391,7 +407,6 @@
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
|
||||
"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
},
|
||||
@@ -407,8 +422,7 @@
|
||||
"node_modules/agent-base/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
@@ -744,6 +758,11 @@
|
||||
"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
|
||||
"integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
|
||||
},
|
||||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
|
||||
},
|
||||
"node_modules/busboy": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
|
||||
@@ -803,6 +822,11 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/caseless": {
|
||||
"version": "0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
|
||||
"integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
@@ -900,6 +924,33 @@
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
|
||||
},
|
||||
"node_modules/concat-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
|
||||
"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
|
||||
"engines": [
|
||||
"node >= 6.0"
|
||||
],
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"inherits": "^2.0.3",
|
||||
"readable-stream": "^3.0.2",
|
||||
"typedarray": "^0.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-stream/node_modules/readable-stream": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
"util-deprecate": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -1089,6 +1140,17 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv": {
|
||||
"version": "17.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.1.tgz",
|
||||
"integrity": "sha512-kQhDYKZecqnM0fCnzI5eIv5L4cAe/iRI+HqMbO/hbRdTAeXDG+M9FjipUxNfbARuEg4iHIbhnhs78BCHNbSxEQ==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://dotenvx.com"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
@@ -1441,6 +1503,21 @@
|
||||
"pend": "~1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ffmpeg-static": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ffmpeg-static/-/ffmpeg-static-5.2.0.tgz",
|
||||
"integrity": "sha512-WrM7kLW+do9HLr+H6tk7LzQ7kPqbAgLjdzNE32+u3Ff11gXt9Kkkd2nusGFrlWMIe+XaA97t+I8JS7sZIrvRgA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@derhuerst/http-basic": "^8.2.0",
|
||||
"env-paths": "^2.2.0",
|
||||
"https-proxy-agent": "^5.0.0",
|
||||
"progress": "^2.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/filelist": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
|
||||
@@ -1497,6 +1574,24 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/fluent-ffmpeg": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fluent-ffmpeg/-/fluent-ffmpeg-2.1.3.tgz",
|
||||
"integrity": "sha512-Be3narBNt2s6bsaqP6Jzq91heDgOEaDCJAXcE3qcma/EJBSy5FB4cvO31XBInuAuKBx8Kptf8dkhjK0IOru39Q==",
|
||||
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
|
||||
"dependencies": {
|
||||
"async": "^0.2.9",
|
||||
"which": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/fluent-ffmpeg/node_modules/async": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
|
||||
"integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@@ -1840,11 +1935,23 @@
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/http-response-object": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/http-response-object/-/http-response-object-3.0.2.tgz",
|
||||
"integrity": "sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==",
|
||||
"dependencies": {
|
||||
"@types/node": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/http-response-object/node_modules/@types/node": {
|
||||
"version": "10.17.60",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz",
|
||||
"integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw=="
|
||||
},
|
||||
"node_modules/https-proxy-agent": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
|
||||
"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"agent-base": "6",
|
||||
"debug": "4"
|
||||
@@ -1857,7 +1964,6 @@
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
|
||||
"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
},
|
||||
@@ -1873,8 +1979,7 @@
|
||||
"node_modules/https-proxy-agent/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
@@ -2071,6 +2176,11 @@
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
|
||||
},
|
||||
"node_modules/isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
|
||||
},
|
||||
"node_modules/jake": {
|
||||
"version": "10.9.1",
|
||||
"resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz",
|
||||
@@ -2815,6 +2925,11 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-cache-control": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
|
||||
"integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg=="
|
||||
},
|
||||
"node_modules/parse-json": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
|
||||
@@ -3968,6 +4083,11 @@
|
||||
"resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
|
||||
"integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg=="
|
||||
},
|
||||
"node_modules/typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
|
||||
},
|
||||
"node_modules/typegram": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/typegram/-/typegram-3.12.0.tgz",
|
||||
@@ -4068,6 +4188,17 @@
|
||||
"webidl-conversions": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
|
||||
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
|
||||
"dependencies": {
|
||||
"isexe": "^2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"which": "bin/which"
|
||||
}
|
||||
},
|
||||
"node_modules/wrap-ansi": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
|
||||
@@ -19,11 +19,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.1",
|
||||
"ejs": "^3.0.2",
|
||||
"express": "^4.18.2",
|
||||
"express-fileupload": "^1.3.1",
|
||||
"express-myconnection": "^1.0.4",
|
||||
"express-session": "^1.17.3",
|
||||
"ffmpeg-static": "^5.2.0",
|
||||
"fluent-ffmpeg": "^2.1.3",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"morgan": "^1.10.0",
|
||||
"mysql": "^2.18.1",
|
||||
|
||||
@@ -7,6 +7,9 @@ const cloud_file = require('express-fileupload');
|
||||
const myConecction = require('express-myconnection');
|
||||
const cors_origins = require('cors');
|
||||
|
||||
// Cargar variables de entorno desde el archivo .env
|
||||
require('dotenv').config();
|
||||
|
||||
//inicio de sessiones
|
||||
const session = require('express-session');
|
||||
//const jwt = require('jwt');
|
||||
@@ -25,6 +28,7 @@ const cloud_rutas = require('./rutas/rt_cloud');
|
||||
const app_restaurant = require('./rutas/rt_apps');
|
||||
const app_arduino = require('./rutas/rt_arduino');
|
||||
const proyectos = require('./rutas/rt_proyectos');
|
||||
const apiV2Rutas = require('./rutas/rt_api_v2'); // NUEVA RUTA
|
||||
|
||||
//configuraciones
|
||||
app.set('port',process.env.PORT||puerto);
|
||||
@@ -43,6 +47,10 @@ app.use(session({
|
||||
resave: false,//no se guarde cada vez que se hace un cambio
|
||||
saveUninitialized: true,//guardar sesion aunque no haya datos
|
||||
cookie: { secure: global.config.sessionStorage.cookie }//true solo se envia por https
|
||||
// FIX: La cookie de sesión debe ser segura en producción.
|
||||
// Se establece dinámicamente en 'true' si el entorno es 'production'.
|
||||
// Esto requiere que la app en producción se sirva sobre HTTPS.
|
||||
//cookie: { secure: process.env.NODE_ENV === 'production' }
|
||||
}));
|
||||
|
||||
//middlewares
|
||||
@@ -76,6 +84,7 @@ app.use('/', cloud_rutas);
|
||||
app.use('/', app_restaurant);
|
||||
app.use('/', app_arduino);
|
||||
app.use('/', proyectos);
|
||||
app.use('/', apiV2Rutas); // AÑADIR NUEVA RUTA
|
||||
|
||||
//prueba de json directa
|
||||
app.get('/pruebaJson',function(req,res){
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
const path = require('path');
|
||||
|
||||
const config = {
|
||||
db:{
|
||||
host: '192.168.10.150',
|
||||
port: 3306,
|
||||
user: 'admin',
|
||||
pswd: 'Dx.1706%',
|
||||
db_a: 'TELCOTRONICS',
|
||||
host: process.env.DB_HOST || '192.168.10.150',
|
||||
port: process.env.DB_PORT || 3306,
|
||||
user: process.env.DB_USER || 'admin',
|
||||
pswd: process.env.DB_PASSWORD || 'Dx.1706%',
|
||||
db_a: process.env.DB_NAME || 'TELCOTRONICS',
|
||||
debg: false,
|
||||
sock: '/'
|
||||
},
|
||||
dir:{
|
||||
root_dir: '/home/pablinux/Projects/Node/APP-SIGMA-WEB/src/public/files/',
|
||||
path_dir: process.cwd(), // usa el path del ejecutable real
|
||||
//root_dir: '/home/pablinux/Projects/Node/APP-SIGMA-WEB/src/public/files/',
|
||||
//path_dir: process.cwd(), // usa el path del ejecutable real
|
||||
path_dir: path.join(__dirname, 'public', 'files'),
|
||||
},
|
||||
sesion:{
|
||||
id:"",
|
||||
@@ -20,7 +23,7 @@ const config = {
|
||||
role:"",
|
||||
},
|
||||
sessionStorage:{
|
||||
secretSession: "Microbot%",
|
||||
secretSession: process.env.SESSION_SECRET || "Microbot%",
|
||||
cookie: false // CORREGIDO
|
||||
},
|
||||
origin:{
|
||||
@@ -28,10 +31,10 @@ const config = {
|
||||
any:{},
|
||||
},
|
||||
secret:{
|
||||
key:"Microbot&"
|
||||
key: process.env.JWT_SECRET || "Microbot&"
|
||||
},
|
||||
server:{
|
||||
port:3001
|
||||
port: process.env.PORT || 3001
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
const controlador = {};
|
||||
|
||||
|
||||
|
||||
controlador.app_restaurant = (req, res) => {
|
||||
res.render('app_restaurant');
|
||||
};
|
||||
@@ -30,15 +32,8 @@ controlador.speedtest = (req, res) => {
|
||||
res.render('test_velocidad')
|
||||
};
|
||||
|
||||
//videos de ayuda sigma
|
||||
controlador.videos = (req, res) => {
|
||||
//res.render('speedtest');
|
||||
res.render('videos')
|
||||
};
|
||||
controlador.upload = (req, res) => {
|
||||
//res.render('speedtest');
|
||||
res.render('video_upload')
|
||||
};
|
||||
|
||||
|
||||
|
||||
/** aqui iniciamo la vista de ejs **/
|
||||
controlador.config = (req, res) => {
|
||||
|
||||
@@ -176,7 +176,7 @@ controlador.app_pedidos_clientes = (req, res) => {
|
||||
/**
|
||||
* @function consulta_clientesApps
|
||||
* @description Consulta clientes por nombre, RUC o cédula para el autocomplete en aplicaciones.
|
||||
* Espera un parámetro de consulta en la URL: /consultaClientesJson?consulta=dato
|
||||
* Espera un parámetro de consulta en la URL: /consulta_clientesApps?consulta=dato
|
||||
* Donde 'dato' puede ser parte del nombre, RUC o cédula.
|
||||
* @param {Object} req - Objeto de solicitud de Express (req.query.consulta).
|
||||
* @param {Object} res - Objeto de respuesta de Express.
|
||||
@@ -205,7 +205,7 @@ controlador.consulta_clientesApps = (req, res) => { // Nombre de la función cam
|
||||
FROM
|
||||
clientes
|
||||
WHERE
|
||||
client_nombre LIKE %?% OR client_rucCed LIKE %?%
|
||||
client_nombre LIKE ? OR client_rucCed LIKE ?
|
||||
LIMIT 10;
|
||||
`;
|
||||
|
||||
@@ -379,5 +379,133 @@ controlador.api_consultaCliente = (req, res) => {
|
||||
}
|
||||
}*/
|
||||
|
||||
/*** API CLIENTES ***/
|
||||
// --- FUNCIONES DE CONTROLADOR PARA API RESTful (basadas en client_rucCed) ---
|
||||
|
||||
/**
|
||||
* @description Obtiene un cliente por su RUC/Cédula y devuelve los datos en formato JSON.
|
||||
* Usado por EditarCliente.vue para cargar los datos.
|
||||
* Ruta: GET /api/clientes/:client_rucCed
|
||||
*/
|
||||
controlador.obtenerClienteJsonPorId = (req, res) => {
|
||||
// CAMBIO: Ahora se espera client_rucCed en los parámetros
|
||||
const { client_rucCed } = req.params;
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error('Error al obtener conexión para obtener cliente JSON (por RUC/Cédula):', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al obtener conexión.' });
|
||||
}
|
||||
// CAMBIO: La consulta ahora busca por `client_rucCed`
|
||||
conn.query('SELECT client_id, client_nombre, client_rucCed, client_direccion, client_celular, client_email, client_fechaReg, client_estado FROM clientes WHERE client_rucCed = ?', [client_rucCed], (err, rows) => {
|
||||
if (err) {
|
||||
console.error('Error al consultar cliente por RUC/Cédula (JSON):', err);
|
||||
return res.status(500).json({ mensaje: 'Error al consultar cliente.', error: err.message });
|
||||
}
|
||||
if (rows.length > 0) {
|
||||
res.json(rows[0]); // Devuelve el objeto cliente directamente
|
||||
} else {
|
||||
res.status(404).json({ mensaje: 'Cliente no encontrado con ese RUC/Cédula.' });
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Crea un nuevo cliente y devuelve una respuesta JSON.
|
||||
* Usado por NuevoCliente.vue.
|
||||
* Ruta: POST /api/clientes
|
||||
*/
|
||||
controlador.crearClienteJson = (req, res) => {
|
||||
const data = req.body;
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error('Error al obtener conexión para crear cliente JSON:', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al obtener conexión.' });
|
||||
}
|
||||
conn.query('INSERT INTO clientes SET ?', [data], (err, result) => {
|
||||
if (err) {
|
||||
console.error('Error al insertar nuevo cliente (JSON):', err);
|
||||
return res.status(500).json({ mensaje: 'Error al guardar el cliente.', error: err.message });
|
||||
}
|
||||
res.status(201).json({ mensaje: 'Cliente guardado exitosamente.', id: result.insertId });
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Actualiza un cliente existente y devuelve una respuesta JSON.
|
||||
* Usado por EditarCliente.vue para enviar los cambios.
|
||||
* Ruta: PUT /api/clientes/:client_rucCed
|
||||
*/
|
||||
controlador.actualizarClienteJson = (req, res) => {
|
||||
// CAMBIO: Ahora se espera client_rucCed en los parámetros
|
||||
const { client_rucCed } = req.params;
|
||||
const nCliente = req.body;
|
||||
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error('Error al obtener conexión para actualizar cliente JSON (por RUC/Cédula):', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al obtener conexión.' });
|
||||
}
|
||||
// CAMBIO: La actualización se realiza buscando por `client_rucCed`
|
||||
conn.query('UPDATE clientes SET ? WHERE client_rucCed = ?', [nCliente, client_rucCed], (err, result) => {
|
||||
if (err) {
|
||||
console.error('Error al actualizar cliente por RUC/Cédula (JSON):', err);
|
||||
return res.status(500).json({ mensaje: 'Error al actualizar el cliente.', error: err.message });
|
||||
}
|
||||
if (result.affectedRows === 0) {
|
||||
return res.status(404).json({ mensaje: 'Cliente no encontrado para actualizar con ese RUC/Cédula.' });
|
||||
}
|
||||
res.json({ mensaje: 'Cliente actualizado exitosamente.' });
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Elimina un cliente por su RUC/Cédula y devuelve una respuesta JSON.
|
||||
* Usado por ListaClientes.vue para la eliminación.
|
||||
* Ruta: DELETE /api/clientes/:client_rucCed
|
||||
*/
|
||||
controlador.eliminarClienteJson = (req, res) => {
|
||||
// CAMBIO: Ahora se espera client_rucCed en los parámetros
|
||||
const { client_rucCed } = req.params;
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error('Error al obtener conexión para eliminar cliente JSON (por RUC/Cédula):', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al obtener conexión.' });
|
||||
}
|
||||
// CAMBIO: La eliminación se realiza buscando por `client_rucCed`
|
||||
conn.query('DELETE FROM clientes WHERE client_rucCed = ?', [client_rucCed], (err, result) => {
|
||||
if (err) {
|
||||
console.error('Error al eliminar cliente por RUC/Cédula (JSON):', err);
|
||||
return res.status(500).json({ mensaje: 'Error al eliminar el cliente.', error: err.message });
|
||||
}
|
||||
if (result.affectedRows === 0) {
|
||||
return res.status(404).json({ mensaje: 'Cliente no encontrado para eliminar con ese RUC/Cédula.' });
|
||||
}
|
||||
res.json({ mensaje: 'Cliente eliminado exitosamente.' });
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// --- Funciones de consulta existentes (mantener) ---
|
||||
controlador.app_pedidos_clientes = (req, res) => {
|
||||
const consulta = `%${req.query.consulta}%`;
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
return res.status(500).json({ mensaje: 'Error de conexión', error: err.message });
|
||||
}
|
||||
// Incluir client_id en la selección
|
||||
conn.query(`SELECT client_id, client_rucCed,client_nombre,client_direccion,client_celular,client_email FROM clientes WHERE client_nombre like ? or client_rucCed like ? LIMIT 50`, [consulta, consulta], (err, rows) => {
|
||||
if (err) {
|
||||
console.error('Error en app_pedidos_clientes:', err);
|
||||
return res.status(500).json({ mensaje: 'Error al consultar clientes.', error: err.message });
|
||||
}
|
||||
res.json(rows);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
module.exports = controlador;
|
||||
|
||||
@@ -4,6 +4,7 @@ const jwt = require('jsonwebtoken');
|
||||
const config = require('../config');
|
||||
const { base64encode, base64decode } = require('nodejs-base64');
|
||||
const { v4: uuidv4 } = require('uuid');
|
||||
const { stringTo_md5 } = require('../scripts/helpers');
|
||||
|
||||
controlador.verVentasJson = (req, res) => {
|
||||
req.getConnection((err, conn) => {
|
||||
@@ -65,12 +66,6 @@ controlador.auth = (req, res) => {
|
||||
|
||||
//res.render('');
|
||||
};
|
||||
function stringTo_md5(data_string) {
|
||||
var crypto = require('crypto');
|
||||
const md5 = crypto.createHash('md5').update(data_string).digest('hex');
|
||||
console.log("MD5: ", md5);
|
||||
return md5;
|
||||
}
|
||||
async function keygen(conection) {
|
||||
var key = "";
|
||||
await conection.query(`SELECT * FROM empresa_datos`, (err, rows) => {
|
||||
|
||||
@@ -183,7 +183,7 @@ controlador.app_consultaItemsPrecios = (req, res) => {
|
||||
precio,
|
||||
img as imagen
|
||||
FROM ver_inventario_precios_app
|
||||
where grupo_precio = ? and (nombre like ? or descripcion like ?)`
|
||||
where grupo_precio = ? and (nombre like ? or descripcion like ?) LIMIT 30`
|
||||
, [grupo, item, item], (err, rows) => {
|
||||
//res.json(rows);
|
||||
//if(err) return res.status(500).send("Error en Consulta de Items");
|
||||
@@ -268,7 +268,7 @@ controlador.item_xCat = (req, res) => {
|
||||
};
|
||||
|
||||
controlador.app_itemsTab = (req, res) => {
|
||||
var items="";
|
||||
var items = "";
|
||||
var btnAdd = `
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
@@ -292,18 +292,18 @@ controlador.app_itemsTab = (req, res) => {
|
||||
try {
|
||||
if (rows.length > 0) {
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
items += `<tr>
|
||||
items += `<tr>
|
||||
<td class="text-center">${rows[i].codigoProducto}</td>
|
||||
<td class="text-center">${rows[i].cant_pdcto}</td>
|
||||
<td class="text-center">${rows[i].descipcion}</td>
|
||||
<td class="text-center">${rows[i].costo}</td>
|
||||
<td class="text-center">${(rows[i].cant_pdcto*rows[i].costo)}</td>
|
||||
<td class="text-center">${(rows[i].cant_pdcto * rows[i].costo)}</td>
|
||||
<td class="text-right"><a href="#" onclick="eliminar_item('${rows[i].codigoProducto}')"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAeFBMVEUAAADnTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDx+VWpeAAAAJ3RSTlMAAQIFCAkPERQYGi40TVRVVlhZaHR8g4WPl5qdtb7Hys7R19rr7e97kMnEAAAAaklEQVQYV7XOSQKCMBQE0UpQwfkrSJwCKmDf/4YuVOIF7F29VQOA897xs50k1aknmnmfPRfvWptdBjOz29Vs46B6aFx/cEBIEAEIamhWc3EcIRKXhQj/hX47nGvt7x8o07ETANP2210OvABwcxH233o1TgAAAABJRU5ErkJggg=="></a></td>
|
||||
</tr>`;
|
||||
console.log(rows[0].codigoProducto);
|
||||
console.log(rows[0].codigoProducto);
|
||||
}
|
||||
|
||||
res.send(items+btnAdd+detalle);
|
||||
|
||||
res.send(items + btnAdd + detalle);
|
||||
} else {
|
||||
res.json({ auth: false, message: 'Unauthorized' });
|
||||
}
|
||||
@@ -314,21 +314,21 @@ controlador.app_itemsTab = (req, res) => {
|
||||
});
|
||||
};
|
||||
|
||||
// --- Nueva Función para Productos Ensamblados ---
|
||||
// --- Nueva Función para Productos Ensamblados ---
|
||||
|
||||
/**
|
||||
* @function listarProductosEnsamblados
|
||||
* @description Lista todos los productos ensamblados disponibles.
|
||||
* @param {Object} req - Objeto de solicitud de Express.
|
||||
* @param {Object} res - Objeto de respuesta de Express.
|
||||
*/
|
||||
controlador.listarProductosEnsamblados = (req, res) => {
|
||||
req.getConnection((err, connection) => {
|
||||
if (err) {
|
||||
console.error('Error al obtener conexión para listar productos ensamblados:', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al obtener conexión', error: err.message });
|
||||
}
|
||||
connection.query(`
|
||||
/**
|
||||
* @function listarProductosEnsamblados
|
||||
* @description Lista todos los productos ensamblados disponibles.
|
||||
* @param {Object} req - Objeto de solicitud de Express.
|
||||
* @param {Object} res - Objeto de respuesta de Express.
|
||||
*/
|
||||
controlador.listarProductosEnsamblados = (req, res) => {
|
||||
req.getConnection((err, connection) => {
|
||||
if (err) {
|
||||
console.error('Error al obtener conexión para listar productos ensamblados:', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al obtener conexión', error: err.message });
|
||||
}
|
||||
connection.query(`
|
||||
SELECT
|
||||
PdctEnsb_ID,
|
||||
PdctEnsb_codigoEnsamble,
|
||||
@@ -338,13 +338,25 @@ controlador.app_itemsTab = (req, res) => {
|
||||
FROM
|
||||
productos_Ensamblados
|
||||
`, (err, rows) => {
|
||||
if (err) {
|
||||
console.error('Error al listar productos ensamblados:', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al listar productos ensamblados', error: err.message });
|
||||
}
|
||||
res.json(rows);
|
||||
});
|
||||
});
|
||||
}
|
||||
if (err) {
|
||||
console.error('Error al listar productos ensamblados:', err);
|
||||
return res.status(500).json({ mensaje: 'Error interno del servidor al listar productos ensamblados', error: err.message });
|
||||
}
|
||||
res.json(rows);
|
||||
});
|
||||
});
|
||||
}
|
||||
controlador.pedido_detalle = (req, res) => {
|
||||
const idPedido = req.params.id_pedido;
|
||||
req.getConnection((err, conn) => {
|
||||
conn.query('SELECT * FROM ver_detallePedidos WHERE idPedido = ?', [idPedido], (err, rows) => {
|
||||
if (err) {
|
||||
return res.status(500).json({ error: 'Error al obtener el detalle del pedido' });
|
||||
}
|
||||
rows.forEach(dat => { dat.img = blob_a_b64(dat.img); });
|
||||
res.json(rows);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = controlador;
|
||||
|
||||
61
src/controladores/controlador_api_v2.js
Normal file
61
src/controladores/controlador_api_v2.js
Normal file
@@ -0,0 +1,61 @@
|
||||
const controlador = {};
|
||||
|
||||
/**
|
||||
* @description Busca clientes y verifica su estado de membresía.
|
||||
* Busca por nombre o RUC/cédula.
|
||||
* Si el cliente es miembro, añade información sobre su estado y si tiene valores vencidos.
|
||||
* Ruta: GET /api/v2/search-client-member-status
|
||||
*/
|
||||
controlador.searchClientMemberStatus = (req, res) => {
|
||||
const { query } = req.query;
|
||||
|
||||
if (!query || query.length < 2) {
|
||||
return res.status(400).json({ error: 'Se requiere un término de búsqueda de al menos 2 caracteres.' });
|
||||
}
|
||||
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error("Error de conexión a la BD:", err);
|
||||
return res.status(500).json({ error: 'Error interno del servidor.' });
|
||||
}
|
||||
|
||||
// Paso 1: Buscar clientes que coincidan con el término de búsqueda.
|
||||
const clientSql = `
|
||||
SELECT
|
||||
c.client_id,
|
||||
c.client_nombre,
|
||||
c.client_rucCed
|
||||
FROM clientes c
|
||||
WHERE c.client_nombre LIKE ? OR c.client_rucCed LIKE ?
|
||||
LIMIT 10
|
||||
`;
|
||||
const searchTerm = `%${query}%`;
|
||||
|
||||
conn.query(clientSql, [searchTerm, searchTerm], (err, clients) => {
|
||||
if (err) {
|
||||
console.error("Error en la búsqueda de clientes:", err);
|
||||
return res.status(500).json({ error: 'Error al buscar clientes.' });
|
||||
}
|
||||
|
||||
// Paso 2: Para cada cliente, verificar si es miembro y su estado.
|
||||
const promises = clients.map(client => new Promise((resolve, reject) => {
|
||||
const memberSql = `SELECT estado, fecha_fin FROM clientes_miembros WHERE client_id = ? ORDER BY fecha_fin DESC LIMIT 1`;
|
||||
conn.query(memberSql, [client.client_id], (err, memberStatus) => {
|
||||
if (err) return reject(err);
|
||||
const isMember = memberStatus.length > 0;
|
||||
const hasOverdue = isMember && (memberStatus[0].estado === 'VENCIDO' || new Date(memberStatus[0].fecha_fin) < new Date());
|
||||
resolve({ ...client, isMember, hasOverdue, memberStatus: isMember ? memberStatus[0].estado : null });
|
||||
});
|
||||
}));
|
||||
|
||||
Promise.all(promises)
|
||||
.then(results => res.status(200).json(results))
|
||||
.catch(error => {
|
||||
console.error("Error verificando estado de miembros:", error);
|
||||
res.status(500).json({ error: 'Error al verificar estado de miembros.' });
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = controlador;
|
||||
39
src/controladores/controlador_clientes_api.js
Normal file
39
src/controladores/controlador_clientes_api.js
Normal file
@@ -0,0 +1,39 @@
|
||||
const controlador = {};
|
||||
|
||||
/**
|
||||
* @description Consulta de clientes optimizada para la nueva app de pedidos (v2).
|
||||
* Devuelve los campos necesarios para el modal de búsqueda de clientes.
|
||||
* @param {Object} req - Objeto de solicitud de Express (req.query.consulta).
|
||||
* @param {Object} res - Objeto de respuesta de Express.
|
||||
*/
|
||||
controlador.getClientesForV2 = (req, res) => {
|
||||
const consulta = "%" + (req.query.consulta || '') + "%";
|
||||
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error("Error al obtener conexión para getClientesForV2:", err);
|
||||
return res.status(500).json({ message: "Error de conexión con la base de datos." });
|
||||
}
|
||||
|
||||
// Usamos una consulta similar a las existentes, pero seleccionando solo los campos necesarios
|
||||
const sql = `
|
||||
SELECT
|
||||
client_id,
|
||||
client_nombre,
|
||||
client_rucCed
|
||||
FROM clientes
|
||||
WHERE client_nombre LIKE ? OR client_rucCed LIKE ?
|
||||
LIMIT 50;
|
||||
`;
|
||||
|
||||
conn.query(sql, [consulta, consulta], (err, rows) => {
|
||||
if (err) {
|
||||
console.error("Error en la consulta getClientesForV2:", err);
|
||||
return res.status(500).json({ message: "Error en la consulta de clientes." });
|
||||
}
|
||||
res.json(rows); // Devolvemos el array directamente
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = controlador;
|
||||
@@ -2,21 +2,26 @@ const controlador = {};
|
||||
//const dirPath = "/home/pablinux/Projects/Node/APP-SIGMA-WEB/src/public/files/";
|
||||
//const var_locals = ;
|
||||
//********* APP-panel control ********//
|
||||
const { stringTo_md5 } = require('../scripts/helpers');
|
||||
const path = require('path');
|
||||
controlador.upload = (req, res) => {
|
||||
if (!req.files || Object.keys(req.files).lenght === 0) {
|
||||
return res.status(400).send({ message: 'archivos no cargados' });
|
||||
if (!req.files || Object.keys(req.files).length === 0) {
|
||||
return res.status(400).json({ status: 'error', message: 'Archivos no cargados' });
|
||||
} else {
|
||||
const file = req.files.file_toUpload;
|
||||
const path = req.app.locals.dir.path_dir + '/public/files/' + file.name;
|
||||
console.log(path);
|
||||
file.mv(path, (err) => {
|
||||
const destinationPath = path.join(req.app.locals.dir.path_dir, file.name);
|
||||
|
||||
file.mv(destinationPath, (err) => {
|
||||
if (err) {
|
||||
return res.status(500).send(err);
|
||||
console.error("Error al mover el archivo:", err);
|
||||
return res.status(500).json({ status: 'error', message: 'Error al subir el archivo', error: err.message });
|
||||
}
|
||||
return res.send({ status: "success", path: path });
|
||||
// *** Mantener la respuesta JSON ***
|
||||
return res.json({ status: "success", message: `Archivo '${file.name}' subido exitosamente.` });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
controlador.upload_video = (req, res) => {
|
||||
if (!req.files || Object.keys(req.files).lenght === 0) {
|
||||
return res.status(400).send({ message: 'archivos no cargados' });
|
||||
@@ -34,18 +39,16 @@ controlador.upload_video = (req, res) => {
|
||||
};
|
||||
|
||||
//ruta actual
|
||||
const procesarPath = (path) => {
|
||||
return path ? path.replace(/-/g, '/') : '/';
|
||||
}
|
||||
|
||||
const fs = require('fs');
|
||||
const fs = require('fs'); // Asegúrate de que esta línea esté al principio del archivo si no lo está
|
||||
function leer_dir(dir) {
|
||||
var json = [];
|
||||
var files = fs.readdirSync(dir + '/public/files/', { withFileTypes: true });
|
||||
// ¡CORRECCIÓN AQUÍ! Usa 'dir' directamente, sin añadir '/public/files/'
|
||||
var files = fs.readdirSync(dir, { withFileTypes: true });
|
||||
|
||||
files.forEach(function (arch, idx) {
|
||||
json.push({ "indice": idx, "archivo": arch.name, "link": "files/" + arch });
|
||||
//console.log(arch.name);
|
||||
//console.log(req);
|
||||
// Si el link para la interfaz web debe ser relativo a 'files/', esto es correcto.
|
||||
json.push({ "indice": idx, "archivo": arch.name, "link": "files/" + arch.name });
|
||||
// Nota: 'arch' es un objeto dirent, necesitas 'arch.name' para el nombre del archivo.
|
||||
});
|
||||
return json;
|
||||
}
|
||||
@@ -58,7 +61,7 @@ controlador.login_cloud = (req, res) => {
|
||||
};
|
||||
//ojo la var locals esta en req
|
||||
//ejmp: req.app.locals
|
||||
controlador.cloud_panel = (req, res) => {
|
||||
controlador.cloud_panel = (req, res, next) => {
|
||||
console.log(req.body);
|
||||
var pwd = stringTo_md5(req.body.password);
|
||||
req.getConnection((err, conn) => {
|
||||
@@ -69,8 +72,8 @@ controlador.cloud_panel = (req, res) => {
|
||||
} else {
|
||||
try {
|
||||
if (rows.length > 0) {
|
||||
let dir = procesarPath(req.params.path);
|
||||
console.log(req.app.locals.dir);
|
||||
//let dir = procesarPath(req.params.path);
|
||||
//console.log(req.app.locals.dir);
|
||||
var files = leer_dir(req.app.locals.dir.path_dir);
|
||||
res.render('cloud', {
|
||||
data: files
|
||||
@@ -78,26 +81,16 @@ controlador.cloud_panel = (req, res) => {
|
||||
|
||||
console.log(rows);
|
||||
//res.render('app_pedidos');
|
||||
}else { // Agrega un else para cuando no hay resultados en la consulta
|
||||
res.render('login_cloud', { msg: "Usuario o contraseña incorrectos." });
|
||||
}
|
||||
} catch (e) {
|
||||
res.render('login_cloud',{msg:e.toString()});
|
||||
next();
|
||||
next(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
function stringTo_md5(data_string){
|
||||
var crypto = require('crypto');
|
||||
const md5 = crypto.createHash('md5').update(data_string).digest('hex');
|
||||
console.log("MD5: ", md5);
|
||||
return md5;
|
||||
}
|
||||
function token(data_string){
|
||||
var crypto = require('crypto');
|
||||
const md5 = crypto.createHash('md5').update(data_string).digest('hex');
|
||||
//console.log("MD5: ", md5);
|
||||
return md5;
|
||||
}
|
||||
module.exports = controlador;
|
||||
|
||||
50
src/controladores/controlador_items_api.js
Normal file
50
src/controladores/controlador_items_api.js
Normal file
@@ -0,0 +1,50 @@
|
||||
const controlador = {};
|
||||
|
||||
function blob_a_b64(blob) {
|
||||
if (blob != null) {
|
||||
return blob.toString('base64');
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Consulta de items optimizada para la nueva app de pedidos (v2).
|
||||
* Devuelve todos los campos necesarios para la UI, incluyendo idt_prdcto.
|
||||
* @param {Object} req - Objeto de solicitud de Express (req.query.consulta, req.query.gp_precio).
|
||||
* @param {Object} res - Objeto de respuesta de Express.
|
||||
*/
|
||||
controlador.getItemsForV2 = (req, res) => {
|
||||
const item = "%" + (req.query.consulta || '') + "%";
|
||||
const grupo = req.query.gp_precio || 'PUBLICO';
|
||||
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error("Error al obtener conexión para getItemsForV2:", err);
|
||||
return res.status(500).json({ message: "Error de conexión con la base de datos." });
|
||||
}
|
||||
|
||||
const sql = `
|
||||
SELECT
|
||||
idt_prdcto,
|
||||
codigo as codigo_prdcto,
|
||||
nombre as detalle_prdcto,
|
||||
descripcion as describe_prdcto,
|
||||
precio as precio_vta,
|
||||
img as url_img
|
||||
FROM ver_inventario_precios_app
|
||||
WHERE grupo_precio = ? AND (nombre LIKE ? OR codigo LIKE ?)
|
||||
LIMIT 100;
|
||||
`;
|
||||
|
||||
conn.query(sql, [grupo, item, item], (err, rows) => {
|
||||
if (err) {
|
||||
console.error("Error en la consulta getItemsForV2:", err);
|
||||
return res.status(500).json({ message: "Error en la consulta de ítems." });
|
||||
}
|
||||
rows.forEach(dat => { dat.url_img = blob_a_b64(dat.url_img); });
|
||||
res.json(rows);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = controlador;
|
||||
85
src/controladores/controlador_pedidos_api.js
Normal file
85
src/controladores/controlador_pedidos_api.js
Normal file
@@ -0,0 +1,85 @@
|
||||
const controlador = {};
|
||||
|
||||
/**
|
||||
* @description Obtiene la fecha y hora actual en formato para la BD (YYYY-MM-DD HH:MM:SS).
|
||||
* @returns {string} La fecha y hora formateada.
|
||||
*/
|
||||
const reg_DB = () => {
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(today.getDate()).padStart(2, '0');
|
||||
const hora = `${String(today.getHours()).padStart(2, '0')}:${String(today.getMinutes()).padStart(2, '0')}:${String(today.getSeconds()).padStart(2, '0')}`;
|
||||
return `${year}-${month}-${day} ${hora}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Crea un nuevo pedido (cabecera y detalle) de forma transaccional.
|
||||
* Espera un cuerpo JSON con la estructura del pedido.
|
||||
* Ruta: POST /api/v2/pedidos
|
||||
*/
|
||||
controlador.crearPedido = async (req, res) => {
|
||||
const pedidoData = req.body;
|
||||
|
||||
// Validación básica del payload
|
||||
if (!pedidoData || !pedidoData.clienteId || !Array.isArray(pedidoData.items) || pedidoData.items.length === 0) {
|
||||
return res.status(400).json({ message: "Datos del pedido incompletos o inválidos." });
|
||||
}
|
||||
|
||||
let conn;
|
||||
try {
|
||||
// Obtener una conexión del pool y usar su versión de promesas
|
||||
req.getConnection(async (err, connection) => {
|
||||
if (err) {
|
||||
console.error("Error al obtener conexión de la BD:", err);
|
||||
return res.status(500).json({ message: "Error de conexión con la base de datos." });
|
||||
}
|
||||
conn = connection;
|
||||
const promiseConn = conn.promise();
|
||||
|
||||
await promiseConn.beginTransaction();
|
||||
|
||||
// 1. Insertar la cabecera del pedido
|
||||
const cabeceraPedido = {
|
||||
PedUsoPrdct_Num: "1", // O un número de secuencia si lo tienes
|
||||
PedUsoPrdct_idClient: pedidoData.clienteId,
|
||||
PedUsoPrdct_reg: reg_DB(),
|
||||
PedUsoPrdct_estado: pedidoData.estado || 'ACTIVO',
|
||||
PedUsoPrdct_plataforma: pedidoData.plataforma || 'APP-SIGMA-WEB-V2',
|
||||
PedUsoPrdct_usuario: pedidoData.user || 'WebAppUser',
|
||||
PedUsoPrdct_valor: pedidoData.valor,
|
||||
PedUsoPrdct_iva: pedidoData.iva,
|
||||
PedUsoPrdct_origen: pedidoData.origen || 'WebApp'
|
||||
};
|
||||
|
||||
const [resultCabecera] = await promiseConn.query('INSERT INTO PedidoUsoProduct SET ?', [cabeceraPedido]);
|
||||
const idPedidoInsertado = resultCabecera.insertId;
|
||||
|
||||
if (!idPedidoInsertado) {
|
||||
throw new Error("No se pudo obtener el ID del pedido insertado.");
|
||||
}
|
||||
|
||||
// 2. Preparar y insertar el detalle del pedido
|
||||
const itemsParaInsertar = pedidoData.items.map(item => [
|
||||
idPedidoInsertado, item.cod, item.cant, item.precio,
|
||||
item.descuento || 0, 0, // IVA por item, 0 por ahora
|
||||
item.gp_precio || 'PUBLICO', item.topings || ''
|
||||
]);
|
||||
|
||||
const sqlDetalle = 'INSERT INTO PedidoUsoProduct_detalle (PedUsoPrdct_id, PedUsoPrdctDet_codigoProducto, PedUsoPrdct_cant, PedUsoPrdct_costo, PedUsoPrdct_desct, PedUsoPrdct_iva, PedUsoPrdct_gpPrecios, PedUsoPrdct_observacion) VALUES ?';
|
||||
await promiseConn.query(sqlDetalle, [itemsParaInsertar]);
|
||||
|
||||
// 3. Si todo fue bien, confirmar la transacción
|
||||
await promiseConn.commit();
|
||||
conn.release(); // Liberar la conexión
|
||||
|
||||
res.status(201).json({ id: idPedidoInsertado, message: "Pedido Ingresado Correctamente" });
|
||||
});
|
||||
} catch (error) {
|
||||
if (conn) await conn.promise().rollback(); // Revertir en caso de error
|
||||
console.error("Error al crear el pedido:", error);
|
||||
res.status(500).json({ message: "Error al procesar el pedido", error: error.message });
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = controlador;
|
||||
106
src/controladores/controlador_sincronizacion_docs.js
Normal file
106
src/controladores/controlador_sincronizacion_docs.js
Normal file
@@ -0,0 +1,106 @@
|
||||
// src/controladores/controlador_sincronizacion_docs.js
|
||||
const mysql = require('mysql2/promise'); // Usamos la versión con promesas para async/await
|
||||
|
||||
const controlador = {};
|
||||
|
||||
// Pool de conexión específico para la base de datos 'webControl'
|
||||
const poolWebControl = mysql.createPool({
|
||||
host: process.env.DB_WEBCTRL_HOST || '192.168.10.150', // Asumiendo variables de entorno
|
||||
user: process.env.DB_WEBCTRL_USER || 'admin',
|
||||
password: process.env.DB_WEBCTRL_PASSWORD || 'Dx.1706%',
|
||||
database: process.env.DB_WEBCTRL_NAME || 'webControl', // Nombre de la BD
|
||||
waitForConnections: true,
|
||||
connectionLimit: 10,
|
||||
queueLimit: 0
|
||||
});
|
||||
|
||||
/**
|
||||
* @description Crea un nuevo registro de documento electrónico.
|
||||
* Espera los datos del documento en el cuerpo de la solicitud.
|
||||
*/
|
||||
controlador.crearDocumento = async (req, res) => {
|
||||
const {
|
||||
tipo_documento,
|
||||
entidad_emisora,
|
||||
entidad_receptora,
|
||||
numero_autorizacion,
|
||||
fecha_registrada
|
||||
} = req.body;
|
||||
|
||||
if (!tipo_documento || !entidad_emisora || !entidad_receptora || !numero_autorizacion || !fecha_registrada) {
|
||||
return res.status(400).json({ error: 'Todos los campos son obligatorios: tipo_documento, entidad_emisora, entidad_receptora, numero_autorizacion, fecha_registrada.' });
|
||||
}
|
||||
|
||||
try {
|
||||
const sql = 'INSERT INTO ia_sincronizacion_documentos_electronicos SET ?';
|
||||
const nuevoDocumento = {
|
||||
tipo_documento,
|
||||
entidad_emisora,
|
||||
entidad_receptora,
|
||||
numero_autorizacion,
|
||||
fecha_registrada,
|
||||
estado_sincronizacion: 'pendiente' // Por defecto al crear
|
||||
};
|
||||
|
||||
const [result] = await poolWebControl.query(sql, nuevoDocumento);
|
||||
res.status(201).json({ message: 'Documento registrado para sincronización.', id: result.insertId });
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al insertar el documento:", error);
|
||||
if (error.code === 'ER_DUP_ENTRY') {
|
||||
return res.status(409).json({ error: `El documento con autorización '${numero_autorizacion}' ya existe.` });
|
||||
}
|
||||
return res.status(500).json({ error: 'Error al guardar el registro del documento.' });
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Obtiene una lista de documentos, con opción de filtrar por estado.
|
||||
*/
|
||||
controlador.listarDocumentos = async (req, res) => {
|
||||
const { estado } = req.query; // Filtrar por ej: /api/documentos-electronicos?estado=pendiente
|
||||
|
||||
try {
|
||||
let sql = 'SELECT * FROM ia_sincronizacion_documentos_electronicos';
|
||||
const params = [];
|
||||
|
||||
if (estado) {
|
||||
sql += ' WHERE estado_sincronizacion = ?';
|
||||
params.push(estado);
|
||||
}
|
||||
sql += ' ORDER BY fecha_registrada DESC';
|
||||
|
||||
const [rows] = await poolWebControl.query(sql, params);
|
||||
res.status(200).json(rows);
|
||||
} catch (error) {
|
||||
console.error("Error al consultar documentos:", error);
|
||||
return res.status(500).json({ error: 'Error al obtener los documentos.' });
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Actualiza el estado de un documento electrónico por su ID.
|
||||
*/
|
||||
controlador.actualizarEstadoDocumento = async (req, res) => {
|
||||
const { id } = req.params;
|
||||
const { estado_sincronizacion } = req.body;
|
||||
|
||||
if (!estado_sincronizacion || !['pendiente', 'procesado', 'error'].includes(estado_sincronizacion)) {
|
||||
return res.status(400).json({ error: "El campo 'estado_sincronizacion' es obligatorio y debe ser 'pendiente', 'procesado' o 'error'." });
|
||||
}
|
||||
|
||||
try {
|
||||
const sql = 'UPDATE ia_sincronizacion_documentos_electronicos SET estado_sincronizacion = ? WHERE id = ?';
|
||||
const [result] = await poolWebControl.query(sql, [estado_sincronizacion, id]);
|
||||
|
||||
if (result.affectedRows === 0) {
|
||||
return res.status(404).json({ error: `No se encontró ningún documento con el ID ${id}.` });
|
||||
}
|
||||
res.status(200).json({ message: 'Estado del documento actualizado correctamente.' });
|
||||
} catch (error) {
|
||||
console.error("Error al actualizar el estado:", error);
|
||||
return res.status(500).json({ error: 'Error al actualizar el estado del documento.' });
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = controlador;
|
||||
181
src/controladores/controlador_videos.js
Normal file
181
src/controladores/controlador_videos.js
Normal file
@@ -0,0 +1,181 @@
|
||||
controlador_videos = {};
|
||||
const path = require('path');
|
||||
const { v4: uuidv4 } = require('uuid');
|
||||
const fs = require('fs').promises;
|
||||
const ffmpeg = require('fluent-ffmpeg');
|
||||
ffmpeg.setFfmpegPath(require('ffmpeg-static'));
|
||||
|
||||
controlador_videos.video_v1 = async (req, res) => { // Función para mostrar la galería V1
|
||||
const videosDir = path.join(__dirname, '..', 'public', 'videos_v1');
|
||||
const thumbnailsDir = path.join(videosDir, 'thumbnails');
|
||||
|
||||
try {
|
||||
await fs.mkdir(thumbnailsDir, { recursive: true });
|
||||
|
||||
const allFiles = await fs.readdir(videosDir);
|
||||
const videoFiles = allFiles.filter(file => {
|
||||
try {
|
||||
// Asegurarse de que es un archivo y tiene una extensión de video
|
||||
return fs.statSync(path.join(videosDir, file)).isFile() && /\.(mp4|webm|ogg|mov)$/i.test(file);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
const videosData = await Promise.all(videoFiles.map(async (file) => { // Usar Promise.all para eficiencia
|
||||
const videoName = path.parse(file).name;
|
||||
const thumbnailUrl = `/videos_v1/thumbnails/${videoName}.png`;
|
||||
const thumbAbsolutePath = path.join(__dirname, '..', 'public', thumbnailUrl);
|
||||
|
||||
let finalThumbnailUrl = '/img/placeholder-video.png'; // Placeholder por defecto
|
||||
try {
|
||||
await fs.access(thumbAbsolutePath); // Comprobar si la miniatura existe
|
||||
finalThumbnailUrl = thumbnailUrl; // La miniatura existe
|
||||
} catch (e) {
|
||||
// La miniatura no existe, se usará el placeholder (no hacer nada, ya está asignado)
|
||||
}
|
||||
|
||||
return {
|
||||
name: videoName,
|
||||
videoUrl: `/videos_v1/${file}`,
|
||||
thumbnailUrl: finalThumbnailUrl
|
||||
};
|
||||
}));
|
||||
|
||||
res.render('video_v1', { videos: videosData, error: null }); // Renderizar con los datos
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al leer el directorio de videos V1:", error);
|
||||
res.render('video_v1', { videos: [], error: "No se pudieron cargar los videos." });
|
||||
}
|
||||
};
|
||||
|
||||
controlador_videos.upload_v1 = (req, res) => { // Muestra el formulario de subida V1 (GET)
|
||||
res.render('video_upload_v1')
|
||||
};
|
||||
|
||||
controlador_videos.uploadVideoV1 = async (req, res) => { // Procesa la subida del formulario V1 (POST)
|
||||
if (!req.files || !req.files.video) { // 'video' debe coincidir con el name del input file
|
||||
return res.status(400).json({ success: false, message: 'No se ha subido ningún archivo de video.' });
|
||||
}
|
||||
|
||||
const videoFile = req.files.video;
|
||||
const videosDir = path.join(__dirname, '..', 'public', 'videos_v1');
|
||||
const thumbnailsDir = path.join(videosDir, 'thumbnails');
|
||||
const videoAbsolutePath = path.join(videosDir, videoFile.name);
|
||||
|
||||
try {
|
||||
await fs.mkdir(thumbnailsDir, { recursive: true });
|
||||
await videoFile.mv(videoAbsolutePath);
|
||||
|
||||
// Generar miniatura usando FFmpeg
|
||||
await new Promise((resolve, reject) => {
|
||||
ffmpeg(videoAbsolutePath)
|
||||
.on('end', () => resolve())
|
||||
.on('error', (err) => reject(new Error(`Error al generar la miniatura: ${err.message}`)))
|
||||
.screenshots({
|
||||
count: 1,
|
||||
timemarks: ['1'], // Tomar captura en el segundo 1
|
||||
folder: thumbnailsDir,
|
||||
filename: `${path.parse(videoFile.name).name}.png`,
|
||||
size: '320x240'
|
||||
});
|
||||
});
|
||||
|
||||
res.json({ success: true, message: 'Video y miniatura subidos correctamente.' });
|
||||
} catch (error) {
|
||||
console.error("Error en la subida V1:", error);
|
||||
res.status(500).json({ success: false, message: error.message });
|
||||
}
|
||||
};
|
||||
|
||||
//videos de ayuda sigma
|
||||
controlador_videos.videos_v2 = (req, res) => { // Muestra la galería V2 (desde la BD)
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) {
|
||||
console.error("Error al obtener conexión para videos V2:", err);
|
||||
// Renderiza la página de error o una vista con un mensaje de error
|
||||
return res.status(500).render('videos_v2', { videos: [], error: "Error de conexión con la base de datos." });
|
||||
}
|
||||
|
||||
const query = "SELECT video_id, video_nombre, video_descripcion, video_path_url, video_origen FROM videos WHERE video_estado = 'ACTIVO' ORDER BY video_reg DESC";
|
||||
|
||||
conn.query(query, (err, videos) => {
|
||||
if (err) {
|
||||
console.error("Error al consultar videos V2:", err);
|
||||
return res.status(500).render('videos_v2', { videos: [], error: "Error al consultar los videos." });
|
||||
}
|
||||
res.render('videos_v2', { videos: videos, error: null });
|
||||
});
|
||||
});
|
||||
};
|
||||
controlador_videos.upload_v2 = (req, res) => {
|
||||
// Renderiza la vista correcta para la subida de videos V2
|
||||
res.render('videos_upload_v2')
|
||||
};
|
||||
|
||||
/** Helper para obtener la fecha y hora actual en formato para la BD */
|
||||
const reg_DB = () => {
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(today.getDate()).padStart(2, '0');
|
||||
const hora = `${String(today.getHours()).padStart(2, '0')}:${String(today.getMinutes()).padStart(2, '0')}:${String(today.getSeconds()).padStart(2, '0')}`;
|
||||
return `${year}-${month}-${day} ${hora}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* @function uploadVideo
|
||||
* @description Procesa la subida de un video, lo guarda en el servidor y registra en la BD.
|
||||
* @param {Object} req - Objeto de solicitud de Express.
|
||||
* @param {Object} res - Objeto de respuesta de Express.
|
||||
*/
|
||||
controlador_videos.uploadVideo = async (req, res) => {
|
||||
try {
|
||||
const { nombre, descripcion, origen } = req.body;
|
||||
const urlExterna = req.body.url;
|
||||
|
||||
if (!nombre || !descripcion || !origen) {
|
||||
return res.status(400).json({ success: false, message: 'Faltan campos obligatorios (nombre, descripción, origen).' });
|
||||
}
|
||||
|
||||
let videoPathUrl = '';
|
||||
let videoObservacion = '';
|
||||
|
||||
if (origen === 'Local') {
|
||||
if (!req.files || !req.files.archivo) {
|
||||
return res.status(400).json({ success: false, message: 'No se ha subido ningún archivo de video.' });
|
||||
}
|
||||
|
||||
const videoFile = req.files.archivo;
|
||||
const fileExtension = path.extname(videoFile.name);
|
||||
const newFileName = `${uuidv4()}${fileExtension}`;
|
||||
const uploadPath = path.join(__dirname, '..', 'public', 'videos', newFileName);
|
||||
|
||||
await videoFile.mv(uploadPath);
|
||||
videoPathUrl = `/videos/${newFileName}`; // Ruta pública para acceder al video
|
||||
videoObservacion = `Archivo local original: ${videoFile.name}`;
|
||||
} else {
|
||||
if (!urlExterna) {
|
||||
return res.status(400).json({ success: false, message: 'La URL del video es obligatoria para orígenes externos.' });
|
||||
}
|
||||
videoPathUrl = urlExterna;
|
||||
videoObservacion = `Video externo de ${origen}`;
|
||||
}
|
||||
|
||||
req.getConnection((err, conn) => {
|
||||
if (err) return res.status(500).json({ success: false, message: 'Error de conexión con la base de datos.' });
|
||||
|
||||
const nuevoVideo = { video_nombre: nombre, video_descripcion: descripcion, video_path_url: videoPathUrl, video_estado: 'ACTIVO', video_reg: reg_DB(), video_observacion: videoObservacion, video_origen: origen };
|
||||
conn.query('INSERT INTO videos SET ?', [nuevoVideo], (err, result) => {
|
||||
if (err) return res.status(500).json({ success: false, message: 'Error al registrar el video en la base de datos.' });
|
||||
res.status(201).json({ success: true, message: 'Video subido y registrado exitosamente.', videoId: result.insertId });
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error al subir el video:", error);
|
||||
res.status(500).json({ success: false, message: 'Error interno del servidor al procesar la subida.' });
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = controlador_videos; // Exporta el controlador para que pueda ser utilizado en las rutas
|
||||
@@ -1,153 +0,0 @@
|
||||
{
|
||||
"info": {
|
||||
"_postman_id": "1710a3ae-fba9-4526-8084-a066897ddadd",
|
||||
"name": "APP_SIGMA_NODE",
|
||||
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
|
||||
"_exporter_id": "11858928"
|
||||
},
|
||||
"item": [
|
||||
{
|
||||
"name": "APP_SIGMA",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": ""
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "actualiza image item",
|
||||
"protocolProfileBehavior": {
|
||||
"disableBodyPruning": true
|
||||
},
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"body": {
|
||||
"mode": "raw",
|
||||
"raw": "",
|
||||
"options": {
|
||||
"raw": {
|
||||
"language": "json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"url": {
|
||||
"raw": "http://localhost:4000/actualizaImgItem?json_img=TEH00419A1",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "4000",
|
||||
"path": [
|
||||
"actualizaImgItem"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "json_img",
|
||||
"value": "TEH00419A1"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "consulta precios",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "http://localhost:8080/consultaItemsPrecios?consulta=cama&gp_precio=VENTAS_WEB",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "8080",
|
||||
"path": [
|
||||
"consultaItemsPrecios"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "consulta",
|
||||
"value": "cama"
|
||||
},
|
||||
{
|
||||
"key": "gp_precio",
|
||||
"value": "VENTAS_WEB"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "consulta grupo de precios",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "http://192.168.10.100:8080/gp_precios",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"192",
|
||||
"168",
|
||||
"10",
|
||||
"100"
|
||||
],
|
||||
"port": "8080",
|
||||
"path": [
|
||||
"gp_precios"
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "buscar cliente SRI",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "localhost:3001/busquedaSRI?ruc=1722237896001",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "3001",
|
||||
"path": [
|
||||
"busquedaSRI"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "ruc",
|
||||
"value": "1722237896001"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "buscar cliente en sri-online",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "https://sri-en-linea.com/ruc/1722237896001",
|
||||
"protocol": "https",
|
||||
"host": [
|
||||
"sri-en-linea",
|
||||
"com"
|
||||
],
|
||||
"path": [
|
||||
"ruc",
|
||||
"1722237896001"
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
}
|
||||
]
|
||||
}
|
||||
284
src/data/APP_SIGMA_WEB.postman_collection.json
Normal file
284
src/data/APP_SIGMA_WEB.postman_collection.json
Normal file
@@ -0,0 +1,284 @@
|
||||
{
|
||||
"info": {
|
||||
"_postman_id": "1710a3ae-fba9-4526-8084-a066897ddadd",
|
||||
"name": "APP-SIGMA-WEB",
|
||||
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
|
||||
"_exporter_id": "11858928"
|
||||
},
|
||||
"item": [
|
||||
{
|
||||
"name": "APP_SIGMA",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": ""
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "actualiza image item",
|
||||
"protocolProfileBehavior": {
|
||||
"disableBodyPruning": true
|
||||
},
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"body": {
|
||||
"mode": "raw",
|
||||
"raw": "",
|
||||
"options": {
|
||||
"raw": {
|
||||
"language": "json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"url": {
|
||||
"raw": "http://localhost:4000/actualizaImgItem?json_img=TEH00419A1",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "4000",
|
||||
"path": [
|
||||
"actualizaImgItem"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "json_img",
|
||||
"value": "TEH00419A1"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "consulta precios",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "http://localhost:8080/consultaItemsPrecios?consulta=cama&gp_precio=VENTAS_WEB",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "8080",
|
||||
"path": [
|
||||
"consultaItemsPrecios"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "consulta",
|
||||
"value": "cama"
|
||||
},
|
||||
{
|
||||
"key": "gp_precio",
|
||||
"value": "VENTAS_WEB"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "consulta grupo de precios",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "http://192.168.10.100:8080/gp_precios",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"192",
|
||||
"168",
|
||||
"10",
|
||||
"100"
|
||||
],
|
||||
"port": "8080",
|
||||
"path": [
|
||||
"gp_precios"
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "buscar cliente SRI",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "localhost:3001/busquedaSRI?ruc=1722237896001",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "3001",
|
||||
"path": [
|
||||
"busquedaSRI"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "ruc",
|
||||
"value": "1722237896001"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "buscar cliente en sri-online",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "https://sri-en-linea.com/ruc/1722237896001",
|
||||
"protocol": "https",
|
||||
"host": [
|
||||
"sri-en-linea",
|
||||
"com"
|
||||
],
|
||||
"path": [
|
||||
"ruc",
|
||||
"1722237896001"
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "Sincronización Documentos Electrónicos",
|
||||
"item": [
|
||||
{
|
||||
"name": "Crear Documento",
|
||||
"request": {
|
||||
"method": "POST",
|
||||
"header": [
|
||||
{
|
||||
"key": "Content-Type",
|
||||
"value": "application/json"
|
||||
}
|
||||
],
|
||||
"body": {
|
||||
"mode": "raw",
|
||||
"raw": "{\n \"tipo_documento\": \"01\",\n \"entidad_emisora\": \"0992222222001\",\n \"entidad_receptora\": \"0701637498001\",\n \"numero_autorizacion\": \"1234567890123456789012345678901234567890123456789\",\n \"fecha_registrada\": \"2023-11-15T14:30:00Z\"\n}"
|
||||
},
|
||||
"url": {
|
||||
"raw": "http://localhost:3001/api/documentos-electronicos",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "3001",
|
||||
"path": [
|
||||
"api",
|
||||
"documentos-electronicos"
|
||||
]
|
||||
},
|
||||
"description": "Registra un nuevo documento electrónico para ser procesado por el sistema. Ideal para ser llamado desde n8n."
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "Listar Documentos",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "http://localhost:3001/api/documentos-electronicos?estado=pendiente",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "3001",
|
||||
"path": [
|
||||
"api",
|
||||
"documentos-electronicos"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "estado",
|
||||
"value": "pendiente",
|
||||
"description": "Filtra por 'pendiente', 'procesado' o 'error'. Omitir para ver todos."
|
||||
}
|
||||
]
|
||||
},
|
||||
"description": "Obtiene una lista de todos los documentos electrónicos, con la opción de filtrar por su estado de sincronización."
|
||||
},
|
||||
"response": []
|
||||
},
|
||||
{
|
||||
"name": "Actualizar Estado de Documento",
|
||||
"request": {
|
||||
"method": "PUT",
|
||||
"header": [
|
||||
{
|
||||
"key": "Content-Type",
|
||||
"value": "application/json"
|
||||
}
|
||||
],
|
||||
"body": {
|
||||
"mode": "raw",
|
||||
"raw": "{\n \"estado_sincronizacion\": \"procesado\"\n}"
|
||||
},
|
||||
"url": {
|
||||
"raw": "http://localhost:3001/api/documentos-electronicos/1/estado",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "3001",
|
||||
"path": [
|
||||
"api",
|
||||
"documentos-electronicos",
|
||||
"1",
|
||||
"estado"
|
||||
]
|
||||
},
|
||||
"description": "Actualiza el estado de un documento específico por su ID. El estado puede ser 'procesado' o 'error'."
|
||||
},
|
||||
"response": []
|
||||
}
|
||||
],
|
||||
"description": "Endpoints para la gestión de documentos electrónicos sincronizados desde n8n."
|
||||
},
|
||||
{
|
||||
"name": "API V2",
|
||||
"item": [
|
||||
{
|
||||
"name": "Buscar Cliente y Estado de Membresía",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "http://localhost:3001/api/v2/search-client-member-status?query=pablo",
|
||||
"protocol": "http",
|
||||
"host": [
|
||||
"localhost"
|
||||
],
|
||||
"port": "3001",
|
||||
"path": [
|
||||
"api",
|
||||
"v2",
|
||||
"search-client-member-status"
|
||||
],
|
||||
"query": [
|
||||
{
|
||||
"key": "query",
|
||||
"value": "pablo",
|
||||
"description": "Término de búsqueda para nombre o RUC/cédula del cliente."
|
||||
}
|
||||
]
|
||||
},
|
||||
"description": "Busca clientes por nombre o RUC/cédula y devuelve su estado de membresía (si aplica)."
|
||||
},
|
||||
"response": []
|
||||
}
|
||||
],
|
||||
"description": "Nuevos endpoints para la versión 2 de la API."
|
||||
}
|
||||
]
|
||||
}
|
||||
50
src/public/css/app_pedidos_v2.css
Normal file
50
src/public/css/app_pedidos_v2.css
Normal file
@@ -0,0 +1,50 @@
|
||||
/* Custom Styles for SIGMA APP v2 */
|
||||
|
||||
:root {
|
||||
--bs-primary-rgb: 23, 107, 135; /* Un azul corporativo */
|
||||
--bs-primary: #176B87;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Estilo para las tarjetas de producto */
|
||||
.product-card {
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.product-card .card-img-top {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
|
||||
}
|
||||
|
||||
.product-card .card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-card .card-text {
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Sidebar de Pedido Fijo */
|
||||
#order-sidebar {
|
||||
position: sticky;
|
||||
top: 80px; /* Altura del header + margen */
|
||||
}
|
||||
@@ -1,160 +1,185 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #1f1f1f;
|
||||
color: #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
position: fixed;
|
||||
width: 96%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.banner .logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.banner .logo img {
|
||||
height: 40px;
|
||||
}
|
||||
.banner .search-bar {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.banner input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
background-color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.banner .search-bar button {
|
||||
background: url('https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/icons/search.svg') no-repeat center;
|
||||
background-size: 20px;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.banner .menu {
|
||||
position: relative;
|
||||
}
|
||||
.banner .menu button {
|
||||
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5nhCKmVjqZVfc19KXRTIXpeT6mweVBNeAmw&s') no-repeat center;
|
||||
background-size: 30px;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.banner .menu ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #333;
|
||||
border-radius: 5px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.banner .menu ul li {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.banner .menu ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.banner .menu ul li:hover {
|
||||
background: #333;
|
||||
}
|
||||
.video-list {
|
||||
padding: 80px 20px 20px;
|
||||
}
|
||||
.video-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-slide {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.video-item {
|
||||
width: 150px;
|
||||
margin: 10px;
|
||||
background: #2c2c2c;
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.video-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.video-item .info {
|
||||
padding: 10px;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
.player {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.player iframe,
|
||||
.player video {
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
border: 2px solid #444;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #333;
|
||||
color: #e0e0e0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
.slick-prev {
|
||||
left: 10px;
|
||||
}
|
||||
.slick-next {
|
||||
right: 10px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.video-item {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.video-item {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #1f1f1f;
|
||||
color: #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
position: fixed;
|
||||
width: 96%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.banner .logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.banner .logo img {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.banner .search-bar {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.banner input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
background-color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.banner .search-bar button {
|
||||
background: url('https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/icons/search.svg') no-repeat center;
|
||||
background-size: 20px;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.banner .menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner .menu button {
|
||||
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5nhCKmVjqZVfc19KXRTIXpeT6mweVBNeAmw&s') no-repeat center;
|
||||
background-size: 30px;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.banner .menu ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #333;
|
||||
border-radius: 5px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.banner .menu ul li {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.banner .menu ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.banner .menu ul li:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.video-list {
|
||||
padding: 80px 20px 20px;
|
||||
}
|
||||
|
||||
.video-carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
width: 150px;
|
||||
margin: 10px;
|
||||
background: #2c2c2c;
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.video-item .info {
|
||||
padding: 10px;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
.player {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.player iframe,
|
||||
.player video {
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
border: 2px solid #444;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #333;
|
||||
color: #e0e0e0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.video-item {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.video-item {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
@@ -1,106 +1,402 @@
|
||||
body{
|
||||
background:rgb(10, 10, 10);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.files{
|
||||
}
|
||||
.info{
|
||||
font-family: sigma_font;
|
||||
font-size: 20px;
|
||||
}
|
||||
.upload{
|
||||
/* Cloud SIGMA - Estilos Personalizados */
|
||||
|
||||
:root {
|
||||
--primary-gradient: linear-gradient(135deg, #4a5897 0%, #001833 100%);
|
||||
--secondary-gradient: linear-gradient(135deg, #486ccf 0%, #f5576c 100%);
|
||||
--dark-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
|
||||
--success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
--glass-bg: rgba(255, 255, 255, 0.1);
|
||||
--glass-border: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
#titulo{
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
#rep-video{
|
||||
width: 600;
|
||||
height:400;
|
||||
}
|
||||
#ctr.l_audio{
|
||||
margin-top: -60px;
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #4b58a2 50%, #93bdfb 100%);
|
||||
min-height: 100vh;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* MENU USUARIO DESPLEGABLE */
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
left: auto;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
padding: 0px;
|
||||
/* Navbar Improvements */
|
||||
.navbar-custom {
|
||||
background: rgba(0, 0, 0, 0.9) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(104, 101, 158, 0.1);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
|
||||
/* --- CAMBIO CLAVE AQUÍ --- */
|
||||
position: relative; /* O 'fixed', o 'sticky' dependiendo de tu necesidad, pero debe ser no-static */
|
||||
z-index: 1060; /* Un z-index más alto que el dropdown para que el dropdown esté dentro de su contexto */
|
||||
/* --- FIN CAMBIO CLAVE --- */
|
||||
}
|
||||
.dropdown-menu ul{
|
||||
list-style-type: none;
|
||||
color: aliceblue;
|
||||
padding: 0px;
|
||||
|
||||
.navbar-brand {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dropdown-menu ul li{
|
||||
list-style-type: none;
|
||||
color: aliceblue;
|
||||
|
||||
.navbar-brand:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.dropdown-menu ul li img{
|
||||
z-index: 5;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
border: 3px solid;
|
||||
border-color: transparent;
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.img-circle {
|
||||
|
||||
.navbar-brand img {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dropdown-menu ul li.user-header {
|
||||
height: 175px;
|
||||
padding: 10px;
|
||||
|
||||
.navbar-brand img:hover {
|
||||
box-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
.search-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
background: var(--primary-gradient);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-search:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Container Improvements */
|
||||
.main-container {
|
||||
margin-top: 30px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Upload Section */
|
||||
.upload-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
transition: all 0.3s ease;
|
||||
/* --- CONSIDERACIÓN: Si estas tarjetas siguen por encima, podrías darles un z-index más bajo
|
||||
Pero primero prueba el cambio en navbar-custom */
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.upload-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px 0 rgba(31, 38, 135, 0.5);
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
color: white;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 25px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(45deg, #fff, #667eea);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.file-input-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px dashed rgba(255, 255, 255, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-input:hover {
|
||||
border-color: #667eea;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
background: var(--success-gradient);
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 12px 30px;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.btn-upload:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(56, 239, 125, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Files Table */
|
||||
.files-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
transition: all 0.3s ease;
|
||||
/* --- CONSIDERACIÓN: Si estas tarjetas siguen por encima, podrías darles un z-index más bajo
|
||||
Pero primero prueba el cambio en navbar-custom */
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.table-custom {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.table-custom th {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 20px 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.table-custom td {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table-custom tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Action Button */
|
||||
.btn-action {
|
||||
background: var(--secondary-gradient);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
transform: scale(1.2) rotate(360deg);
|
||||
box-shadow: 0 8px 20px rgba(147, 189, 251, 0.4);
|
||||
}
|
||||
|
||||
/* Modal Improvements */
|
||||
.modal-content {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 25px 30px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 20px 30px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.modal-footer .btn {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-footer .btn:nth-child(1) {
|
||||
background: linear-gradient(135deg, #6bff72, #52ee6c);
|
||||
}
|
||||
|
||||
.modal-footer .btn:nth-child(2) {
|
||||
background: linear-gradient(135deg, #4ecdc4, #44a08d);
|
||||
}
|
||||
|
||||
.modal-footer .btn:nth-child(3) {
|
||||
background: linear-gradient(135deg, #45b7d1, #96c93d);
|
||||
}
|
||||
|
||||
.modal-footer .btn:nth-child(4) {
|
||||
background: linear-gradient(135deg, #79a3ff, #ff0022);
|
||||
border-radius: 25px;
|
||||
width: auto;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
|
||||
.modal-footer .btn:hover {
|
||||
transform: translateY(-3px) scale(1.1);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* --- CAMBIO CLAVE AQUÍ --- */
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu {
|
||||
/* Asegúrate de que position no sea 'static' */
|
||||
position: absolute;
|
||||
/* Necesita ser un z-index mayor que la navbar si el dropdown está fuera del flujo normal de la navbar (Bootstrap lo suele manejar),
|
||||
o si el navbar tiene un z-index. Un valor como 1050 es un buen punto de partida, pero podemos subirlo. */
|
||||
z-index: 1070; /* Mayor que el z-index de la navbar-custom */
|
||||
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
min-width: 300px;
|
||||
}
|
||||
/* --- FIN CAMBIO CLAVE --- */
|
||||
|
||||
|
||||
.user-header {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.user-header{
|
||||
background-color: #255977;
|
||||
color: white
|
||||
|
||||
.user-header img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #667eea;
|
||||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.user-header p {
|
||||
margin-top: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-body {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
border-top: 1px solid #dddddd;
|
||||
background-color: #255977;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.user-body a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-body a:hover {
|
||||
color: #75acff;
|
||||
}
|
||||
|
||||
.user-footer {
|
||||
display: flex;
|
||||
background-color: #8d8d8d;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.pull-left{
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
|
||||
.user-footer .btn {
|
||||
background: var(--primary-gradient);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.pull-right{
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
|
||||
.user-footer .btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
#id_usuario{
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeInUp {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.upload-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
/*#TEST_COLORS{
|
||||
#98BFDA
|
||||
#FEDE58
|
||||
#98D8A5
|
||||
#FE9898
|
||||
#FE98FE
|
||||
#FFFFFF
|
||||
|
||||
#FFEEEC
|
||||
#FEFDED
|
||||
#EAFFE5
|
||||
#ECFDFF
|
||||
#F0F1FE
|
||||
#FFEBFA
|
||||
|
||||
}*/
|
||||
.upload-card, .files-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
314
src/public/js/app_pedidos_v2.js
Normal file
314
src/public/js/app_pedidos_v2.js
Normal file
@@ -0,0 +1,314 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// --- STATE MANAGEMENT ---
|
||||
const state = {
|
||||
orderItems: [],
|
||||
selectedClient: null,
|
||||
productCatalog: [], // Almacenará los productos cargados
|
||||
};
|
||||
|
||||
// --- DOM ELEMENTS ---
|
||||
const elements = {
|
||||
searchInput: document.getElementById('search-input'),
|
||||
productGrid: document.getElementById('product-grid'),
|
||||
gridFeedback: document.getElementById('grid-feedback'),
|
||||
loadingSpinner: document.getElementById('loading-spinner'),
|
||||
noResultsMessage: document.getElementById('no-results-message'),
|
||||
orderItemsList: document.getElementById('order-items-list'),
|
||||
emptyCartMessage: document.getElementById('empty-cart-message'),
|
||||
orderTotals: document.getElementById('order-totals'),
|
||||
subtotalValue: document.getElementById('subtotal-value'),
|
||||
ivaValue: document.getElementById('iva-value'),
|
||||
totalValue: document.getElementById('total-value'),
|
||||
clientNameInput: document.getElementById('client-name'),
|
||||
clientSearchInput: document.getElementById('client-search-input'),
|
||||
clientSearchResults: document.getElementById('client-search-results'),
|
||||
submitOrderBtn: document.getElementById('submit-order-btn'),
|
||||
clearOrderBtn: document.getElementById('clear-order-btn'),
|
||||
toast: new bootstrap.Toast(document.getElementById('notification-toast')),
|
||||
toastTitle: document.getElementById('toast-title'),
|
||||
toastBody: document.getElementById('toast-body'),
|
||||
};
|
||||
|
||||
// --- UTILITY FUNCTIONS ---
|
||||
const debounce = (func, delay) => {
|
||||
let timeoutId;
|
||||
return (...args) => {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
};
|
||||
|
||||
const showToast = (title, message, isError = false) => {
|
||||
elements.toastTitle.textContent = title;
|
||||
elements.toastBody.textContent = message;
|
||||
const toastEl = document.getElementById('notification-toast');
|
||||
toastEl.classList.toggle('bg-danger', isError);
|
||||
toastEl.classList.toggle('text-white', isError);
|
||||
elements.toast.show();
|
||||
};
|
||||
|
||||
// --- API CALLS ---
|
||||
const fetchProducts = async (query = '') => {
|
||||
elements.productGrid.innerHTML = '';
|
||||
elements.gridFeedback.style.display = 'block';
|
||||
elements.loadingSpinner.style.display = 'block';
|
||||
elements.noResultsMessage.style.display = 'none';
|
||||
|
||||
try {
|
||||
// CORREGIDO: Se usa 'consulta' y se añade 'gp_precio' como en la app anterior.
|
||||
const gp_precio = 'PUBLICO'; // O un valor dinámico si lo implementas
|
||||
const response = await fetch(`/api/v2/items?consulta=${encodeURIComponent(query)}&gp_precio=${gp_precio}`);
|
||||
if (!response.ok) throw new Error('Network response was not ok');
|
||||
const data = await response.json();
|
||||
// Guardamos los productos en el catálogo y luego renderizamos
|
||||
state.productCatalog = data; // Asumiendo que la API devuelve un array directamente
|
||||
renderProducts(state.productCatalog);
|
||||
} catch (error) {
|
||||
console.error('Error fetching products:', error);
|
||||
elements.noResultsMessage.textContent = 'Error al cargar productos.';
|
||||
elements.noResultsMessage.style.display = 'block';
|
||||
} finally {
|
||||
elements.loadingSpinner.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
const fetchClients = async (query) => {
|
||||
try {
|
||||
// CAMBIO: Usar el nuevo endpoint y el parámetro 'consulta'
|
||||
const response = await fetch(`/api/v2/clientes?consulta=${encodeURIComponent(query)}`);
|
||||
if (!response.ok) throw new Error('Network response was not ok');
|
||||
const data = await response.json();
|
||||
// CAMBIO: La nueva API devuelve un array directamente, no un objeto { Clientes: [...] }
|
||||
renderClientSearchResults(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching clients:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const submitOrder = async () => {
|
||||
elements.submitOrderBtn.disabled = true;
|
||||
elements.submitOrderBtn.innerHTML = `
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Enviando...
|
||||
`;
|
||||
|
||||
const subtotal = state.orderItems.reduce((acc, item) => acc + parseFloat(item.price) * item.quantity, 0);
|
||||
const iva = subtotal * 0.12;
|
||||
const total = subtotal + iva;
|
||||
|
||||
const orderPayload = {
|
||||
clienteId: state.selectedClient.id,
|
||||
user: 'WebAppUser', // O obtener del usuario logueado
|
||||
estado: 'ACTIVO',
|
||||
valor: total.toFixed(2),
|
||||
iva: iva.toFixed(2),
|
||||
plataforma: 'APP-SIGMA-WEB-V2',
|
||||
origen: 'WebApp',
|
||||
items: state.orderItems.map(item => ({
|
||||
cod: item.code,
|
||||
cant: item.quantity,
|
||||
precio: item.price,
|
||||
descuento: 0,
|
||||
gp_precio: 'PUBLICO', // O el grupo de precio correspondiente
|
||||
topings: '' // No implementado aún
|
||||
}))
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v2/pedidos', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(orderPayload),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok) throw new Error(result.message || 'Error al enviar el pedido.');
|
||||
showToast('Pedido Enviado', `El pedido #${result.id} ha sido enviado correctamente.`);
|
||||
clearOrder();
|
||||
} catch (error) {
|
||||
console.error('Error submitting order:', error);
|
||||
showToast('Error', error.message, true);
|
||||
} finally {
|
||||
elements.submitOrderBtn.innerHTML = '<i class="bi bi-cloud-upload"></i> Enviar Pedido';
|
||||
updateSubmitButtonState();
|
||||
}
|
||||
};
|
||||
|
||||
// --- RENDERING ---
|
||||
const productCardTemplate = (product) => `
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 product-card-wrapper">
|
||||
<div class="card h-100 product-card" data-product-id="${product.idt_prdcto}">
|
||||
<img src="${product.url_img || '/img/placeholder.png'}" class="card-img-top" alt="${product.detalle_prdcto}">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">${product.detalle_prdcto}</h5>
|
||||
<p class="card-text text-muted">${product.codigo_prdcto}</p>
|
||||
<div class="mt-auto d-flex justify-content-between align-items-center">
|
||||
<span class="fs-5 fw-bold text-primary">$${parseFloat(product.precio_vta).toFixed(2)}</span>
|
||||
<button class="btn btn-sm btn-outline-primary add-to-cart-btn">
|
||||
<i class="bi bi-cart-plus"></i> Añadir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const renderProducts = (products) => {
|
||||
if (!products || products.length === 0) {
|
||||
elements.noResultsMessage.style.display = 'block';
|
||||
elements.gridFeedback.style.display = 'block';
|
||||
elements.productGrid.innerHTML = '';
|
||||
} else {
|
||||
elements.gridFeedback.style.display = 'none';
|
||||
elements.productGrid.innerHTML = products.map(productCardTemplate).join('');
|
||||
}
|
||||
};
|
||||
|
||||
const renderOrder = () => {
|
||||
if (state.orderItems.length === 0) {
|
||||
elements.orderItemsList.innerHTML = '';
|
||||
elements.emptyCartMessage.style.display = 'block';
|
||||
elements.orderTotals.style.display = 'none';
|
||||
} else {
|
||||
elements.emptyCartMessage.style.display = 'none';
|
||||
elements.orderTotals.style.display = 'block';
|
||||
elements.orderItemsList.innerHTML = state.orderItems.map((item, index) => `
|
||||
<div class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">${item.nombre}</h6>
|
||||
<small>$${(item.price * item.quantity).toFixed(2)}</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<small class="text-muted">$${parseFloat(item.price).toFixed(2)} c/u</small>
|
||||
<div class="d-flex align-items-center">
|
||||
<input type="number" value="${item.quantity}" min="1" class="form-control form-control-sm quantity-input me-2" data-index="${index}" style="width: 70px;">
|
||||
<button class="btn btn-sm btn-outline-danger remove-item-btn" data-index="${index}">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
calculateTotals();
|
||||
updateSubmitButtonState();
|
||||
};
|
||||
|
||||
const renderClientSearchResults = (clients) => {
|
||||
if (!clients || clients.length === 0) {
|
||||
elements.clientSearchResults.innerHTML = '<p class="text-center text-muted">No se encontraron clientes.</p>';
|
||||
return;
|
||||
}
|
||||
// CAMBIO: Usar los nombres de campo correctos devueltos por la nueva API
|
||||
elements.clientSearchResults.innerHTML = clients.map(client => `
|
||||
<a href="#" class="list-group-item list-group-item-action select-client-btn" data-client-id="${client.client_id}" data-client-name="${client.client_nombre}">
|
||||
<strong>${client.client_nombre}</strong><br>
|
||||
<small class="text-muted">${client.client_rucCed}</small>
|
||||
</a>
|
||||
`).join('');
|
||||
};
|
||||
|
||||
// --- LOGIC ---
|
||||
const calculateTotals = () => {
|
||||
const subtotal = state.orderItems.reduce((acc, item) => acc + parseFloat(item.price) * item.quantity, 0);
|
||||
const iva = subtotal * 0.12; // Asumiendo 12% IVA
|
||||
const total = subtotal + iva;
|
||||
|
||||
elements.subtotalValue.textContent = `$${subtotal.toFixed(2)}`;
|
||||
elements.ivaValue.textContent = `$${iva.toFixed(2)}`;
|
||||
elements.totalValue.textContent = `$${total.toFixed(2)}`;
|
||||
};
|
||||
|
||||
const updateSubmitButtonState = () => {
|
||||
elements.submitOrderBtn.disabled = state.orderItems.length === 0 || !state.selectedClient;
|
||||
};
|
||||
|
||||
const clearOrder = () => {
|
||||
state.orderItems = [];
|
||||
state.selectedClient = null;
|
||||
elements.clientNameInput.value = 'No seleccionado';
|
||||
renderOrder();
|
||||
};
|
||||
|
||||
const addProductToOrder = (productId) => {
|
||||
const product = state.productCatalog.find(p => p.idt_prdcto == productId);
|
||||
if (!product) return;
|
||||
|
||||
const existingItem = state.orderItems.find(item => item.id == productId);
|
||||
|
||||
if (existingItem) {
|
||||
existingItem.quantity++;
|
||||
} else {
|
||||
state.orderItems.push({
|
||||
id: product.idt_prdcto,
|
||||
nombre: product.detalle_prdcto,
|
||||
code: product.codigo_prdcto,
|
||||
price: product.precio_vta,
|
||||
quantity: 1,
|
||||
});
|
||||
}
|
||||
|
||||
renderOrder();
|
||||
showToast('Producto añadido', `${product.detalle_prdcto} fue añadido al pedido.`);
|
||||
};
|
||||
|
||||
// --- EVENT HANDLERS ---
|
||||
const handleSearch = debounce((event) => {
|
||||
fetchProducts(event.target.value);
|
||||
}, 300);
|
||||
|
||||
const handleClientSearch = debounce((event) => {
|
||||
fetchClients(event.target.value);
|
||||
}, 300);
|
||||
|
||||
// --- EVENT LISTENERS ---
|
||||
elements.searchInput.addEventListener('keyup', handleSearch);
|
||||
elements.clientSearchInput.addEventListener('keyup', handleClientSearch);
|
||||
elements.clearOrderBtn.addEventListener('click', clearOrder);
|
||||
elements.submitOrderBtn.addEventListener('click', submitOrder);
|
||||
|
||||
// Event delegation para añadir productos al carrito
|
||||
elements.productGrid.addEventListener('click', (e) => {
|
||||
const addButton = e.target.closest('.add-to-cart-btn');
|
||||
if (addButton) {
|
||||
const card = addButton.closest('.product-card');
|
||||
const productId = card.dataset.productId;
|
||||
addProductToOrder(productId);
|
||||
}
|
||||
});
|
||||
|
||||
// Event delegation para actualizar cantidades y eliminar items del pedido
|
||||
elements.orderItemsList.addEventListener('change', (e) => {
|
||||
if (e.target.classList.contains('quantity-input')) {
|
||||
const index = e.target.dataset.index;
|
||||
state.orderItems[index].quantity = parseInt(e.target.value, 10);
|
||||
renderOrder();
|
||||
}
|
||||
});
|
||||
|
||||
elements.orderItemsList.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.remove-item-btn')) {
|
||||
const index = e.target.closest('.remove-item-btn').dataset.index;
|
||||
state.orderItems.splice(index, 1);
|
||||
renderOrder();
|
||||
}
|
||||
});
|
||||
|
||||
elements.clientSearchResults.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const link = e.target.closest('.select-client-btn');
|
||||
if (link) {
|
||||
state.selectedClient = {
|
||||
id: link.dataset.clientId,
|
||||
name: link.dataset.clientName,
|
||||
};
|
||||
elements.clientNameInput.value = state.selectedClient.name;
|
||||
bootstrap.Modal.getInstance(document.getElementById('clientSearchModal')).hide();
|
||||
updateSubmitButtonState();
|
||||
}
|
||||
});
|
||||
|
||||
// --- INITIALIZATION ---
|
||||
fetchProducts();
|
||||
});
|
||||
@@ -6,6 +6,7 @@ document.getElementById('origen').addEventListener('change', function () {
|
||||
const fileInput = document.getElementById('videoUpload');
|
||||
const previewImg = document.getElementById('previewImg');
|
||||
|
||||
|
||||
if (origen === 'Local') {
|
||||
fileGroup.style.display = 'block';
|
||||
urlGroup.style.display = 'none';
|
||||
@@ -101,10 +102,11 @@ document.getElementById('uploadForm').addEventListener('submit', function (event
|
||||
url: urlOrFile,
|
||||
miniatura: origen === 'Local' ? document.getElementById('previewImg').src : document.getElementById('previewUrl').src,
|
||||
tipo: document.getElementById('tipo').value,
|
||||
tamano: document.getElementById('tamano').value,
|
||||
//tamano: document.getElementById('tamano').value,
|
||||
origen: origen,
|
||||
};
|
||||
|
||||
console.log('Video subido:', videoData);
|
||||
// Aquí puedes agregar código para procesar la subida y guardado de los datos.
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
BIN
src/public/videos/98b17158-0fe4-4833-b801-e2e42e33823a.mp4
Normal file
BIN
src/public/videos/98b17158-0fe4-4833-b801-e2e42e33823a.mp4
Normal file
Binary file not shown.
BIN
src/public/videos/fef1bbca-8802-4bcd-bcc7-070fc4a2e9e3.mp4
Normal file
BIN
src/public/videos/fef1bbca-8802-4bcd-bcc7-070fc4a2e9e3.mp4
Normal file
Binary file not shown.
@@ -10,7 +10,7 @@ rutas.get('/consultaPedidos', controlador_init.app_PEDIDOS);//consulta PEDIDOS
|
||||
rutas.get('/gp_precios', controlador_init.app_GpPrecios);//consulta grupo precios
|
||||
rutas.get('/origen_pedidos', controlador_init.app_ORIGENES);//consulta grupo precios
|
||||
rutas.get('/panel_control', controlador_init.panel_control);//consulta grupo precios
|
||||
rutas.get('/pedidos', controlador_init.app_sigma);//Una app para PEDIDOS
|
||||
rutas.get('/pedidos', (req, res) => res.render('app_pedidos_v2'));//Una app para PEDIDOS v2
|
||||
rutas.get('/recepcionPedidos', controlador_init.recibe_pedidos);//receptar pedidos
|
||||
rutas.post('/recepcionPedidos_post', controlador_init.recibe_pedidos_post);//receptar pedidos
|
||||
|
||||
|
||||
32
src/rutas/rt_api_v2.js
Normal file
32
src/rutas/rt_api_v2.js
Normal file
@@ -0,0 +1,32 @@
|
||||
const express = require('express');
|
||||
const rutas = express.Router();
|
||||
|
||||
const apiV2Controller = require('../controladores/controlador_api_v2');
|
||||
|
||||
// Aquí puedes añadir tus nuevas rutas de la API v2
|
||||
|
||||
/**
|
||||
* @swagger
|
||||
* /api/v2/search-client-member-status:
|
||||
* get:
|
||||
* summary: Busca clientes y verifica el estado de su membresía.
|
||||
* tags: [API V2]
|
||||
* parameters:
|
||||
* - in: query
|
||||
* name: query
|
||||
* schema:
|
||||
* type: string
|
||||
* required: true
|
||||
* description: Término de búsqueda para nombre o RUC/cédula del cliente (mínimo 2 caracteres).
|
||||
* responses:
|
||||
* 200:
|
||||
* description: Una lista de clientes con su estado de membresía.
|
||||
* 400:
|
||||
* description: El término de búsqueda es muy corto.
|
||||
* 500:
|
||||
* description: Error interno del servidor.
|
||||
*/
|
||||
rutas.get('/api/v2/search-client-member-status', apiV2Controller.searchClientMemberStatus);
|
||||
|
||||
|
||||
module.exports = rutas;
|
||||
@@ -2,15 +2,98 @@ const express = require('express');
|
||||
const rutas = express.Router();
|
||||
|
||||
const controlador_init = require('../controladores/controlador_Apps');
|
||||
const controlador_videos = require('../controladores/controlador_videos'); // Controlador para videos
|
||||
const controlador_sinc_docs = require('../controladores/controlador_sincronizacion_docs'); // NUEVO: Controlador para documentos electrónicos
|
||||
|
||||
rutas.get('/app_restaurant', controlador_init.app_restaurant);//login testing css / dev
|
||||
//rutas.get('/usuarios', controlador_init.user);//
|
||||
rutas.get('/dash_board', controlador_init.dashboard);//
|
||||
rutas.get('/users', controlador_init.user);//devuelve usuaios con el el ROL meseros
|
||||
|
||||
rutas.get('/speedtest', controlador_init.speedtest);//testing velocimetro server
|
||||
rutas.get('/videos', controlador_init.videos);//videos sigma server
|
||||
rutas.get('/video_upload', controlador_init.upload);//videos sigma server
|
||||
|
||||
|
||||
/*** CONFIGURACION DE UN PAGINA QUE CONFIGURE EL ARCHIVO config.js ***/
|
||||
rutas.get('/configuracion', controlador_init.config);//llama a un view de configuracion del archivo config.js
|
||||
|
||||
|
||||
rutas.get('/video', controlador_videos.video_v1);//videos sigma server
|
||||
rutas.get('/video_upload', controlador_videos.upload_v1);//(GET) Muestra el formulario de subida V1 (antiguo)
|
||||
rutas.post('/video_upload', controlador_videos.uploadVideoV1); //(POST) Procesa la subida del formulario V1 (antiguo)
|
||||
|
||||
rutas.get('/videos', controlador_videos.videos_v2);//videos sigma server
|
||||
rutas.get('/videos_upload', controlador_videos.upload_v2);//videos sigma server (version nueva)
|
||||
rutas.post('/videos_upload', controlador_videos.uploadVideo); // Nueva ruta para manejar la subida
|
||||
|
||||
// --- API para Sincronización de Documentos Electrónicos (desde n8n) ---
|
||||
|
||||
/**
|
||||
* @swagger
|
||||
* /api/documentos-electronicos:
|
||||
* post:
|
||||
* summary: Registra un nuevo documento electrónico para ser procesado.
|
||||
* tags: [Sincronización Documentos]
|
||||
* requestBody:
|
||||
* required: true
|
||||
* content:
|
||||
* application/json:
|
||||
* schema:
|
||||
* type: object
|
||||
* required: [tipo_documento, entidad_emisora, entidad_receptora, numero_autorizacion, fecha_registrada]
|
||||
* properties:
|
||||
* tipo_documento: { type: string, example: "01" }
|
||||
* entidad_emisora: { type: string, example: "RUC_EMISOR" }
|
||||
* entidad_receptora: { type: string, example: "RUC_RECEPTOR" }
|
||||
* numero_autorizacion: { type: string, example: "1234567890123456789012345678901234567890123456789" }
|
||||
* fecha_registrada: { type: string, format: date-time, example: "2023-10-27T10:00:00Z" }
|
||||
* responses:
|
||||
* 201: { description: Documento registrado exitosamente. }
|
||||
* 400: { description: Datos de entrada inválidos. }
|
||||
* 409: { description: El documento ya existe (conflicto). }
|
||||
* 500: { description: Error del servidor. }
|
||||
* get:
|
||||
* summary: Lista todos los documentos electrónicos registrados.
|
||||
* tags: [Sincronización Documentos]
|
||||
* parameters:
|
||||
* - in: query
|
||||
* name: estado
|
||||
* schema:
|
||||
* type: string
|
||||
* enum: [pendiente, procesado, error]
|
||||
* description: Filtra los documentos por su estado de sincronización.
|
||||
* responses:
|
||||
* 200: { description: Lista de documentos. }
|
||||
* 500: { description: Error del servidor. }
|
||||
*/
|
||||
rutas.post('/api/documentos-electronicos', controlador_sinc_docs.crearDocumento);
|
||||
rutas.get('/api/documentos-electronicos', controlador_sinc_docs.listarDocumentos);
|
||||
|
||||
/**
|
||||
* @swagger
|
||||
* /api/documentos-electronicos/{id}/estado:
|
||||
* put:
|
||||
* summary: Actualiza el estado de sincronización de un documento.
|
||||
* tags: [Sincronización Documentos]
|
||||
* parameters:
|
||||
* - in: path
|
||||
* name: id
|
||||
* required: true
|
||||
* schema: { type: integer }
|
||||
* requestBody:
|
||||
* required: true
|
||||
* content:
|
||||
* application/json:
|
||||
* schema:
|
||||
* type: object
|
||||
* required: [estado_sincronizacion]
|
||||
* properties:
|
||||
* estado_sincronizacion: { type: string, enum: [pendiente, procesado, error], example: "procesado" }
|
||||
* responses:
|
||||
* 200: { description: Estado actualizado correctamente. }
|
||||
* 400: { description: Estado inválido. }
|
||||
* 404: { description: Documento no encontrado. }
|
||||
* 500: { description: Error del servidor. }
|
||||
*/
|
||||
rutas.put('/api/documentos-electronicos/:id/estado', controlador_sinc_docs.actualizarEstadoDocumento);
|
||||
|
||||
module.exports = rutas;
|
||||
@@ -33,6 +33,16 @@ rutas.get('/busquedaSRI/', controladorClientes.buscarCli_sri);//API consulta cli
|
||||
//API CONSULTA CLIENTES: https://NAME_SERVER/api_consultaClientes?id=numero_rucOcedula => https://app.factura-e.net/api_consultaClientes?id=0701637498001
|
||||
rutas.get('/api_consultaClientes/', controladorClientes.api_consultaCliente);//API consulta clientes
|
||||
|
||||
// --- NUEVAS RUTAS RESTful para CLIENTES (para el frontend Vue) ---
|
||||
// Obtener un cliente por su client_rucCed (para EditarCliente.vue)
|
||||
rutas.get('/api/clientes/:client_rucCed', controladorClientes.obtenerClienteJsonPorId); // Nuevo endpoint RESTful GET
|
||||
// Crear un nuevo cliente (para NuevoCliente.vue)
|
||||
rutas.post('/api/clientes', controladorClientes.crearClienteJson); // Nuevo endpoint RESTful POST
|
||||
// Actualizar un cliente existente (para EditarCliente.vue)
|
||||
rutas.put('/api/clientes/:client_rucCed', controladorClientes.actualizarClienteJson); // Nuevo endpoint RESTful PUT
|
||||
// Eliminar un cliente (para ListaClientes.vue)
|
||||
rutas.delete('/api/clientes/:client_rucCed', controladorClientes.eliminarClienteJson); // Nuevo endpoint RESTful DELETE
|
||||
|
||||
// --- Rutas RESTful para TIPOS de Membresías (tabla 'clientes_membresias') ---
|
||||
// Estas rutas apuntarán al nuevo controlador_Membresias
|
||||
rutas.get('/api/tipos-membresia', controladorMembresias.listarTiposMembresia);
|
||||
|
||||
@@ -25,6 +25,7 @@ rutas.post('/json', controladorItems.json);//ver menu en modo json
|
||||
//APP_SIGMA consultas categorias
|
||||
rutas.get('/categorias_json', controladorItems.cat_json);//ver categorias items en modo json
|
||||
rutas.get('/item_xCat/:cat&:gpp', controladorItems.item_xCat);//ver productos x categoria en modo json/post
|
||||
rutas.get('/pedido_detalle/:id_pedido', controladorItems.pedido_detalle);//ver detalle de un pedido en modo json/post
|
||||
|
||||
//APP_SIGMA consultas
|
||||
rutas.get('/consultaItemsPrecios/', controladorItems.app_consultaItemsPrecios);//ver productos en modo json/post
|
||||
|
||||
@@ -512,8 +512,8 @@ router.post('/api/proyectos/memorias-tecnicas/:memoriaId/mantenimiento', control
|
||||
* type: integer
|
||||
* description: ID del plan de mantenimiento a eliminar.
|
||||
* responses:
|
||||
* 200:
|
||||
* description: Plan de mantenimiento eliminado exitosamente.
|
||||
* 204:
|
||||
* description: Plan de mantenimiento eliminado exitosamente. No devuelve contenido.
|
||||
* 404:
|
||||
* description: Plan de mantenimiento no encontrado.
|
||||
* 500:
|
||||
|
||||
16
src/scripts/helpers.js
Normal file
16
src/scripts/helpers.js
Normal file
@@ -0,0 +1,16 @@
|
||||
const crypto = require('crypto');
|
||||
|
||||
/**
|
||||
* Convierte una cadena de texto a su hash MD5.
|
||||
* @param {string} data_string La cadena a convertir.
|
||||
* @returns {string} El hash MD5.
|
||||
*/
|
||||
function stringTo_md5(data_string) {
|
||||
const md5 = crypto.createHash('md5').update(data_string, 'utf-8').digest('hex');
|
||||
// console.log("MD5: ", md5); // Descomentar para depuración
|
||||
return md5;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
stringTo_md5,
|
||||
};
|
||||
@@ -43,6 +43,7 @@ const swaggerOptions = {
|
||||
'./rutas/rt_apps.js',
|
||||
'./rutas/rt_arduino.js',
|
||||
'./rutas/rt_proyectos.js',
|
||||
'./rutas/rt_api_v2.js', // AÑADIR NUEVA RUTA
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
170
src/views/app_pedidos_v2.ejs
Normal file
170
src/views/app_pedidos_v2.ejs
Normal file
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="google" content="notranslate" />
|
||||
<title>SIGMA APP v2</title>
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" href="/img/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/img/favicon-64x64.png" sizes="64x64" type="image/png">
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- Custom Styles -->
|
||||
<link href="/css/app_pedidos_v2.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="navbar navbar-dark bg-primary sticky-top shadow">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="./img/favicon_sigma/LOGO_sigma64.png" alt="Logo" width="30" height="30"
|
||||
class="d-inline-block align-text-top">
|
||||
SIGMA Pedidos
|
||||
</a>
|
||||
<div class="d-flex text-white">
|
||||
<i class="bi bi-person-circle fs-4 me-2"></i>
|
||||
<span class="navbar-text">Pablinux</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container-fluid mt-4">
|
||||
<div class="row">
|
||||
|
||||
<!-- Columna de Productos -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Catálogo de Productos</h5>
|
||||
<!-- Barra de Búsqueda -->
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text"><i class="bi bi-search"></i></span>
|
||||
<input type="text" id="search-input" class="form-control" placeholder="Buscar producto por nombre o código...">
|
||||
</div>
|
||||
|
||||
<!-- Grid de Productos -->
|
||||
<div id="product-grid" class="row g-3">
|
||||
<!-- Las tarjetas de productos se insertarán aquí -->
|
||||
</div>
|
||||
|
||||
<!-- Indicador de Carga y Mensajes -->
|
||||
<div id="grid-feedback" class="text-center p-5" style="display: none;">
|
||||
<!-- Spinner -->
|
||||
<div class="spinner-border text-primary" role="status" id="loading-spinner">
|
||||
<span class="visually-hidden">Cargando...</span>
|
||||
</div>
|
||||
<!-- Mensaje de no resultados -->
|
||||
<p id="no-results-message" class="text-muted fs-5" style="display: none;">
|
||||
<i class="bi bi-emoji-frown fs-2"></i><br>
|
||||
No se encontraron productos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Columna del Pedido (Sidebar) -->
|
||||
<div class="col-lg-4">
|
||||
<div id="order-sidebar" class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3">Resumen del Pedido</h5>
|
||||
|
||||
<!-- Selección de Cliente -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Cliente</label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="client-name" class="form-control" placeholder="No seleccionado" readonly>
|
||||
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#clientSearchModal">
|
||||
<i class="bi bi-person-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista de Items del Pedido -->
|
||||
<div id="order-items-list" class="list-group mb-3">
|
||||
<!-- Los items del pedido se insertarán aquí -->
|
||||
<p id="empty-cart-message" class="text-center text-muted p-3">El carrito está vacío.</p>
|
||||
</div>
|
||||
|
||||
<!-- Totales -->
|
||||
<div id="order-totals" style="display: none;">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Subtotal
|
||||
<span id="subtotal-value">$0.00</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
IVA (12%)
|
||||
<span id="iva-value">$0.00</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center fw-bold fs-5">
|
||||
Total
|
||||
<span id="total-value">$0.00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Acciones -->
|
||||
<div class="d-grid gap-2 mt-3">
|
||||
<button id="submit-order-btn" class="btn btn-success" disabled>
|
||||
<i class="bi bi-cloud-upload"></i> Enviar Pedido
|
||||
</button>
|
||||
<button id="clear-order-btn" class="btn btn-outline-danger">
|
||||
<i class="bi bi-trash"></i> Limpiar Pedido
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Modal de Búsqueda de Clientes -->
|
||||
<div class="modal fade" id="clientSearchModal" tabindex="-1" aria-labelledby="clientSearchModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="clientSearchModalLabel">Buscar Cliente</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="text" id="client-search-input" class="form-control" placeholder="Buscar por nombre, RUC o CI...">
|
||||
<div id="client-search-results" class="list-group mt-3">
|
||||
<!-- Resultados de la búsqueda de clientes -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast Container para notificaciones -->
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="notification-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<strong id="toast-title" class="me-auto">Notificación</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div id="toast-body" class="toast-body">
|
||||
<!-- Mensaje de la notificación -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="/js/app_pedidos_v2.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -29,11 +29,11 @@
|
||||
function modal(url) {
|
||||
var array = url.split(".");
|
||||
var tipo = array.pop();
|
||||
var contentHTML = ''; // Variable para almacenar el HTML a inyectar
|
||||
|
||||
if (modo_img(tipo)) {
|
||||
//$("#img").attr("src","files/"+url);
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="files/${url}">`;
|
||||
contentHTML = `<img class="img-fluid rounded" src="files/${url}" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">`;
|
||||
} else if (modo_video(tipo)) {
|
||||
//var alto = window.innerHeight;
|
||||
var anch = window.innerWidth;
|
||||
var porc = 10;
|
||||
if (anch > 1400) {
|
||||
@@ -47,192 +47,301 @@
|
||||
} else if (anch > 576) {
|
||||
porc = 35;
|
||||
}
|
||||
//console.log("Ancho Original: "+anch+", Alto Original: "+alto);
|
||||
//console.log("Ancho -10%: "+(anch-(anch * porc/100))+", Alto: "+alto);
|
||||
var ctrl_video = `
|
||||
<video id="rep-video" width="${anch - (anch * porc / 100)}" controls preload="auto">
|
||||
contentHTML = `
|
||||
<video id="rep-video" width="${anch - (anch * porc / 100)}" controls preload="auto" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
||||
<source src="files/${url}" type="video/${tipo}">
|
||||
</video>`;
|
||||
document.getElementById("data").innerHTML = ctrl_video;
|
||||
} else if (modo_music(tipo)) {
|
||||
var ctrl_audio = `<div class="text-center "><img src="img/Music-icon.png">
|
||||
<video controls preload="auto" id="ctrl_audio">
|
||||
contentHTML = `<div class="text-center">
|
||||
<img src="img/Music-icon.png" style="width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin-bottom: 20px;">
|
||||
<video controls preload="auto" id="ctrl_audio" style="width: 100%; border-radius: 15px;">
|
||||
<source src="files/${url}" type="audio/${tipo}">
|
||||
</video></div>`;
|
||||
document.getElementById("data").innerHTML = ctrl_audio;
|
||||
} else if (modo_pdf(tipo)) { // *** NUEVA LÓGICA PARA PDF ***
|
||||
// Usamos un iframe para incrustar el PDF. El navegador lo renderizará.
|
||||
// Se añade estilo para que el iframe ocupe el espacio disponible y tenga un buen aspecto.
|
||||
contentHTML = `
|
||||
<div style="width: 100%; height: 60vh;"> <iframe src="files/${url}" style="width: 100%; height: 100%; border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
||||
Este navegador no soporta PDFs incrustados. Puedes descargarlo <a href="files/${url}">aquí</a>.
|
||||
</iframe>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="img/desc256.png">`;
|
||||
contentHTML = `<img class="img-fluid rounded" src="img/desc256.png" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">`;
|
||||
}
|
||||
document.getElementById("titulo").innerHTML = `Descargar: <a href="files/${url}">${url}</a>`;
|
||||
|
||||
document.getElementById("data").innerHTML = contentHTML; // Inyecta el HTML generado
|
||||
document.getElementById("titulo").innerHTML = `<i class="fas fa-download me-2"></i>Descargar: <a href="files/${url}" style="color: #667eea; text-decoration: none;">${url}</a>`;
|
||||
$("#myModal").modal({ backdrop: true });
|
||||
}
|
||||
|
||||
function modo_img(file) {
|
||||
var tipoImg = ["jpg", "jpeg", "png","gif", "bmp", "tiff", "svg", "webp", "ico", "psd", "ai", "eps", "raw", "cr2", "nef", "orf", "sr2", "rw2", "dng", "arw", "3fr", "dcr", "kdc", "erf", "mrw", "pef", "raf", "x3f", "srw", "rwl", "r3d", "rwz", "z6ii", "z5", "drf", "k25", "bay", "cap", "iiq", "fff", "mef", "mos", "crw", "erf", "kdc", "dcs", "gpr", "mef", "mos", "nef", "nrw", "orf", "raw", "rw2", "rwl", "sr2", "srf", "x3f"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
var tipoImg = ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg", "webp", "ico", "psd", "ai", "eps", "raw", "cr2", "nef", "orf", "sr2", "rw2", "dng", "arw", "3fr", "dcr", "kdc", "erf", "mrw", "pef", "raf", "x3f", "srw", "rwl", "r3d", "rwz", "z6ii", "z5", "drf", "k25", "bay", "cap", "iiq", "fff", "mef", "mos", "crw", "erf", "kdc", "dcs", "gpr", "mef", "mos", "nef", "nrw", "orf", "raw", "rw2", "rwl", "sr2", "srf", "x3f"];
|
||||
return tipoImg.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
function modo_video(file) {
|
||||
var tipoImg = ["mp4", "mpg", "webm","avi", "mkv", "mov", "wmv", "flv", "3gp", "m4v"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
console.log(item);
|
||||
if (file == item) {
|
||||
//console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
var tipoVideo = ["mp4", "mpg", "webm", "avi", "mkv", "mov", "wmv", "flv", "3gp", "m4v"];
|
||||
return tipoVideo.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
function modo_music(file) {
|
||||
var tipoImg = ["mp3", "acc", "wav", "wma", "ogg", "m4a"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
var tipoMusic = ["mp3", "acc", "wav", "wma", "ogg", "m4a"];
|
||||
return tipoMusic.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
// *** NUEVA FUNCIÓN PARA IDENTIFICAR PDF ***
|
||||
function modo_pdf(file) {
|
||||
var tipoPdf = ["pdf"];
|
||||
return tipoPdf.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
// --- CÓDIGO DE BÚSQUEDA ---
|
||||
$(document).ready(function() {
|
||||
$('form.search-container').submit(function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('#searchInput').on('keyup', function() {
|
||||
var searchText = $(this).val().toLowerCase();
|
||||
$('#filesTableBody tr').each(function() {
|
||||
var fileName = $(this).find('.file-name').text().toLowerCase();
|
||||
if (fileName.includes(searchText)) {
|
||||
$(this).show();
|
||||
} else {
|
||||
$(this).hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- CÓDIGO PARA LA SUBIDA AJAX Y MODAL ---
|
||||
const uploadForm = document.getElementById('uploadForm');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const messageModal = document.getElementById('messageModal');
|
||||
const modalTitle = document.getElementById('modalTitleMessage');
|
||||
const modalMessage = document.getElementById('modalBodyMessage');
|
||||
const modalCloseButton = document.getElementById('modalCloseButton');
|
||||
|
||||
uploadForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
const submitButton = this.querySelector('input[type="submit"]');
|
||||
submitButton.disabled = true;
|
||||
submitButton.value = 'Subiendo...';
|
||||
|
||||
fetch(this.action, {
|
||||
method: this.method,
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(errorData => {
|
||||
throw new Error(errorData.message || 'Error en la respuesta del servidor');
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
modalTitle.textContent = '¡Subida Exitosa!';
|
||||
modalMessage.textContent = data.message;
|
||||
} else {
|
||||
modalTitle.textContent = 'Error en la Subida';
|
||||
modalMessage.textContent = data.message || 'Ocurrió un error desconocido al subir el archivo.';
|
||||
}
|
||||
$('#messageModal').modal('show');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al subir el archivo:', error);
|
||||
modalTitle.textContent = 'Error de Conexión';
|
||||
modalMessage.textContent = 'No se pudo conectar con el servidor o hubo un error inesperado: ' + error.message;
|
||||
$('#messageModal').modal('show');
|
||||
})
|
||||
.finally(() => {
|
||||
submitButton.disabled = false;
|
||||
submitButton.value = '📤 SUBIR ARCHIVO';
|
||||
fileInput.value = '';
|
||||
});
|
||||
});
|
||||
|
||||
$('#messageModal').on('hidden.bs.modal', function (e) {
|
||||
// Puedes agregar lógica aquí, por ejemplo, recargar la página
|
||||
// para que la lista de archivos se actualice automáticamente.
|
||||
// window.location.reload();
|
||||
// O mejor: realizar otra solicitud AJAX para obtener la lista actualizada de archivos.
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const elements = document.querySelectorAll('.upload-card, .files-card');
|
||||
elements.forEach((el, index) => {
|
||||
el.style.animationDelay = `${index * 0.2}s`;
|
||||
el.classList.add('animate-fadeInUp');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ENCABEZADO O MENU --->
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand navbar-dark navbar-custom">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="navbar-brand dropdown-toggle" href="#">
|
||||
<img src="img/favicon_sigma/android-chrome-192x192.png" alt="" width="36" height="36">
|
||||
<img src="img/favicon_sigma/android-chrome-192x192.png" alt="Cloud SIGMA" width="36" height="36">
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||
<ul>
|
||||
<li class="user-header">
|
||||
<img src="img/usuario.jpeg" class="img-circle" alt="User Image">
|
||||
<p>
|
||||
ID# <span id="usr_id">8</span> -
|
||||
Usuario: <span id="usr_nom">PABLO FARIAS</span><br>
|
||||
<small>Miembro desde: <span id="usr_reg">2022-02-18 23:39:00</span></small>
|
||||
</p>
|
||||
<li class="user-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Seguidores</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">UID: 64b06b022c7b9</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Amigos</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</li>
|
||||
<li class="user-footer">
|
||||
<div class="pull-left">
|
||||
<a href="#" class="btn btn-default btn-flat">Perfil</a>
|
||||
<div class="user-header">
|
||||
<img src="img/usuario.jpeg" class="img-circle" alt="User Image">
|
||||
<p>
|
||||
<strong>ID# <span id="usr_id">8</span></strong><br>
|
||||
<strong>Usuario: <span id="usr_nom">PABLO FARIAS</span></strong><br>
|
||||
<small>Miembro desde: <span id="usr_reg">2022-02-18 23:39:00</span></small>
|
||||
</p>
|
||||
</div>
|
||||
<div class="user-body">
|
||||
<div class="row text-center">
|
||||
<div class="col-4">
|
||||
<a href="#"><i class="fas fa-users me-1"></i>Seguidores</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a href="../cloud" class="btn btn-default btn-flat">Cerrar Session</a>
|
||||
<div class="col-4">
|
||||
<a href="#"><i class="fas fa-id-card me-1"></i>UID: 64b06b022c7b9</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="col-4">
|
||||
<a href="#"><i class="fas fa-user-friends me-1"></i>Amigos</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-footer">
|
||||
<a href="#" class="btn"><i class="fas fa-user me-1"></i>Perfil</a>
|
||||
<a href="../cloud" class="btn"><i class="fas fa-sign-out-alt me-1"></i>Cerrar Sesión</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Buscar Archivo" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Buscar</button>
|
||||
|
||||
<form class="d-flex search-container">
|
||||
<input class="form-control me-2" type="search" placeholder="🔍 Buscar Archivo" aria-label="Search" id="searchInput">
|
||||
<button class="btn btn-search" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- formulario para subir archivos --->
|
||||
<div class="container">
|
||||
<div class="row upload">
|
||||
<div class="col-lg mt-2">
|
||||
<label for="basic-url" class="form-label info">SIGMA Cloud</label>
|
||||
<form class="d-flex" method="POST" action="/upload" enctype="multipart/form-data">
|
||||
<div class="input-group">
|
||||
<input type="file" name="file_toUpload" class="form-control" />
|
||||
<input type="submit" class="btn btn-outline-secondary" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- RENDER formulario para subir archivos --->
|
||||
<div class="col-lg mt-2 files">
|
||||
<div class="row">
|
||||
<table class="table table-dark">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nombre</th>
|
||||
<th>Fecha</th>
|
||||
<th>Accion</th>
|
||||
</tr>
|
||||
<% for (i in data) { %>
|
||||
<tr>
|
||||
<td><span>
|
||||
<%= data[i].indice%>
|
||||
</span></td>
|
||||
<td>
|
||||
<!--a href="<%= data[i].link %>"><%= data[i].archivo %></a-->
|
||||
<span>
|
||||
<%= data[i].archivo %>
|
||||
</span>
|
||||
</td>
|
||||
<td>fecha</td>
|
||||
<td>
|
||||
<button type="button" name="button" onclick="modal('<%= data[i].archivo %>')">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
</table>
|
||||
<div class="container main-container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="upload-card">
|
||||
<h1 class="upload-title">
|
||||
<i class="fas fa-cloud-upload-alt me-3"></i>SIGMA Cloud
|
||||
</h1>
|
||||
<form id="uploadForm" class="d-flex" method="POST" action="/upload" enctype="multipart/form-data">
|
||||
<div class="input-group">
|
||||
<input type="file" name="file_toUpload" class="form-control file-input" id="fileInput" />
|
||||
<input type="submit" class="btn btn-upload" value="📤 SUBIR ARCHIVO" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDITAR DATOS Y VISUALIZAR archivos --->
|
||||
<div class="modal fade" tabindex="-1" id="myModal">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div id="titulo">URL</div>
|
||||
<button class="close" data-dismiss="modal" aria-label="cerar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="data">
|
||||
<!--img class="img-fluid rounded" id="img" src="" alt=""-->
|
||||
<div class="col-lg-12">
|
||||
<div class="files-card">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><i class="fas fa-hashtag me-2"></i>ID</th>
|
||||
<th><i class="fas fa-file me-2"></i>Nombre</th>
|
||||
<th><i class="fas fa-calendar me-2"></i>Fecha</th>
|
||||
<th><i class="fas fa-cogs me-2"></i>Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="filesTableBody"> <% for (i in data) { %>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="badge bg-primary rounded-pill">
|
||||
<%= data[i].indice %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="file-name">
|
||||
<i class="fas fa-file-alt me-2"></i>
|
||||
<%= data[i].archivo %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted">
|
||||
<i class="fas fa-clock me-1"></i>
|
||||
fecha
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn-action" onclick="modal('<%= data[i].archivo %>')" title="Ver archivo">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="delete" class="fas fa-trash fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="edit" class="fas fa-pencil fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="compartir" class="fa-solid fa-share-nodes"></i>
|
||||
</button>
|
||||
<button class="btn btn-warnigb" type="button" data-dismiss="modal"> Aceptar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="myModal">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="titulo">Archivo</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-dismiss="modal" aria-label="Cerrar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="data" class="text-center">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" type="button" title="Eliminar">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="Editar">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="Compartir">
|
||||
<i class="fas fa-share-nodes"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" data-dismiss="modal">
|
||||
<i class="fas fa-check me-2"></i>Aceptar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="messageModal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalTitleMessage"></h5>
|
||||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Cerrar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="modalBodyMessage"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="modalCloseButton">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
720
src/views/video_v1.ejs
Normal file
720
src/views/video_v1.ejs
Normal file
@@ -0,0 +1,720 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SIGMA - Reproductor de Videos</title>
|
||||
<!-- Uix CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
|
||||
<!-- Slick Carousel CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #e0e0e0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Banner mejorado */
|
||||
.banner {
|
||||
background: rgba(15, 15, 35, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 45px;
|
||||
filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logo img:hover {
|
||||
filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 30px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
.search-bar:hover, .search-bar:focus-within {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: #64ffda;
|
||||
box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.7rem;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-bar input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
border: none;
|
||||
padding: 0.7rem 1.2rem;
|
||||
border-radius: 25px;
|
||||
color: #0f0f23;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-bar button::before {
|
||||
content: "🔍";
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-bar button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
|
||||
background: linear-gradient(45deg, #4fc3f7, #29b6f6);
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu button {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 0.8rem;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu button::before {
|
||||
content: "☰";
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.menu button:hover {
|
||||
background: rgba(100, 255, 218, 0.2);
|
||||
border-color: #64ffda;
|
||||
transform: rotate(90deg);
|
||||
box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 110%;
|
||||
right: 0;
|
||||
background: rgba(15, 15, 35, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 15px;
|
||||
padding: 1rem 0;
|
||||
min-width: 220px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
animation: fadeInDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.menu ul li {
|
||||
list-style: none;
|
||||
padding: 1rem 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.menu ul li:hover {
|
||||
background: rgba(100, 255, 218, 0.1);
|
||||
color: #64ffda;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
/* Contenedor principal */
|
||||
.main-content {
|
||||
padding-top: 100px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 380px;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Reproductor mejorado */
|
||||
.player {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #64ffda, #00bcd4, #3f51b5);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.player:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 35px 100px rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#main-video, #video-frame {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 2rem 0 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video-info h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.8rem;
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.video-info p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Lista de videos lateral */
|
||||
.video-list {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.video-list h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.8rem;
|
||||
background: linear-gradient(45deg, #3f51b5, #9c27b0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.video-carousel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 15px;
|
||||
padding: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.1), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.video-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.video-item:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateX(10px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.video-item.active {
|
||||
background: rgba(100, 255, 218, 0.15);
|
||||
border-color: #64ffda;
|
||||
box-shadow: 0 10px 30px rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.video-item img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.video-item:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.video-item .info h4 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.video-item .info p {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Scrollbar personalizada */
|
||||
.video-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.video-list::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-list::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-list::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(45deg, #4fc3f7, #29b6f6);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1200px) {
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.video-list {
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
padding: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin: 1rem 0 0 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.player, .video-list {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#main-video, #video-frame {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.banner {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.video-info h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Efectos adicionales */
|
||||
.play-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(100, 255, 218, 0.9);
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0f0f23;
|
||||
font-size: 24px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.video-item:hover .play-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #64ffda;
|
||||
}
|
||||
|
||||
.loading.active {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="logo">
|
||||
<img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo">
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Buscar videos..." id="search-input">
|
||||
<button onclick="buscarVideos()">Buscar</button>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li><i class="uix uix-user"></i> Información de Usuario</li>
|
||||
<li><i class="uix uix-settings"></i> Configuración</li>
|
||||
<li><i class="uix uix-logout"></i> Cerrar Sesión</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="content-grid">
|
||||
<div class="player">
|
||||
<div class="video-container">
|
||||
<video id="main-video" controls>
|
||||
<source src="../files/DAPSI_ws.mp4" type="video/mp4">
|
||||
Tu navegador no soporta el elemento de video.
|
||||
</video>
|
||||
|
||||
<iframe
|
||||
id="video-frame"
|
||||
style="display: none;"
|
||||
src="https://www.youtube.com/embed/t__kI83_BK0?si=_pCitHfYKsk7BHFh"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
|
||||
<div class="loading">
|
||||
<p>Cargando video...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-info">
|
||||
<h2 id="current-video-title">Video Principal SIGMA</h2>
|
||||
<p id="current-video-description">Selecciona un video de la lista para reproducir</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-list">
|
||||
<h3>🎬 Lista de Videos</h3>
|
||||
<div class="video-carousel">
|
||||
<!-- Los videos se cargarán aquí dinámicamente -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Toggle menu
|
||||
$('.banner .menu button').click(function () {
|
||||
$('.banner .menu ul').toggle();
|
||||
});
|
||||
|
||||
// Cerrar menú al hacer click fuera
|
||||
$(document).click(function(e) {
|
||||
if (!$(e.target).closest('.menu').length) {
|
||||
$('.menu ul').hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Lista de videos mejorada
|
||||
var videos = [
|
||||
{
|
||||
"nombre": "¿Qué es SIGMA?",
|
||||
"descripcion": "Introducción completa al sistema SIGMA",
|
||||
"miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg",
|
||||
"url": "../files/QueEsSigma.mp4",
|
||||
"tipo": "local"
|
||||
},
|
||||
{
|
||||
"nombre": "App SIGMA",
|
||||
"descripcion": "Funcionalidades de la aplicación SIGMA",
|
||||
"miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg",
|
||||
"url": "../files/AppSIGMA.mp4",
|
||||
"tipo": "local"
|
||||
},
|
||||
{
|
||||
"nombre": "SIGMA OSX",
|
||||
"descripcion": "Versión para macOS de SIGMA",
|
||||
"miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg",
|
||||
"url": "../files/SIGMA-OSX.mp4",
|
||||
"tipo": "local"
|
||||
},
|
||||
{
|
||||
"nombre": "DAPSI Workspace",
|
||||
"descripcion": "Espacio de trabajo DAPSI integrado",
|
||||
"miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg",
|
||||
"url": "../files/DAPSI_ws.mp4",
|
||||
"tipo": "local"
|
||||
},
|
||||
{
|
||||
"nombre": "SIGMA Bot IA",
|
||||
"descripcion": "Inteligencia artificial integrada",
|
||||
"miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg",
|
||||
"url": "../files/SIGMA_BOT_IA.mp4",
|
||||
"tipo": "local"
|
||||
},
|
||||
{
|
||||
"nombre": "Nueva IA",
|
||||
"descripcion": "Últimas actualizaciones de IA",
|
||||
"miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg",
|
||||
"url": "../files/IA_NUEVA_P.mp4",
|
||||
"tipo": "local"
|
||||
},
|
||||
{
|
||||
"nombre": "Tutorial YouTube",
|
||||
"descripcion": "Video tutorial desde YouTube",
|
||||
"miniatura": "https://i.ytimg.com/vi/t__kI83_BK0/maxresdefault.jpg",
|
||||
"url": "https://www.youtube.com/embed/t__kI83_BK0?si=d6BEy237vtC5_O_r",
|
||||
"tipo": "youtube"
|
||||
},
|
||||
{
|
||||
"nombre": "Demo Avanzado",
|
||||
"descripcion": "Demostración avanzada de características",
|
||||
"miniatura": "https://i.ytimg.com/vi/t__kI83_BK0/maxresdefault.jpg",
|
||||
"url": "https://www.youtube.com/embed/t__kI83_BK0?si=oQxTNbThHroUxZ5v",
|
||||
"tipo": "youtube"
|
||||
}
|
||||
];
|
||||
|
||||
var videosOriginales = [...videos]; // Copia para búsquedas
|
||||
|
||||
// Generar elementos de video
|
||||
function cargarVideos(listaVideos) {
|
||||
$('.video-carousel').empty();
|
||||
listaVideos.forEach(function (video, index) {
|
||||
var icono = video.tipo === 'youtube' ? '🎥' : '📹';
|
||||
var elemento = `
|
||||
<div class="video-item" data-url="${video.url}" data-tipo="${video.tipo}" data-index="${index}">
|
||||
<img src="${video.miniatura}" alt="${video.nombre}" onerror="this.src='https://via.placeholder.com/300x180/333/fff?text=Video'">
|
||||
<div class="play-icon">▶</div>
|
||||
<div class="info">
|
||||
<h4>${icono} ${video.nombre}</h4>
|
||||
<p>${video.descripcion}</p>
|
||||
</div>
|
||||
</div>`;
|
||||
$('.video-carousel').append(elemento);
|
||||
});
|
||||
}
|
||||
|
||||
// Cargar videos inicialmente
|
||||
cargarVideos(videos);
|
||||
|
||||
// Función mejorada para cambiar video
|
||||
function cambiarVideo(url, tipo, nombre, descripcion, index) {
|
||||
$('.loading').addClass('active');
|
||||
$('.video-item').removeClass('active');
|
||||
$(`.video-item[data-index="${index}"]`).addClass('active');
|
||||
|
||||
$('#current-video-title').text(nombre);
|
||||
$('#current-video-description').text(descripcion);
|
||||
|
||||
setTimeout(() => {
|
||||
if (tipo === 'youtube' || url.includes('youtube.com') || url.includes('youtu.be')) {
|
||||
// Convertir URL de YouTube si es necesario
|
||||
let embedUrl = url;
|
||||
if (url.includes('youtu.be/')) {
|
||||
const videoId = url.split('youtu.be/')[1].split('?')[0];
|
||||
embedUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||
} else if (url.includes('youtube.com/watch?v=')) {
|
||||
const videoId = url.split('v=')[1].split('&')[0];
|
||||
embedUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||
}
|
||||
|
||||
$('#main-video').hide();
|
||||
$('#video-frame').show().attr('src', embedUrl);
|
||||
} else {
|
||||
$('#video-frame').hide();
|
||||
$('#main-video').show();
|
||||
$('#main-video').attr('src', url);
|
||||
$('#main-video')[0].load();
|
||||
}
|
||||
$('.loading').removeClass('active');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Event listener para clicks en videos
|
||||
$(document).on('click', '.video-item', function() {
|
||||
const url = $(this).data('url');
|
||||
const tipo = $(this).data('tipo');
|
||||
const index = $(this).data('index');
|
||||
const nombre = $(this).find('h4').text();
|
||||
const descripcion = $(this).find('p').text();
|
||||
|
||||
cambiarVideo(url, tipo, nombre, descripcion, index);
|
||||
});
|
||||
|
||||
// Función de búsqueda
|
||||
window.buscarVideos = function() {
|
||||
const termino = $('#search-input').val().toLowerCase().trim();
|
||||
|
||||
if (termino === '') {
|
||||
cargarVideos(videosOriginales);
|
||||
return;
|
||||
}
|
||||
|
||||
const videosFiltrados = videosOriginales.filter(video =>
|
||||
video.nombre.toLowerCase().includes(termino) ||
|
||||
video.descripcion.toLowerCase().includes(termino)
|
||||
);
|
||||
|
||||
cargarVideos(videosFiltrados);
|
||||
|
||||
if (videosFiltrados.length === 0) {
|
||||
$('.video-carousel').html('<p style="text-align: center; color: rgba(255,255,255,0.6); padding: 2rem;">No se encontraron videos que coincidan con tu búsqueda.</p>');
|
||||
}
|
||||
};
|
||||
|
||||
// Búsqueda en tiempo real
|
||||
$('#search-input').on('input', function() {
|
||||
clearTimeout(window.searchTimeout);
|
||||
window.searchTimeout = setTimeout(buscarVideos, 300);
|
||||
});
|
||||
|
||||
// Búsqueda con Enter
|
||||
$('#search-input').on('keypress', function(e) {
|
||||
if (e.which === 13) {
|
||||
buscarVideos();
|
||||
}
|
||||
});
|
||||
|
||||
// Marcar primer video como activo
|
||||
$('.video-item').first().addClass('active');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,152 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lista de Videos</title>
|
||||
<!-- Uix CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
|
||||
<!-- Slick Carousel CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
|
||||
<link rel="stylesheet" href="../css/app_videos.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="logo">
|
||||
<img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="Logo">
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Buscar...">
|
||||
<button></button>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li><i class="uix uix-user"></i> Información de Usuario</li>
|
||||
<li><i class="uix uix-settings"></i> Configuración</li>
|
||||
<li><i class="uix uix-logout"></i> Cerrar Sesión</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-list">
|
||||
<div class="video-carousel">
|
||||
<!-- Lista de miniaturas de videos se generará aquí -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player">
|
||||
<video id="main-video" width="640" height="480" controls>
|
||||
<source src="../files/DAPSI_ws.mp4" type="video/mp4">
|
||||
Tu navegador no soporta el elemento de video.
|
||||
</video>
|
||||
|
||||
<iframe
|
||||
id="video-frame"
|
||||
style="display: none;"
|
||||
width="640" height="480"
|
||||
src="https://www.youtube.com/embed/t__kI83_BK0?si=_pCitHfYKsk7BHFh"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<!-- Slick Carousel JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.video-carousel').slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
easing: 'linear',
|
||||
draggable: true,
|
||||
touchMove: true, // Habilita el movimiento táctil
|
||||
prevArrow: '<button class="slick-prev">◀</button>',
|
||||
nextArrow: '<button class="slick-next">▶</button>',
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Toggle menu
|
||||
$('.banner .menu button').click(function () {
|
||||
$('.banner .menu ul').toggle();
|
||||
});
|
||||
|
||||
// Agregar miniaturas y URL de video al carrusel
|
||||
var videos = [
|
||||
{ "nombre": "Video 1", "descripcion": "Descripción del video 1", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/QueEsSigma.mp4" },
|
||||
{ "nombre": "Video 2", "descripcion": "Descripción del video 2", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/AppSIGMA.mp4" },
|
||||
{ "nombre": "Video 3", "descripcion": "Descripción del video 3", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/SIGMA-OSX.mp4" },
|
||||
{ "nombre": "Video 4", "descripcion": "Descripción del video 4", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/DAPSI_ws.mp4" },
|
||||
{ "nombre": "Video 5", "descripcion": "Descripción del video 5", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/SIGMA_BOT_IA.mp4" },
|
||||
{ "nombre": "Video 6", "descripcion": "Descripción del video 6", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/IA_NUEVA_P.mp4" },
|
||||
{ "nombre": "Video 7", "descripcion": "Descripción del video 7", "miniatura": "https://via.placeholder.com/250x150", "url": "https://youtu.be/t__kI83_BK0?si=d6BEy237vtC5_O_r" },
|
||||
{ "nombre": "Video 8", "descripcion": "Descripción del video 8", "miniatura": "https://via.placeholder.com/250x150", "url": "https://www.youtube.com/embed/t__kI83_BK0?si=oQxTNbThHroUxZ5v" }
|
||||
];
|
||||
|
||||
// Agregar videos al carrusel
|
||||
videos.forEach(function (video) {
|
||||
var elemento = `
|
||||
<div class="video-item" onclick="cambiarVideo('${video.url}')">
|
||||
<img src="${video.miniatura}" alt="${video.nombre}">
|
||||
<div class="info">
|
||||
<h4>${video.nombre}</h4>
|
||||
<p>${video.descripcion}</p>
|
||||
</div>
|
||||
</div>`;
|
||||
$('.video-carousel').slick('slickAdd', elemento);
|
||||
});
|
||||
|
||||
// Reproducir video al hacer clic en un elemento del carrusel
|
||||
/*$('.video-carousel').on('click', '.video-item', function () {
|
||||
var videoUrl = $(this).data('url');
|
||||
if (videoUrl.includes('youtube.com')) {
|
||||
$('#main-video').hide();
|
||||
$('#video-frame').show().attr('src', videoUrl);
|
||||
} else {
|
||||
$('#video-frame').hide();
|
||||
$('#main-video').show().find('source').attr('src', videoUrl);
|
||||
$('#main-video')[0].load();
|
||||
$('#main-video')[0].play();
|
||||
}
|
||||
});*/
|
||||
});
|
||||
// Función para cambiar el video principal
|
||||
function cambiarVideo(url) {
|
||||
console.log('Cambiando video a:', url);
|
||||
if (url.includes('youtube.com')) {
|
||||
$('#main-video').hide();
|
||||
$('#video-frame').show().attr('src', url);
|
||||
} else {
|
||||
$('#video-frame').hide();
|
||||
$('#main-video').show();
|
||||
$('#main-video').attr('src', url);
|
||||
$('#main-video')[0].load();
|
||||
$('#main-video')[0].play();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
349
src/views/videos_upload.ejs
Normal file
349
src/views/videos_upload.ejs
Normal file
@@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SIGMA - Subir Video</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #e0e0e0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: rgba(15, 15, 35, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 45px;
|
||||
filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logo img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-container:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 35px 100px rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.upload-container h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
border-color: #64ffda;
|
||||
box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
background-size: 1em;
|
||||
}
|
||||
|
||||
.form-group input[type="file"] {
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group input[type="file"]::-webkit-file-upload-button {
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
border: none;
|
||||
padding: 0.7rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
color: #0f0f23;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.form-group input[type="file"]::-webkit-file-upload-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #0f0f23;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(100, 255, 218, 0.4);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#previewContainer {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#previewImg {
|
||||
max-width: 200px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#statusMessage {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
display: none; /* Oculto por defecto */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#statusMessage.success {
|
||||
background-color: rgba(100, 255, 218, 0.2);
|
||||
border: 1px solid #64ffda;
|
||||
color: #64ffda;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#statusMessage.error {
|
||||
background-color: rgba(255, 100, 100, 0.2);
|
||||
border: 1px solid #ff6464;
|
||||
color: #ff6464;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button[type="submit"]:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="logo">
|
||||
<a href="/videos"><img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="upload-container">
|
||||
<h2>
|
||||
<i class="uix uix-cloud-upload"></i>
|
||||
<span>Subir Contenido Multimedia</span>
|
||||
</h2>
|
||||
<form id="uploadForm" action="/videos_upload" method="POST" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="nombre">Nombre del Video</label>
|
||||
<input type="text" id="nombre" name="nombre" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="descripcion">Descripción</label>
|
||||
<textarea id="descripcion" name="descripcion" required></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="origen">Origen del Contenido</label>
|
||||
<select id="origen" name="origen" required>
|
||||
<option value="Local" selected>Local (Subir archivo)</option>
|
||||
<option value="YouTube">YouTube</option>
|
||||
<option value="Vimeo">Vimeo</option>
|
||||
<option value="Twitch">Twitch</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group hidden" id="urlGroup">
|
||||
<label for="url">URL del Video</label>
|
||||
<input type="url" id="url" name="url" placeholder="https://www.youtube.com/watch?v=...">
|
||||
</div>
|
||||
<div class="form-group" id="fileGroup">
|
||||
<label for="videoUpload">Seleccionar Archivo de Video</label>
|
||||
<input type="file" id="videoUpload" name="archivo" accept="video/*">
|
||||
</div>
|
||||
<div id="previewContainer" class="hidden">
|
||||
<img id="previewImg" src="" alt="Miniatura">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit">Subir Video</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="statusMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const origenSelect = document.getElementById('origen');
|
||||
const urlGroup = document.getElementById('urlGroup');
|
||||
const fileGroup = document.getElementById('fileGroup');
|
||||
const urlInput = document.getElementById('url');
|
||||
const fileInput = document.getElementById('videoUpload');
|
||||
const uploadForm = document.getElementById('uploadForm');
|
||||
const statusMessage = document.getElementById('statusMessage');
|
||||
const submitButton = uploadForm.querySelector('button[type="submit"]');
|
||||
|
||||
function toggleInputs() {
|
||||
const selectedOrigin = origenSelect.value;
|
||||
if (selectedOrigin === 'Local') {
|
||||
urlGroup.classList.add('hidden');
|
||||
fileGroup.classList.remove('hidden');
|
||||
urlInput.required = false;
|
||||
fileInput.required = true;
|
||||
} else {
|
||||
urlGroup.classList.remove('hidden');
|
||||
fileGroup.classList.add('hidden');
|
||||
urlInput.required = true;
|
||||
fileInput.required = false;
|
||||
}
|
||||
}
|
||||
|
||||
origenSelect.addEventListener('change', toggleInputs);
|
||||
|
||||
// Initial state
|
||||
toggleInputs();
|
||||
|
||||
uploadForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault(); // Prevenir el envío tradicional del formulario
|
||||
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = 'Subiendo...';
|
||||
statusMessage.className = '';
|
||||
statusMessage.textContent = '';
|
||||
|
||||
const formData = new FormData(uploadForm);
|
||||
|
||||
try {
|
||||
const response = await fetch('/videos_upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
statusMessage.className = 'success';
|
||||
statusMessage.textContent = result.message + '. Redirigiendo a la lista de videos...';
|
||||
uploadForm.reset();
|
||||
setTimeout(() => {
|
||||
window.location.href = '/videos';
|
||||
}, 2000); // Redirige después de 2 segundos para que el usuario vea el mensaje.
|
||||
} else {
|
||||
statusMessage.className = 'error';
|
||||
statusMessage.textContent = result.message || 'Ocurrió un error desconocido.';
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = 'Subir Video';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error en el fetch:', error);
|
||||
statusMessage.className = 'error';
|
||||
statusMessage.textContent = 'Error de conexión. No se pudo contactar al servidor.';
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = 'Subir Video';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
349
src/views/videos_upload_v2.ejs
Normal file
349
src/views/videos_upload_v2.ejs
Normal file
@@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SIGMA - Subir Video</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #e0e0e0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: rgba(15, 15, 35, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 45px;
|
||||
filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logo img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-container:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 35px 100px rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.upload-container h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
border-color: #64ffda;
|
||||
box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
background-size: 1em;
|
||||
}
|
||||
|
||||
.form-group input[type="file"] {
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group input[type="file"]::-webkit-file-upload-button {
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
border: none;
|
||||
padding: 0.7rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
color: #0f0f23;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.form-group input[type="file"]::-webkit-file-upload-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(45deg, #64ffda, #00bcd4);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #0f0f23;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(100, 255, 218, 0.4);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#previewContainer {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#previewImg {
|
||||
max-width: 200px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#statusMessage {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
display: none; /* Oculto por defecto */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#statusMessage.success {
|
||||
background-color: rgba(100, 255, 218, 0.2);
|
||||
border: 1px solid #64ffda;
|
||||
color: #64ffda;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#statusMessage.error {
|
||||
background-color: rgba(255, 100, 100, 0.2);
|
||||
border: 1px solid #ff6464;
|
||||
color: #ff6464;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button[type="submit"]:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="logo">
|
||||
<a href="/videos"><img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="upload-container">
|
||||
<h2>
|
||||
<i class="uix uix-cloud-upload"></i>
|
||||
<span>Subir Contenido Multimedia</span>
|
||||
</h2>
|
||||
<form id="uploadForm" action="/videos_upload" method="POST" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="nombre">Nombre del Video</label>
|
||||
<input type="text" id="nombre" name="nombre" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="descripcion">Descripción</label>
|
||||
<textarea id="descripcion" name="descripcion" required></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="origen">Origen del Contenido</label>
|
||||
<select id="origen" name="origen" required>
|
||||
<option value="Local" selected>Local (Subir archivo)</option>
|
||||
<option value="YouTube">YouTube</option>
|
||||
<option value="Vimeo">Vimeo</option>
|
||||
<option value="Twitch">Twitch</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group hidden" id="urlGroup">
|
||||
<label for="url">URL del Video</label>
|
||||
<input type="url" id="url" name="url" placeholder="https://www.youtube.com/watch?v=...">
|
||||
</div>
|
||||
<div class="form-group" id="fileGroup">
|
||||
<label for="videoUpload">Seleccionar Archivo de Video</label>
|
||||
<input type="file" id="videoUpload" name="archivo" accept="video/*">
|
||||
</div>
|
||||
<div id="previewContainer" class="hidden">
|
||||
<img id="previewImg" src="" alt="Miniatura">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit">Subir Video</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="statusMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const origenSelect = document.getElementById('origen');
|
||||
const urlGroup = document.getElementById('urlGroup');
|
||||
const fileGroup = document.getElementById('fileGroup');
|
||||
const urlInput = document.getElementById('url');
|
||||
const fileInput = document.getElementById('videoUpload');
|
||||
const uploadForm = document.getElementById('uploadForm');
|
||||
const statusMessage = document.getElementById('statusMessage');
|
||||
const submitButton = uploadForm.querySelector('button[type="submit"]');
|
||||
|
||||
function toggleInputs() {
|
||||
const selectedOrigin = origenSelect.value;
|
||||
if (selectedOrigin === 'Local') {
|
||||
urlGroup.classList.add('hidden');
|
||||
fileGroup.classList.remove('hidden');
|
||||
urlInput.required = false;
|
||||
fileInput.required = true;
|
||||
} else {
|
||||
urlGroup.classList.remove('hidden');
|
||||
fileGroup.classList.add('hidden');
|
||||
urlInput.required = true;
|
||||
fileInput.required = false;
|
||||
}
|
||||
}
|
||||
|
||||
origenSelect.addEventListener('change', toggleInputs);
|
||||
|
||||
// Initial state
|
||||
toggleInputs();
|
||||
|
||||
uploadForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault(); // Prevenir el envío tradicional del formulario
|
||||
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = 'Subiendo...';
|
||||
statusMessage.className = '';
|
||||
statusMessage.textContent = '';
|
||||
|
||||
const formData = new FormData(uploadForm);
|
||||
|
||||
try {
|
||||
const response = await fetch('/videos_upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
statusMessage.className = 'success';
|
||||
statusMessage.textContent = result.message + '. Redirigiendo a la lista de videos...';
|
||||
uploadForm.reset();
|
||||
setTimeout(() => {
|
||||
window.location.href = '/videos';
|
||||
}, 2000); // Redirige después de 2 segundos
|
||||
} else {
|
||||
statusMessage.className = 'error';
|
||||
statusMessage.textContent = result.message || 'Ocurrió un error desconocido.';
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = 'Subir Video';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error en el fetch:', error);
|
||||
statusMessage.className = 'error';
|
||||
statusMessage.textContent = 'Error de conexión. No se pudo contactar al servidor.';
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = 'Subir Video';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
253
src/views/videos_v2.ejs
Normal file
253
src/views/videos_v2.ejs
Normal file
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SIGMA - Galería de Videos (V2)</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
color: #e0e0e0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: rgba(15, 15, 35, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.logo img { height: 45px; }
|
||||
.main-content { padding: 2rem; }
|
||||
.main-content h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
color: #64ffda;
|
||||
}
|
||||
|
||||
.video-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.video-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
|
||||
border-color: #64ffda;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background-color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
color: #64ffda;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.video-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.video-info p {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #1a1a2e;
|
||||
padding: 1rem;
|
||||
border-radius: 15px;
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
background: #64ffda;
|
||||
color: #0f0f23;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.error-message, .empty-message {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
padding: 2rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 15px;
|
||||
}
|
||||
.empty-message a {
|
||||
color: #64ffda;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="logo">
|
||||
<a href="/videos"><img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo"></a>
|
||||
</div>
|
||||
<a href="/videos_upload" class="uix-button uix-button--primary">Subir Video (V2)</a>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<h2>Galería de Videos (V2 - Base de Datos)</h2>
|
||||
<% if (error) { %>
|
||||
<p class="error-message"><i class="uix uix-exclamation-triangle"></i> <%= error %></p>
|
||||
<% } else if (!videos || videos.length === 0) { %>
|
||||
<p class="empty-message">No hay videos disponibles en la base de datos. <a href="/videos_upload">¡Sube uno ahora!</a></p>
|
||||
<% } else { %>
|
||||
<div class="video-gallery">
|
||||
<% videos.forEach(video => { %>
|
||||
<div class="video-card" data-video-url="<%= video.video_path_url %>" data-video-name="<%= video.video_nombre %>" data-video-origin="<%= video.video_origen %>">
|
||||
<div class="thumbnail">
|
||||
<% if (video.video_origen === 'Local') { %>
|
||||
<i class="uix uix-film"></i>
|
||||
<% } else if (video.video_origen === 'YouTube') { %>
|
||||
<i class="uix uix-youtube"></i>
|
||||
<% } else { %>
|
||||
<i class="uix uix-link"></i>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h3><%= video.video_nombre %></h3>
|
||||
<p><%= video.video_descripcion %></p>
|
||||
</div>
|
||||
</div>
|
||||
<% }); %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="videoModal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" id="closeModal">×</button>
|
||||
<div id="playerContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const videoCards = document.querySelectorAll('.video-card');
|
||||
const modal = document.getElementById('videoModal');
|
||||
const playerContainer = document.getElementById('playerContainer');
|
||||
const closeModal = document.getElementById('closeModal');
|
||||
|
||||
videoCards.forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const videoUrl = card.dataset.videoUrl;
|
||||
const videoOrigin = card.dataset.videoOrigin;
|
||||
playerContainer.innerHTML = ''; // Limpiar contenedor
|
||||
|
||||
if (videoOrigin === 'Local') {
|
||||
playerContainer.innerHTML = `<video id="videoPlayer" width="100%" controls autoplay src="${videoUrl}"></video>`;
|
||||
} else {
|
||||
// Para YouTube, Vimeo, etc., usamos un iframe
|
||||
// Nota: Esto requiere que las URLs sean de tipo "embed"
|
||||
// Se necesitaría una lógica más avanzada para convertir URLs normales a embed.
|
||||
let embedUrl = videoUrl;
|
||||
if (videoOrigin === 'YouTube' && videoUrl.includes('watch?v=')) {
|
||||
const videoId = new URL(videoUrl).searchParams.get('v');
|
||||
embedUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||
}
|
||||
playerContainer.innerHTML = `<iframe width="100%" height="500" src="${embedUrl}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
|
||||
}
|
||||
modal.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
const closePlayer = () => {
|
||||
modal.classList.remove('active');
|
||||
playerContainer.innerHTML = ''; // Detener la reproducción al limpiar el contenedor
|
||||
};
|
||||
|
||||
closeModal.addEventListener('click', closePlayer);
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
closePlayer();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user