From b07af64247ed24a237ce0b08bfd976c2d3ede3ff Mon Sep 17 00:00:00 2001 From: Pablo Ferreiro Date: Thu, 17 Oct 2024 17:51:31 +0200 Subject: [PATCH] basic ui --- package-lock.json | 25 +++++ package.json | 2 + src/constants/Photos.ts | 6 ++ src/constants/Videos.ts | 6 -- src/helpers/Api.ts | 0 src/helpers/{Video.ts => Photo.ts} | 6 +- src/index.tsx | 1 + src/interfaces/Embalse.ts | 27 +++++ src/routes.ts | 5 + src/views/Finder.tsx | 155 +++++++++++++++++++++++++++++ src/views/Home.tsx | 16 ++- 11 files changed, 237 insertions(+), 12 deletions(-) create mode 100644 src/constants/Photos.ts delete mode 100644 src/constants/Videos.ts create mode 100644 src/helpers/Api.ts rename src/helpers/{Video.ts => Photo.ts} (62%) create mode 100644 src/interfaces/Embalse.ts create mode 100644 src/views/Finder.tsx diff --git a/package-lock.json b/package-lock.json index c1d692c..79a395d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,10 +10,12 @@ "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", @@ -1826,6 +1828,23 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/geojson": { + "version": "7946.0.14", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz", + "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/leaflet": { + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz", + "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "dev": true, @@ -3250,6 +3269,12 @@ "node": ">=0.10.0" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", + "license": "BSD-2-Clause" + }, "node_modules/leven": { "version": "3.1.0", "dev": true, diff --git a/package.json b/package.json index ce810a9..13bfd1b 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "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", diff --git a/src/constants/Photos.ts b/src/constants/Photos.ts new file mode 100644 index 0000000..9bf6779 --- /dev/null +++ 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; diff --git a/src/constants/Videos.ts b/src/constants/Videos.ts deleted file mode 100644 index 3c4011f..0000000 --- a/src/constants/Videos.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** Lista de videos (CC) */ -const VIDEOS: string[] = [ - "https://www.pexels.com/es-es/download/video/13831212/?fps=60.0&h=720&w=1280" -]; - -export default VIDEOS; diff --git a/src/helpers/Api.ts b/src/helpers/Api.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/helpers/Video.ts b/src/helpers/Photo.ts similarity index 62% rename from src/helpers/Video.ts rename to src/helpers/Photo.ts index d0c32b3..4cc796d 100644 --- a/src/helpers/Video.ts +++ b/src/helpers/Photo.ts @@ -1,15 +1,15 @@ -import VIDEOS from "../constants/Videos"; +import PHOTOS from "../constants/Photos"; /** * Clase helper para gestionar los vídeos de fondo * encontrados en views/Home */ -export default class Video { +export default class Photo { /** * Elige un vídeo aleatoriamente de la lista * @returns Vídeo aleatorio */ static random(): string { - return VIDEOS[Math.floor(Math.random()*VIDEOS.length)]; + return PHOTOS[Math.floor(Math.random()*PHOTOS.length)]; } } diff --git a/src/index.tsx b/src/index.tsx index 2732ca4..480e25b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ /* @refresh reload */ import { render } from 'solid-js/web'; import { Router } from "@solidjs/router"; +import 'leaflet/dist/leaflet.css'; import './styles/bulma.scss'; import routes from './routes'; diff --git a/src/interfaces/Embalse.ts b/src/interfaces/Embalse.ts new file mode 100644 index 0000000..b89bfbc --- /dev/null +++ b/src/interfaces/Embalse.ts @@ -0,0 +1,27 @@ +export default interface Embalse { + // EMBALSES + ID: number; + AMBITO_NOMBRE: string; + EMBALSE_NOMBRE: string; + AGUA_TOTAL: number; + ELECTRICO_FLAG: boolean; + // LISTADO_EMBALSES + CODIGO: number; + NOMBRE: string; + EMBALSE: string; + X: string; + Y: string; + DEMARC: string; + CAUCE: string; + GOOGLE: string; + OPENSTREETMAP: string; + WIKIDATA: string; + PROVINCIA: string; + CCAA: string; + TIPO: string; + TITULAR: string; + USO: string; + COTA_CORON: string; + ALT_CIMIEN: string; + INFORME: string; +} diff --git a/src/routes.ts b/src/routes.ts index 832c85e..0232f85 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -1,10 +1,15 @@ import { RouteDefinition } from "@solidjs/router"; import Home from "./views/Home"; +import Finder from "./views/Finder"; const routes: RouteDefinition[] = [ { path: '/', component: Home + }, + { + path: '/finder', + component: Finder } ]; diff --git a/src/views/Finder.tsx b/src/views/Finder.tsx new file mode 100644 index 0000000..e717687 --- /dev/null +++ b/src/views/Finder.tsx @@ -0,0 +1,155 @@ +import { createSignal, onCleanup, onMount } from "solid-js"; +import L from 'leaflet'; +import { FaSolidLocationPin } from "solid-icons/fa"; +import Navbar from "../partials/Navbar"; + +function Finder() { + 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: '© OpenStreetMap' + }).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 = () => { + 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 = []; + } + + // TODO: Hacer petición y sacar markers + } + + /** + * 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 ( + <> + +
+
+
+
+
+
+ setLatitudeManual(e.target.value)} type="text" disabled={geo()} placeholder="Latitud" value={pos()[0]} /> +
+
+ setLongitudeManual(e.target.value)} type="text" disabled={geo()} placeholder="Longitud" value={pos()[1]} /> +
+
+ +
+
+
+
+ +
+
+
+
+
+ + ) +} + +export default Finder; diff --git a/src/views/Home.tsx b/src/views/Home.tsx index bd74498..06b5efd 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,11 +1,19 @@ import { FaSolidGlassWaterDroplet } from "solid-icons/fa" import Navbar from "../partials/Navbar" +import { createSignal } from "solid-js" +import Photo from "../helpers/Photo" +import { A } from "@solidjs/router"; function Home() { + const [photo, setPhoto] = createSignal(Photo.random()); + return ( <> - -
+
@@ -14,6 +22,7 @@ function Home() {
+ {/* TODO: Agregar icono */}
@@ -26,6 +35,7 @@ function Home() { Malackathon

+ Buscar
@@ -35,7 +45,7 @@ function Home() {
- +

TODO: Agregar tarjetitas guapas

)