mejorado tema de idiomas y terminado datatable

This commit is contained in:
Jaime Jiménez
2025-06-15 16:01:04 +02:00
parent 276cf2ad7c
commit 8ed8d0bded
19 changed files with 181 additions and 119 deletions

View File

@ -1,9 +1,10 @@
spring.application.name=printhub
spring.thymeleaf.cache=false
spring.datasource.url=${SPRING_DATASOURCE_URL}
spring.datasource.username=${SPRING_DATASOURCE_USERNAME}
spring.datasource.password=${SPRING_DATASOURCE_PASSWORD}
spring.datasource.url=jdbc:mysql://localhost:3306/printhub
spring.datasource.username=printhub
spring.datasource.password=DsomyTF4NjTtwzGTTWaxoUEvIt
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.show-sql=true

View File

@ -1,3 +1,4 @@
t-printers=Printers
t-printers-list=Printers List
t-printers-id=ID
t-printers-name=Name

View File

@ -1,3 +1,4 @@
t-printers=Impresoras
t-printers-list=Lista de Impresoras
t-printers-id=ID
t-printers-name=Nombre

View File

@ -15,45 +15,40 @@ File: Main Js File
*/
var navbarMenuHTML = document.querySelector(".navbar-menu").innerHTML;
var horizontalMenuSplit = 7; // after this number all horizontal menus will be moved in More menu options
var default_lang = "sp"; // set Default Language
var default_lang = "es"; // set Default Language
var language = localStorage.getItem("language");
function initLanguage() {
// Set new language
(language === null) ? setLanguage(default_lang) : setLanguage(language);
var languages = document.getElementsByClassName("language");
languages && Array.from(languages).forEach(function (dropdown) {
dropdown.addEventListener("click", function (event) {
setLanguage(dropdown.getAttribute("data-lang"));
});
const saved = localStorage.getItem("language") || default_lang;
setLanguage(saved, false); // ← NO redirige
document.querySelectorAll('.language').forEach(a => {
a.addEventListener('click', () => setLanguage(a.dataset.lang, true));
});
}
function setLanguage(lang) {
if (document.getElementById("header-lang-img")) {
if (lang == "en") {
document.getElementById("header-lang-img").src = "assets/images/flags/gb.svg";
} else if (lang == "es") {
document.getElementById("header-lang-img").src = "assets/images/flags/spain.svg";
} else if (lang == "gr") {
document.getElementById("header-lang-img").src = "assets/images/flags/germany.svg";
} else if (lang == "it") {
document.getElementById("header-lang-img").src = "assets/images/flags/italy.svg";
} else if (lang == "ru") {
document.getElementById("header-lang-img").src = "assets/images/flags/russia.svg";
} else if (lang == "ch") {
document.getElementById("header-lang-img").src = "assets/images/flags/china.svg";
} else if (lang == "fr") {
document.getElementById("header-lang-img").src = "assets/images/flags/french.svg";
} else if (lang == "ar") {
document.getElementById("header-lang-img").src = "assets/images/flags/ae.svg";
}
localStorage.setItem("language", lang);
language = localStorage.getItem("language");
getLanguage();
function setLanguage(lang, redirect = true) {
const already = document.documentElement.lang === lang;
// 1. Actualiza bandera, <html lang> y localStorage
document.documentElement.lang = lang;
document.getElementById("header-lang-img").src =
lang === "en" ? "/assets/images/flags/gb.svg"
: "/assets/images/flags/spain.svg";
localStorage.setItem("language", lang);
// 2. Carga traducciones (o al menos quita el veil)
getLanguage(); // ← SIEMPRE llamar
// 3. Redirige solo si realmente cambiamos de idioma
if (!already && redirect) {
const url = new URL(location.href);
url.searchParams.set("lang", lang);
location.href = url.toString();
}
}
// Multi language setting
function getLanguage() {
const lang = language || default_lang;
@ -67,6 +62,17 @@ File: Main Js File
elem.textContent = data[key];
});
});
}).finally(() => {
// 1 Quita el velo “cargando i18n”
document.documentElement.removeAttribute('data-i18n-loading');
// 2 Si la URL tiene ?lang=xx, quítalo sin recargar
const url = new URL(window.location.href);
if (url.searchParams.has('lang')) {
url.searchParams.delete('lang'); // borra el parámetro
history.replaceState(null, "", // sustituye entrada actual
url.pathname + url.search + url.hash); // misma ruta, sin ?lang
}
});
}

