midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Experimenting with Svelte: build a wrapper to convert 'old' components into Svelte, add a community index overview

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-02-02 17:57:07 +01:00
parent dfc7ba2114
commit 02da80c311
11 changed files with 250 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

52
UI/BigComponents/CommunityIndexView.svelte
View file

@ -1,14 +1,44 @@
<script lang="ts">
import {BBox} from "../../Logic/BBox";
import {Store} from "../../Logic/UIEventSource";
import Loc from "../../Models/Loc";
import { Store, UIEventSource } from "../../Logic/UIEventSource";
import { Tiles } from "../../Models/TileRange";
import { Utils } from "../../Utils";
import global_community from "../../assets/community_index_global_resources.json";
import ContactLink from "./ContactLink.svelte";
import { GeoOperations } from "../../Logic/GeoOperations";
import Translations from "../i18n/Translations";
import ToSvelte from "../Base/ToSvelte.svelte";
import { ImmutableStore } from "../../Logic/UIEventSource.js";
export let locationControl: Store<{ lat: number, lon: number }>;
const tileToFetch: Store<string> = locationControl.mapD(l => {
const t = Tiles.embedded_tile(l.lat, l.lon, 6);
return `https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/community_index/tile_${t.z}_${t.x}_${t.y}.geojson`;
});
const t = Translations.t.communityIndex
const resources = new UIEventSource<[]>([]);
tileToFetch.addCallbackAndRun(async url => {
const data = await Utils.downloadJsonCached(url, 24 * 60 * 60);
if (data === undefined) {
return;
}
resources.setData(data.features);
}
);
const filteredResources = resources.map(features => features.filter(f => {
return GeoOperations.inside([locationControl.data.lon, locationControl.data.lat], f)
}),
[locationControl]);
export let bbox: Store<BBox>
export let currentLocation: Store<Loc>
bbox.mapD(bbox => {
if(currentLocation.data.zoom <= 6){
// only return the global data
}
return bbox.expandToTileBounds(6);
}, [currentLocation])
</script>
<div>
<ToSvelte construct={t.intro} />
{#each $filteredResources as feature}
<ContactLink country={feature.properties} />
{/each}
<ContactLink country={{resources:global_community, nameEn: "Global resources"}} />
</div>