Certs controller. Split html into fragemnts. Certs html
This commit is contained in:
parent
a7f83e4ca0
commit
c2535f7115
16
src/main/java/dev/araozu/eeg_java/certs/CertController.java
Normal file
16
src/main/java/dev/araozu/eeg_java/certs/CertController.java
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
package dev.araozu.eeg_java.certs;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.ui.Model;
|
||||||
|
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
@RequestMapping(path = "/certs")
|
||||||
|
public class CertController {
|
||||||
|
@GetMapping("")
|
||||||
|
public String index(Model model) {
|
||||||
|
return "certs";
|
||||||
|
}
|
||||||
|
}
|
||||||
77
src/main/resources/templates/certs.html
Normal file
77
src/main/resources/templates/certs.html
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" xmlns:th="http://www.thymeleaf.org">
|
||||||
|
|
||||||
|
<head th:replace="fragments/head :: head"></head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="grid grid-cols-[5rem_auto]">
|
||||||
|
<!-- Navigation Rail -->
|
||||||
|
<div th:replace="fragments/navigation_rail :: div"></div>
|
||||||
|
<!-- Certs -->
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-[16rem_25rem_1fr]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div
|
||||||
|
class="my-4 inline-block w-[10rem] h-[10rem] rounded-lg bg-c-surface-variant overflow-hidden">
|
||||||
|
<img class="inline-block w-[10rem] h-[10rem]" src="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<form>
|
||||||
|
<div class="relative max-w-[14rem] mx-auto">
|
||||||
|
<input
|
||||||
|
id="search-dni"
|
||||||
|
class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
|
||||||
|
invalid:border-c-error invalid:text-c-error
|
||||||
|
focus:border-c-primary outline-none font-mono
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
type="text"
|
||||||
|
minLength="8"
|
||||||
|
maxLength="15"
|
||||||
|
pattern="[0-9]{8,15}"
|
||||||
|
placeholder="Número de DNI"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="absolute top-[2px] right-14 rounded hover:bg-c-surface-variant"
|
||||||
|
>
|
||||||
|
<LoadingIcon class="animate-spin" fill="var(--c-on-surface)" />
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="absolute top-1 right-8 rounded hover:bg-c-surface-variant"
|
||||||
|
>
|
||||||
|
<i class="ph ph-copy inline-block w-6 text-2xl"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
|
||||||
|
>
|
||||||
|
<i class="ph ph-x-circle inline-block w-6 text-2xl"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none opacity-0">
|
||||||
|
Error: {error()}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="person-search-result"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- New Register -->
|
||||||
|
<div>new register</div>
|
||||||
|
<!-- Registers -->
|
||||||
|
<div>registers</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
18
src/main/resources/templates/fragments/head.html
Normal file
18
src/main/resources/templates/fragments/head.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>EEGSAC - Java</title>
|
||||||
|
|
||||||
|
<!-- tailwind & color schemes -->
|
||||||
|
<link href="/colors.css" rel="stylesheet">
|
||||||
|
<link href="/main.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- htmx -->
|
||||||
|
<script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
|
||||||
|
<!-- color manager -->
|
||||||
|
<script defer src="/colorManager.js"></script>
|
||||||
|
<!-- Phosphor icons -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css" />
|
||||||
|
</head>
|
||||||
59
src/main/resources/templates/fragments/navigation_rail.html
Normal file
59
src/main/resources/templates/fragments/navigation_rail.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<div>
|
||||||
|
<div class="flex flex-col justify-center items-center h-screen overflow-x-hidden">
|
||||||
|
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
||||||
|
max-w-[4rem] inline-block select-none" href="/">
|
||||||
|
<div
|
||||||
|
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
||||||
|
<i class="ph ph-house"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">
|
||||||
|
Inicio
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
||||||
|
max-w-[4rem] inline-block select-none" href="/certs">
|
||||||
|
<div
|
||||||
|
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
||||||
|
<i class="ph ph-file-doc"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">
|
||||||
|
Certs
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
||||||
|
max-w-[4rem] inline-block select-none" href="/accesos">
|
||||||
|
<div
|
||||||
|
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
||||||
|
<i class="ph ph-password"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">
|
||||||
|
Accesos
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
||||||
|
max-w-[4rem] inline-block select-none" href="/escaneos">
|
||||||
|
<div
|
||||||
|
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
||||||
|
<i class="ph ph-scan"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">
|
||||||
|
Escaneos
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
||||||
|
max-w-[4rem] inline-block select-none" href="/reportes">
|
||||||
|
<div
|
||||||
|
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
||||||
|
<i class="ph ph-chart-scatter"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">
|
||||||
|
Reportes
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,88 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es" xmlns:th="http://www.thymeleaf.org">
|
<html lang="es" xmlns:th="http://www.thymeleaf.org">
|
||||||
|
|
||||||
<head>
|
<head th:replace="fragments/head"></head>
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title>EEGSAC - Java</title>
|
|
||||||
|
|
||||||
<!-- tailwind & color schemes -->
|
|
||||||
<link href="/colors.css" rel="stylesheet">
|
|
||||||
<link href="/main.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<!-- htmx -->
|
|
||||||
<script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
|
|
||||||
<!-- color manager -->
|
|
||||||
<script defer src="/colorManager.js"></script>
|
|
||||||
<!-- Phosphor icons -->
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="grid grid-cols-[5rem_auto]">
|
<div class="grid grid-cols-[5rem_auto]">
|
||||||
<!-- Navigation Rail -->
|
<!-- Navigation Rail -->
|
||||||
<div>
|
<div th:replace="fragments/navigation_rail"></div>
|
||||||
<div class="flex flex-col justify-center items-center h-screen overflow-x-hidden">
|
|
||||||
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
|
||||||
max-w-[4rem] inline-block select-none" href="/">
|
|
||||||
<div
|
|
||||||
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
|
||||||
<i class="ph ph-house"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">
|
|
||||||
Inicio
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
|
||||||
max-w-[4rem] inline-block select-none" href="/certs">
|
|
||||||
<div
|
|
||||||
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
|
||||||
<i class="ph ph-file-doc"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">
|
|
||||||
Certs
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
|
||||||
max-w-[4rem] inline-block select-none" href="/accesos">
|
|
||||||
<div
|
|
||||||
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
|
||||||
<i class="ph ph-password"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">
|
|
||||||
Accesos
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
|
||||||
max-w-[4rem] inline-block select-none" href="/escaneos">
|
|
||||||
<div
|
|
||||||
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
|
||||||
<i class="ph ph-scan"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">
|
|
||||||
Escaneos
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
|
|
||||||
max-w-[4rem] inline-block select-none" href="/reportes">
|
|
||||||
<div
|
|
||||||
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
|
|
||||||
<i class="ph ph-chart-scatter"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">
|
|
||||||
Reportes
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user