working on vcard display

frontend/src/routes/contact/Address.svelte

@@ -1,9 +1,9 @@
 <script>
     import { addr } from '../../vcard.js';
 
-    let { vcard } = $props();
+    let { code } = $props();
 
-    let address = $derived(addr(vcard));
+    let address = $derived(addr(code));
 </script>
 
 <div class="address">

frontend/src/routes/contact/Card.svelte

@@ -1,17 +1,34 @@
 <script>
+    import { t } from '../../translations.svelte';
+
     import Address from './Address.svelte';
+    import Email from './Email.svelte';
+    import ExtraField from './ExtraField.svelte';
     import FN from './FN.svelte';
     import Name from './Name.svelte';
     import Org from './Org.svelte';
 
     let { contact } = $props();
+
+    let addresses = $derived(contact.vcard.match(/^ADR.*:.+$/gm));
+    let emails = $derived(contact.vcard.match(/^EMAIL.*:.+$/gm));
+    let extra_fields = $derived(contact.vcard.match(/^X-.*:.+/gm));
 </script>
 
-<div>
+<fieldset>
+    <legend>{t('contact_number',{number:contact.id})}</legend>
     <FN vcard={contact.vcard} />
     <Org vcard={contact.vcard} />
     <Name vcard={contact.vcard} />
-    <Address vcard={contact.vcard} />
+    {#each addresses as code}
+    <Address {code} />
+    {/each}
+    {#each emails as code}
+    <Email {code} />
+    {/each}
+    {#each extra_fields as code}
+    <ExtraField {code} />
+    {/each}
     <hr/>
     <pre>{contact.vcard}</pre>
-</div>
+</fieldset>

frontend/src/routes/contact/Email.svelte

@@ -0,0 +1,9 @@
+<script>
+    import { email } from '../../vcard.js';
+
+    let { code } = $props();
+
+    let adr = $derived(email(code));
+</script>
+
+<span class="email">{adr}</span>

frontend/src/routes/contact/ExtraField.svelte

@@ -0,0 +1,14 @@
+<script>
+    import { extra } from '../../vcard.js';
+
+    let { code } = $props();
+
+    let field = $derived(extra(code));
+
+</script>
+
+{#if field}
+<span class={field.name}>
+    {field.value}
+</span>
+{/if}

frontend/src/routes/contact/FN.svelte

@@ -1,9 +1,12 @@
 <script>
     import { fn } from '../../vcard.js';
+    import { t }  from '../../translations.svelte';
 
     let { vcard } = $props();
 
     let name = $derived(fn(vcard));
 </script>
 
-<span class="formatted name">{name}</span>
+{#if name}
+<span class="formatted name"><span>{t('formatted name')}:&nbsp;</span>{name}</span>
+{/if}

frontend/src/routes/contact/Org.svelte

@@ -1,9 +1,12 @@
 <script>
     import { org } from '../../vcard.js';
+    import { t }   from '../../translations.svelte';
 
     let { vcard } = $props();
 
     let o = $derived(org(vcard));
 </script>
 
-<span class="organization">{o}</span>
+{#if o}
+<span class="organization"><span>{t('organization')}:&nbsp;</span>{o}</span>
+{/if}

frontend/src/vcard.js

@@ -1,5 +1,5 @@
 export function addr(vcard){
-    const match = vcard.match(/^ADR:(.+)$/m);
+    const match = vcard.match(/^ADR.*:(.+)$/m);
     let adr = {
         box: null,
         ext: null,
@@ -22,9 +22,18 @@ export function addr(vcard){
     return adr;
 }
 
+export function email(vcard){
+    const match = vcard.match(/^EMAIL.*:(.+)$/m);
+    return match ? match[1].trim() : '';
+}
+
+export function extra(code){
+    const match = code.match(/^X-(.+):(.+)/)
+    return match ? {name:match[1],value:match[2]} : null
+}
 
 export function fn(vcard){
-    const match = vcard.match(/^FN:(.+)$/m);
+    const match = vcard.match(/^FN.*:(.+)$/m);
     return match ? match[1].trim() : '';
 }
 

translations/src/main/resources/de.json

@@ -33,6 +33,7 @@
   "confirmation": "Bestätigung",
   "complete": "abschließen",
   "contact": "Kontakt",
+  "contact_number": "Kontakt #{number}",
   "contacts": "Kontakte",
   "contained_tax": "enthaltene Steuer",
   "content": "Inhalt",

translations/src/main/resources/en.json

@@ -33,6 +33,7 @@
   "confirmation": "confirmation",
   "complete": "complete",
   "contact": "contact",
+  "contact_number": "contact #{number}",
   "contacts": "contacts",
   "contained_tax": "contained tax",
   "content": "content",