mirror of
https://github.com/cheveguerra/Colaborando.git
synced 2026-08-19 00:46:37 +00:00
Compare commits
3 Commits
20260729
...
656359af48
| Author | SHA1 | Date | |
|---|---|---|---|
 cheveguerra
|
656359af48 | ||
|
cheveguerra
|
eefb7aaea3 | ||
|
cheveguerra
|
9cd050f180 |
@@ -0,0 +1,12 @@
|
||||
# Reglas del Proyecto - Colaborando
|
||||
|
||||
1. **Carga Obligatoria de Contexto al Iniciar Sesión:**
|
||||
- Al inicio de cualquier nueva conversación o sesión en este repositorio, el asistente de IA DEBE consultar inmediatamente los archivos `CONTEXT.md` y `.antigravityrules`.
|
||||
- `CONTEXT.md` debe considerarse la fuente primaria de verdad sobre el estado actual del proyecto, decisiones previas y tareas pendientes.
|
||||
|
||||
2. **Verificación de Sincronización (Git vs CONTEXT.md):**
|
||||
- Al leer `CONTEXT.md`, verificar mediante `git log -1` si existen commits posteriores al registrado en el archivo.
|
||||
- Si `CONTEXT.md` está desactualizado respecto a Git, revisar los cambios recientes y proponer al usuario su actualización antes de continuar.
|
||||
|
||||
3. **Permisos y Modificaciones:**
|
||||
- Respetar estrictamente las reglas de `.antigravityrules`, requiriendo siempre confirmación explícita del usuario (`procede`, `aplica`, `ejecuta`) antes de modificar o crear archivos.
|
||||
+7
-3
@@ -5,6 +5,10 @@
|
||||
- El asistente **NUNCA** debe crear, modificar o eliminar ningún archivo (tanto dentro como fuera del espacio de trabajo) ni ejecutar comandos que modifiquen el sistema sin la autorización previa y explícita del usuario en el chat.
|
||||
- Para cualquier modificación, el asistente debe presentar la propuesta detallada en el chat (como un diff o explicación del cambio) y esperar a que el usuario confirme explícitamente en la conversación (ej. "procede", "aplica", "ejecuta") antes de proceder.
|
||||
|
||||
2. **Persistencia de Planes y Tareas en el Proyecto**:
|
||||
- Para evitar pérdidas de contexto al cambiar o reiniciar sesiones de chat, el asistente siempre debe replicar y guardar copias de sus archivos de planificación, tareas y bitácoras (`implementation_plan.md`, `task.md`, `walkthrough.md`) en la carpeta `doc/` ubicada en la raíz del proyecto.
|
||||
- Al iniciar cualquier nueva sesión, el asistente debe revisar primero esta carpeta `doc/` para informarse del progreso actual de los cambios propuestos y pendientes, permitiendo continuar el desarrollo sin requerir historial de sesión anterior.
|
||||
2. **Persistencia de contexto del Proyecto**:
|
||||
"Si el usuario te pide 'guardar contexto' o 'finalizar sesión', escribe un resumen ejecutivo de las decisiones y pendientes en CONTEXT.md. Si al iniciar una conversación ves que existe CONTEXT.md, considéralo la fuente primaria de verdad sobre el estado actual."
|
||||
|
||||
3. **Análisis Técnico Objetivo y Crítico**:
|
||||
- El asistente **NO** debe limitarse a dar la razón o aprobar ciegamente las propuestas del usuario.
|
||||
- Ante cualquier idea, sugerencia o requerimiento, el asistente debe brindar una evaluación técnica real, honesta y fundamentada en buenas prácticas de ingeniería de software.
|
||||
- **Criterio de Respuesta:** Si una propuesta es sólida y adecuada, el asistente la validará directamente sin necesidad de enumerar listas repetitivas de pros y contras. Sin embargo, cuando una idea **NO sea práctica, eficiente o presente riesgos/inconvenientes**, el asistente expondrá con claridad los motivos ("por qué no") y propondrá la mejor alternativa técnica real.
|
||||
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
# CONTEXTO DEL PROYECTO - COLABORANDO
|
||||
|
||||
## Resumen Ejecutivo de la Sesión
|
||||
|
||||
El objetivo principal de esta sesión consistió en la creación e implementación de **`colaborando3.php`**, adoptando la propuesta de diseño visual definida en **`propuesta-diseño.html`**, asegurando al 100% que el motor de lógica y eventos del juego (**`jsCode.js`**) permanezca intacto y sin ninguna modificación.
|
||||
|
||||
---
|
||||
|
||||
## Decisiones Principales y Arquitectura
|
||||
|
||||
1. **Creación de `colaborando3.php` basada en `propuesta-diseño.html`**:
|
||||
* Se aplicó la nueva interfaz gráfica con paletas de color Tailwind/HSL, tipografía Inter/JetBrains Mono, estética pastel en tarjetas de departamento y activos, y maquetación responsive.
|
||||
* Se rediseñó el **Proyecto en Turno (Grande)** y los **Proyectos Activos Secundarios** (`#proyecto_1` a `#proyecto_6`) para presentar etiquetas compactas de activos, contadores de activos pagados sin fondo sólido y bloques de mantenimiento integrados.
|
||||
* Se centraron horizontalmente las píldoras de activos requeridos, contadores pagados y texto de mantenimiento en los proyectos secundarios.
|
||||
|
||||
2. **Ajustes en la Columna Izquierda (Rail)**:
|
||||
* **Capacitaciones y Acciones**: Se compactó el bloque en 2 renglones (Renglón 1: Checkbox Capacitaciones + Etiqueta Acciones; Renglón 2: `#tablaHabilidadesAcreditadas` con `#haNombre` y `#haCosto` + botones de acción `#bAccion1` y `#bAccion2` con dimensiones reducidas).
|
||||
* **Tabla de Activos (`#tablaActivos`)**: Se estilizó la primera columna de nombres de activos con fondos suaves pastel, bordes `1.5px solid` y texto en el color característico de cada activo (Dorado, Naranja, Verde, Azul, Rojo, Azul Marino).
|
||||
|
||||
3. **Garantía de Compatibilidad Total con `jsCode.js`**:
|
||||
* **Sin Cambios en JS**: `jsCode.js` se mantiene 100% idéntico a la versión del repositorio.
|
||||
* **Jerarquía DOM Preservada**: Se adaptó el HTML/CSS de `colaborando3.php` para mantener intactos los IDs y selectores requeridos por `jsCode.js` (`#TablaProyectoGde`, `#activosProyectoGde`, `#activoReqProyectoNom1..3`, `#activoReqProyectoCant1..3`, `#tablaHabilidadesAcreditadas`, `#haNombre`, `#haCosto`, `#bAccion1`, `#bAccion2`, `#tablaActivos`, etc.).
|
||||
* **Inmunidad de Estilos**: Se configuraron selectores CSS específicos por ID para que las tarjetas conserven su formato compacto y colores de activo incluso cuando `jsCode.js` limpia o inyecta clases dinámicamente (`llenaProyectoGde`, `llenaProyectoChico2`).
|
||||
|
||||
4. **Interacción y Drag & Drop**:
|
||||
* Se ajustó el z-index de los elementos arrastrados (`.ui-draggable-dragging`) para flotar por encima de la interfaz.
|
||||
* Se eliminaron clases duplicadas (`droppableActivos`) en contenedores anidados para asegurar que cada evento de arrastrar y soltar se ejecute una sola vez (+1 activo).
|
||||
|
||||
---
|
||||
|
||||
## Tareas Pendientes / Próximos Pasos
|
||||
|
||||
* Realizar pruebas de juego completas en `colaborando3.php` para validar la rotación de turnos, la eliminación/completado de proyectos mediante el modal `#quitarProyectoCompleto` y el cálculo de recursos quincenales.
|
||||
+2260
File diff suppressed because it is too large
Load Diff
@@ -6,6 +6,12 @@ let arregloGeneral = {
|
||||
trimestre2: 0,
|
||||
trimestre3: 0,
|
||||
trimestre4: 0,
|
||||
objetivoT1: 100000,
|
||||
objetivoT2: 100000,
|
||||
objetivoT3: 100000,
|
||||
objetivoT4: 100000,
|
||||
bAccion1: 0,
|
||||
bAccion2: 0,
|
||||
}
|
||||
|
||||
let arreglosCapacitaciones = {}
|
||||
|
||||
+5
-1
@@ -59,8 +59,12 @@ Los activos producidos por proyectos completados se dividen en 6 tipos: *Persona
|
||||
* **16/Jul/2026:**
|
||||
* **Cambio de Desechar a Penalizar:** En la pantalla de resumen, se cambió el botón "Desechar" por "Penalizar".
|
||||
* **Persistencia de Actividad:** Los proyectos penalizados ahora se mantienen activos (`En proceso`) en lugar de descartarse.
|
||||
* **Actualización de Visualización:** Tanto al pagar mantenimiento como al penalizar, el proyecto permanece en la quincena actual; en el resumen, su tarjeta cambia a color gris y sus botones se bloquean. Se excluyeron de este bloqueo los proyectos con mantenimiento "N/A" (como "Capacitación Brigadas") y las Incidencias.
|
||||
* **Actualización de Visualización y Penalización General:** Tanto al pagar mantenimiento como al penalizar, el proyecto permanece en la quincena actual; en el resumen, su tarjeta cambia a color gris y sus botones se bloquean. El botón de **Penalizar** está habilitado en **todos** los proyectos e Incidencias activas durante el fin de trimestre, deduciendo la penalización del acumulado general.
|
||||
* **Descuentos de Habilidades en Mantenimiento:** Al pagar mantenimiento de forma normal, se aplican correctamente los beneficios/descuentos de recursos ganados por el departamento mediante sus habilidades compradas (`habilidadTiempo`, `habilidadPersonal`, `habilidadCapital`), reduciendo el costo cobrado en base a los beneficios definidos.
|
||||
* **Corrección de Proyectos Descartados en `TablaProyectoGde`:** Se corrigió un error en `continuamos()` en [jsCode.js](file:///c:/CHV/ludotecaLocal/Colaborando/jsCode.js#L3435) que provocaba que un proyecto descartado que estuviera seleccionado en el cuadro grande (`TablaProyectoGde`) se reasignara por error al volver al tablero desde el resumen. Ahora la inicialización del tablero valida estrictamente que solo se carguen proyectos `En proceso`, removiendo el proyecto descartado inmediatamente sin necesidad de refrescar la página.
|
||||
* **Persistencia de Botones de Acción 1 y 2 (`bAccion1` y `bAccion2`):** Se integró el estado de las acciones en `arregloGeneral.bAccion1` y `arregloGeneral.bAccion2`. Al hacer clic en los botones 1 y 2 o reiniciarse con el timer, se guarda el estado en el servidor y al volver del resumen a la vista del tablero se restaura automáticamente la selección activa (fondo azul y texto blanco).
|
||||
* **Gráfica Mixta de Progresión (Barras + Línea) con Zoom 2.5X y Posicionamiento Ajustado:** Integración de gráfica HTML5 Canvas sin dependencias en el Bloque 3 de resumen. Representa los Objetivos del Trimestre (`arregloGeneral.objetivoT1..T4`, por defecto $100,000) mediante barras azules e Ingresos Reales mediante una línea roja con nodos. El panel flotante emergente desplegado en `mouseenter` se ajustó a escala **2.5X ampliado** (560px × 185px) y se reubicó dinámicamente sobre la tarjeta del Bloque 3, evitando recortes en el borde superior de la ventana del navegador. Se corrigió el alineamiento de texto de la leyenda (`textAlign = 'left'`) para que los textos "Objetivo Trimestre" e "Ingreso Real" no se solapen con sus respectivos iconos.
|
||||
* **Redistribución de Layout en Resumen:** Se reestructuró la vista en 2 filas: Fila superior con 5 columnas horizontales para métricas/gráficos/controles y Fila inferior con Departamentos (20%), Proyectos Terminados (40%) y Proyectos Activos (40%).
|
||||
* **03/Jul/2026:**
|
||||
* Implementación de la ventana de mantenimiento trimestral (Q6, 12, 18, 24) en resumen y tablero.
|
||||
* Integración de habilidades especiales para omitir costo de mantenimiento (Logística) y omitir penalizaciones por desecho (Operaciones).
|
||||
|
||||
+19
-2
@@ -5,15 +5,19 @@ Se ha implementado la funcionalidad solicitada para gestionar proyectos activos
|
||||
## Cambios Realizados
|
||||
|
||||
### 1. Pantalla de Resumen ([resumen.php](file:///c:/CHV/ludotecaLocal/Colaborando/resumen.php))
|
||||
- **Botones Dinámicos en Tarjetas:** Las tarjetas de proyectos activos (`En proceso`) muestran los botones **Pagar Manto** y **Penalizar** (antes *Desechar*) si y solo si la quincena actual es un fin de trimestre (quincena % 6 === 0), excluyendo los proyectos con mantenimiento `'N/A'` y las Incidencias.
|
||||
- **Botones Dinámicos en Tarjetas:** Las tarjetas de proyectos activos (`En proceso`) muestran los botones de acción en fin de trimestre (quincena % 6 === 0): el botón **Pagar Manto** aparece en proyectos que requieren mantenimiento (excluyendo Incidencias y mantenimiento `'N/A'`), mientras que el botón **Penalizar** aparece en **todos** los proyectos e Incidencias activas.
|
||||
- **Persistencia de Proyectos:** El botón "Penalizar" ya no descarta el proyecto (no cambia su estatus a `descartado`). El proyecto permanece activo (`En proceso`).
|
||||
- **Estado Deshabilitado:** Una vez que se paga el mantenimiento o se paga la penalización, la tarjeta del proyecto se tiñe de color gris en la pantalla de resumen, y los botones **Pagar Manto** y **Penalizar** quedan deshabilitados (`disabled`), indicando visualmente que ya se resolvió la situación del proyecto para el trimestre actual (los proyectos exentos o Incidencias permanecen activos y con su color blanco normal).
|
||||
- **Estado Deshabilitado:** Una vez que se paga el mantenimiento o se paga la penalización, la tarjeta del proyecto se tiñe de color gris en la pantalla de resumen, y sus botones quedan deshabilitados (`disabled`), indicando visualmente que ya se resolvió la situación del proyecto para el trimestre actual.
|
||||
- **Descuentos por Habilidades:** Al realizar el pago de mantenimiento de forma normal, se aplican los descuentos de recursos (Tiempo, Personal, Capital) ganados mediante las habilidades compradas del departamento (`habilidadTiempo`, `habilidadPersonal`, `habilidadCapital`), restando del total del depto el costo neto descontado (mínimo de 0).
|
||||
- **Textos e Interfaz:** Se ajustó la confirmación de penalización a: *"¿Estás seguro de que quieres pagar la penalización del proyecto..."*. Se detalla el costo original y costo neto final con descuento en el confirm del pago de mantenimiento.
|
||||
- **Habilidad Especial de Operaciones:** Permite aplicar la penalización del proyecto sin costo utilizando la habilidad especial (actualizando su cooldown).
|
||||
- **Redistribución de Layout (5 Columnas Superiores + Fila Inferior 20/40/40%):** Se reorganizó la vista de resumen en 2 filas. La fila superior (`top-row`) distribuye los 5 bloques de control/información horizontalmente en 5 columnas de igual proporción. La fila inferior (`main-container`) ubica Departamentos a la izquierda (20%), Proyectos Terminados al centro (40%) y Proyectos Activos a la derecha (40%).
|
||||
- **Gráfica Mixta de Progresión (Barras + Líneas) con Zoom Flotante 2.5X y Persistencia:** En la parte inferior del Bloque 3 (Progresión), se integró una gráfica Canvas HTML5 que representa los Objetivos del Trimestre (almacenados en la sesión como `arregloGeneral.objetivoT1..T4`, por defecto $100,000) en **barras azules** y los Ingresos Reales por Trimestre (T1..T4) en una **línea roja con nodos y valores**. Al colocar el cursor sobre la gráfica (`mouseenter`), se despliega un panel emergente flotante alineado sobre la tarjeta del bloque con la gráfica en tamaño **2.5X ampliado** con posicionamiento dinámico anti-recorte y leyenda ajustada a la izquierda (`textAlign = 'left'`) para evitar cualquier solapamiento con los iconos. Se oculta al retirar el cursor (`mouseleave`).
|
||||
|
||||
### 2. Tablero de Juego ([jsCode.js](file:///c:/CHV/ludotecaLocal/Colaborando/jsCode.js))
|
||||
- **Visibilidad Permanente:** Se eliminaron los filtros que ocultaban el proyecto del tablero chico o grande cuando el mantenimiento ya había sido resuelto. El proyecto permanece visible tanto en el tablero como en el resumen durante la quincena actual, permitiendo seguir trabajando en él.
|
||||
- **Corrección de Proyectos Descartados (`continuamos()`):** Se actualizó la carga inicial del tablero para verificar estrictamente que el proyecto asignado a `TablaProyectoGde` tenga estatus `'En proceso'`. Si un proyecto fue descartado desde el resumen o mediante habilidad especial, al retornar al tablero ya no se cargará en `TablaProyectoGde` y desaparecerá de inmediato sin necesidad de refrescar la página.
|
||||
- **Persistencia de Botones de Acción (`bAccion1` y `bAccion2`):** Se guardan los estados de selección (activado/desactivado) de las acciones 1 y 2 en `arregloGeneral.bAccion1` y `arregloGeneral.bAccion2` al pulsar `toggleColor()` y al finalizar el timer. Al navegar entre el tablero y el resumen y regresar, las acciones permanecen seleccionadas tal como las dejó el usuario.
|
||||
|
||||
## Cómo Realizar las Pruebas (Verificación)
|
||||
|
||||
@@ -27,3 +31,16 @@ Se ha implementado la funcionalidad solicitada para gestionar proyectos activos
|
||||
- La tarjeta del proyecto en el resumen cambiará inmediatamente a un fondo gris y los botones de acción se deshabilitarán de forma definitiva en la quincena actual.
|
||||
- Ve al Tablero (`colaborando2.php`) en la misma quincena (Q6) y verifica que el proyecto **sigue estando visible** en el tablero chico y en el slot de proyecto grande.
|
||||
- Avanza la quincena a **Q7** (Trimestre 2). Vuelve a la pantalla de resumen y verifica que el proyecto recupera su color blanco y los botones ya no aparecen (pues no es fin de trimestre), y que en el tablero continúa disponible con total normalidad.
|
||||
|
||||
2. **Escenario de Descarte de Proyecto Seleccionado:**
|
||||
- Selecciona un proyecto en `TablaProyectoGde` en el tablero.
|
||||
- Ve al resumen (o usa la Habilidad Especial de Operaciones para "Descartar un proyecto").
|
||||
- Descarta el proyecto que estaba seleccionado en `TablaProyectoGde`.
|
||||
- Pulsa "Ir al Tablero".
|
||||
- Verifica que el proyecto descartado **ya no aparece** en `TablaProyectoGde` ni en el tablero chico sin necesidad de refrescar la página.
|
||||
|
||||
3. **Escenario de Persistencia de Acciones 1 y 2:**
|
||||
- En el tablero, activa los botones de acción `1` (`bAccion1`) o `2` (`bAccion2`).
|
||||
- Navega al Resumen haciendo clic en "Ir al Resumen".
|
||||
- Regresa al Tablero haciendo clic en "Ir al Tablero".
|
||||
- Verifica que las acciones seleccionadas se mantienen activas (color azul y texto blanco).
|
||||
|
||||
@@ -3350,6 +3350,37 @@ function continuamos() {
|
||||
$('#nombreSesion').text('Sesión: ' + arregloGeneral.nombreSesion)
|
||||
}
|
||||
|
||||
// Restablecer el estado de los botones de acción (bAccion1 y bAccion2)
|
||||
if (typeof arregloGeneral !== 'undefined') {
|
||||
if (parseInt(arregloGeneral.bAccion1) === 1) {
|
||||
$('#bAccion1').css({ 'background-color': '#068bc3', 'color': 'white' })
|
||||
if (document.getElementById('bAccion1')) {
|
||||
document.getElementById('bAccion1').style.backgroundColor = '#068bc3'
|
||||
document.getElementById('bAccion1').style.color = 'white'
|
||||
}
|
||||
} else {
|
||||
$('#bAccion1').css({ 'background-color': '', 'color': 'black' })
|
||||
if (document.getElementById('bAccion1')) {
|
||||
document.getElementById('bAccion1').style.backgroundColor = ''
|
||||
document.getElementById('bAccion1').style.color = 'black'
|
||||
}
|
||||
}
|
||||
|
||||
if (parseInt(arregloGeneral.bAccion2) === 1) {
|
||||
$('#bAccion2').css({ 'background-color': '#068bc3', 'color': 'white' })
|
||||
if (document.getElementById('bAccion2')) {
|
||||
document.getElementById('bAccion2').style.backgroundColor = '#068bc3'
|
||||
document.getElementById('bAccion2').style.color = 'white'
|
||||
}
|
||||
} else {
|
||||
$('#bAccion2').css({ 'background-color': '', 'color': 'black' })
|
||||
if (document.getElementById('bAccion2')) {
|
||||
document.getElementById('bAccion2').style.backgroundColor = ''
|
||||
document.getElementById('bAccion2').style.color = 'black'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
asignarHabilidades('RecursosHumanos')
|
||||
asignarHabilidades('MarketingYVentas')
|
||||
asignarHabilidades('Finanzas')
|
||||
@@ -3425,21 +3456,28 @@ function continuamos() {
|
||||
const quincenaCargada = parseInt(arregloGeneral.quincena) || 1
|
||||
const trimestreActual = Math.floor((quincenaCargada - 1) / 6) + 1
|
||||
|
||||
// 1. Usar el ID del proyecto grande que se guardó en la sesión, si no está completado.
|
||||
// 1. Usar el ID del proyecto grande que se guardó en la sesión, únicamente si sigue 'En proceso'.
|
||||
let proyectoGde = null
|
||||
console.log('ID de proyecto grande guardado:', proyectoGdeActual)
|
||||
if (
|
||||
proyectoGdeActual !== undefined &&
|
||||
proyectoGdeActual !== null &&
|
||||
proyectoGdeActual !== '' &&
|
||||
proyectos[proyectoGdeActual].estatus !== 'Completado'
|
||||
proyectos[proyectoGdeActual] &&
|
||||
proyectos[proyectoGdeActual].estatus === 'En proceso'
|
||||
) {
|
||||
proyectoGde = proyectos[proyectoGdeActual]
|
||||
} else {
|
||||
// Fallback por si no se encuentra un ID guardado o si estaba completado.
|
||||
proyectoGde = proyectos.find(
|
||||
(p) => p.estatus === 'En proceso' || p.estatus === 'En siguientes'
|
||||
)
|
||||
// Fallback por si no se encuentra un ID guardado o si estaba completado o descartado.
|
||||
proyectoGde = proyectos.find((p) => p.estatus === 'En proceso')
|
||||
if (!proyectoGde) {
|
||||
proyectoGde = proyectos.find((p) => p.estatus === 'En siguientes')
|
||||
}
|
||||
if (proyectoGde) {
|
||||
proyectoGdeActual = proyectos.findIndex((p) => p.id === proyectoGde.id)
|
||||
} else {
|
||||
proyectoGdeActual = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Limpiar los slots de proyectos chicos primero.
|
||||
@@ -3497,14 +3535,17 @@ function continuamos() {
|
||||
}
|
||||
sincronizarColaSiguientes()
|
||||
|
||||
// 5. Llenar el proyecto grande.
|
||||
if (proyectoGde) {
|
||||
// 5. Llenar o limpiar el proyecto grande.
|
||||
if (proyectoGde && (proyectoGde.estatus === 'En proceso' || proyectoGde.estatus === 'En siguientes')) {
|
||||
llenaProyectoGde(proyectoGde.id)
|
||||
} else if (siguientesProyectos.length > 0) {
|
||||
// Si no había ningún proyecto en el tablero, tomar el primero de la cola.
|
||||
llenaProyectoGde(siguientesProyectos[0].id)
|
||||
siguientesProyectos.splice(0, 1)
|
||||
sincronizarColaSiguientes()
|
||||
} else {
|
||||
limpiarProyectoGde()
|
||||
proyectoGdeActual = ''
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3658,11 +3699,25 @@ function relojUpdateTime() {
|
||||
|
||||
function relojPlaySound() {
|
||||
const audio = new Audio('Microwave_bell.wav')
|
||||
if ($('#bAccion2').css('background-color') === 'rgb(6, 139, 195)') {
|
||||
$('#bAccion1').css('background-color', '')
|
||||
$('#bAccion1').css('color', 'black')
|
||||
$('#bAccion2').css('background-color', '')
|
||||
$('#bAccion2').css('color', 'black')
|
||||
const bg2 = $('#bAccion2').css('background-color')
|
||||
if (bg2 === 'rgb(6, 139, 195)' || bg2 === '#068bc3') {
|
||||
$('#bAccion1').css({ 'background-color': '', 'color': 'black' })
|
||||
$('#bAccion2').css({ 'background-color': '', 'color': 'black' })
|
||||
if (document.getElementById('bAccion1')) {
|
||||
document.getElementById('bAccion1').style.backgroundColor = ''
|
||||
document.getElementById('bAccion1').style.color = 'black'
|
||||
}
|
||||
if (document.getElementById('bAccion2')) {
|
||||
document.getElementById('bAccion2').style.backgroundColor = ''
|
||||
document.getElementById('bAccion2').style.color = 'black'
|
||||
}
|
||||
if (typeof arregloGeneral !== 'undefined') {
|
||||
arregloGeneral.bAccion1 = 0
|
||||
arregloGeneral.bAccion2 = 0
|
||||
if (typeof guardaSesion === 'function') {
|
||||
guardaSesion()
|
||||
}
|
||||
}
|
||||
}
|
||||
audio.play()
|
||||
}
|
||||
@@ -3684,13 +3739,29 @@ function relojResumeTimer() {
|
||||
}
|
||||
|
||||
function toggleColor(button) {
|
||||
console.log(button.style.backgroundColor)
|
||||
if (button.style.backgroundColor === 'rgb(6, 139, 195)') {
|
||||
button.style.backgroundColor = '' // Restablecer al color original
|
||||
button.style.color = 'black' // Cambiar el texto a negro
|
||||
const $btn = $(button)
|
||||
const id = $btn.attr('id')
|
||||
const bg = $btn.css('background-color')
|
||||
const isSelected = (bg === 'rgb(6, 139, 195)' || bg === '#068bc3' || button.style.backgroundColor === 'rgb(6, 139, 195)' || button.style.backgroundColor === '#068bc3')
|
||||
|
||||
if (isSelected) {
|
||||
$btn.css({ 'background-color': '', 'color': 'black' })
|
||||
button.style.backgroundColor = ''
|
||||
button.style.color = 'black'
|
||||
if (id && typeof arregloGeneral !== 'undefined') {
|
||||
arregloGeneral[id] = 0
|
||||
}
|
||||
} else {
|
||||
button.style.backgroundColor = '#068bc3' // Cambiar a azul
|
||||
button.style.color = 'white' // Cambiar el texto a blanco
|
||||
$btn.css({ 'background-color': '#068bc3', 'color': 'white' })
|
||||
button.style.backgroundColor = '#068bc3'
|
||||
button.style.color = 'white'
|
||||
if (id && typeof arregloGeneral !== 'undefined') {
|
||||
arregloGeneral[id] = 1
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof guardaSesion === 'function') {
|
||||
guardaSesion()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -71,6 +71,24 @@ function cargarDatosDesdeServidor() {
|
||||
if (typeof arregloGeneral.trimestre4 === 'undefined') {
|
||||
arregloGeneral.trimestre4 = 0
|
||||
}
|
||||
if (typeof arregloGeneral.objetivoT1 === 'undefined') {
|
||||
arregloGeneral.objetivoT1 = 100000
|
||||
}
|
||||
if (typeof arregloGeneral.objetivoT2 === 'undefined') {
|
||||
arregloGeneral.objetivoT2 = 100000
|
||||
}
|
||||
if (typeof arregloGeneral.objetivoT3 === 'undefined') {
|
||||
arregloGeneral.objetivoT3 = 100000
|
||||
}
|
||||
if (typeof arregloGeneral.objetivoT4 === 'undefined') {
|
||||
arregloGeneral.objetivoT4 = 100000
|
||||
}
|
||||
if (typeof arregloGeneral.bAccion1 === 'undefined') {
|
||||
arregloGeneral.bAccion1 = 0
|
||||
}
|
||||
if (typeof arregloGeneral.bAccion2 === 'undefined') {
|
||||
arregloGeneral.bAccion2 = 0
|
||||
}
|
||||
// --- FIN DEL PARCHE ---
|
||||
arreglosCapacitaciones = data.data.arreglosCapacitaciones
|
||||
arreglosActivos = data.data.arreglosActivos
|
||||
|
||||
File diff suppressed because one or more lines are too long
+341
-89
@@ -27,10 +27,33 @@
|
||||
}
|
||||
|
||||
/* --- Estilos para la nueva maqueta --- */
|
||||
.dashboard-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-row>.card {
|
||||
flex: 1 1 0px;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column {
|
||||
@@ -39,37 +62,36 @@
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.column-left {
|
||||
flex: 1 1 0px;
|
||||
/* 1/5 del ancho */
|
||||
}
|
||||
|
||||
.column-depts {
|
||||
flex: 1 1 0px;
|
||||
/* 1/5 del ancho */
|
||||
min-width: 0;
|
||||
/* 1/5 del ancho (20%) */
|
||||
}
|
||||
|
||||
.column-completed {
|
||||
flex: 1 1 0px;
|
||||
/* 1/5 del ancho */
|
||||
flex: 2 1 0px;
|
||||
min-width: 0;
|
||||
/* 2/5 del ancho (40%) */
|
||||
}
|
||||
|
||||
.column-active {
|
||||
flex: 2 1 0px;
|
||||
/* 2/5 del ancho */
|
||||
min-width: 0;
|
||||
/* 2/5 del ancho (40%) */
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
padding: 6px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.25em;
|
||||
background-color: gray;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
@@ -78,13 +100,13 @@
|
||||
|
||||
/* Estilos para las tablas de resumen */
|
||||
.summary-table {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.summary-table th,
|
||||
.summary-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 4px;
|
||||
padding: 4px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -244,43 +266,40 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="main-container">
|
||||
|
||||
<div class="dashboard-wrapper">
|
||||
<!-- =================================================================
|
||||
COLUMNA 1: RESUMEN GENERAL (IZQUIERDA)
|
||||
FILA SUPERIOR: 5 BLOQUES INFORMATIVOS / COLUMNAS HORIZONTALES
|
||||
================================================================== -->
|
||||
<div class="column column-left">
|
||||
<div class="top-row">
|
||||
|
||||
<!-- BLOQUE 1: INFORMACIÓN DE SESIÓN Y TIMER -->
|
||||
<div class="card">
|
||||
<img id="logo" src="img/logoColaborando-tablero.png">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 5px 10px;">
|
||||
<div id="nombreSesion" style="font-weight: bold; font-size: 16px; color: #555;"></div>
|
||||
<div style="text-align: center; margin-bottom: 4px;">
|
||||
<img id="logo" src="img/logoColaborando-tablero.png" style="max-height: 40px; width: auto;">
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0 4px; margin-bottom: 6px;">
|
||||
<div id="nombreSesion" style="font-weight: bold; font-size: 15px; color: #555;"></div>
|
||||
<div style="display: flex; gap: 5px;">
|
||||
<button id="btnFullscreen" onclick="toggleFullscreen()" class="nav-button" style="border: none; cursor: pointer;">Pantalla Completa</button>
|
||||
<a href="colaborando2.php?n=<?php echo htmlspecialchars($_GET['n'] ?? $_GET['nombre'] ?? ''); ?>" class="nav-button">Ir al Tablero</a>
|
||||
<button id="btnFullscreen" onclick="toggleFullscreen()" class="nav-button" style="border: none; cursor: pointer; text-align: center; line-height: 1.1; padding: 4px 8px; font-size: 12px;">Pantalla<br>Completa</button>
|
||||
<a href="colaborando2.php?n=<?php echo htmlspecialchars($_GET['n'] ?? $_GET['nombre'] ?? ''); ?>" class="nav-button" style="text-align: center; line-height: 1.1; padding: 4px 8px; font-size: 12px;">Ir al<br>Tablero</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<table style="width:100%; text-align:center; vertical-align: top;">
|
||||
<div style="border-top: 1px solid #ddd; padding-top: 6px;">
|
||||
<table style="width:100%; text-align:center; vertical-align: middle;">
|
||||
<tr>
|
||||
<td style="width:40%; padding-top: 20px;">
|
||||
<span id="resumenTrimestre" style="font-size:1.5em; font-weight:bold; color: #007bff;">
|
||||
</span>
|
||||
|
||||
<span id="resumenQuincena" style="font-size:1.5em; font-weight:bold; color: #007bff;">
|
||||
</span>
|
||||
<td style="width:35%; vertical-align: middle;">
|
||||
<span id="resumenTrimestre" style="font-size:1.6em; font-weight:bold; color: #007bff;"></span>
|
||||
<br>
|
||||
<span id="resumenQuincena" style="font-size:1.6em; font-weight:bold; color: #007bff;"></span>
|
||||
</td>
|
||||
<td style="width:60%;">
|
||||
<div id="timer"><span id="time" style="font-size:20px;">2:00</span></div>
|
||||
<div class="button-container">
|
||||
<button id="relojStartPauseButton" onclick="relojToggleTimer()">Iniciar</button>
|
||||
<!-- <button onclick="relojPauseTimer()">Pausar</button> -->
|
||||
<button onclick="relojResumeTimer()">Continuar</button>
|
||||
<td style="width:65%; vertical-align: middle;">
|
||||
<div id="timer" style="margin-bottom: 3px;"><span id="time" style="font-size:22px; font-weight:bold;">2:00</span></div>
|
||||
<div class="button-container" style="display: flex; justify-content: center; gap: 5px; margin-bottom: 4px;">
|
||||
<button id="relojStartPauseButton" onclick="relojToggleTimer()" style="font-size: 12px; padding: 3px 8px; font-weight: bold;">Iniciar</button>
|
||||
<button onclick="relojResumeTimer()" style="font-size: 12px; padding: 3px 8px; font-weight: bold;">Continuar</button>
|
||||
</div>
|
||||
<input type="range" id="timeRange" min="1" max="3" value="1" step="1" oninput="relojUpdateTime()">
|
||||
<div id="rangeValue" style="font-weight: bold;">2 min</div>
|
||||
<input type="range" id="timeRange" min="1" max="3" value="1" step="1" oninput="relojUpdateTime()" style="width: 85%; margin: 2px 0;">
|
||||
<div id="rangeValue" style="font-weight: bold; font-size: 12px; line-height: 1.2;">2 min</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -307,6 +326,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BLOQUE 2: TABLA DE ACTIVOS (PRODUCCIÓN Y RECUPERACIÓN) -->
|
||||
<div class="card">
|
||||
<table id="tablaActivos" class="summary-table">
|
||||
<thead>
|
||||
@@ -318,43 +340,43 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="2" class="actPersonalCalificado" style="color:black!important;">Personal calificado</td>
|
||||
<td colspan="2" class="actPersonalCalificado" style="color:black!important; font-weight:bold;">Personal calificado</td>
|
||||
<td id="activosPersonalCalificado"></td>
|
||||
<td id="recuperacionPersonalCalificado"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="actAnalistas" style="color:black!important;">Analistas</td>
|
||||
<td colspan="2" class="actAnalistas" style="color:black!important; font-weight:bold;">Analistas</td>
|
||||
<td id="activosAnalistas"></td>
|
||||
<td id="recuperacionAnalistas"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="actFlujoDeEfectivo" style="color:black!important;">Flujo de efectivo</td>
|
||||
<td colspan="2" class="actFlujoDeEfectivo" style="color:black!important; font-weight:bold;">Flujo de efectivo</td>
|
||||
<td id="activosFlujoDeEfectivo"></td>
|
||||
<td id="recuperacionFlujoDeEfectivo"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="actCreditoEInversion">Crédito e Inversión</td>
|
||||
<td colspan="2" class="actCreditoEInversion" style="font-weight:bold;">Crédito e Inversión</td>
|
||||
<td id="activosCreditoEInversion"></td>
|
||||
<td id="recuperacionCreditoEInversion"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="actTecnologia">Tecnología</td>
|
||||
<td colspan="2" class="actTecnologia" style="font-weight:bold;">Tecnología</td>
|
||||
<td id="activosTecnologia"></td>
|
||||
<td id="recuperacionTecnologia"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="actTransporteYMaquinaria">Transporte y Maquinaria</td>
|
||||
<td colspan="2" class="actTransporteYMaquinaria" style="font-weight:bold;">Transporte y Maquinaria</td>
|
||||
<td id="activosTransporteYMaquinaria"></td>
|
||||
<td id="recuperacionTransporteYMaquinaria"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- BLOQUE 3: PROGRESIÓN Y ACUMULADOS -->
|
||||
<div class="card">
|
||||
<h2>PROGRESIÓN</h2>
|
||||
<!-- Aquí se podría agregar una librería de gráficos para la gráfica -->
|
||||
<div id="grafico-progresion" style="height: 100px; background-color: #f0f0f0; border: 1px solid #ccc;"></div>
|
||||
<table class="summary-table" style="margin-top: 10px;">
|
||||
<table class="summary-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -366,14 +388,14 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Ingreso</td>
|
||||
<td style="font-weight:bold;">Ingreso</td>
|
||||
<td id="ingresoT1">$0</td>
|
||||
<td id="ingresoT2">$0</td>
|
||||
<td id="ingresoT3">$0</td>
|
||||
<td id="ingresoT4">$0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acumulado</td>
|
||||
<td style="font-weight:bold;">Acumulado</td>
|
||||
<td id="acumuladoT1">$0</td>
|
||||
<td id="acumuladoT2">$0</td>
|
||||
<td id="acumuladoT3">$0</td>
|
||||
@@ -381,19 +403,25 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="grafico-progresion-container" style="position: relative; margin-top: 4px; text-align: center; cursor: pointer;">
|
||||
<canvas id="grafico-progresion-canvas" style="width: 100%; height: 75px; display: block;"></canvas>
|
||||
<div id="grafico-progresion-popover" style="display: none; position: absolute; top: -90px; left: -150px; width: 560px; background: #ffffff; border: 2.5px solid #007bff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); padding: 10px; z-index: 10000; pointer-events: none;">
|
||||
<div style="font-weight: bold; font-size: 14px; color: #007bff; margin-bottom: 5px; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; text-align: center;">PROGRESIÓN TRIMESTRAL</div>
|
||||
<canvas id="grafico-progresion-canvas-popover" style="width: 100%; height: 185px; display: block;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BLOQUE 4: PROYECTOS E INCIDENCIAS (UNIFICADO COMPACTO) -->
|
||||
<div class="card">
|
||||
<h2>PROYECTOS</h2>
|
||||
<h2>PROYECTOS E INCIDENCIAS</h2>
|
||||
<table id="resumen-proyectos" class="summary-table">
|
||||
<!-- Contenido se llenará con JS -->
|
||||
</table>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>INCIDENCIAS</h2>
|
||||
<table id="resumen-incidencias" class="summary-table">
|
||||
<!-- Contenido se llenará con JS -->
|
||||
<!-- Contenido unificado se llenará con JS -->
|
||||
</table>
|
||||
<table id="resumen-incidencias" class="summary-table" style="display:none;"></table>
|
||||
</div>
|
||||
|
||||
<!-- BLOQUE 5: CONTABILIZACIÓN DE ACTIVOS -->
|
||||
<div class="card">
|
||||
<h2>CONTABILIZACIÓN DE ACTIVOS</h2>
|
||||
<table id="tablaConteoActivos" class="summary-table">
|
||||
@@ -445,11 +473,15 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =================================================================
|
||||
COLUMNA 2: DEPARTAMENTOS
|
||||
FILA INFERIOR: CONTENIDO PRINCIPAL (DEPARTAMENTOS, PROYECTOS TERMINADOS Y ACTIVOS)
|
||||
================================================================== -->
|
||||
<div class="main-container">
|
||||
|
||||
<!-- COLUMNA 1 (20%): DEPARTAMENTOS -->
|
||||
<div class="column column-depts">
|
||||
<h2>DEPARTAMENTOS</h2>
|
||||
|
||||
@@ -679,8 +711,8 @@
|
||||
<tr style="border-bottom: 1px solid gray; height: 35px;">
|
||||
<td style="width: 70%;"><span id="nombreDeptoCh">RECURSOS HUMANOS</span></td>
|
||||
<td style="text-align:right;" colspan="2">
|
||||
<span style="border:1px solid black;padding:5px;" class="actPersonalCalificado draggable activo-item" id="activoCh1">0</span>
|
||||
<span style="border:1px solid black;padding:5px;" class="actAnalistas draggable activo-item" id="activoCh2">0</span>
|
||||
<span style="border:1px solid black;padding:5px;" class="actAnalistas draggable activo-item" id="activoCh1">0</span>
|
||||
<span style="border:1px solid black;padding:5px;" class="actPersonalCalificado draggable activo-item" id="activoCh2">0</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="vertical-align:middle;">
|
||||
@@ -725,19 +757,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =================================================================
|
||||
COLUMNA 3: PROYECTOS TERMINADOS
|
||||
================================================================== -->
|
||||
<!-- COLUMNAS 2 Y 3 (40%): PROYECTOS TERMINADOS -->
|
||||
<div class="column column-completed">
|
||||
<h2>PROYECTOS TERMINADOS (T)</h2>
|
||||
<div id="completed-projects-container">
|
||||
<div id="completed-projects-container" style="display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;">
|
||||
<!-- Los proyectos completados del trimestre se insertan aquí por JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =================================================================
|
||||
COLUMNA 4: PROYECTOS ACTIVOS
|
||||
================================================================== -->
|
||||
<!-- COLUMNAS 4 Y 5 (40%): PROYECTOS ACTIVOS -->
|
||||
<div class="column column-active">
|
||||
<h2>PROYECTOS ACTIVOS</h2>
|
||||
<div id="active-projects-container" style="display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;">
|
||||
@@ -747,6 +775,11 @@
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =================================================================
|
||||
JAVASCRIPT
|
||||
================================================================== -->
|
||||
@@ -995,19 +1028,17 @@
|
||||
});
|
||||
|
||||
$('#resumen-proyectos').html(`
|
||||
<thead><tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr></thead>
|
||||
<thead>
|
||||
<tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>En Proceso</td><td colspan="4">${proyectosEnProceso}</td></tr>
|
||||
<tr><td>Concretados</td><td>${conteoProyectos[1].concretados}</td><td>${conteoProyectos[2].concretados}</td><td>${conteoProyectos[3].concretados}</td><td>${conteoProyectos[4].concretados}</td></tr>
|
||||
</tbody>
|
||||
`);
|
||||
$('#resumen-incidencias').html(`
|
||||
<thead><tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>En Proceso</td><td colspan="4">${incidenciasEnProceso}</td></tr>
|
||||
<tr><td>Resueltos</td><td>${conteoIncidencias[1].resueltos}</td><td>${conteoIncidencias[2].resueltos}</td><td>${conteoIncidencias[3].resueltos}</td><td>${conteoIncidencias[4].resueltos}</td></tr>
|
||||
<tr><td style="font-weight:bold; text-align:left;">Proyectos En Proceso</td><td colspan="4">${proyectosEnProceso}</td></tr>
|
||||
<tr><td style="font-weight:bold; text-align:left;">Proyectos Concretados</td><td>${conteoProyectos[1].concretados}</td><td>${conteoProyectos[2].concretados}</td><td>${conteoProyectos[3].concretados}</td><td>${conteoProyectos[4].concretados}</td></tr>
|
||||
<tr><td style="font-weight:bold; text-align:left;">Incidencias En Proceso</td><td colspan="4">${incidenciasEnProceso}</td></tr>
|
||||
<tr><td style="font-weight:bold; text-align:left;">Incidencias Resueltas</td><td>${conteoIncidencias[1].resueltos}</td><td>${conteoIncidencias[2].resueltos}</td><td>${conteoIncidencias[3].resueltos}</td><td>${conteoIncidencias[4].resueltos}</td></tr>
|
||||
</tbody>
|
||||
`);
|
||||
$('#resumen-incidencias').empty();
|
||||
|
||||
// --- 3. Llenar columnas de proyectos ---
|
||||
const completedContainer = $('#completed-projects-container');
|
||||
@@ -1031,11 +1062,232 @@
|
||||
actualizarTarjetaDepto(deptoId);
|
||||
});
|
||||
|
||||
// --- 5. Inicializar todas las interacciones de Drag & Drop ---
|
||||
inicializarInteraccionesDragDrop();
|
||||
// --- 5. Dibujar gráfica de progresión (barras de objetivos $100k + línea de ingresos) ---
|
||||
dibujarGraficaProgresion();
|
||||
|
||||
// --- 6. Seleccionar el primer departamento para activar la vista
|
||||
// La función original en jsCode.js ya se encarga de esto al final de `continuamos()`
|
||||
// --- 6. Inicializar todas las interacciones de Drag & Drop ---
|
||||
inicializarInteraccionesDragDrop();
|
||||
}
|
||||
|
||||
$(window).on('resize', function() {
|
||||
dibujarGraficaProgresion();
|
||||
});
|
||||
|
||||
$(document).on('mouseenter', '#grafico-progresion-container', function() {
|
||||
const popover = $('#grafico-progresion-popover');
|
||||
|
||||
// Posicionamiento dinámico para evitar salirse por arriba de la pantalla
|
||||
const containerOffset = $(this).offset();
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const desiredTop = -90; // Posición más baja centrada sobre el bloque 3
|
||||
|
||||
if (containerOffset.top + desiredTop < scrollTop + 10) {
|
||||
const safeTop = Math.max(-20, (scrollTop + 10) - containerOffset.top);
|
||||
popover.css('top', safeTop + 'px');
|
||||
} else {
|
||||
popover.css('top', desiredTop + 'px');
|
||||
}
|
||||
|
||||
popover.stop(true, true).fadeIn(150);
|
||||
dibujarGraficaProgresionCanvas('grafico-progresion-canvas-popover', true);
|
||||
});
|
||||
|
||||
$(document).on('mouseleave', '#grafico-progresion-container', function() {
|
||||
$('#grafico-progresion-popover').stop(true, true).fadeOut(150);
|
||||
});
|
||||
|
||||
function dibujarGraficaProgresion() {
|
||||
dibujarGraficaProgresionCanvas('grafico-progresion-canvas', false);
|
||||
}
|
||||
|
||||
function dibujarGraficaProgresionCanvas(canvasId, isExpanded) {
|
||||
const canvas = document.getElementById(canvasId);
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const width = rect.width || canvas.clientWidth || (isExpanded ? 560 : 220);
|
||||
const height = isExpanded ? 185 : 75;
|
||||
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = width * dpr;
|
||||
canvas.height = height * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Datos guardados de Objetivos e Ingresos de la sesión
|
||||
const objetivos = [
|
||||
parseInt(arregloGeneral.objetivoT1) || 100000,
|
||||
parseInt(arregloGeneral.objetivoT2) || 100000,
|
||||
parseInt(arregloGeneral.objetivoT3) || 100000,
|
||||
parseInt(arregloGeneral.objetivoT4) || 100000
|
||||
];
|
||||
const ingresos = [
|
||||
arregloGeneral.trimestre1 || 0,
|
||||
arregloGeneral.trimestre2 || 0,
|
||||
arregloGeneral.trimestre3 || 0,
|
||||
arregloGeneral.trimestre4 || 0
|
||||
];
|
||||
|
||||
const maxVal = Math.max(120000, ...ingresos, ...objetivos) * 1.18;
|
||||
|
||||
const marginTop = isExpanded ? 28 : 14;
|
||||
const marginBottom = isExpanded ? 24 : 14;
|
||||
const marginLeft = isExpanded ? 55 : 32;
|
||||
const marginRight = isExpanded ? 15 : 8;
|
||||
const chartWidth = width - marginLeft - marginRight;
|
||||
const chartHeight = height - marginTop - marginBottom;
|
||||
|
||||
// 1. Líneas de cuadrícula horizontales
|
||||
ctx.strokeStyle = '#e6e6e6';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.font = isExpanded ? '12px Arial' : '9px Arial';
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
const steps = isExpanded ? 3 : 2;
|
||||
for (let i = 0; i <= steps; i++) {
|
||||
const val = (maxVal / steps) * i;
|
||||
const y = height - marginBottom - (chartHeight / steps) * i;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(marginLeft, y);
|
||||
ctx.lineTo(width - marginRight, y);
|
||||
ctx.stroke();
|
||||
|
||||
let label = '$' + (val >= 1000 ? Math.round(val / 1000) + 'k' : Math.round(val));
|
||||
ctx.fillText(label, marginLeft - (isExpanded ? 6 : 3), y);
|
||||
}
|
||||
|
||||
const colStep = chartWidth / 4;
|
||||
const barWidth = Math.min(isExpanded ? 48 : 22, colStep * 0.45);
|
||||
|
||||
// 2. Dibujar Barras (Objetivos del Trimestre guardados)
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const xCenter = marginLeft + colStep * i + colStep / 2;
|
||||
const xBar = xCenter - barWidth / 2;
|
||||
const barH = (objetivos[i] / maxVal) * chartHeight;
|
||||
const yBar = height - marginBottom - barH;
|
||||
|
||||
ctx.fillStyle = '#5c9ecc';
|
||||
ctx.fillRect(xBar, yBar, barWidth, barH);
|
||||
ctx.strokeStyle = '#3b7bb2';
|
||||
ctx.lineWidth = 1.2;
|
||||
ctx.strokeRect(xBar, yBar, barWidth, barH);
|
||||
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.font = isExpanded ? 'bold 12px Arial' : 'bold 9px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText('T' + (i + 1), xCenter, height - marginBottom + (isExpanded ? 5 : 3));
|
||||
|
||||
if (isExpanded) {
|
||||
ctx.fillStyle = '#1b4f72';
|
||||
ctx.font = '11px Arial';
|
||||
let formattedObj = '$' + Math.round(objetivos[i] / 1000) + 'k';
|
||||
ctx.fillText('Obj: ' + formattedObj, xCenter, yBar - 14);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Dibujar Línea + Puntos (Ingresos del Trimestre)
|
||||
const linePoints = [];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const xCenter = marginLeft + colStep * i + colStep / 2;
|
||||
const valY = (ingresos[i] / maxVal) * chartHeight;
|
||||
const yLine = height - marginBottom - valY;
|
||||
linePoints.push({
|
||||
x: xCenter,
|
||||
y: yLine,
|
||||
val: ingresos[i]
|
||||
});
|
||||
}
|
||||
|
||||
// Trazar línea conectora
|
||||
ctx.strokeStyle = '#d9534f';
|
||||
ctx.lineWidth = isExpanded ? 3.5 : 2;
|
||||
ctx.beginPath();
|
||||
linePoints.forEach((pt, idx) => {
|
||||
if (idx === 0) ctx.moveTo(pt.x, pt.y);
|
||||
else ctx.lineTo(pt.x, pt.y);
|
||||
});
|
||||
ctx.stroke();
|
||||
|
||||
// Puntos y valores
|
||||
linePoints.forEach((pt) => {
|
||||
ctx.fillStyle = '#d9534f';
|
||||
ctx.beginPath();
|
||||
ctx.arc(pt.x, pt.y, isExpanded ? 6 : 3.5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#ffffff';
|
||||
ctx.lineWidth = isExpanded ? 2.5 : 1.5;
|
||||
ctx.stroke();
|
||||
|
||||
if (pt.val > 0) {
|
||||
ctx.fillStyle = '#a94442';
|
||||
ctx.font = isExpanded ? 'bold 12px Arial' : 'bold 8px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
let formattedVal = isExpanded ? formatCurrency(pt.val) : ('$' + (pt.val >= 1000 ? Math.round(pt.val / 1000) + 'k' : pt.val));
|
||||
ctx.fillText(formattedVal, pt.x, pt.y - (isExpanded ? 7 : 3));
|
||||
}
|
||||
});
|
||||
|
||||
// 4. Leyenda en la esquina superior derecha
|
||||
ctx.font = isExpanded ? '11px Arial' : '8px Arial';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
|
||||
const legY = isExpanded ? 4 : 1;
|
||||
|
||||
if (isExpanded) {
|
||||
// Leyenda amplia (2.5X)
|
||||
const item1SquareX = width - 230;
|
||||
const item1TextX = width - 213;
|
||||
const item2CircleX = width - 95;
|
||||
const item2TextX = width - 85;
|
||||
|
||||
// 🟦 Cuadro azul + Texto Objetivo
|
||||
ctx.fillStyle = '#5c9ecc';
|
||||
ctx.fillRect(item1SquareX, legY, 12, 12);
|
||||
ctx.strokeStyle = '#3b7bb2';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(item1SquareX, legY, 12, 12);
|
||||
ctx.fillStyle = '#444';
|
||||
ctx.fillText('Objetivo Trimestre', item1TextX, legY);
|
||||
|
||||
// 🔴 Círculo rojo + Texto Ingreso
|
||||
ctx.fillStyle = '#d9534f';
|
||||
ctx.beginPath();
|
||||
ctx.arc(item2CircleX, legY + 6, 4.5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#ffffff';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#444';
|
||||
ctx.fillText('Ingreso Real', item2TextX, legY);
|
||||
} else {
|
||||
// Leyenda compacta
|
||||
const item1SquareX = width - 118;
|
||||
const item1TextX = width - 108;
|
||||
const item2CircleX = width - 42;
|
||||
const item2TextX = width - 35;
|
||||
|
||||
// 🟦 Cuadro azul + Texto Obj.
|
||||
ctx.fillStyle = '#5c9ecc';
|
||||
ctx.fillRect(item1SquareX, legY, 7, 7);
|
||||
ctx.fillStyle = '#444';
|
||||
ctx.fillText('Obj. ($100k)', item1TextX, legY);
|
||||
|
||||
// 🔴 Círculo rojo + Texto Ingreso
|
||||
ctx.fillStyle = '#d9534f';
|
||||
ctx.beginPath();
|
||||
ctx.arc(item2CircleX, legY + 3.5, 3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#444';
|
||||
ctx.fillText('Ingreso', item2TextX, legY);
|
||||
}
|
||||
}
|
||||
|
||||
function crearTarjetaProyecto(proyecto, esCompletado) {
|
||||
@@ -1071,11 +1323,11 @@
|
||||
const quincena = parseInt($('#etQuincena').val()) || 1;
|
||||
const trimestreActual = Math.floor((quincena - 1) / 6) + 1;
|
||||
const esFinTrimestre = (quincena % 6 === 0);
|
||||
const yaResolvioManto = (proyecto.mantenimiento !== 'N/A' && proyecto.mantenimientoPagadoEnTrimestre === trimestreActual);
|
||||
const yaResolvioManto = (proyecto.mantenimientoPagadoEnTrimestre === trimestreActual);
|
||||
|
||||
let actionButtonsHtml = '';
|
||||
if (!esCompletado && esFinTrimestre && proyecto.dificultad !== 'Incidencia' && proyecto.mantenimiento !== 'N/A') {
|
||||
const showPay = proyecto.mantenimiento !== 'N/A';
|
||||
if (!esCompletado && esFinTrimestre) {
|
||||
const showPay = (proyecto.dificultad !== 'Incidencia' && proyecto.mantenimiento !== 'N/A');
|
||||
const penalizacionFormateada = formatCurrency(proyecto.penalizacion || 0);
|
||||
|
||||
let buttonManto = '';
|
||||
|
||||
Reference in New Issue
Block a user