embalses all

src/helpers/Api.ts

@@ -0,0 +1,44 @@
+import ApiResponse from "../interfaces/ApiResponse";
+import Embalse from "../interfaces/Embalse";
+import Env from "./Env";
+
+export default class Api {
+  static async embalses(): Promise<Embalse[]> {
+    return Api._makeReq('/embalses');
+  }
+
+  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;
+  }
+}

src/helpers/Env.ts

@@ -0,0 +1,5 @@
+export default class Env {
+  static api_base(): string {
+    return import.meta.env.VITE_API_BASE;
+  }
+}

src/interfaces/ApiResponse.ts

@@ -0,0 +1,13 @@
+export default interface ApiResponse<T> {
+  items: T[];
+  hasMore: boolean;
+  limit: number;
+  offset: number;
+  count: number;
+  links: Link[];
+}
+
+export interface Link {
+  rel: string;
+  href: string;
+}

src/interfaces/Embalse.ts

@@ -1,27 +1,23 @@
 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;
+  id: number
+  ambito_nombre: string
+  embalse_nombre: string
+  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
 }

src/routes.ts

@@ -1,6 +1,7 @@
 import { RouteDefinition } from "@solidjs/router";
 import Home from "./views/Home";
 import Finder from "./views/Finder";
+import Viewer from "./views/Viewer";
 
 const routes: RouteDefinition[] = [
   {
@@ -10,6 +11,10 @@ const routes: RouteDefinition[] = [
   {
     path: '/finder',
     component: Finder
+  },
+  {
+    path: '/viewer',
+    component: Viewer
   }
 ];
 

src/views/Embalse.tsx

@@ -0,0 +1,16 @@
+import { createSignal } from "solid-js";
+import EmbalseType from "../interfaces/Embalse";
+import Navbar from "../partials/Navbar";
+
+function Embalse() {
+  const [embalse, setEmbalse] = createSignal<EmbalseType | null>(null);
+
+  return (
+    <>
+      <Navbar />
+      <section class="section">
+
+      </section>
+    </>
+  )
+}

src/views/Viewer.tsx

@@ -0,0 +1,38 @@
+import { onMount } from "solid-js";
+import L from 'leaflet';
+import Embalse from "../interfaces/Embalse";
+import Api from "../helpers/Api";
+
+function Viewer() {
+  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(embalse => {
+      L.marker([parseFloat(embalse.x), parseFloat(embalse.y)]).addTo(map);
+    });
+  }
+
+  return (
+    <div class="container">
+      <div id="map" style={{
+        height: '70vh'
+      }}></div>
+    </div>
+  );
+}
+
+export default Viewer;