working on vcard destructuring

frontend/src/routes/contact/Address.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { addr } from '../../vcard.js';
+
+    let { vcard } = $props();
+
+    let address = $derived(addr(vcard));
+</script>
+
+<div class="address">
+{#if address.box}
+<span class="post_box">{address.box}</span>
+{/if}
+{#if address.ext}
+<span class="extended">{address.ext}</span>
+{/if}
+{#if address.street}
+<span class="street">{address.street}</span>
+{/if}
+{#if address.code}
+<span class="code">{address.code}</span>
+{/if}
+{#if address.loc}
+<span class="locality">{address.loc}</span>
+{/if}
+{#if address.region}
+<span class="region">{address.region}</span>
+{/if}
+{#if address.country}
+<span class="country">{address.country}</span>
+{/if}
+</div>

frontend/src/routes/contact/Card.svelte

@@ -1,4 +1,5 @@
 <script>
+    import Address from './Address.svelte';
     import FN from './FN.svelte';
     import Name from './Name.svelte';
     import Org from './Org.svelte';
@@ -7,9 +8,10 @@
 </script>
 
 <div>
-    <Org vcard={contact.vcard} /><br/>
-    <FN vcard={contact.vcard} /><br/>
+    <FN vcard={contact.vcard} />
+    <Org vcard={contact.vcard} />
     <Name vcard={contact.vcard} />
+    <Address vcard={contact.vcard} />
     <hr/>
     <pre>{contact.vcard}</pre>
 </div>

frontend/src/routes/contact/Name.svelte

@@ -6,18 +6,20 @@
     let n = $derived(name(vcard));
 </script>
 
+<div class="name">
 {#if n.prefix}
-<span class="name prefix">{n.prefix}</span>
+<span class="prefix">{n.prefix}</span>
 {/if}
 {#if n.given}
-<span class="given name">{n.given}</span>
-{/if}
-{#if n.family}
-<span class="family name">{n.family}</span>
+<span class="given">{n.given}</span>
 {/if}
 {#if n.additional}
-<span class="additional name">{n.additional}</span>
+<span class="additional">{n.additional}</span>
+{/if}
+{#if n.family}
+<span class="family">{n.family}</span>
 {/if}
 {#if n.suffix}
-<span class="name suffix">{n.suffix}</span>
+<span class="suffix">{n.suffix}</span>
 {/if}
+</div>

frontend/src/vcard.js

@@ -1,51 +1,28 @@
-export function parse(data){
-    var code = data.vcard;
-    const lines = code.split("\n");
-    let unprocessed = null;
-    var o = {};
-    for (var line of lines){
-        if (unprocessed = null) unprocessed = line;
-        if (line.startsWith(' ')) { // extend line
-            unprocessed += line.substring(1);
-        } else {
-            // process complete line
-            const parts = line.split(':');
-            var prefix = parts[0];
-            var val = parts.slice(1).join(':');
-            var key = prefix.split(';')[0].toUpperCase();
-            switch (key) {
-                case "ADR": o[key] = parseAdr(prefix,val); break;
-                default:
-                    if (key) o[prefix]=val;
-            }
-            unprocessed = line;
-        }
+export function addr(vcard){
+    const match = vcard.match(/^ADR:(.+)$/m);
+    let adr = {
+        box: null,
+        ext: null,
+        street: null,
+        locality: null,
+        region: null,
+        code: null,
+        country: null
     }
-    console.log(o);
-}
-
-function parseAdr(key,val){
-    var parts = val.split(';');
-    var adr = {
-        postbox : parts[0],
-        ext : parts[1],
-        street : parts[2],
-        locality : parts[3],
-        region : parts[4],
-        code : parts[5],
-        country : parts[6]
-    }
-    parts = key.split(';');
-    for (let part of parts){
-        let inner = part.split('=');
-        if (inner.length<2) continue;
-        const k = inner[0];
-        const v = inner.slice(1).join('=');
-        adr[k] = v;
+    if (match){
+        const parts = match[1].trim().split(';');
+        adr.box = parts[0];
+        adr.ext = parts[1];
+        adr.street = parts[2];
+        adr.loc = parts[3];
+        adr.region = parts[4];
+        adr.code = parts[5];
+        adr.country = parts[6];
     }
     return adr;
 }
 
+
 export function fn(vcard){
     const match = vcard.match(/^FN:(.+)$/m);
     return match ? match[1].trim() : '';