From 21e9cd0298014214ebd4c546b5cd14638633105b Mon Sep 17 00:00:00 2001
From: Erik Andresen <erik@vontaene.de>
Date: Thu, 9 Nov 2023 21:41:23 +0100
Subject: [PATCH] contacts: Add vcard import to interface.html

---
 apps/contacts/interface.html | 53 +++++++++++++++++++++++++-----------
 apps/contacts/metadata.json  |  2 +-
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/apps/contacts/interface.html b/apps/contacts/interface.html
index 013478960..a6f525ef9 100644
--- a/apps/contacts/interface.html
+++ b/apps/contacts/interface.html
@@ -7,6 +7,10 @@
     <link rel="stylesheet" href="../../css/spectre-icons.min.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous">
     <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css">
+    <script type="module">
+      import vcf from 'https://cdn.jsdelivr.net/npm/vcf@2.1.1/+esm'
+      window.vcf = vcf;
+    </script>
 
     <style type="text/css">
         html, body { height: 100% }
@@ -36,16 +40,6 @@
             <span id="status"></span>
             <span id="routestatus"></span>
         </div>
-        <div>
-          <ul class="tab tab-block">
-            <li class="tab-item active" id="tabitem-map">
-              <a href="#">Map</a>
-            </li>
-            <li class="tab-item" id="tabitem-list">
-              <a href="#">List</a>
-            </li>
-          </ul>
-        </div>
         <div style="flex: 1">
           <div id="tab-list">
             <table class="table">
@@ -75,6 +69,17 @@
                 </div>
               </div>
             </form>
+            <div class="divider"></div>
+            <div class="form-horizontal">
+              <div class="form-group">
+                <div class="col-5 col-xs-12">
+                  <label class="form-label" for="fileinput">Add from vCard file</label>
+                </div>
+                <div class="col-7 col-xs-12">
+                  <input id="fileinput" class="form-input" type="file" onchange="readFile(this)" accept=".vcf" multiple/>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
     </div>
@@ -99,12 +104,6 @@
 
         /*** contacts ***/
 
-        function addContact(arr, lat, lon, name) {
-            arr.push({number:lat, name:name});
-            renderAllContacts();
-            dirty();
-        }
-
         function deleteContact(arr, i) {
             arr.splice(i, 1);
             renderAllContacts();
@@ -201,6 +200,28 @@
         renderContactsList();
       }
 
+      function readFile(input) {
+        for(let i=0; i<input.files.length; i++) {
+          const reader = new FileReader();
+          reader.addEventListener("load", () => {
+            const vcards = vcf.parse(reader.result);
+            vcards.forEach(vcard => {
+              const name = vcard.get('fn')?.valueOf() || vcard.get('n')?.valueOf();
+              const tels = Array.isArray(vcard.get('tel')) ? vcard.get('tel') : [vcard.get('tel')];
+              tels.forEach(tel => {
+                if (tel) {
+                  const number = tel.valueOf();
+                  contacts.push({name: name, number: number});
+		}
+              });
+            });
+            renderAllContacts();
+            dirty();
+          }, false);
+          reader.readAsText(input.files[i], "UTF-8");
+        }
+      }
+
       // ========================================================================== UPLOAD/DOWNLOAD
 
       function downloadJSONfile(fileid, callback) {
diff --git a/apps/contacts/metadata.json b/apps/contacts/metadata.json
index c466906b5..1228fd0bf 100644
--- a/apps/contacts/metadata.json
+++ b/apps/contacts/metadata.json
@@ -1,5 +1,5 @@
 { "id": "contacts",
-  "name": "contacts",
+  "name": "Contacts",
   "version":"0.01",
   "description": "Provides means of storing user contacts, viewing/editing them on device and from the App loader",
   "icon": "app.png",