-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
163 lines (136 loc) · 5.22 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
/*
Author: Ajay Singh
Version: 1.0
Date: 21-09-2024
Description: JavaScript for the AEW application. Fetches project data from Google Sheets and updates the UI.
*/
// Constants
const API_URL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRT_ixy3nU4dbCgnMMyR05vP4dQePsnwZ4_UgCuP-x0XdcHVv9X87v6kYP-q2ouBk8UIaK8khj80FJ3/pub?gid=1138944004&single=true&output=csv';
const NO_RECORDS_MESSAGE = 'Nothing to revise today. Enjoy your day!';
const ERROR_MESSAGE = 'Error fetching the CSV data. Please try again later.';
// DOM Elements
const loadingScreen = document.getElementById('loading-screen');
const cardContainer = document.getElementById('card-container');
const projectCountDisplay = document.getElementById('projects-count');
const citiesCountDisplay = document.getElementById('cities-count');
const companiesCountDisplay = document.getElementById('companies-count');
const logo = document.getElementById('logo');
const headerTitle = document.getElementById('header-title');
// Variables
let totalProjects = 0;
let cities = new Set();
let companies = new Set();
// Functions
const showLoadingScreen = () => {
loadingScreen.style.display = 'flex';
};
const hideLoadingScreen = () => {
loadingScreen.style.display = 'none';
};
const updateDashboardCounts = () => {
projectCountDisplay.textContent = totalProjects;
citiesCountDisplay.textContent = cities.size;
companiesCountDisplay.textContent = companies.size;
};
const createCard = (index, company, place, customer, phone, project) => {
const card = document.createElement('div');
card.className = 'card';
const cardInner = document.createElement('div');
cardInner.className = 'card-inner';
const cardFront = document.createElement('div');
cardFront.className = 'card-face front';
cardFront.innerHTML = `
<div class="card-number">${index + 1}</div>
<div class="company-name">${company}</div>
<div class="place-name">${place}</div>
`;
const cardBack = document.createElement('div');
cardBack.className = 'card-face back';
cardBack.innerHTML = `
<div class="company-name">${company}</div>
<div class="customer-name">${customer.split(':').join('<br>')}</div>
<div class="project-description">${project}</div>
<div class="place-name">${place}</div>
${createPhoneNumbers(phone)}
`;
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);
card.addEventListener('click', () => {
card.classList.toggle('flipped');
});
return card;
};
const createPhoneNumbers = (phone) => {
const phoneNumbers = phone.match(/\d{10}/g);
if (!phoneNumbers) return '';
return `<div class="phone-numbers">
${phoneNumbers.map(num => `
<i class="fas fa-phone phone-icon" data-number="${num.trim()}"></i>
`).join('')}
</div>`;
};
const attachPhoneClickListeners = () => {
const phoneIcons = document.querySelectorAll('.phone-icon');
phoneIcons.forEach(icon => {
icon.addEventListener('click', (event) => {
const number = event.target.getAttribute('data-number');
if (confirm(`Do you want to call this number: ${number}?`)) {
window.location.href = `tel:${number}`;
}
event.stopPropagation(); // Prevent card flip
});
});
};
const fetchCSVData = async () => {
showLoadingScreen();
try {
const response = await fetch(API_URL);
// Check if the response is ok (status in the range 200-299)
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.text();
processCSVData(data);
} catch (error) {
console.error('Fetch error:', error); // Log detailed error
cardContainer.innerHTML = `<p>${ERROR_MESSAGE}</p>`;
} finally {
hideLoadingScreen();
}
};
const processCSVData = (data) => {
console.log('CSV Data:', data); // Log the raw CSV data
const rows = data.split('\n').filter(row => row.trim() !== '').slice(1); // Skip header
totalProjects = rows.length;
cardContainer.innerHTML = ''; // Clear existing cards
if (totalProjects === 0) {
cardContainer.innerHTML = `<p>${NO_RECORDS_MESSAGE}</p>`;
return;
}
rows.forEach((row, index) => {
const columns = row.split(',');
if (columns.length === 5) {
const [company, place, customer, phone, project] = columns.map(col => col.trim());
companies.add(company);
cities.add(place);
const card = createCard(index, company, place, customer, phone, project);
cardContainer.appendChild(card);
} else {
console.warn(`Skipping malformed row ${index + 1}: ${row}`);
}
});
updateDashboardCounts();
attachPhoneClickListeners(); // Attach listeners after creating cards
};
// Initialize
document.addEventListener("DOMContentLoaded", () => {
fetchCSVData();
// Add click event listeners for logo and header title
logo.addEventListener('click', () => {
location.reload();
});
headerTitle.addEventListener('click', () => {
location.reload();
});
});