Skip to content

Commit

Permalink
Mueve inicialización de tema a controller/motor.js. Avanza https://gi…
Browse files Browse the repository at this point in the history 
…tlab.com/pasosdeJesus/sivel2_gen/-/issues/687
  • Loading branch information
@vtamara
vtamara committed Aug 21, 2024
1 parent 1631a8e commit ed62e61
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 101 deletions.
5 changes: 1 addition & 4 deletions app/assets/javascripts/msip/motor.js.coffee.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -842,7 +842,7 @@ if (typeof String.prototype.endsWith != 'function')
)

# Pone colores de acuerdo al tema
msip_temausuario_ajax()
Msip__Motor.ponerTemaUsuarioAjax()
jQuery ->
$("a[rel~=popover], .has-popover").popover()
$("a[rel~=tooltip], .has-tooltip").tooltip()
Expand Down Expand Up @@ -944,9 +944,6 @@ if (typeof String.prototype.endsWith != 'function')

MsipIniciar()

# Pone colores de acuerdo al tema
msip_temausuario_ajax()

jQuery ->
$("a[rel~=popover], .has-popover").popover()
$("a[rel~=tooltip], .has-tooltip").tooltip()
Expand Down
96 changes: 0 additions & 96 deletions app/assets/javascripts/msip/motor_es5.js.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,102 +271,6 @@ function MsipGuardarFormularioYRepintar(listaIdsRepintar, retrollamada_exito,
}


function msip_pone_tema(root, tema) {
console.log("entro a msip_ pone_tema")
debugger
document.querySelectorAll('.table-striped>tbody>tr:nth-child(odd)').forEach((element) => {
element.style.backgroundColor = tema.fondo_lista;
});
document.querySelector('.navbar').style.backgroundImage = `linear-gradient(${tema.nav_ini}, ${tema.nav_fin})`;
document.querySelectorAll('.navbar-default .navbar-nav>li>a').forEach((element) => {
element.style.color = tema.nav_fuente;
});
document.querySelector('.navbar .navbar-brand').style.color = tema.nav_fuente;
document.querySelectorAll('.navbar-light .navbar-nav .nav-link').forEach((element) => {
element.style.color = tema.nav_fuente;
});
document.querySelector('.navbar-light .navbar-brand').style.color = tema.nav_fuente;
document.querySelector('.dropdown-menu').style.backgroundColor = tema.nav_fin;
document.querySelectorAll('.dropdown-item').forEach((element) => {
element.style.color = tema.nav_fuente;
element.addEventListener('mouseover', () => {
element.style.color = tema.color_flota_subitem_fuente;
element.style.backgroundColor = tema.color_flota_subitem_fondo;
});

element.addEventListener('mouseout', () => {
element.style.color = tema.nav_fuente;
element.style.backgroundColor = tema.nav_fin;
});
});
document.querySelectorAll('.alert-success').forEach((element) => {
element.style.color = tema.alerta_exito_fuente;
element.style.backgroundColor = tema.alerta_exito_fondo;
});
document.querySelectorAll('.alert-danger').forEach((element) => {
element.style.color = tema.alerta_problema_fuente;
element.style.backgroundColor = tema.alerta_problema_fondo;
});
document.querySelectorAll('.btn').forEach((element) => {
element.style.backgroundImage = `linear-gradient(to bottom, ${tema.btn_accion_fondo_ini}, ${tema.btn_accion_fondo_fin})`;
element.style.color = tema.btn_accion_fuente;
});
document.querySelectorAll('.btn-primary').forEach((element) => {
element.style.backgroundImage = `linear-gradient(to bottom, ${tema.btn_primario_fondo_ini}, ${tema.btn_primario_fondo_fin})`;
element.style.color = tema.btn_primario_fuente;
});
document.querySelectorAll('.btn-danger').forEach((element) => {
element.style.backgroundImage = `linear-gradient(to bottom, ${tema.btn_peligro_fondo_ini}, ${tema.btn_peligro_fondo_fin})`;
element.style.color = tema.btn_peligro_fuente;
});
document.body.style.backgroundColor = tema.fondo;
document.querySelectorAll('.card').forEach((element) => {
element.style.backgroundColor = tema.fondo;
});
document.querySelectorAll('.msip-sf-bs-input:not(.form-check-input)').forEach((element) => {
element.style.backgroundColor = tema.fondo;
element.style.color = tema.color_fuente;
});
document.querySelectorAll('.page-link').forEach((element) => {
element.style.backgroundColor = tema.fondo;
});
document.body.style.color = tema.color_fuente;
document.querySelectorAll('table').forEach((element) => {
element.style.color = tema.color_fuente;
});
}

async function msip_temausuario_ajax(){
var root = window
var ruta = 'temausuario'
var funproc = msip_pone_tema
var datos = {}
var t = Date.now();
var d = -1;
if (root.msip_ajax_recibe_json_t) {
if (root.msip_ajax_recibe_json_t[ruta]) {
d = (t - root.msip_ajax_recibe_json_t[ruta]) / 1000;
}
} else {
root.msip_ajax_recibe_json_t = {};
}
root.msip_ajax_recibe_json_t[ruta] = t;

if (d === -1 || d > 2) {
var rutac = root.puntomontaje + ruta + ".json";
await fetch(rutac)
.then(function(response) {
if (!response.ok) {
console.error('Request failed with status:', response.status);
}
return response.json();
})
.then(function(data) {
return funproc(root, data);
})
}
return true;
}
function MsipIniciar() {

MsipAutocompletaAjaxContactos.iniciar()
Expand Down
99 changes: 99 additions & 0 deletions app/javascript/controllers/motor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,102 @@ export default class Msip__Motor {
})
}

