Differences

This shows you the differences between two versions of the page.

--- apuntes:backend_frontend [2025/03/24 09:31] – [Frontend: formulario de registro] Santiago Faci
+++ apuntes:backend_frontend [2025/03/24 09:34] (current) – [Backend: API] Santiago Faci
@@ Line 611: / Line 611: @@
 </file>
+==== Frontend: Utilidades ====
+<file javascript documentUtils.js>
+const icons = new Map();
+icons.set('edit',
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">' +
+        '<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>' +
+    '</svg>'
+);
+icons.set('delete',
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">' +
+        '<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>' +
+        '<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>' +
+    '</svg>'
+);
+// TODO Añadir más iconos
+const el = function (elementId) {
+    return document.getElementById(elementId);
+};
+const icon = function(iconName) {
+    return icons.get(iconName);
+};
+const td = function(text) {
+    return '<td>' + text + '</td>';
+}
+module.exports = {
+    el,
+    icon,
+    td
+};
+</file>
 ==== Frontend: carga de datos en una tabla ====
+<file html index.html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        <script type="module" src="index.js"></script>
+    </head>
+    <body onload="readCities()">
+        <div class="container">
+            <ul class="nav nav-tabs">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="index.html">Listado</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="registro.html">Registro</a>
+                </li>
+            </ul>
+            <h1>Listado de ciudades</h1>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Nombre</th>
+                        <th>Población</th>
+                        <th>Área</th>
+                        <th>. . .</th>
+                    </tr>
+                </thead>
+                <tbody id="tableBody">
+                </tbody>
+            </table>
+            </ul>
+        </div>
+    </body>
+</html>
+</file>
+<file javascript index.js>
+import axios from 'axios';
+import { el, icon, td } from './documentUtil';
+import { notifyOk } from './dialogUtil';
+window.readCities = function() {
+    axios.get('http://localhost:8080/cities')
+        .then((response) => {
+            const cityList = response.data;
+            const cityTable = el('tableBody');
+            cityList.forEach(city => {
+                const row = document.createElement('tr');
+                row.id = 'city-' + city.id;
+                row.innerHTML = td(city.name) +
+                                td(city.population) +
+                                td(city.area) +
+                                '<a class="btn btn-warning" href="modify.html?id=' + city.id + '">' +
+                                icon('edit') +
+                                '</a> ' +
+                                '<a class="btn btn-danger" href="javascript:removeCity(' + city.id + ')">' +
+                                icon('delete') +
+                                '</a>';
+                cityTable.appendChild(row);
+            })
+        });
+};
+window.removeCity = function(id) {
+    if (confirm('¿Está seguro de que desea eliminar esta ciudad?')) {
+        axios.delete('http://localhost:8080/cities/' + id)
+            .then((response) => {
+                if (response.status == 204) {
+                    notifyOk('Ciudad eliminada correctamente');
+                    el('city-' + id).remove();
+                }
+            });
+    }
+};
+</file>
+==== Frontend: Diálogos ====
+<file javascript dialogUtils.js>
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+const notifyError = function(message) {
+    Toastify({
+        text: message,
+        duration: 3000,
+        gravity: 'top',
+        position: 'center',
+        style: {
+            background: "red",
+        },
+    }).showToast();
+};
+const notifyOk = function(message) {
+    Toastify({
+        text: message,
+        duration: 3000,
+        gravity: 'top',
+        position: 'center',
+        style: {
+            background: "green",
+        },
+    }).showToast();
+};
+module.exports = {
+    notifyError,
+    notifyOk
+};
+</file>
 ==== Frontend: formulario de registro ====