ilja_space/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

66
UI/BigComponents/ContactLink.svelte
View file

@ -1,34 +1,46 @@
<script lang="ts">
import {Store} from "../../Logic/UIEventSource";
// A contact link indicates how a mapper can contact their local community
// The _properties_ of a community feature
export let country: Store<{ resources; nameEn: string }>
let resources : Store<{ id: string, resolved: Record<string, string> }[]> = country.map(country => {
if(country === undefined){
return []
}
return Array.from(Object.values(country?.resources ?? {}))
})
// A contact link indicates how a mapper can contact their local community
// The _properties_ of a community feature
import Locale from "../i18n/Locale.js";
import Translations from "../i18n/Translations";
import ToSvelte from "../Base/ToSvelte.svelte";
import * as native from "../../assets/language_native.json";
import { TypedTranslation } from "../i18n/Translation";
const availableTranslationTyped: TypedTranslation<{ native: string }> = Translations.t.communityIndex.available;
const availableTranslation = availableTranslationTyped.OnEveryLanguage((s, ln) => s.replace("{native}", native[ln] ?? ln));
export let country: { resources; nameEn: string };
let resources: { id: string, resolved: Record<string, string>, languageCodes: string[] }[] = []
$: resources = Array.from(Object.values(country?.resources ?? {}));
const language = Locale.language;
</script>
<div>
{#if $country?.nameEn}
<h3>{$country?.nameEn}</h3>
{/if}
{#each $resources as resource}
<div class="flex link-underline items-center">
<img
class="w-8 h-8 m-2"
src={"https://raw.githubusercontent.com/osmlab/osm-community-index/main/dist/img/" +
{#if country?.nameEn}
<h3>{country?.nameEn}</h3>
{/if}
{#each resources as resource}
<div class="flex link-underline items-center my-4">
<img
class="w-8 h-8 m-2"
src={"https://raw.githubusercontent.com/osmlab/osm-community-index/main/dist/img/" +
resource.type +
".svg"}
/>
<div class="flex flex-col">
<a href={resource.resolved.url} target="_blank" class="font-bold">
{resource.resolved.name ?? resource.resolved.url}
</a>
{resource.resolved?.description}
</div>
</div>
{/each}
/>
<div class="flex flex-col">
<a href={resource.resolved.url} target="_blank" rel="noreferrer nofollow" class="font-bold">
{resource.resolved.name ?? resource.resolved.url}
</a>
{resource.resolved?.description}
{#if (resource.languageCodes?.indexOf($language) >= 0)}
<span class="border-2 rounded-full border-lime-500 text-sm w-fit px-2">
<ToSvelte construct={() => availableTranslation.Clone()} />
</span>
{/if}
</div>
</div>
{/each}
</div>