-
Notifications
You must be signed in to change notification settings - Fork 1
/
correspondence.html
142 lines (127 loc) · 5.72 KB
/
correspondence.html
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
<!-- correspondence.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Correspondence Viewer - CommUnity</title>
<!-- Include Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Include Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Include Roboto Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
/* Custom styles */
body {
font-family: 'Roboto', sans-serif;
}
/* Loading Spinner Styles */
#loading {
display: none; /* Initially hidden */
justify-content: center;
align-items: center;
height: 100px;
}
/* Email Container Styles */
.email-container {
max-height: 500px;
overflow-y: auto;
}
</style>
</head>
<body class="bg-blue-100 text-gray-800">
<!-- Header -->
<header class="text-center py-6 bg-blue-600 text-white shadow-md">
<h1 class="text-4xl font-bold">Correspondence Viewer</h1>
<nav class="mt-4 flex justify-center space-x-4">
<a href="index.html" class="text-white hover:text-blue-300 flex items-center">
<i class="fas fa-home mr-2"></i> Home
</a>
<a href="correspondence.html" class="text-white hover:text-blue-300 flex items-center">
<i class="fas fa-envelope mr-2"></i> Correspondence
</a>
<a href="login.html" class="text-white hover:text-blue-300 flex items-center">
<i class="fas fa-sign-out-alt mr-2"></i> Logout
</a>
</nav>
</header>
<!-- Main Content -->
<main class="max-w-4xl mx-auto p-6 mt-10 bg-white rounded-lg shadow-lg">
<!-- Correspondence Display Section -->
<section>
<h2 class="text-2xl font-semibold mb-4">Email Correspondence</h2>
<div id="loading" class="flex justify-center items-center">
<div class="w-12 h-12 border-4 border-blue-600 border-t-transparent border-solid rounded-full animate-spin"></div>
</div>
<div id="emailsContainer" class="space-y-4 email-container">
<!-- Emails will be dynamically populated here -->
</div>
</section>
</main>
<!-- Scripts -->
<!-- correspondence.html -->
<!-- ... (rest of your HTML code remains the same) ... -->
<script type="module">
// Import necessary functions and Firebase configurations
import { getAllEmailIds, getEmailDetailsById } from './Javascript_API_POST_function.js';
import { getThreadNameById } from './database_funcs.js'; // Add this line
import { db } from './firebase-config.js';
// Get DOM elements
const emailsContainer = document.getElementById('emailsContainer');
const loadingIndicator = document.getElementById('loading');
/**
* Displays an individual email on the site.
* @param {Object} email - The email details containing thread_id and text.
* @param {string} docId - The Document ID of the email.
*/
async function displayEmail(email, docId) {
const emailDiv = document.createElement('div');
emailDiv.className = 'bg-gray-100 p-4 rounded shadow-md';
const emailHeader = document.createElement('div');
emailHeader.className = 'flex justify-between items-center mb-2';
// Retrieve the thread name using email.thread_id
let threadName;
try {
threadName = await getThreadNameById(email.thread_id);
} catch (error) {
console.error("Error fetching thread name:", error);
threadName = `Thread Name: ${email.thread_id}`; // Fallback to thread ID if there's an error
}
// Display Thread Name and Document ID
const emailTitle = document.createElement('span');
emailTitle.className = 'text-xl font-bold text-blue-600';
emailTitle.innerHTML = `Thread Name: ${threadName}`;
emailHeader.appendChild(emailTitle);
const emailText = document.createElement('p');
emailText.className = 'text-gray-800 whitespace-pre-wrap'; // Preserve formatting
emailText.textContent = email.text;
emailDiv.appendChild(emailHeader);
emailDiv.appendChild(emailText);
emailsContainer.appendChild(emailDiv);
}
// Main execution
(async () => {
// Show loading indicator
loadingIndicator.style.display = 'flex';
// Get all email document IDs
const emailIds = await getAllEmailIds();
// Remove loading indicator
loadingIndicator.style.display = 'none';
if (emailIds.length > 0) {
// For each email ID, get the email details and display them
for (const docId of emailIds) {
const emailDetails = await getEmailDetailsById(docId);
if (emailDetails) {
displayEmail(emailDetails, docId);
} else {
console.error(`Failed to retrieve email with ID: ${docId}`);
}
}
} else {
emailsContainer.innerHTML = '<p class="text-red-500">No emails found.</p>';
}
})();
</script>
</body>
</html>