GuilhermeStrice/vCard-Processor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table

Browse Source
This commit is contained in:
GuilhermeStrice
2025-06-26 02:43:33 +01:00
parent 136ee79098
commit bd15c95017
3 changed files with 124 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -1,4 +1,4 @@
!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -9,9 +9,25 @@
<body> <body>
<h1>VCard Viewer</h1> <h1>VCard Viewer</h1>
<input type="file" id="vcardFile" accept=".vcf"> <input type="file" id="vcardFile" accept=".vcf">
<div id="vcardContent">
<!-- VCard content will be displayed here --> <h2>Contact Details</h2>
</div> <table id="contactsTable">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Organization</th>
</tr>
</thead>
<tbody id="contactsTableBody">
<!-- Contact rows will be inserted here by JavaScript -->
</tbody>
</table>
<!-- <div id="vcardRawContent"> -->
<!-- VCard raw content was displayed here -->
<!-- </div> -->
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

80
script.js
View File

@ -3,12 +3,82 @@ document.getElementById('vcardFile').addEventListener('change', function(event)
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function(e) { reader.onload = function(e) {
const content = e.target.result; const rawContent = e.target.result;
const vcardContentDiv = document.getElementById('vcardContent'); const contacts = parseVCard(rawContent);
// For now, just display the raw content. displayContactsInTable(contacts);
// We can implement more sophisticated parsing later. // For debugging, also show raw content
vcardContentDiv.textContent = content; // const vcardContentDiv = document.getElementById('vcardRawContent');
// vcardContentDiv.textContent = rawContent;
}; };
reader.readAsText(file); reader.readAsText(file);
} }
}); });
function parseVCard(rawContent) {
const contacts = [];
const lines = rawContent.split(/\r\n|\r|\n/);
let currentContact = null;
lines.forEach(line => {
if (line.toUpperCase() === 'BEGIN:VCARD') {
currentContact = {};
} else if (line.toUpperCase() === 'END:VCARD') {
if (currentContact) {
contacts.push(currentContact);
currentContact = null;
}
} else if (currentContact) {
const parts = line.split(':');
if (parts.length >= 2) {
const keyPart = parts[0];
const value = parts.slice(1).join(':');
// Basic parsing for common fields
// FN (Formatted Name)
if (keyPart.startsWith('FN')) {
currentContact.fn = value;
}
// TEL (Telephone)
else if (keyPart.startsWith('TEL')) {
// Simplistic approach: take the first TEL found
if (!currentContact.tel) currentContact.tel = value;
}
// EMAIL
else if (keyPart.startsWith('EMAIL')) {
// Simplistic approach: take the first EMAIL found
if (!currentContact.email) currentContact.email = value;
}
// ORG (Organization)
else if (keyPart.startsWith('ORG')) {
currentContact.org = value;
}
}
}
});
return contacts;
}
function displayContactsInTable(contacts) {
const tableBody = document.getElementById('contactsTableBody');
if (!tableBody) {
console.error('Table body not found!');
return;
}
tableBody.innerHTML = ''; // Clear previous entries
if (contacts.length === 0) {
const row = tableBody.insertRow();
const cell = row.insertCell();
cell.colSpan = 4; // Number of columns
cell.textContent = 'No contacts found in the VCard file.';
return;
}
contacts.forEach(contact => {
const row = tableBody.insertRow();
row.insertCell().textContent = contact.fn || 'N/A';
row.insertCell().textContent = contact.tel || 'N/A';
row.insertCell().textContent = contact.email || 'N/A';
row.insertCell().textContent = contact.org || 'N/A';
});
}

36
style.css
View File

@ -13,11 +13,33 @@ input[type="file"] {
margin-bottom: 20px; margin-bottom: 20px;
} }
#vcardContent { /* #vcardRawContent {
background-color: #fff; background-color: #eee;
border: 1px solid #ddd; border: 1px solid #ccc;
padding: 15px; padding: 10px;
min-height: 100px; margin-top: 20px;
white-space: pre-wrap; /* Preserve line breaks and spaces */ min-height: 50px;
word-wrap: break-word; /* Break long lines */ white-space: pre-wrap;
word-wrap: break-word;
} */
#contactsTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
#contactsTable th, #contactsTable td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#contactsTable th {
background-color: #e9e9e9;
color: #333;
}
#contactsTable tr:nth-child(even) {
background-color: #f9f9f9;
} }