embalses all

This commit is contained in:
Pablo Ferreiro 2024-10-17 18:31:42 +02:00
parent b07af64247
commit 1e6c9c7fb2
8 changed files with 142 additions and 25 deletions

View File

@ -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;
}
}

5
src/helpers/Env.ts Normal file
View File

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

View File

@ -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;
}

View File

@ -1,27 +1,23 @@
export default interface Embalse { export default interface Embalse {
// EMBALSES id: number
ID: number; ambito_nombre: string
AMBITO_NOMBRE: string; embalse_nombre: string
EMBALSE_NOMBRE: string; agua_total: number
AGUA_TOTAL: number; electrico_flag: number
ELECTRICO_FLAG: boolean; codigo: number
// LISTADO_EMBALSES nombre: string
CODIGO: number; embalse: string
NOMBRE: string; x: string
EMBALSE: string; y: string
X: string; demarc: string
Y: string; cauce: string
DEMARC: string; google: string | null
CAUCE: string; openstreetmap: string | null
GOOGLE: string; wikidata: string | null
OPENSTREETMAP: string; provincia: string
WIKIDATA: string; ccaa: string
PROVINCIA: string; tipo: string
CCAA: string; cota_coron: string
TIPO: string; alt_cimien: string
TITULAR: string; informe: string
USO: string;
COTA_CORON: string;
ALT_CIMIEN: string;
INFORME: string;
} }

0
src/partials/Loader.tsx Normal file
View File

View File

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

16
src/views/Embalse.tsx Normal file
View File

@ -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>
</>
)
}

38
src/views/Viewer.tsx Normal file
View File

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