diff --git a/src/helpers/Api.ts b/src/helpers/Api.ts index fe574aa..4bfec87 100644 --- a/src/helpers/Api.ts +++ b/src/helpers/Api.ts @@ -7,6 +7,10 @@ export default class Api { return Api._makeReq('/embalses'); } + static async embalseById(id: string): Promise { + return Api._makeReq(`/embalses/${id}`); + } + static async _makeReq(endpoint: string): Promise { let hasMore = true; diff --git a/src/index.tsx b/src/index.tsx index 480e25b..de9562a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,7 @@ 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'; diff --git a/src/interfaces/Embalse.ts b/src/interfaces/Embalse.ts index f741314..8612023 100644 --- a/src/interfaces/Embalse.ts +++ b/src/interfaces/Embalse.ts @@ -2,6 +2,7 @@ export default interface Embalse { id: number ambito_nombre: string embalse_nombre: string + agua_actual: number agua_total: number electrico_flag: number codigo: number diff --git a/src/partials/Card.tsx b/src/partials/Card.tsx new file mode 100644 index 0000000..6899e07 --- /dev/null +++ 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 ( +
+
+

+ + + {props.icon} + + {props.title} + +

+
+
+
+ {props.children} +
+
+
+ ); +} + +export default Card; diff --git a/src/partials/Loader.tsx b/src/partials/Loader.tsx index e69de29..b15ed39 100644 --- a/src/partials/Loader.tsx +++ b/src/partials/Loader.tsx @@ -0,0 +1,7 @@ +function Loader() { + return ( + + ) +} + +export default Loader; diff --git a/src/routes.ts b/src/routes.ts index d359203..76c7bfc 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -2,6 +2,7 @@ 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[] = [ { @@ -9,12 +10,16 @@ const routes: RouteDefinition[] = [ component: Home }, { - path: '/finder', + path: '/embalses', + component: Viewer + }, + { + path: '/embalses/nearby', component: Finder }, { - path: '/viewer', - component: Viewer + path: '/embalses/:id', + component: Embalse } ]; diff --git a/src/styles/loader.css b/src/styles/loader.css new file mode 100644 index 0000000..69525a8 --- /dev/null +++ b/src/styles/loader.css @@ -0,0 +1,20 @@ +.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); + } +} diff --git a/src/views/Embalse.tsx b/src/views/Embalse.tsx index aca0d82..a8a25d3 100644 --- a/src/views/Embalse.tsx +++ b/src/views/Embalse.tsx @@ -1,16 +1,77 @@ -import { createSignal } from "solid-js"; +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 { FaSolidLocationDot, FaSolidLocationPin, FaSolidMapLocationDot, FaSolidWater } from "solid-icons/fa"; + +interface CustomParams extends Params { + id: string; +} function Embalse() { - const [embalse, setEmbalse] = createSignal(null); + + const params = useParams(); + const [embalse, setEmbalse] = createSignal(); + + onMount(() => { + getEmbalse(); + }); + + const getEmbalse = async () => { + const res = await Api.embalseById(params.id); + + setEmbalse(res[0]); + } return ( <> -
- -
+ }> +
+
+
+
+
+

{embalse()!.nombre}

+

+ + + + + {embalse()!.provincia}, {embalse()!.ccaa} + +

+
+
+ {/* Ubicación */} + }> + <> +

Latitud: {embalse()!.x}

+

Longitud: {embalse()!.y}

+ + +
+
+ }> + <> +

Actual: {embalse()!.agua_actual} l/m2

+

Total: {embalse()!.agua_total} l/m2

+

Porcentaje: {embalse()!.agua_actual / embalse()!.agua_total * 100}%

+ + +
+
+
+
+
+
+
+ ) } + +export default Embalse; diff --git a/src/views/Home.tsx b/src/views/Home.tsx index 06b5efd..0cf2064 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,16 +1,14 @@ 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()); + const photo = Photo.random(); return ( <>
@@ -35,7 +33,10 @@ function Home() { Malackathon

- Buscar +
+ Todos los embalses + Buscar +