From 6ca280469d2af1f07e49e517a23013ac844d9892 Mon Sep 17 00:00:00 2001
From: Pablo Ferreiro
Date: Thu, 17 Oct 2024 19:30:18 +0200
Subject: [PATCH] embalse individual
---
src/helpers/Api.ts | 4 +++
src/index.tsx | 1 +
src/interfaces/Embalse.ts | 1 +
src/partials/Card.tsx | 31 +++++++++++++++++
src/partials/Loader.tsx | 7 ++++
src/routes.ts | 11 ++++--
src/styles/loader.css | 20 +++++++++++
src/views/Embalse.tsx | 71 ++++++++++++++++++++++++++++++++++++---
src/views/Home.tsx | 11 +++---
9 files changed, 144 insertions(+), 13 deletions(-)
create mode 100644 src/partials/Card.tsx
create mode 100644 src/styles/loader.css
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 (
+
+ );
+}
+
+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
+