-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathview.html
205 lines (180 loc) · 8.25 KB
/
view.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Completed -Gears</title>
<link rel="icon" href="https://i.ibb.co/RST4HvR/Untitled-design.png" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
<!-- DataTables Responsive CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/responsive.dataTables.min.css">
<!-- Basic Styling -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #3b82f6; /* Blue 500 */
color: #374151; /* Gray 700 for text */
}
.lable {
text-align: center;
font-size: 1.5rem;
color: #ffffff;
margin-bottom: 20px;
}
/* DataTables custom styling */
table.dataTable {
border-collapse: collapse !important;
border-radius: 8px; /* Add corner radius */
overflow: hidden; /* Ensures corners are rounded */
width: 100%; /* Ensure table uses full width */
table-layout: fixed; /* Ensure table columns fit within width */
}
table.dataTable thead th {
background-color: #9CA3AF; /* Gray 400 */
color: #ffffff; /* White text */
border: 1px solid #ccc; /* Add border to table headers */
text-align: center; /* Center align text */
padding: 8px; /* Add padding to headers */
}
table.dataTable tbody td {
background-color: #ffffff; /* White */
border: 1px solid #ccc; /* Add border to table cells */
text-align: center; /* Center align text */
word-wrap: break-word; /* Allow long text to wrap */
padding: 8px; /* Add padding to cells */
}
table.dataTable tbody tr:hover {
background-color: #f1f1f1;
}
/* Responsive Styling */
@media (max-width: 768px) {
table.dataTable {
font-size: 0.875em; /* Smaller font size for smaller screens */
border-radius: 4px; /* Smaller corner radius for small screens */
}
table.dataTable thead th {
font-size: 0.75em; /* Decrease font size for headings on small screens */
padding: 4px; /* Reduce padding */
}
table.dataTable tbody td {
font-size: 0.75em; /* Decrease font size for table cells on small screens */
padding: 4px; /* Reduce padding */
}
.lable {
text-align: center;
font-size: 20px;
color: #ffffff;
margin-bottom: 20px;
}
}
@media (max-width: 576px) {
table.dataTable thead th, table.dataTable tbody td {
font-size: 0.65em; /* Further decrease font size for very small screens */
padding: 2px; /* Further reduce padding */
}
}
</style>
</head>
<body>
<p class="text-base lable md:text-lg text-center lg:text-xl xl:text-2xl">Completed Tasks</p>
<div class="container">
<table id="tasksTable" class="table table-striped table-bordered display responsive nowrap">
<thead>
<tr>
<th>Board Name</th>
<th>Task Name</th>
<th>Work Link</th>
</tr>
</thead>
<tbody>
<!-- Table rows will be inserted here by JavaScript -->
</tbody>
</table>
</div>
<!-- Firebase configuration and JavaScript -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-database.js";
const firebaseConfig = {
apiKey: "AIzaSyDNj7ZoSKo64VEdJOYdyd4OKXj477Id0ME",
authDomain: "task-11162.firebaseapp.com",
projectId: "task-11162",
storageBucket: "task-11162.firebasestorage.app",
messagingSenderId: "618238659980",
appId: "1:618238659980:web:b57f1f46f9a859d338daa9"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
function renderCompletedTasks() {
const boardsRef = ref(database, 'boards');
const tasksTableBody = document.querySelector('#tasksTable tbody');
onValue(boardsRef, (snapshot) => {
tasksTableBody.innerHTML = ''; // Clear existing rows
snapshot.forEach((boardSnapshot) => {
const board = boardSnapshot.val();
const boardId = boardSnapshot.key;
const tasksRef = ref(database, `boards/${boardId}/tasks`);
onValue(tasksRef, (tasksSnapshot) => {
tasksSnapshot.forEach((taskSnapshot) => {
const task = taskSnapshot.val();
const taskId = taskSnapshot.key;
if (task.status === 'Completed') {
// Create a new table row
const row = document.createElement('tr');
// Add Board Name cell
const boardCell = document.createElement('td');
boardCell.textContent = board.name;
row.appendChild(boardCell);
// Add Task Name cell
const taskCell = document.createElement('td');
taskCell.textContent = task.name;
row.appendChild(taskCell);
// Add Work Link cell
const linkCell = document.createElement('td');
if (task.workLink && task.workLink.trim() !== '') {
const link = document.createElement('a');
link.href = task.workLink;
link.textContent = 'View Link';
link.target = '_blank';
linkCell.appendChild(link);
} else {
linkCell.textContent = 'No Link';
}
row.appendChild(linkCell);
// Append row to the table
tasksTableBody.appendChild(row);
}
});
});
});
// Initialize DataTables only if not already initialized
if (!$.fn.DataTable.isDataTable('#tasksTable')) {
$('#tasksTable').DataTable({
searching: false, // Disable search
paging: false, // Disable pagination
info: false, // Disable table information (e.g., "Showing 1 to 10 of 20 entries")
responsive: true, // Enable responsive feature
autoWidth: false // Disable auto width to allow manual adjustments
});
}
});
}
// Call the function to render completed tasks
renderCompletedTasks();
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script>
<!-- DataTables Responsive JS -->
<script src="https://cdn.datatables.net/1.13.3/js/dataTables.responsive.min.js"></script>
</body>
</html>