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">
<head>
<meta charset="UTF-8">
@ -9,9 +9,25 @@
<body>
<h1>VCard Viewer</h1>
<input type="file" id="vcardFile" accept=".vcf">
<div id="vcardContent">
<!-- VCard content will be displayed here -->
</div>
<h2>Contact Details</h2>
<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>
</body>
</html>

80
script.js
View File

@ -3,12 +3,82 @@ document.getElementById('vcardFile').addEventListener('change', function(event)
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
const vcardContentDiv = document.getElementById('vcardContent');
// For now, just display the raw content.
// We can implement more sophisticated parsing later.
vcardContentDiv.textContent = content;
const rawContent = e.target.result;
const contacts = parseVCard(rawContent);
displayContactsInTable(contacts);
// For debugging, also show raw content
// const vcardContentDiv = document.getElementById('vcardRawContent');
// vcardContentDiv.textContent = rawContent;
};
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;
}
#vcardContent {
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
min-height: 100px;
white-space: pre-wrap; /* Preserve line breaks and spaces */
word-wrap: break-word; /* Break long lines */
/* #vcardRawContent {
background-color: #eee;
border: 1px solid #ccc;
padding: 10px;
margin-top: 20px;
min-height: 50px;
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;
}