academic-web/resources.html at main · acm-uiuc/academic-web · GitHub

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
---
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 ">
                <tr>
                    <th class="px-6 py-3 text-left text-gray-700 dark:text-gray-200 w-1/3">Event Name</th>
                    <th class="px-6 py-3 text-left text-gray-700 dark:text-gray-200 w-1/3">Event Date</th>
                    <th class="px-6 py-3 text-center text-gray-700 dark:text-gray-200 w-1/3">Resources</th>
                </tr>
            </thead>
            <tbody id="resources-body" class="divide-y divide-gray-100 dark:divide-gray-600">
                <tr>
                    <td colspan="3" 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 {
            const response = await fetch('https://core.acm.illinois.edu/api/v1/events?host=Academic%20Committee&includeMetadata=true');
            if (!response.ok) throw new Error('Failed to fetch events');

            const allEvents = await response.json();
            allEvents.sort((b, a) => new Date(a.start) - new Date(b.start));


            // Filter only events with resources in metadata
            const eventsWithResources = allEvents.filter(event => {
                const m = event.metadata || {};
                const hasResources = m.empty_slides || m.filled_slides || m.recording;
                const hasSemesterCode = m.semester_code;
	            	return hasResources && hasSemesterCode && (m.semester_code == "{{ site.data.constants.semester_code }}");
            }).map(event => {
                const startDate = new Date(event.start);
                const formattedStartDate = startDate.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                return {
                    id: event.id,
                    title: event.title || 'Untitled Event',
                    date: formattedStartDate,
                    calendarLink: `https://www.acm.illinois.edu/calendar?id=${event.id}&host=Academic+Committee`,
                    resources: {
                        empty_slides: event.metadata?.empty_slides || null,
                        filled_slides: event.metadata?.filled_slides || null,
                        recording: event.metadata?.recording || null,
                    }
                };
            });

            renderResourcesTable(eventsWithResources);
        } 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="3" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                        No resources available.
                    </td>
                </tr>
            `;
            return;
        }

        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 ">
                    <td class="px-6 py-4 dark:text-gray-200">
                        <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>
                    </td>
                    <td class="px-6 py-4">${event.date || 'TBD'}</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}" title="Empty Slides" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" class="hover:scale-110 transition-transform duration-150" width="24" height="24" viewBox="0 0 24 24"><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}" title="Filled Slides" class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 transition-colors duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" class="hover:scale-110 transition-transform duration-150" width="24" height="24" viewBox="0 0 24 24"><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}" title="Recording" class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" class="hover:scale-110 transition-transform duration-150" width="24" height="24" viewBox="0 0 24 24"><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>