-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathresources.html
191 lines (172 loc) · 8.43 KB
/
resources.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
---
layout: default
title: Resources
---
<div class="container mx-auto px-6 py-12">
<h1 class="text-4xl font-bold mb-8 dark:text-white">Resources</h1>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
<thead class="text-lg bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
<tr>
<th class="px-6 py-3 text-left text-gray-700 dark:text-gray-200 w-1/2">Event Name</th>
<th class="px-6 py-3 text-center text-gray-700 dark:text-gray-200 w-1/2">Resources</th>
</tr>
</thead>
<tbody id="resources-body" class="divide-y divide-gray-100 dark:divide-gray-600">
<tr>
<td colspan="2" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">Loading resources...
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
loadEventResources();
});
async function loadEventResources() {
try {
// Get the events data from Jekyll
const eventsWithResources = [];
{% for event in site.data.events %}
{% if event.resources %}
eventsWithResources.push({
id: "{{ event.id }}",
name: "{{ event.name }}",
resources: {
{% if event.resources.empty_slides %}
empty_slides: "{{ event.resources.empty_slides }}",
{% endif %}
{% if event.resources.filled_slides %}
filled_slides: "{{ event.resources.filled_slides }}",
{% endif %}
{% if event.resources.recording %}
recording: "{{ event.resources.recording }}"
{% endif %}
}
});
{% endif %}
{% endfor %}
// Create a map to store API responses by event ID
const eventDetailsMap = {};
// First, start all API requests in parallel for events without names
const apiRequests = eventsWithResources
.filter(event => !event.name && event.id) // Only fetch for events without names
.map(async event => {
try {
const response = await fetch(`https://core.acm.illinois.edu/api/v1/events/${event.id}`);
if (response.ok) {
const eventDetails = await response.json();
// Store the result in our map
eventDetailsMap[event.id] = eventDetails;
}
} catch (error) {
console.error(`Error fetching details for event ${event.id}:`, error);
}
});
// Wait for all API requests to complete
await Promise.all(apiRequests);
// Now process all events with the API data we've collected
const eventsWithDetails = eventsWithResources.map(event => {
// Check if we have API data for this event
const apiData = event.id ? eventDetailsMap[event.id] : null;
// Determine the title (prioritize existing name, then API data, then fallback)
const title = event.name || (apiData ? apiData.title : null) || 'Unknown Event';
return {
...event,
title: title,
calendarLink: event.id ? `https://www.acm.illinois.edu/calendar?id=${event.id}&host=Academic+Committee` : null
};
});
// Render the events table
renderResourcesTable(eventsWithDetails);
} catch (error) {
console.error('Error loading resources:', error);
document.getElementById('resources-body').innerHTML = `
<tr>
<td colspan="2" class="px-6 py-4 text-center text-red-500">
Failed to load resources. Please try again later.
</td>
</tr>
`;
}
}
function renderResourcesTable(events) {
const resourcesBody = document.getElementById('resources-body');
if (!events || events.length === 0) {
resourcesBody.innerHTML = `
<tr>
<td colspan="2" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
No resources available.
</td>
</tr>
`;
return;
}
// Create table rows for each event
resourcesBody.innerHTML = events.map(event => {
return `
<tr class="text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-600 bg-white dark:bg-gray-700 transition-colors duration-150">
<td class="px-6 py-4 dark:text-gray-200">
${event.calendarLink
? `<a href="${event.calendarLink}" target="_blank" class="hover:underline text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">${event.title}</a>`
: event.title
}
</td>
<td class="px-6 py-4">
<div class="flex flex-wrap justify-center gap-4">
${generateResourceIcons(event.resources)}
</div>
</td>
</tr>
`;
}).join('');
}
function generateResourceIcons(resources) {
const icons = [];
if (resources.empty_slides) {
icons.push(`
<a href="${resources.empty_slides}"
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-150"
title="Empty Slides">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
class="hover:scale-110 transition-transform duration-150">
<path fill="currentColor"
d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm3-2h5q.425 0 .713-.288T14 16t-.288-.712T13 15H8q-.425 0-.712.288T7 16t.288.713T8 17m0-4h8q.425 0 .713-.288T17 12t-.288-.712T16 11H8q-.425 0-.712.288T7 12t.288.713T8 13m0-4h8q.425 0 .713-.288T17 8t-.288-.712T16 7H8q-.425 0-.712.288T7 8t.288.713T8 9m4-4.75q.325 0 .538-.213t.212-.537t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212M5 19V5z" />
</svg>
</a>
`);
}
if (resources.filled_slides) {
icons.push(`
<a href="${resources.filled_slides}"
class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 transition-colors duration-150"
title="Filled Slides">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
class="hover:scale-110 transition-transform duration-150">
<path fill="currentColor"
d="m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8" />
</svg>
</a>
`);
}
if (resources.recording) {
icons.push(`
<a href="${resources.recording}"
class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-150"
title="Recording">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
class="hover:scale-110 transition-transform duration-150">
<path fill="currentColor"
d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h12q.825 0 1.413.588T18 6v4.5l3.15-3.15q.25-.25.55-.125t.3.475v8.6q0 .35-.3.475t-.55-.125L18 13.5V18q0 .825-.587 1.413T16 20z" />
</svg>
</a>
`);
}
if (icons.length === 0) {
return '<span class="text-gray-500 dark:text-gray-400">No resources available</span>';
}
return icons.join('');
}
</script>