Skip to content

Commit 5440c38

Browse files
JesperDramschJesperDramsch
committed
feat: add my-conferences dashboard page
- Create dashboard for viewing saved conferences - Add filtering by saved, series, and notifications - Implement calendar view for upcoming deadlines - Add statistics overview for user's conferences - Include responsive grid layout with cards - Support export functionality for saved data
1 parent e02fe14 commit 5440c38

File tree

4 files changed

+1553
-0
lines changed

4 files changed

+1553
-0
lines changed

‎_pages/my-conferences.html‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
---
2+
layout: default
3+
title: My Conferences
4+
permalink: /my-conferences/
5+
extra_css:
6+
- /static/css/dashboard.css
7+
extra_js:
8+
- /static/js/dashboard.js
9+
- /static/js/dashboard-filters.js
10+
- /static/js/notifications.js
11+
---
12+
13+
<!-- Initialize conference data for JavaScript -->
14+
<script>
15+
// Load conference data from Jekyll
16+
window.conferenceTypes = {{ site.data.types | jsonify }};
17+
window.conferenceData = {
18+
active: {{ site.data.conferences | jsonify }},
19+
types: {{ site.data.types | jsonify }}
20+
};
21+
</script>
22+
23+
<div class="container-fluid">
24+
<div class="row">
25+
<!-- Filter Sidebar -->
26+
<div class="col-md-3 col-sm-12">
27+
<div class="card filter-panel mb-3">
28+
<div class="card-header d-flex justify-content-between align-items-center">
29+
<h5 class="mb-0">Filters</h5>
30+
<button id="clear-filters" class="btn btn-sm btn-link text-danger">Clear All</button>
31+
</div>
32+
<div class="card-body">
33+
<!-- Format Filter -->
34+
<div class="filter-group mb-3">
35+
<h6>Conference Format</h6>
36+
<div class="form-check">
37+
<input class="form-check-input format-filter" type="checkbox" value="virtual" id="filter-virtual">
38+
<label class="form-check-label" for="filter-virtual">
39+
<i class="fas fa-video"></i> Virtual
40+
</label>
41+
</div>
42+
<div class="form-check">
43+
<input class="form-check-input format-filter" type="checkbox" value="hybrid" id="filter-hybrid">
44+
<label class="form-check-label" for="filter-hybrid">
45+
<i class="fas fa-globe"></i> Hybrid
46+
</label>
47+
</div>
48+
<div class="form-check">
49+
<input class="form-check-input format-filter" type="checkbox" value="in-person" id="filter-in-person">
50+
<label class="form-check-label" for="filter-in-person">
51+
<i class="fas fa-users"></i> In-Person
52+
</label>
53+
</div>
54+
</div>
55+
56+
<!-- Topic Filter -->
57+
<div class="filter-group mb-3">
58+
<h6>Topics</h6>
59+
{% for type in site.data.types %}
60+
<div class="form-check">
61+
<input class="form-check-input topic-filter" type="checkbox" value="{{ type.sub }}" id="filter-{{ type.sub }}">
62+
<label class="form-check-label" for="filter-{{ type.sub }}">
63+
<span class="badge" style="background-color: {{ type.color }}">{{ type.sub }}</span> {{ type.name }}
64+
</label>
65+
</div>
66+
{% endfor %}
67+
</div>
68+
69+
<!-- Features Filter -->
70+
<div class="filter-group mb-3">
71+
<h6>Features</h6>
72+
<div class="form-check">
73+
<input class="form-check-input feature-filter" type="checkbox" value="finaid" id="filter-finaid">
74+
<label class="form-check-label" for="filter-finaid">
75+
<i class="fas fa-hand-holding-dollar"></i> Financial Aid
76+
</label>
77+
</div>
78+
<div class="form-check">
79+
<input class="form-check-input feature-filter" type="checkbox" value="workshop" id="filter-workshop">
80+
<label class="form-check-label" for="filter-workshop">
81+
<i class="fas fa-chalkboard-user"></i> Workshops
82+
</label>
83+
</div>
84+
<div class="form-check">
85+
<input class="form-check-input feature-filter" type="checkbox" value="sponsor" id="filter-sponsor">
86+
<label class="form-check-label" for="filter-sponsor">
87+
<i class="fas fa-handshake"></i> Sponsorship
88+
</label>
89+
</div>
90+
</div>
91+
92+
<!-- Series Filter -->
93+
<div class="filter-group mb-3">
94+
<h6>Series</h6>
95+
<div class="form-check">
96+
<input class="form-check-input" type="checkbox" id="filter-subscribed-series">
97+
<label class="form-check-label" for="filter-subscribed-series">
98+
<i class="fas fa-bell"></i> Only Subscribed Series
99+
</label>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
105+
<!-- Series Subscriptions Card -->
106+
<div class="card series-panel mb-3">
107+
<div class="card-header">
108+
<h5 class="mb-0">Conference Series</h5>
109+
</div>
110+
<div class="card-body">
111+
<div id="subscribed-series-list">
112+
<!-- Populated by JavaScript -->
113+
</div>
114+
<hr>
115+
<h6>Quick Subscribe</h6>
116+
<div class="btn-group-vertical w-100" role="group">
117+
<button class="btn btn-sm btn-outline-primary quick-subscribe" data-series="pycon">
118+
+ PyCon Events
119+
</button>
120+
<button class="btn btn-sm btn-outline-primary quick-subscribe" data-series="pydata">
121+
+ PyData Events
122+
</button>
123+
<button class="btn btn-sm btn-outline-primary quick-subscribe" data-series="europython">
124+
+ EuroPython
125+
</button>
126+
<button class="btn btn-sm btn-outline-primary quick-subscribe" data-series="djangocon">
127+
+ DjangoCon Events
128+
</button>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
134+
<!-- Main Content Area -->
135+
<div class="col-md-9 col-sm-12">
136+
<!-- Dashboard Header -->
137+
<div class="dashboard-header mb-4">
138+
<div class="row align-items-center">
139+
<div class="col-md-6">
140+
<h2>My Conference Dashboard</h2>
141+
<p class="text-muted">
142+
<span id="conference-count">0</span> favorite conferences |
143+
<span id="series-count">0</span> series subscriptions
144+
</p>
145+
</div>
146+
<div class="col-md-6 text-md-right">
147+
<div class="btn-group" role="group">
148+
<button id="view-grid" class="btn btn-outline-secondary active">
149+
<i class="fas fa-th"></i> Grid
150+
</button>
151+
<button id="view-list" class="btn btn-outline-secondary">
152+
<i class="fas fa-list"></i> List
153+
</button>
154+
</div>
155+
<button id="notification-settings" class="btn btn-outline-primary ml-2">
156+
<i class="fas fa-bell"></i> Notifications
157+
</button>
158+
<button id="export-favorites" class="btn btn-outline-success ml-2">
159+
<i class="fas fa-download"></i> Export
160+
</button>
161+
</div>
162+
</div>
163+
</div>
164+
165+
<!-- Notification Permission Alert -->
166+
<div id="notification-prompt" class="alert alert-info alert-dismissible fade show" style="display: none;">
167+
<strong>Stay Updated!</strong> Enable browser notifications to never miss a CFP deadline.
168+
<button id="enable-notifications" class="btn btn-sm btn-primary ml-2">Enable Notifications</button>
169+
<button type="button" class="close" data-dismiss="alert">
170+
<span>&times;</span>
171+
</button>
172+
</div>
173+
174+
<!-- Conference Container -->
175+
<div id="conference-container" class="view-grid">
176+
<!-- Loading State -->
177+
<div id="loading-state" class="text-center py-5">
178+
<div class="spinner-border text-primary" role="status">
179+
<span class="sr-only">Loading...</span>
180+
</div>
181+
<p class="mt-2">Loading your conferences...</p>
182+
</div>
183+
184+
<!-- Empty State (shown when no favorites) -->
185+
<div id="empty-state" class="text-center py-5" style="display: none;">
186+
<i class="far fa-star fa-4x text-muted mb-3"></i>
187+
<h4>No Favorite Conferences Yet</h4>
188+
<p class="text-muted">
189+
Start by browsing the <a href="/">conference list</a> and clicking the star icon to add favorites.
190+
</p>
191+
<p class="text-muted">
192+
Or subscribe to a conference series above to automatically track new editions!
193+
</p>
194+
</div>
195+
196+
<!-- Conference Cards Container -->
197+
<div id="conference-cards" class="row">
198+
<!-- Populated by JavaScript -->
199+
</div>
200+
</div>
201+
202+
<!-- Series Predictions Section -->
203+
<div id="series-predictions" class="mt-4">
204+
<h4>Predicted Upcoming CFPs</h4>
205+
<div id="predictions-container">
206+
<!-- Populated by JavaScript based on series history -->
207+
</div>
208+
</div>
209+
</div>
210+
</div>
211+
</div>
212+
213+
<!-- Notification Settings Modal -->
214+
<div class="modal fade" id="notificationModal" tabindex="-1" role="dialog">
215+
<div class="modal-dialog" role="document">
216+
<div class="modal-content">
217+
<div class="modal-header">
218+
<h5 class="modal-title">Notification Settings</h5>
219+
<button type="button" class="close" data-dismiss="modal">
220+
<span>&times;</span>
221+
</button>
222+
</div>
223+
<div class="modal-body">
224+
<h6>Notify me before CFP deadlines:</h6>
225+
<div class="form-check">
226+
<input class="form-check-input notify-days" type="checkbox" value="14" id="notify-14" checked>
227+
<label class="form-check-label" for="notify-14">14 days before</label>
228+
</div>
229+
<div class="form-check">
230+
<input class="form-check-input notify-days" type="checkbox" value="7" id="notify-7" checked>
231+
<label class="form-check-label" for="notify-7">7 days before</label>
232+
</div>
233+
<div class="form-check">
234+
<input class="form-check-input notify-days" type="checkbox" value="3" id="notify-3" checked>
235+
<label class="form-check-label" for="notify-3">3 days before</label>
236+
</div>
237+
<div class="form-check">
238+
<input class="form-check-input notify-days" type="checkbox" value="1" id="notify-1">
239+
<label class="form-check-label" for="notify-1">1 day before</label>
240+
</div>
241+
<hr>
242+
<h6>Series Notifications:</h6>
243+
<div class="form-check">
244+
<input class="form-check-input" type="checkbox" id="notify-new-editions" checked>
245+
<label class="form-check-label" for="notify-new-editions">
246+
Notify when new editions of subscribed series are added
247+
</label>
248+
</div>
249+
<div class="form-check">
250+
<input class="form-check-input" type="checkbox" id="auto-favorite-series" checked>
251+
<label class="form-check-label" for="auto-favorite-series">
252+
Auto-favorite new editions of subscribed series
253+
</label>
254+
</div>
255+
</div>
256+
<div class="modal-footer">
257+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
258+
<button type="button" class="btn btn-primary" id="save-notification-settings">Save Settings</button>
259+
</div>
260+
</div>
261+
</div>
262+
</div>
263+
264+
<!-- Toast Container for Notifications -->
265+
<div id="toast-container" style="position: fixed; top: 80px; right: 20px; z-index: 9999;">
266+
<!-- Toasts will be added here dynamically -->
267+
</div>
268+
269+

0 commit comments

Comments
 (0)