Add url generator and phone work and fix names IOS

jgonzales20 · Sep 12, 2023 · 205959e · 205959e
1 parent 0cdc84a
commit 205959e
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 16 deletions.
diff --git a/docs/assets/index-026519a5.js b/docs/assets/index-026519a5.js
diff --git a/docs/assets/index-508dc44f.js b/docs/assets/index-508dc44f.js
diff --git a/docs/assets/index-aebfe953.css → docs/assets/index-82898e49.css b/docs/assets/index-aebfe953.css → docs/assets/index-82898e49.css
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vcard-generator-qr/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
-    <script type="module" crossorigin src="/vcard-generator-qr/assets/index-508dc44f.js"></script>
-    <link rel="stylesheet" href="/vcard-generator-qr/assets/index-aebfe953.css">
+    <script type="module" crossorigin src="/vcard-generator-qr/assets/index-026519a5.js"></script>
+    <link rel="stylesheet" href="/vcard-generator-qr/assets/index-82898e49.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -23,11 +23,14 @@ import { ref, watchEffect } from 'vue'
 
 const fullname = ref('');
 const phone = ref('');
+const phoneWork = ref('');
 const email = ref('');
 const website = ref('');
 const company = ref('');
 const job = ref('');
 const qrcode = ref('');
+const url = ref('');
+const qrcodeUrl = ref('');
 
 function downloadSVG() {
   const svg = renderSVG(qrcode.value);
@@ -41,19 +44,45 @@ function downloadSVG() {
         document.body.removeChild(downloadLink);
 }
 
+function downloadSVGUrl() {
+  const svg = renderSVG(qrcodeUrl.value);
+  const svgBlob = new Blob([svg], {type:"image/svg+xml;charset=utf-8"});
+        const svgUrl = URL.createObjectURL(svgBlob);
+        const downloadLink = document.createElement("a");
+        downloadLink.href = svgUrl;
+        downloadLink.download = 'url-qr';
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+}
+
 watchEffect(() => {
   const fields = [];
   if(fullname.value !== "") {
     const cardFullname = new FNProperty([], new TextType(fullname.value));
+    const nArr =  new Array(5);
+    const names = fullname.value.split(" ").reverse();
+    names.forEach((name, index) => {
+      nArr[index] = new TextType(name);
+    });
+    const cardName =  new NProperty([], new SpecialValueType(nArr, "NProperty"));
     fields.push(cardFullname);
+    fields.push(cardName);
   } 
 
   if(phone.value !== "") {
     //const cardPhone = new TelProperty([], new URIType(`tel:${phone.value}`));
-    const cardPhone = new TelProperty([], new TextType(`${phone.value}`));
+    const cardPhone = new TelProperty([new TypeParameter(new TextType("home"), "TelProperty")], new TextType(`${phone.value}`));
     fields.push(cardPhone);
   }
 
+  if(phoneWork.value !== "") {
+    //const cardPhone = new TelProperty([], new URIType(`tel:${phone.value}`));
+    const cardPhoneWork = new TelProperty([new TypeParameter(new TextType("work"), "TelProperty")], new TextType(`${phoneWork.value}`));
+    fields.push(cardPhoneWork);
+  }
+
+
   if(email.value !== "") {
     const cardEmail = new EmailProperty([], new TextType(email.value));
     fields.push(cardEmail);
@@ -80,26 +109,35 @@ watchEffect(() => {
     if(fullname.value === '') {
       const cardFullname = new FNProperty([], new TextType(" "));
       fields.push(cardFullname);
+      const nArr = new Array(5);
+      nArr[0] = new TextType(" ");
+      const cardName =  new NProperty([], new SpecialValueType(nArr, "NProperty"));
+      fields.push(cardName);
     }
     const card = new VCARD(fields);
     qrcode.value = card.repr();
   } else {
     qrcode.value = '';
   }
   
-  
+  if(url.value !== "") {
+    qrcodeUrl.value = url.value;
+  } else {
+    qrcodeUrl.value = '';
+  }
 }) 
 </script>
 
 <template>
   <h1>Vcard generator</h1>
-  <!--{{  qrcode }}<br>-->
+  <!--<pre>{{  qrcode }}</pre><br>-->
   <div class="form">
     <input v-model="fullname" placeholder="Fullname">
-    <input v-model="phone" placeholder="Phone: ex: +34 600 600 600">
+    <input v-model="phone" placeholder="Home Phone: ex: +34 600 600 600">
+    <input v-model="phoneWork" placeholder="Work Phone: ex: +34 600 600 600">
     <input v-model="email" type="email" placeholder="E-mail">
     <input v-model="website" placeholder="Websit: ex: https://google.es">
-    <input v-model="company" placeholder="company Name">
+    <input v-model="company" placeholder="Company Name">
     <input v-model="job" placeholder="Job Title">
   </div>
   <QRCodeVue3 :value="qrcode" 
@@ -122,6 +160,35 @@ watchEffect(() => {
   :downloadOptions="{ name: 'vcard-qr', extension: 'png' }"
   />
   <button class="download" @click="downloadSVG" v-if="qrcode !== ''">Download SVG</button>
+
+  <br>
+  <hr>
+  <br>
+
+  <h1>URL Generator</h1>
+  <input v-model="url" placeholder="https://google.es">
+  <QRCodeVue3 :value="qrcodeUrl" 
+  :width="200"
+  :height="200"
+  :margin="0"
+  :key="qrcodeUrl"
+  :qr-options="{
+          errorCorrectionLevel: 'H'
+        }"
+  :dotsOptions="{
+            type: 'square',
+            color: '#000000',
+          }"
+  :cornersSquareOptions="{ type: 'square', color: '#000000' }"
+  :cornersDotOptions="{ type: undefined, color: '#000000' }"
+  fileExt="png"
+  :download="true"
+  downloadButton="download"
+  :downloadOptions="{ name: 'url-qr', extension: 'png' }"
+  />
+  <button class="download" @click="downloadSVGUrl" v-if="qrcodeUrl !== ''">Download SVG</button>
+  <br>
+  <br>
 </template>
 
 <style scoped>