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>