Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix schedule

Browse Source
This commit is contained in:
Javier Blanco
2026-05-06 20:49:10 +07:00
parent c76e471161
commit ac9fd4cf42
9 changed files with 459 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
js/main.js
View File

@@ -4,16 +4,126 @@
// ============================================================
const SCHEDULE = [
{ day: 'Monday', when: '8:30 pm', venue: 'Webe Coffee', social: 'BOM - Bachata On Monday', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai', mapUrl: 'https://maps.app.goo.gl/sznmGXHmiiaWf1ke6' },
{ day: 'Tuesday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://maps.app.goo.gl/3ZyB8icd8oswRghE7' },
{ day: 'Tuesday', when: '9 pm', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://maps.app.goo.gl/YagFKw2gcTJp9PJc7' },
{ day: 'Wednesday', when: '7:30 pm', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 7:30 · Bachata 9 pm', city: 'Da Nang', organizer: 'Sean Kim', mapUrl: 'https://maps.app.goo.gl/XYxY4UCnnJjCAomK6' },
{ day: 'Thursday', when: '9 pm', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes', mapUrl: 'https://maps.app.goo.gl/hZttmc9UcymnKfWP8' },
{ day: 'Friday', when: '9 pm', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova', mapUrl: 'https://maps.app.goo.gl/9cHcJcDgan9ntowt9' },
{ day: 'Saturday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://maps.app.goo.gl/3ZyB8icd8oswRghE7' },
{ day: 'Saturday', when: '9 pm', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://maps.app.goo.gl/9cHcJcDgan9ntowt9' },
{ day: 'Sunday', when: '9 pm', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://maps.app.goo.gl/1tEE4itDEeErhEmG6' },
{ day: 'Sunday', when: '9 pm', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://maps.app.goo.gl/QyuWvCg2DZoFiRyd6' },
{
day: 'Monday',
name: 'Bachata on Mondays',
when: '8:00 PM – 11:00 PM',
fee: '100k VND',
venue: 'Webe Coffee',
address: '14–16 Nguyễn Hữu Thông, An Hải, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/DiRPZrr4wyW1Wy1eA',
music: '8 Bachata · 1 Salsa · 1 Kizomba',
city: 'Da Nang',
organizer: ['Frog and Goose'],
organizerUrl: ['https://www.instagram.com/fgbachata/'],
offer: '1 drink included · Workshop included',
vibe: 'Workshop (8PM–9:30PM) & Social',
},
{
day: 'Tuesday',
name: 'SBK',
when: '9:00 PM – 11:30 PM',
fee: '100k VND',
venue: 'Cáliz',
address: '47–49 An Thượng 3, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/JUBLZ5qHxkwXCe5u7',
music: '2 Salsa · 3 Bachata · 2 Kizomba',
city: 'Da Nang',
organizer: ['Daisy Nguyen'],
organizerUrl: ['https://www.facebook.com/minhtrang610'],
offer: '50k for first 10 ladies',
vibe: 'Elegant Wine Bar',
},
{
day: 'Wednesday',
name: 'Kiz & Bachata',
when: '7:30 PM – Late',
fee: 'FREE',
venue: 'Kết Fai',
address: '138 Đỗ Bá, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/W6nRJfwr2Vhy8iK66',
music: 'Kizomba · Bachata',
city: 'Da Nang',
organizer: ['Sean Kim'],
organizerUrl: ['https://www.facebook.com/happynowkkop'],
offer: 'Buy 1 Cocktail, Get 1 Wine',
vibe: 'Kizomba (7:30PM–9:15PM) & Bachata (9:30PM–Late) · Chill bar',
},
{
day: 'Thursday',
name: 'Salsa & Bachata',
when: '9:00 PM – 11:30 PM',
fee: '100k VND',
venue: 'Malibu Beach Club',
address: 'Bãi tắm, 3 Võ Nguyên Giáp, An Hải, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/GZQC5micBRunbVNP8',
music: '2 Salsa · 2 Bachata',
city: 'Da Nang',
organizer: ['Lucho Giraldes'],
organizerUrl: ['https://www.facebook.com/luchogiraldespersonal'],
offer: 'Beach club snacks available',
vibe: 'Open-air Sea Breeze',
},
{
day: 'Friday',
name: 'Salsa & Bachata',
when: '8:00 PM – Late',
fee: '100k VND',
venue: 'An Thượng By Night',
address: '100 Lã Xuân Oai, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/R6mH4uQfAZtUWiH87',
music: '2 Salsa · 2 Bachata · 2 Kizomba',
city: 'Da Nang',
organizer: ['Nadya Yafarova'],
organizerUrl: ['https://www.facebook.com/yagfarova'],
offer: 'Free for first 10 ladies',
vibe: 'Community Family',
},
{
day: 'Saturday',
name: '100% Kizomba',
when: '8:00 PM – 11:00 PM',
fee: '100k VND',
venue: 'LiiDy Studio',
address: '75 Thái Phiên, Hải Châu, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/GZ5UtDPFafW1BCSP9',
music: 'Kizomba',
city: 'Da Nang',
organizer: ['Kate Bvote'],
organizerUrl: ['https://www.facebook.com/kate.bovt'],
offer: '1 Drinking water included',
vibe: 'Deep Connection',
},
{
day: 'Sunday',
name: 'SBK',
when: '8:30 PM – Late',
fee: '50k VND',
venue: 'The Workshop',
address: '35 Chế Lan Viên, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/xxVwTocSQHKU1Ejd8',
music: '2 Salsa · 3 Bachata · 3 Kizomba',
city: 'Da Nang',
organizer: ['Daisy Nguyen'],
organizerUrl: ['https://www.facebook.com/minhtrang610'],
offer: '1-hr Kiz session included',
vibe: 'Festival style rotation',
},
{
day: 'Sunday',
name: 'Salsa & Bachata',
when: '8:00 PM – 11:30 PM',
fee: '100k VND',
venue: 'An Thượng By Night',
address: '100 Lã Xuân Oai, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/R6mH4uQfAZtUWiH87',
music: '2 Salsa · 2 Bachata',
city: 'Da Nang',
organizer: ['Vaclav', 'Ksenia Tokareva'],
organizerUrl: ['https://www.facebook.com/vasek.nemec.1', 'https://www.facebook.com/omks234'],
offer: '1 drink included & 10% discount on meals',
vibe: 'Workshop (8PM–9PM) & Social',
},
];
const DAYS_ORDER = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
@@ -34,6 +144,15 @@ function musicToChips(music) {
}).join('');
}
// Build organizer name(s) as linked text
function organizerLinks(organizer, organizerUrl, stopProp) {
const stop = stopProp ? ' onclick="event.stopPropagation()"' : '';
return organizer.map((name, i) => {
const url = organizerUrl && organizerUrl[i];
return url ? `<a href="${url}" target="_blank" rel="noopener"${stop}>${name}</a>` : name;
}).join(' & ');
}
// ---- Nav (mobile) ----
function initNav() {
const hamburger = document.getElementById('sfB-hamburger');
@@ -49,12 +168,123 @@ function initNav() {
link.addEventListener('click', () => mobileNav.classList.remove('open'));
});
// close on backdrop click
mobileNav.addEventListener('click', e => {
if (e.target === mobileNav) mobileNav.classList.remove('open');
});
}
// ---- Event detail modal ----
let _sortedSchedule = [];
function openEventModal(row) {
const modal = document.getElementById('sfB-ev-modal');
if (!modal) return;
const now = new Date();
const offset = (DAYS_ORDER.indexOf(row.day) - now.getDay() + 7) % 7;
const date = new Date(now);
date.setDate(now.getDate() + offset);
const dateLabel = `${date.getDate()}/${date.getMonth() + 1}`;
document.getElementById('sfB-ev-modal-day').textContent = `${dateLabel} · ${row.day} · ${row.when}`;
document.getElementById('sfB-ev-modal-name').textContent = row.name;
const orgLinks = organizerLinks(row.organizer, row.organizerUrl, false);
document.getElementById('sfB-ev-modal-body').innerHTML = `
<div class="sfB-ev-row">
<span class="sfB-ev-label">Venue</span>
<span class="sfB-ev-val">
<a href="${row.mapUrl}" target="_blank" rel="noopener">📍 ${row.venue}</a>
<span class="sfB-ev-address">${row.address}</span>
</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Music</span>
<span class="sfB-ev-val sfB-ev-chips">${musicToChips(row.music)}</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Host</span>
<span class="sfB-ev-val"><span>${orgLinks}</span></span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Entry</span>
<span class="sfB-ev-val sfB-ev-fee">${row.fee}</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Offer</span>
<span class="sfB-ev-val sfB-ev-offer">${row.offer}</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Vibe</span>
<span class="sfB-ev-val">${row.vibe}</span>
</div>
`;
modal.classList.add('open');
document.body.style.overflow = 'hidden';
}
function initEventModal() {
const modal = document.getElementById('sfB-ev-modal');
if (!modal) return;
function closeModal() {
modal.classList.remove('open');
document.body.style.overflow = '';
}
document.getElementById('sfB-ev-modal-close').addEventListener('click', closeModal);
document.getElementById('sfB-ev-modal-overlay').addEventListener('click', closeModal);
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
});
}
// ---- Schedule: dynamic filter pills ----
function renderScheduleFilters(events) {
const container = document.getElementById('sfB-schedule-pills');
if (!container) return;
const styleOptions = [
{ key: 'salsa', label: 'Salsa' },
{ key: 'bachata', label: 'Bachata' },
{ key: 'kizomba', label: 'Kizomba' },
{ key: 'zouk', label: 'Zouk' },
];
const cityOptions = [
{ key: 'hoian', label: 'Hoi An', match: 'hoi an' },
];
const activeStyles = styleOptions.filter(s =>
events.some(e => e.music.toLowerCase().includes(s.key))
);
const activeCities = cityOptions.filter(c =>
events.some(e => e.city.toLowerCase().includes(c.match))
);
container.innerHTML = [
'<button class="filter-pill active" data-filter="all">All</button>',
...activeStyles.map(s => `<button class="filter-pill" data-filter="${s.key}">${s.label}</button>`),
...activeCities.map(c => `<button class="filter-pill" data-filter="${c.key}">${c.label}</button>`),
].join('');
container.querySelectorAll('.filter-pill').forEach(pill => {
pill.addEventListener('click', () => {
container.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
const f = pill.dataset.filter;
document.querySelectorAll('#sfB-schedule-list .sfB-row').forEach(row => {
if (f === 'all') { row.style.display = ''; return; }
const music = row.dataset.music || '';
const city = row.dataset.city || '';
const matchCity = f === 'danang' ? 'da nang' : f === 'hoian' ? 'hoi an' : f;
row.style.display = (music.includes(f) || city.includes(matchCity)) ? '' : 'none';
});
});
});
}
// ---- Schedule: full list (schedule.html) ----
function renderScheduleList() {
const list = document.getElementById('sfB-schedule-list');
@@ -64,28 +294,29 @@ function renderScheduleList() {
const todayName = DAYS_ORDER[now.getDay()];
const startIdx = DAYS_ORDER.indexOf(todayName);
// Map each day name to how many days from today it is (0–6)
const dayOffset = {};
DAYS_ORDER.forEach(name => {
dayOffset[name] = (DAYS_ORDER.indexOf(name) - startIdx + 7) % 7;
});
const sorted = [...SCHEDULE].sort((a, b) => dayOffset[a.day] - dayOffset[b.day]);
_sortedSchedule = [...SCHEDULE].sort((a, b) => dayOffset[a.day] - dayOffset[b.day]);
list.innerHTML = sorted.map(row => {
renderScheduleFilters(_sortedSchedule);
list.innerHTML = _sortedSchedule.map((row, i) => {
const isToday = row.day === todayName;
const offset = dayOffset[row.day];
const date = new Date(now);
date.setDate(now.getDate() + offset);
const dayNum = `${date.getDate()}/${date.getMonth() + 1}`;
const cityClass = row.city === 'Hoi An' ? 'hoian' : 'danang';
const venueEl = row.mapUrl
? `<a href="${row.mapUrl}" target="_blank" rel="noopener">${row.venue}</a>`
: row.venue;
const orgHtml = organizerLinks(row.organizer, row.organizerUrl, true);
return `
<div class="sfB-row${isToday ? ' today' : ''}">
<div class="sfB-row${isToday ? ' today' : ''}" data-idx="${i}"
data-music="${row.music.toLowerCase()}"
data-city="${row.city.toLowerCase()}"
tabindex="0" role="button" aria-label="View details for ${row.name}">
<div class="col-day">
<div class="day-line">
<span class="date-num">${dayNum}</span>
@@ -93,19 +324,27 @@ function renderScheduleList() {
</div>
${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''}
</div>
<div class="col-when">${row.when || ''}</div>
<div class="col-social">
${row.social}
<span class="sub">${row.organizer}</span>
</div>
<div class="col-when">${row.when}</div>
<div class="col-social">${row.name}</div>
<div class="col-org">${orgHtml}</div>
<div class="col-music">${musicToChips(row.music)}</div>
<div class="col-venue">
<span class="pin">📍</span>
${venueEl}
<a href="${row.mapUrl}" target="_blank" rel="noopener" onclick="event.stopPropagation()">${row.venue}</a>
</div>
<div><span class="col-city ${cityClass}">${row.city}</span></div>
</div>`;
}).join('');
list.querySelectorAll('.sfB-row').forEach(el => {
function openRow() {
const idx = parseInt(el.dataset.idx, 10);
openEventModal(_sortedSchedule[idx]);
}
el.addEventListener('click', openRow);
el.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRow(); }
});
});
}
// ---- Home: "Coming up" teaser (4 cards starting from today) ----
@@ -132,12 +371,13 @@ function renderScheduleTeaser() {
const date = new Date(now);
date.setDate(now.getDate() + offset);
const dayNum = `${date.getDate()}/${date.getMonth() + 1}`;
const orgText = row.organizer.join(' & ');
return `
<a href="/schedule/" class="sfB-tcard">
<div class="day"><span class="day-date">${dayNum}</span> ${row.day}</div>
<div class="when">${row.when || ''}</div>
<h4>${row.social}</h4>
<div class="organizer">${row.organizer}</div>
<h4>${row.name}</h4>
<div class="organizer">${orgText}</div>
<div class="at">@ ${row.venue} · ${row.city}</div>
<div class="chips">${musicToChips(row.music)}</div>
</a>
@@ -147,6 +387,9 @@ function renderScheduleTeaser() {
// ---- Filter pills (studios.html / classes.html) ----
function initFilters() {
const cards = document.querySelectorAll('.filterable-card');
if (!cards.length) return;
const pills = document.querySelectorAll('.filter-pill');
if (!pills.length) return;
@@ -156,7 +399,7 @@ function initFilters() {
pill.classList.add('active');
const filter = pill.dataset.filter;
document.querySelectorAll('.filterable-card').forEach(card => {
cards.forEach(card => {
if (filter === 'all') {
card.classList.remove('hidden');
} else {
@@ -176,7 +419,6 @@ function lockPalmSizes() {
const vh = window.innerHeight;
const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
// Each entry: [size, { top|bottom, left|right } in px]
const config = {
'corner-tl': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, left: vw * -0.15 } },
'corner-tr': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, right: vw * -0.10 } },
@@ -222,6 +464,7 @@ document.addEventListener('DOMContentLoaded', () => {
renderScheduleList();
renderScheduleTeaser();
initFilters();
initEventModal();
const yearEl = document.getElementById('footer-year');
if (yearEl) yearEl.textContent = new Date().getFullYear();
lockPalmSizes();