final fix

hotfix
2024-10-17 20:29:22 +02:00 · 2024-10-17 20:26:00 +02:00 · 2024-10-17 20:23:49 +02:00 · 2024-10-17 20:23:10 +02:00 · 2024-10-17 20:19:50 +02:00 · 2024-10-17 20:18:21 +02:00
32 changed files with 5726 additions and 2 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+# 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
+
+# Copiar los archivos necesarios
+COPY package*.json ./
+
+# Instalar las dependencias
+RUN npm install
+
+# 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"]
+
--- a/README.md
+++ b/README.md
@ -1,5 +1,86 @@
 # Malackathon-frontend

-Malackathon CyberBokeron (🐟) frontend made using Bulma.

-To run:
+> Malackathon CyberBokeron frontend.
+
+![Bulma](https://img.shields.io/badge/Bulma-0.9.4-00D1B2?style=flat-square)
+![SolidJS](https://img.shields.io/badge/SolidJS-1.0-blue?style=flat-square)
+![License](https://img.shields.io/badge/License-GPLv3-blue.svg)
+
+## **Contents**
+
+- [Description](#description)
+- [Features](#features)
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## **Description**
+
+Frontend made using [SolidJS](https://www.solidjs.com/) and [Bulma](https://bulma.io/) as frameworks.
+
+## **Features**
+
+- ⚡️ Fast thanks to SolidJS
+- 🎨 Clear and responsive desing thanks to Bulma
+- 📦 Minimal configuration
+
+## **Requirements**
+Before proceeding, make sure you have the following installed:
+
+- [Node.js](https://nodejs.org/) v14 or higher
+- [npm](https://www.npmjs.com/)
+
+## **Installation**
+
+Follow this steps to set up the project locally:
+
+1. Clone the repo:
+    ```bash
+    git clone https://openbokeron.uma.es/gitea/CyberBokeron/Malackathon-frontend.git
+    ```
+2. Go to project directory:
+    ```bash
+    cd Malackathon-frontend
+    ```
+3. Install dependencies:
+    ```bash
+    npm install
+    ```
+## **Usage**
+
+To run server locally:
+
+```bash
+npm run dev
+```
+
+Go to `http://localhost:8080` in your browser to see the app.
+
+### **Commands**
+
+- `npm run build`: Compile the project
+- `npm run dev`: Start development server.
+- `npm run format`: Format code using Prettier.
+- `npm run lint`: Run linter to keep the code clean.
+
+
+## **Contributing:**
+
+If you'd like, you can contribute by doing the following steps:
+
+1. Fork the project
+2. Create new branch (`git checkout -b feature-nueva-funcionalidad`).
+3. Commit changes (`git commit -am 'Añadir nueva funcionalidad'`).
+4. Push your branch (`git push origin feature-nueva-funcionalidad`).
+5. Open a pull request.
+
+## **License**
+
+This project is licensed under [AGPLv3](LICENSE).
+
+---
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CyberBokeron Malackathon</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "malackathon-frontend",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@solidjs/router": "^0.14.9",
+    "bulma": "^1.0.2",
+    "leaflet": "^1.9.4",
+    "solid-icons": "^1.1.0",
+    "solid-js": "^1.9.1"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.12",
+    "sass": "^1.80.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.8",
+    "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-solid": "^2.10.2"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/constants/Photos.ts
+++ b/src/constants/Photos.ts
@ -0,0 +1,6 @@
+/** Lista de fotos (Licencia CC) */
+const PHOTOS: string[] = [
+  "https://images.pexels.com/photos/2532003/pexels-photo-2532003.jpeg?cs=srgb&dl=pexels-jamie-patterson-1318696-2532003.jpg&fm=jpg"
+];
+
+export default PHOTOS;
--- a/src/helpers/Api.ts
+++ b/src/helpers/Api.ts
@ -0,0 +1,74 @@
+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}`);
+  }
+
+  /**
+   * 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;
+
+    let data: T[] = [];
+    while (hasMore) {
+      const res = await fetch(url);
+
+      if (!res.ok) {
+        throw new Error("Api error");
+      }
+
+      const json = await res.json() as ApiResponse<T>;
+
+      data.push(...json.items);
+
+      hasMore = json.hasMore;
+
+      if (hasMore) {
+        let found = false;
+        let i = 0;
+        while (!found) {
+          if (json.links[i].rel === 'next') {
+            url = json.links[i].href;
+            found = true;
+          }
+          i++;
+        }
+      }
+    }
+
+    return data;
+  }
+}
--- a/src/helpers/Env.ts
+++ b/src/helpers/Env.ts
@ -0,0 +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;
+  }
+}
--- a/src/helpers/OpenWeather.ts
+++ b/src/helpers/OpenWeather.ts
@ -0,0 +1,36 @@
+import OWMResponse from "../interfaces/OWMResponse";
+
+/**
+ * Wrapper para recibir los datos del clima de OpenWeatherMap
+ */
+export default class OpenWeather {
+  static async week(lat: string, lon: string): Promise<string> {
+    const res = await fetch('https://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=' + import.meta.env.VITE_OWM_KEY);
+    if (!res.ok) {
+      throw new Error("API Error");
+    }
+
+    const json = await res.json() as OWMResponse;
+
+    let rains = 0;
+
+    json.list.forEach((el) => {
+      if (el.weather[0].id === 500) {
+        rains++;
+      }
+    });
+
+    let probability = '';
+
+    if (rains > json.list.length / 2) {
+      // Bien
+      probability = 'Sabiendo que ha llovido un total de ' + rains + ' días, podemos predecir que el caudal será alto';
+    } else {
+      // Mal
+      probability = 'Sabiendo que ha llovido un total de ' + rains + ' días, podemos predecir que el caudal será bajo';
+
+    }
+
+    return probability;
+  }
+}
--- a/src/helpers/Photo.ts
+++ b/src/helpers/Photo.ts
@ -0,0 +1,15 @@
+import PHOTOS from "../constants/Photos";
+
+/**
+ * Clase helper para gestionar los vídeos de fondo
+ * encontrados en views/Home
+ */
+export default class Photo {
+  /**
+   * Elige un vídeo aleatoriamente de la lista
+   * @returns Vídeo aleatorio
+   */
+  static random(): string {
+    return PHOTOS[Math.floor(Math.random()*PHOTOS.length)];
+  }
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,11 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+import { Router } from "@solidjs/router";
+import 'leaflet/dist/leaflet.css';
+import './styles/loader.css';
+import './styles/bulma.scss';
+import routes from './routes';
+
+const root = document.getElementById('root')
+
+render(() => <Router>{routes}</Router>, root!)
--- a/src/interfaces/ApiResponse.ts
+++ b/src/interfaces/ApiResponse.ts
@ -0,0 +1,16 @@
+/**
+ * Respuesta de Oracle DB
+ */
+export default interface ApiResponse<T> {
+  items: T[];
+  hasMore: boolean;
+  limit: number;
+  offset: number;
+  count: number;
+  links: Link[];
+}
+
+export interface Link {
+  rel: string;
+  href: string;
+}
--- a/src/interfaces/Embalse.ts
+++ b/src/interfaces/Embalse.ts
@ -0,0 +1,27 @@
+/**
+ * Datos del embalse
+ */
+export default interface Embalse {
+  id: number
+  ambito_nombre: string
+  embalse_nombre: string
+  agua_actual: number
+  agua_total: number
+  electrico_flag: number
+  codigo: number
+  nombre: string
+  embalse: string
+  x: string
+  y: string
+  demarc: string
+  cauce: string
+  google: string | null
+  openstreetmap: string | null
+  wikidata: string | null
+  provincia: string
+  ccaa: string
+  tipo: string
+  cota_coron: string
+  alt_cimien: string
+  informe: string
+}
--- a/src/interfaces/OWMResponse.ts
+++ b/src/interfaces/OWMResponse.ts
@ -0,0 +1,71 @@
+/**
+ * Respuesta de la API OpenWeatherMap
+ */
+export default interface OWMResponse {
+  cod: string
+  message: number
+  cnt: number
+  list: Weather[]
+  city: City
+}
+
+export interface Weather {
+  dt: number
+  main: Main
+  weather: Weather[]
+  clouds: Clouds
+  wind: Wind
+  visibility: number
+  pop: number
+  sys: Sys
+  dt_txt: string
+}
+
+export interface Main {
+  temp: number
+  feels_like: number
+  temp_min: number
+  temp_max: number
+  pressure: number
+  sea_level: number
+  grnd_level: number
+  humidity: number
+  temp_kf: number
+}
+
+export interface Weather {
+  id: number
+  main: Main
+  description: string
+  icon: string
+}
+
+export interface Clouds {
+  all: number
+}
+
+export interface Wind {
+  speed: number
+  deg: number
+  gust: number
+}
+
+export interface Sys {
+  pod: string
+}
+
+export interface City {
+  id: number
+  name: string
+  coord: Coord
+  country: string
+  population: number
+  timezone: number
+  sunrise: number
+  sunset: number
+}
+
+export interface Coord {
+  lat: number
+  lon: number
+}
--- a/src/partials/Card.tsx
+++ b/src/partials/Card.tsx
@ -0,0 +1,31 @@
+import { JSX } from "solid-js";
+
+interface Props {
+  title: string;
+  icon: JSX.Element;
+  children: JSX.Element;
+}
+
+function Card(props: Props) {
+  return (
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title">
+          <span class="icon-text">
+            <span class="icon">
+              {props.icon}
+            </span>
+            <span>{props.title}</span>
+          </span>
+        </p>
+      </header>
+      <div class="card-content">
+        <div class="content">
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Card;
--- a/src/partials/Loader.tsx
+++ b/src/partials/Loader.tsx
@ -0,0 +1,7 @@
+function Loader() {
+  return (
+    <span class="loader"></span>
+  )
+}
+
+export default Loader;
--- a/src/partials/Navbar.tsx
+++ b/src/partials/Navbar.tsx
@ -0,0 +1,29 @@
+import { A } from "@solidjs/router"
+
+/**
+ * Navegador horizontal, usado en todas las views
+ */
+function Navbar() {
+  return (
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+      <div class="navbar-brand">
+        <A class="navbar-item" href="/">CyberBokeron</A>
+
+        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+
+      <div class="navbar-menu">
+        <div class="navbar-start">
+          {/* TODO: Agregar enlaces */}
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar
--- a/src/routes.ts
+++ b/src/routes.ts
@ -0,0 +1,26 @@
+import { RouteDefinition } from "@solidjs/router";
+import Home from "./views/Home";
+import Finder from "./views/Finder";
+import Viewer from "./views/Viewer";
+import Embalse from "./views/Embalse";
+
+const routes: RouteDefinition[] = [
+  {
+    path: '/',
+    component: Home
+  },
+  {
+    path: '/embalses',
+    component: Viewer
+  },
+  {
+    path: '/embalses/nearby',
+    component: Finder
+  },
+  {
+    path: '/embalses/:id',
+    component: Embalse
+  }
+];
+
+export default routes;
--- a/src/styles/bulma.scss
+++ b/src/styles/bulma.scss
@ -0,0 +1,5 @@
+@charset 'utf8';
+
+// TODO: MODULAR
+
+@forward 'bulma/sass';
--- a/src/styles/loader.css
+++ b/src/styles/loader.css
@ -0,0 +1,22 @@
+/** Spinner */
+
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #FFF;
+  border-bottom-color: #FF3D00;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/src/views/Embalse.tsx
+++ b/src/views/Embalse.tsx
@ -0,0 +1,96 @@
+import { createSignal, onMount, Show } from "solid-js";
+import { Params, useParams } from "@solidjs/router";
+import EmbalseType from "../interfaces/Embalse";
+import Navbar from "../partials/Navbar";
+import Loader from "../partials/Loader";
+import Api from "../helpers/Api";
+import Card from "../partials/Card";
+import { FaSolidCircleInfo, FaSolidLocationDot, FaSolidMapLocationDot, FaSolidWater } from "solid-icons/fa";
+import OpenWeather from "../helpers/OpenWeather";
+
+interface CustomParams extends Params {
+  id: string;
+}
+
+function Embalse() {
+  const params = useParams<CustomParams>();
+  const [embalse, setEmbalse] = createSignal<EmbalseType>();
+  const [prediction, setPrediction] = createSignal('');
+
+  onMount(() => {
+    getEmbalse().then(async () => {
+      setPrediction(await OpenWeather.week(embalse()!.x, embalse()!.y));
+    });
+  });
+
+  const getEmbalse = async () => {
+    const res = await Api.embalseById(params.id);
+
+    setEmbalse(res[0]);
+  }
+
+  const getPercentage = () => {
+    const perc = Math.round(embalse()!.agua_actual / embalse()!.agua_total * 100);
+    return (
+      <span classList={{
+        'has-text-danger': perc <= 50,
+        'has-text-warning': perc > 50 && perc < 70,
+        'has-text-success': perc >= 70
+      }}>{perc}%</span>
+    )
+  }
+
+  return (
+    <>
+      <Navbar />
+      <Show when={embalse() !== undefined} fallback={<Loader />}>
+        <section class="hero is-fullheight">
+          <div class="hero-body">
+            <div class="container has-text-centered">
+              <div class="columns is-centered">
+                <div class="column is-half">
+                  <p class="title">{embalse()!.nombre}</p>
+                  <p class="subtitle">
+                    <span class="icon-text">
+                      <span class="icon">
+                        <FaSolidMapLocationDot />
+                      </span>
+                      <span>{embalse()!.provincia}, {embalse()!.ccaa}</span>
+                    </span>
+                  </p>
+                  <div class="columns is-centered is-vcentered is-multiline">
+                    <div class="column is-narrow">
+                      {/* Ubicación */}
+                      <Card title="Ubicación" icon={<FaSolidLocationDot />}>
+                        <>
+                          <p><b>Latitud</b>: {embalse()!.x}</p>
+                          <p><b>Longitud</b>: {embalse()!.y}</p>
+                        </>
+                      </Card>
+                    </div>
+                    <div class="column is-narrow">
+                      <Card title="Caudal" icon={<FaSolidWater />}>
+                        <>
+                          <p><b>Actual</b>: {embalse()!.agua_actual} l/m2</p>
+                          <p><b>Total</b>: {embalse()!.agua_total} l/m2</p>
+                          <p><b>Porcentaje</b>: {getPercentage()}</p>
+                        </>
+                      </Card>
+                    </div>
+                    <div class="column is-narrow">
+                      <Card title="Predicción" icon={<FaSolidCircleInfo />}>
+                        <p>{prediction()}</p>
+                      </Card>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </Show>
+    </>
+  )
+}
+
+export default Embalse;
--- a/src/views/Finder.tsx
+++ b/src/views/Finder.tsx
@ -0,0 +1,162 @@
+import { createSignal, onCleanup, onMount } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+import L from 'leaflet';
+import { FaSolidLocationPin } from "solid-icons/fa";
+import Navbar from "../partials/Navbar";
+import Api from "../helpers/Api";
+
+function Finder() {
+  const navigate = useNavigate();
+  const [pos, setPos] = createSignal<[number, number]>([0, 0]);
+  const [geo, setGeo] = createSignal(true);
+
+  let markers: L.Marker[] = [];
+
+  let first = true;
+  let watchId: number = -1;
+  let map: L.Map;
+
+  let me = L.marker([0, 0]);
+
+  /**
+   * Montar Leafmap
+   */
+  onMount(() => {
+    map = L.map('map');
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+
+    if (geo()) {
+      listenGeolocation();
+    }
+  });
+
+  /**
+   * Limpiar watch de geolocalización si
+   * está activo
+   */
+  onCleanup(() => {
+    if (watchId !== -1) {
+      navigator.geolocation.clearWatch(watchId);
+    }
+  });
+
+  /**
+   * Activar / Desactivar uso de Geolocalización
+   */
+  const toggleGeo = () => {
+    if (geo()) {
+      navigator.geolocation.clearWatch(watchId);
+      watchId = -1;
+    } else {
+      listenGeolocation();
+    }
+
+    setGeo(!geo());
+  }
+
+  /**
+   * Activar listener de geolocalización en tiempo real
+   */
+  const listenGeolocation = () => {
+    watchId = navigator.geolocation.watchPosition(
+      (pos) => {
+        setPos([pos.coords.latitude, pos.coords.longitude]);
+        handleLocation();
+      },
+      (err) => {
+        alert(err.message);
+      }
+    )
+  }
+
+  /**
+   * Escribe los puntos relevantes
+   * (Mi ubicación y los embalses cercanos)
+   */
+  const handleLocation = async () => {
+    me.setLatLng(pos());
+    if (first) {
+      map.setView(pos(), 9);
+      me.addTo(map);
+      first = false;
+    }
+
+    // Cleanup
+    if (markers.length > 0) {
+      markers.forEach((m) => {
+        map.removeLayer(m);
+      })
+
+      markers = [];
+    }
+
+    const res = await Api.embalsesNearby(pos()[0].toString(), pos()[1].toString());
+
+    res.forEach((c) => {
+      L.marker([parseFloat(c.x), parseFloat(c.y)]).on("click", () => navigate('/embalses/' + c.id)).addTo(map);
+    })
+  }
+
+  /**
+   * Escribe la latitud de la tupla manualmente
+   * @param val Latitud dada por el input
+   */
+  const setLatitudeManual = (val: string) => {
+    const lat = parseFloat(val);
+
+    setPos([lat, pos()[1]]);
+  }
+
+  /**
+   * Escribe la longitud de la tupla manualmente
+   * @param val longitud dada por el input
+   */
+  const setLongitudeManual = (val: string) => {
+    const lon = parseFloat(val);
+
+    setPos([pos()[0], lon]);
+  }
+
+  return (
+    <>
+      <Navbar />
+      <section class="section">
+        <div class="container">
+          <div class="columns is-centered is-vcentered is-multiline">
+            <div class="column is-narrow">
+              <div class="field has-addons has-addons-centered">
+                <div class="control">
+                  <input class="input" on:change={(e) => setLatitudeManual(e.target.value)} type="text" disabled={geo()} placeholder="Latitud" value={pos()[0]} />
+                </div>
+                <div class="control">
+                  <input class="input" on:change={(e) => setLongitudeManual(e.target.value)} type="text" disabled={geo()} placeholder="Longitud" value={pos()[1]} />
+                </div>
+                <div class="control">
+                  <button disabled={geo()} on:click={() => handleLocation()} class="button is-info">
+                    Aplicar
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="column is-narrow">
+              <button on:click={() => toggleGeo()} class="button" classList={{ 'is-success': geo(), 'is-danger': !geo() }}>
+                <span class="icon">
+                  <FaSolidLocationPin />
+                </span>
+                <span>Geolocalización</span>
+              </button>
+            </div>
+          </div>
+          <div id="map" style={{
+            height: '70vh'
+          }}></div>
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Finder;
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@ -0,0 +1,45 @@
+import { FaSolidGlassWaterDroplet } from "solid-icons/fa"
+import Photo from "../helpers/Photo"
+import { A } from "@solidjs/router";
+
+function Home() {
+  const photo = Photo.random();
+
+  return (
+    <>
+      <section class="hero is-fullheight" style={{
+        "background-image": `url('${photo}')`,
+        "background-position": 'center center',
+        "background-size": 'cover',
+      }}>
+        <div class="hero-body">
+          <div class="container has-text-centered">
+            <div class="columns is-centered">
+              <div class="column is-half">
+                <div class="box">
+                  <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>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="section">
+        <p>TODO: Agregar tarjetitas guapas</p>
+      </section>
+    </>
+  )
+}
+
+export default Home
--- a/src/views/Viewer.tsx
+++ b/src/views/Viewer.tsx
@ -0,0 +1,44 @@
+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[] = [];
+
+  onMount(() => {
+    map = L.map('map');
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+
+    getEmbalses();
+  });
+
+  const getEmbalses = async () => {
+    embalses = await Api.embalses();
+
+    embalses.forEach(c => {
+      L.marker([parseFloat(c.x), parseFloat(c.y)]).on('click', () => navigate('/embalses/' + c.id)).addTo(map);
+    });
+  }
+
+  return (
+    <>
+      <Navbar />
+      <div class="container has-text-centered">
+        <div id="map" style={{
+          height: '70vh'
+        }}></div>
+      </div>
+    </>
+  );
+}
+
+export default Viewer;
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    solid(),
+    VitePWA({ registerType: 'autoUpdate' })
+  ],
+})
Author	SHA1	Message	Date
Pablo Ferreiro	b15207d18d	final fix	2024-10-17 20:29:22 +02:00
Pablo Ferreiro	7468d74b92	hotfix	2024-10-17 20:26:00 +02:00
Pablo Ferreiro	d6fe70b38e	hotfix	2024-10-17 20:23:49 +02:00
Pablo Ferreiro	5405e93d27	Comentarios	2024-10-17 20:23:10 +02:00
Amin Chaloukh	b24b59f619	Merge Embalse	2024-10-17 20:19:50 +02:00
Amin Chaloukh	a551d70bd4	Dockerfile arreglao	2024-10-17 20:18:21 +02:00
Pablo Ferreiro	266d1605d4	conectado nearby	2024-10-17 20:14:05 +02:00
Josetronco	51fdd88378	README actualizado	2024-10-17 19:35:20 +02:00
Josetronco	19e99207d3	Readme actualizado	2024-10-17 19:33:24 +02:00
Pablo Ferreiro	6ca280469d	embalse individual	2024-10-17 19:30:18 +02:00
Pablo Ferreiro	1e6c9c7fb2	embalses all	2024-10-17 18:31:42 +02:00
Pablo Ferreiro	b07af64247	basic ui	2024-10-17 17:51:31 +02:00
Pablo Ferreiro	574b8f4240	home básico	2024-10-17 15:22:54 +02:00
Josetronco	6350a69b69	Dockerfile actualizado	2024-10-17 13:02:43 +02:00
Josetronco	fb79062394	Actualizar README.md	2024-10-17 12:38:34 +02:00
Pablo Ferreiro	c8790a0614	initial vite	2024-10-17 12:32:06 +02:00
Josetronco	000565d75d	Actualizar README.md	2024-10-17 12:02:14 +02:00
Josetronco	f96759cebf	Actualizar README.md	2024-10-17 12:00:59 +02:00
Josetronco	682a3ab40b	Actualizar README.md	2024-10-17 12:00:41 +02:00
Josetronco	4ed1223033	Actualizar README.md	2024-10-17 12:00:20 +02:00
Josetronco	10bd9a3e21	Actualizar README.md	2024-10-17 11:59:44 +02:00
Josetronco	7ede550714	Actualizar README.md	2024-10-17 11:57:43 +02:00
Amin Chaloukh	63a73571cf	El dockfile para el frontend	2024-10-17 11:53:39 +02:00
Amin Chaloukh	bc3429171b	El Dockerfile para el fronted	2024-10-17 11:52:23 +02:00
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>