final fix

Dockerfile

@@ -1,13 +1,21 @@
-FROM alpine:3.14
-
-RUN apk update && apk add --no-cache nodejs npm make g++
+# Usar la versión más reciente de Node.js sobre Alpine
+FROM node:current-alpine
 
+# Establecer el directorio de trabajo dentro del contenedor
 WORKDIR /app
 
-COPY . .
+# Copiar los archivos necesarios
+COPY package*.json ./
 
+# Instalar las dependencias
 RUN npm install
 
-CMD ["npm", "run", "build"]
+# Copiar el resto del código fuente
+COPY . .
+
+# Exponer el puerto que Vite utiliza (5173)
+EXPOSE 5173
+
+# Comando para iniciar el servidor de desarrollo
+CMD ["npm", "run", "dev"]
 
-EXPOSE 8080

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "preview": "vite preview"
   },

src/helpers/Api.ts

@@ -2,20 +2,42 @@ import ApiResponse from "../interfaces/ApiResponse";
 import Embalse from "../interfaces/Embalse";
 import Env from "./Env";
 
+/**
+ * Wrapper API de la REST de Oracle DB
+ */
 export default class Api {
+  /**
+   * Conseguir todos los embalses
+   */
   static async embalses(): Promise<Embalse[]> {
     return Api._makeReq('/embalses');
   }
 
+  /**
+   * Conseguir embalse a partir de su id
+   * @param id ID del embalse
+   * @returns Lista de embalses que coinciden con la búsqueda
+   */
   static async embalseById(id: string): Promise<Embalse[]> {
     return Api._makeReq(`/embalses/${id}`);
   }
 
+  /**
+   * Conseguir todos los embalses cercanos
+   * @param lat Latitud
+   * @param lon Longitud
+   * @returns Lista de embalses cercanos
+   */
   static async embalsesNearby(lat: string, lon: string): Promise<Embalse[]> {
     return Api._makeReq(`/embalsesCercanos/${lat}/${lon}`);
   }
 
-  static async _makeReq<T>(endpoint: string): Promise<T[]> {
+  /**
+   * Método privado para enviar solicitudes
+   * @param endpoint Endpoint requerido
+   * @returns Lista de elementos
+   */
+  private static async _makeReq<T>(endpoint: string): Promise<T[]> {
     let hasMore = true;
 
     let url = Env.api_base() + endpoint;

src/helpers/Env.ts

@@ -1,5 +1,18 @@
+/**
+ * Helper para conseguir las variables del entorno
+ */
 export default class Env {
+  /**
+   * Base de API
+   */
   static api_base(): string {
     return import.meta.env.VITE_API_BASE;
   }
+
+  /**
+   * Clave API de OpenWeatherMap
+   */
+  static owm_key(): string {
+    return import.meta.env.VITE_OWM_KEY;
+  }
 }

src/interfaces/ApiResponse.ts

@@ -1,3 +1,6 @@
+/**
+ * Respuesta de Oracle DB
+ */
 export default interface ApiResponse<T> {
   items: T[];
   hasMore: boolean;

src/interfaces/Embalse.ts

@@ -1,3 +1,6 @@
+/**
+ * Datos del embalse
+ */
 export default interface Embalse {
   id: number
   ambito_nombre: string

src/interfaces/OWMResponse.ts

@@ -1,3 +1,6 @@
+/**
+ * Respuesta de la API OpenWeatherMap
+ */
 export default interface OWMResponse {
   cod: string
   message: number
@@ -32,7 +35,7 @@ export interface Main {
 
 export interface Weather {
   id: number
-  main: string
+  main: Main
   description: string
   icon: string
 }

src/styles/bulma.scss

@@ -1,3 +1,5 @@
 @charset 'utf8';
 
+// TODO: MODULAR
+
 @forward 'bulma/sass';

src/styles/loader.css

@@ -1,3 +1,5 @@
+/** Spinner */
+
 .loader {
   width: 48px;
   height: 48px;

src/views/Finder.tsx

@@ -1,6 +1,6 @@
 import { createSignal, onCleanup, onMount } from "solid-js";
 import { useNavigate } from "@solidjs/router";
-import L, { Icon } from 'leaflet';
+import L from 'leaflet';
 import { FaSolidLocationPin } from "solid-icons/fa";
 import Navbar from "../partials/Navbar";
 import Api from "../helpers/Api";

src/views/Home.tsx

@@ -17,27 +17,17 @@ function Home() {
             <div class="columns is-centered">
               <div class="column is-half">
                 <div class="box">
-                  <div class="columns is-centered is-vcentered is-mobile">
-                    <div class="column is-4">
-                      <figure class="image is-128x128">
-                        {/* TODO: Agregar icono */}
-                        <img src="https://bulma.io/assets/images/placeholders/128x128.png" />
-                      </figure>
-                    </div>
-                    <div class="column is-8">
-                      <p class="title">
-                        <span class="icon-text">
-                          <span class="icon">
-                            <FaSolidGlassWaterDroplet />
-                          </span>
-                          <span>Malackathon</span>
-                        </span>
-                      </p>
-                      <div class="buttons">
-                        <A class="button is-primary" href="/embalses">Todos los embalses</A>
-                        <A class="button is-primary" href="/embalses/nearby">Buscar</A>
-                      </div>
-                    </div>
+                  <p class="title">
+                    <span class="icon-text">
+                      <span class="icon">
+                        <FaSolidGlassWaterDroplet />
+                      </span>
+                      <span>Malackathon</span>
+                    </span>
+                  </p>
+                  <div class="buttons is-centered">
+                    <A class="button is-primary" href="/embalses">Todos los embalses</A>
+                    <A class="button is-primary" href="/embalses/nearby">Buscar</A>
                   </div>
                 </div>
               </div>

src/views/Viewer.tsx

@@ -2,8 +2,11 @@ import { onMount } from "solid-js";
 import L from 'leaflet';
 import Embalse from "../interfaces/Embalse";
 import Api from "../helpers/Api";
+import { useNavigate } from "@solidjs/router";
+import Navbar from "../partials/Navbar";
 
 function Viewer() {
+  const navigate = useNavigate();
   let map: L.Map;
 
   let embalses: Embalse[] = [];
@@ -21,17 +24,20 @@ function Viewer() {
   const getEmbalses = async () => {
     embalses = await Api.embalses();
 
-    embalses.forEach(embalse => {
-      L.marker([parseFloat(embalse.x), parseFloat(embalse.y)]).addTo(map);
+    embalses.forEach(c => {
+      L.marker([parseFloat(c.x), parseFloat(c.y)]).on('click', () => navigate('/embalses/' + c.id)).addTo(map);
     });
   }
 
   return (
-    <div class="container">
-      <div id="map" style={{
-        height: '70vh'
-      }}></div>
-    </div>
+    <>
+      <Navbar />
+      <div class="container has-text-centered">
+        <div id="map" style={{
+          height: '70vh'
+        }}></div>
+      </div>
+    </>
   );
 }