// Pone colores del tema en elementos de la interfaz de manera dinámica
static ponerTema(root, tema) {
console.log("entro a msip_ pone_tema")
document.querySelectorAll('.table-striped>tbody>tr:nth-child(odd)').forEach((element) => {
element.style.backgroundColor = tema.fondo_lista;
});
document.querySelector('.navbar').style.backgroundImage = `linear-gradient(${tema.nav_ini}, ${tema.nav_fin})`;
document.querySelectorAll('.navbar-default .navbar-nav>li>a').forEach((element) => {
element.style.color = tema.nav_fuente;
});
document.querySelector('.navbar .navbar-brand').style.color = tema.nav_fuente;
document.querySelectorAll('.navbar-light .navbar-nav .nav-link').forEach((element) => {
element.style.color = tema.nav_fuente;
});
document.querySelector('.navbar-light .navbar-brand').style.color = tema.nav_fuente;
document.querySelector('.dropdown-menu').style.backgroundColor = tema.nav_fin;
document.querySelectorAll('.dropdown-item').forEach((element) => {
element.style.color = tema.nav_fuente;
element.addEventListener('mouseover', () => {
element.style.color = tema.color_flota_subitem_fuente;
element.style.backgroundColor = tema.color_flota_subitem_fondo;
});

element.addEventListener('mouseout', () => {
element.style.color = tema.nav_fuente;
element.style.backgroundColor = tema.nav_fin;
});
});
document.querySelectorAll('.alert-success').forEach((element) => {
element.style.color = tema.alerta_exito_fuente;
element.style.backgroundColor = tema.alerta_exito_fondo;
});
document.querySelectorAll('.alert-danger').forEach((element) => {
element.style.color = tema.alerta_problema_fuente;
element.style.backgroundColor = tema.alerta_problema_fondo;
});
document.querySelectorAll('.btn').forEach((element) => {
element.style.backgroundImage = `linear-gradient(to bottom, ${tema.btn_accion_fondo_ini}, ${tema.btn_accion_fondo_fin})`;
element.style.color = tema.btn_accion_fuente;
});
document.querySelectorAll('.btn-primary').forEach((element) => {
element.style.backgroundImage = `linear-gradient(to bottom, ${tema.btn_primario_fondo_ini}, ${tema.btn_primario_fondo_fin})`;
element.style.color = tema.btn_primario_fuente;
});
document.querySelectorAll('.btn-danger').forEach((element) => {
element.style.backgroundImage = `linear-gradient(to bottom, ${tema.btn_peligro_fondo_ini}, ${tema.btn_peligro_fondo_fin})`;
element.style.color = tema.btn_peligro_fuente;
});
document.body.style.backgroundColor = tema.fondo;
document.querySelectorAll('.card').forEach((element) => {
element.style.backgroundColor = tema.fondo;
});
document.querySelectorAll('.msip-sf-bs-input:not(.form-check-input)').forEach((element) => {
element.style.backgroundColor = tema.fondo;
element.style.color = tema.color_fuente;
});
document.querySelectorAll('.page-link').forEach((element) => {
element.style.backgroundColor = tema.fondo;
});
document.body.style.color = tema.color_fuente;
document.querySelectorAll('table').forEach((element) => {
element.style.color = tema.color_fuente;
});
}

static async ponerTemaUsuarioAjax(){
var root = window
var ruta = 'temausuario'
var datos = {}
var t = Date.now();
var d = -1;
if (root.msip_ajax_recibe_json_t) {
if (root.msip_ajax_recibe_json_t[ruta]) {
d = (t - root.msip_ajax_recibe_json_t[ruta]) / 1000;
}
} else {
root.msip_ajax_recibe_json_t = {};
}
root.msip_ajax_recibe_json_t[ruta] = t;

if (d === -1 || d > 2) {
var rutac = root.puntomontaje + ruta + ".json";
await fetch(rutac)
.then(function(response) {
if (!response.ok) {
console.error('Request failed with status:', response.status);
}
return response.json();
})
.then(function(data) {
return Msip__Motor.ponerTema(root, data);
})
}
return true;
}

// Si el elemento es campos de selección tal vez antes con tom-select
// pero con opciones modificadas dinamicamente, refresca
static refrescarElementoTomSelect(el) {
Expand All @@ -80,6 +176,9 @@ export default class Msip__Motor {
// Podría ser llamada varias veces consecutivas por lo que debe detectarlo
// para no ejecutar dos veces lo que no conviene.
static ejecutarAlCargarPagina() {
// Pone colores de acuerdo al tema
Msip__Motor.ponerTemaUsuarioAjax()

Msip__Motor.configurarElementosTomSelect()
}

Expand Down
3 changes: 2 additions & 1 deletion test/dummy/app/javascript/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,9 @@ document.addEventListener('turbo:load', (e) => {

console.log('Escuchador turbo:load')


msip_ejecutarAlCargarPagina(window) // Establece root.puntomontaje
Msip__Motor.ejecutarAlCargarPagina()
msip_ejecutarAlCargarPagina(window)
})


Expand Down

0 comments on commit ed62e61

Please sign in to comment.