embalse individual

src/helpers/Api.ts

@@ -7,6 +7,10 @@ export default class Api {
     return Api._makeReq('/embalses');
   }
 
+  static async embalseById(id: string): Promise<Embalse[]> {
+    return Api._makeReq(`/embalses/${id}`);
+  }
+
   static async _makeReq<T>(endpoint: string): Promise<T[]> {
     let hasMore = true;
 

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';
 

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

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;

src/partials/Loader.tsx

@@ -0,0 +1,7 @@
+function Loader() {
+  return (
+    <span class="loader"></span>
+  )
+}
+
+export default Loader;

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',
+    path: '/embalses/:id',
-    component: Viewer
+    component: Embalse
   }
 ];
 

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);
+  }
+}

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<EmbalseType | null>(null);
+
+  const params = useParams<CustomParams>();
+  const [embalse, setEmbalse] = createSignal<EmbalseType>();
+
+  onMount(() => {
+    getEmbalse();
+  });
+
+  const getEmbalse = async () => {
+    const res = await Api.embalseById(params.id);
+
+    setEmbalse(res[0]);
+  }
 
   return (
     <>
       <Navbar />
-      <section class="section">
+      <Show when={embalse() !== undefined} fallback={<Loader />}>
-
+        <section class="hero is-fullheight">
-      </section>
+          <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>: {embalse()!.agua_actual / embalse()!.agua_total * 100}%</p>
+                        </>
+                      </Card>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </Show>
     </>
   )
 }
+
+export default Embalse;

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 (
     <>
       <section class="hero is-fullheight" style={{
-        "background-image": `url('${photo()}')`,
+        "background-image": `url('${photo}')`,
         "background-position": 'center center',
         "background-size": 'cover',
       }}>
@@ -35,7 +33,10 @@ function Home() {
                           <span>Malackathon</span>
                         </span>
                       </p>
-                      <A class="button is-primary" href="/finder">Buscar</A>
+                      <div class="buttons">
+                        <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>