forked from MapComplete/MapComplete
49 lines
1.9 KiB
Svelte
49 lines
1.9 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection";
|
||
|
|
import { UIEventSource } from "../../Logic/UIEventSource";
|
||
|
|
import { PencilAltIcon, UserCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
|
||
|
|
import { onDestroy } from "svelte";
|
||
|
|
import Showdown from "showdown";
|
||
|
|
import FromHtml from "../Base/FromHtml.svelte";
|
||
|
|
import Tr from "../Base/Tr.svelte";
|
||
|
|
import Translations from "../i18n/Translations.js";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This panel shows information about the logged-in user, showing account name, profile pick, description and an edit-button
|
||
|
|
*/
|
||
|
|
export let osmConnection: OsmConnection;
|
||
|
|
let userdetails: UIEventSource<UserDetails> = osmConnection.userDetails;
|
||
|
|
let description: string;
|
||
|
|
onDestroy(userdetails.addCallbackAndRunD(userdetails => {
|
||
|
|
description = new Showdown.Converter()
|
||
|
|
.makeHtml(userdetails.description)
|
||
|
|
?.replace(/>/g, ">")
|
||
|
|
?.replace(/</g, "<");
|
||
|
|
|
||
|
|
}));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="flex border border-gray-300 border-dashed m-1 p-1 rounded-md link-underline">
|
||
|
|
{#if $userdetails.img}
|
||
|
|
<img src={$userdetails.img} class="rounded-full w-12 h-12 m-4">
|
||
|
|
{:else}
|
||
|
|
<UserCircleIcon class="w-12 h-12" />
|
||
|
|
{/if}
|
||
|
|
<div class="flex flex-col relative">
|
||
|
|
<h3>{$userdetails.name}</h3>
|
||
|
|
{#if description}
|
||
|
|
<FromHtml src={description} />
|
||
|
|
<a href={osmConnection.Backend() + "/profile/edit"} target="_blank">
|
||
|
|
<PencilAltIcon class="p-2 w-6 h-6 subtle-background rounded-full absolute right-1 bottom-1" />
|
||
|
|
</a>
|
||
|
|
{:else}
|
||
|
|
<Tr t={Translations.t. userinfo.noDescription} />
|
||
|
|
<a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex subtle-background items-center">
|
||
|
|
<PencilAltIcon slot="image" class="p-2 w-8 h-8" />
|
||
|
|
<Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} />
|
||
|
|
</a>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|