View File

@ -10,6 +10,6 @@ File: Common Plugins Js File
//Common plugins
if(document.querySelectorAll("[toast-list]") || document.querySelectorAll('[data-choices]') || document.querySelectorAll("[data-provider]")){
document.writeln("<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/toastify-js'></script>");
document.writeln("<script type='text/javascript' src='assets/libs/choices.js/public/assets/scripts/choices.min.js'></script>");
document.writeln("<script type='text/javascript' src='assets/libs/flatpickr/flatpickr.min.js'></script>");
document.writeln("<script type='text/javascript' src='/assets/libs/choices.js/public/assets/scripts/choices.min.js'></script>");
document.writeln("<script type='text/javascript' src='/assets/libs/flatpickr/flatpickr.min.js'></script>");
}

View File

@ -7,17 +7,62 @@
<div th:replace="~{printhub/partials/title-meta :: title-meta(${title})}"></div>
</th:block>
<th:block layout:fragment="pagecss">
<!-- DataTable CSS en el lugar correcto -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
</th:block>
<head>
</head>
<body>
<div layout:fragment="content">
<!-- start page title -->
<div th:replace="~{printhub/partials/page-title :: page-title(${title},'Pages')}"></div>
<!-- start page title -->
<div th:replace="~{printhub/partials/page-title :: page-title(${title},${currentPage})}"></div>
<!-- Striped Rows -->
<table id="listOfPrinters" class="table table-striped">
<thead>
<tr>
<th scope="col" data-key="t-printers-id">Id</th>
<th scope="col" data-key="t-printers-name">Nombre</th>
</tr>
<!-- fila de inputs -->
<tr class="filters">
<th></th>
<th>
<input type="text" title="name-filter" class="form-control form-control-sm" />
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<th:block layout:fragment="pagejs">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--datatable js-->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script th:src="@{/assets/js/pages/printhub/configuration/printerList.js}"></script>
</th:block>
</body>

View File

@ -1,9 +1,26 @@
<html lang="en" data-layout="semibox" data-sidebar-visibility="show" data-topbar="light" data-sidebar="light" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable" xmlns="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<html th:lang="${#locale.language}" data-layout="semibox" data-sidebar-visibility="show" data-topbar="light" data-sidebar="light"
data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable" xmlns="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<style>
html[data-i18n-loading] {
opacity: 0;
}
</style>
<script>
document.documentElement.setAttribute('data-i18n-loading', '');
</script>
<th:block layout:fragment="pagetitle" />
<!-- Page CSS -->
<div th:replace="~{theme/partials/head-css :: head-css}"></div>
<div th:replace="~{printhub/partials/head-css :: head-css}"></div>
<th:block layout:fragment="pagecss" />
</head>
<body data-sidebar="dark" data-layout-mode="light">

View File

@ -1,4 +1,4 @@
<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="page-title(title,pagetitle)" th:remove="tag">
@ -6,12 +6,19 @@
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 data-key="t-home" class="mb-sm-0" th:text="${title}"></h4>
<h4 th:data-key="${keyTitle}" class="mb-sm-0" th:text="${currentPage}"></h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);" th:text="${pagetitle}"></a></li>
<li class="breadcrumb-item active" data-key="t-home" th:text="${title}"></li>
<li th:each="item : ${breadcrumb}" class="breadcrumb-item"
th:classappend="${item.url == null}? 'active' : ''">
<a th:if="${item.url != null}" th:data-key="${item.dataKey}" th:href="${item.url}"
th:text="${item.label}"></a>
<span th:if="${item.url == null}" th:data-key="${item.dataKey}"
th:text="${item.label}"></span>
</li>
</ol>
</div>

View File

@ -3,7 +3,7 @@
<body>
<div th:fragment="title-meta(title)" th:remove="tag">
<meta charset="utf-8" />
<title th:text="${title} + ' | PrintHub'"></title>
<title text="PrintHub'"></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Servicion de impresión personal" name="description" />
<!-- App favicon -->

View File

@ -38,11 +38,9 @@
<div class="d-flex align-items-center">
<div class="dropdown ms-1 topbar-head-dropdown header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="header-lang-img" src="/assets/images/flags/us.svg" alt="Header Language" height="20" class="rounded">
<img id="header-lang-img" src="" alt="Header Language" height="20" class="rounded">
</button>
<div class="dropdown-menu dropdown-menu-end">