SRSoftware/Umbrella
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

working on vcard display

Browse Source
This commit is contained in:
Stephan Richter
2025-10-08 08:50:37 +02:00
parent f6a8734614
commit 3df91f1b9d
4 changed files with 86 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/routes/contact/Card.svelte
View File

@@ -11,24 +11,64 @@
let { contact } = $props(); let { contact } = $props();
let addresses = $derived(contact.vcard.match(/^ADR.*:.+$/gm)); let addresses = $derived(contact.vcard.match(/^ADR.*:.+$/gm));
let code = $state(false);
let emails = $derived(contact.vcard.match(/^EMAIL.*:.+$/gm)); let emails = $derived(contact.vcard.match(/^EMAIL.*:.+$/gm));
let extra_fields = $derived(contact.vcard.match(/^X-.*:.+/gm)); let extra_fields = $derived(contact.vcard.match(/^X-.*:.+/gm));
function toggleCode(){
code = !code;
}
</script> </script>
<fieldset> <fieldset class="vcard">
<legend>{t('contact_number',{number:contact.id})}</legend> <legend>
<FN vcard={contact.vcard} /> {t('contact_number',{number:contact.id})}
<Org vcard={contact.vcard} /> <button class="symbol" onclick={toggleCode}>C</button>
<Name vcard={contact.vcard} /> </legend>
{#each addresses as code} <table>
<Address {code} /> <thead></thead>
{/each} <tbody>
{#each emails as code} <tr>
<Email {code} /> <td>
{/each} <FN vcard={contact.vcard} />
{#each extra_fields as code} </td>
<ExtraField {code} /> {#if code}
{/each} <td rowspan="6">
<hr/> <pre>{contact.vcard}</pre>
<pre>{contact.vcard}</pre> </td>
{/if}
</tr>
<tr>
<td>
<Org vcard={contact.vcard} />
</td>
</tr>
<tr>
<td>
<Name vcard={contact.vcard} />
</td>
</tr>
<tr>
<td>
{#each addresses as code}
<Address {code} />
{/each}
</td>
</tr>
<tr>
<td>
{#each emails as code}
<Email {code} />
{/each}
</td>
</tr>
<tr>
<td>
{#each extra_fields as code}
<ExtraField {code} />
{/each}
</td>
</tr>
</tbody>
</table>
</fieldset> </fieldset>

2
frontend/src/routes/contact/FN.svelte
View File

@@ -8,5 +8,5 @@
</script> </script>
{#if name} {#if name}
<span class="formatted name"><span>{t('formatted name')}:&nbsp;</span>{name}</span> <span class="formatted name">{name}</span>
{/if} {/if}

2
frontend/src/routes/contact/Org.svelte
View File

@@ -8,5 +8,5 @@
</script> </script>
{#if o} {#if o}
<span class="organization"><span>{t('organization')}:&nbsp;</span>{o}</span> <span class="organization">{o}</span>
{/if} {/if}

28
web/src/main/resources/web/css/default.css
View File

@@ -387,4 +387,32 @@ a.wikilink{
text-align: initial; text-align: initial;
padding-top: 8px; padding-top: 8px;
} }
}
fieldset.vcard{
display: inline;
margin: 10px;
padding: 0;
}
.vcard legend{
margin-left: 10px;
}
.vcard .name{
font-weight: bold;
}
.vcard .address span {
display: block;
}
.vcard table{
border-collapse: collapse;
margin: -1px;
}
.vcard td{
border-style: solid;
border-width: 1px;
vertical-align: top;
padding: 2px;
} }