+
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
${html}
`;
+}
+
+function syncSwatchOutlines(containerId, selected) {
+ document.querySelectorAll(`#${containerId} .ev-swatch`).forEach(s => {
+ const c = s.dataset.color;
+ const sel = c === selected;
+ const clr = c || '#94a3b8';
+ s.style.outline = sel ? '2px solid ' + clr : 'none';
+ s.style.outlineOffset = sel ? '2px' : '0';
+ });
}
// ══════════════════════════════════════════════════════
// DASHBOARD
// ══════════════════════════════════════════════════════
function renderDash() {
+ renderDashStats();
const el = document.getElementById('dash-content');
- if (dashView === 'global') el.innerHTML = dashGlobal();
if (dashView === 'plans') el.innerHTML = dashPlans();
if (dashView === 'semesters') el.innerHTML = dashSemesters();
}
+function renderDashStats() {
+ const all = S.courses;
+ const graded = all.filter(c => !c.passFail && c.grade != null && c.grade !== '');
+ const passed = all.filter(c => status(c) === 'pass');
+ const totCr = all.reduce((s, c) => s + (+c.credits || 0), 0);
+ const passCr = passed.reduce((s, c) => s + (+c.credits || 0), 0);
+ const sumW = graded.reduce((s, c) => s + +c.grade * (+c.credits || 0), 0);
+ const sumC = graded.reduce((s, c) => s + (+c.credits || 0), 0);
+ const mean = sumC > 0 ? sumW / sumC : null;
+ const passedGraded = graded.filter(c => status(c) === 'pass').length;
+ const rate = graded.length ? Math.round(passedGraded / graded.length * 100) : null;
+
+ document.getElementById('dash-stats').innerHTML = `
+
+
+
+
+
`;
+}
+
function dashGlobal() {
const all = S.courses;
- // passFail courses excluded from mean, but count for credits/pass rate denominator
const graded = all.filter(c => !c.passFail && c.grade != null && c.grade !== '');
const passed = all.filter(c => status(c) === 'pass');
const totCr = all.reduce((s, c) => s + (+c.credits || 0), 0);
@@ -617,64 +801,164 @@ function dashGlobal() {
return html;
}
+const WARN_SVG = ``;
+const NOSEM_SVG = ``;
+const GEAR_SVG = ``;
+
+function roleGroupSection(planId, label, role, blocks, allPlanCourses, planColor) {
+ const headerColor = role === 'major'
+ ? planColor
+ : (blocks.length ? blockEffectiveColor(blocks[0]) : MINOR_PALETTE[role === 'optional' ? 4 : 0]);
+ const addLabel = role === 'major' ? 'Major' : role === 'minor' ? 'Minor' : 'Optional';
+ const canAdd = role !== 'major' || !blocks.length;
+ let html = `${totCr}
Total credits
${passCr}
Credits earned
${mean !== null ? mean.toFixed(2) : '—'}
Mean grade
${rate !== null ? rate + '%' : '—'}
Pass rate
+
`;
+ return html;
+}
+
function dashPlans() {
- if (!S.studyPlans.length) return emptyState('📋', 'No study plans yet.
+ ${label}
+ ${canAdd ? `` : ''}
+
`;
+ if (blocks.length) {
+ blocks.forEach(blk => { html += planBlockSection(planId, blk, '', allPlanCourses); });
+ } else {
+ html += `No ${label.toLowerCase()} defined yet.
`;
+ }
+ html += `Create one in the Plans tab!'); + if (!S.studyPlans.length) return emptyState('📋', 'No study plans yet.
Tap + to create one!'); let html = ''; S.studyPlans.forEach(plan => { - const pc = S.courses.filter(c => c.planId === plan.id); - const pb = S.blocks.filter(b => b.planId === plan.id); + const pc = S.courses.filter(c => c.planId === plan.id); const totCr = pc.reduce((s, c) => s + (+c.credits || 0), 0); const passCr = pc.filter(c => status(c) === 'pass').reduce((s, c) => s + (+c.credits || 0), 0); + const minCr = plan.cycle === 'bachelor' ? settings.minCreditsBachelor + : plan.cycle === 'master' ? settings.minCreditsMaster : null; + const creditOk = minCr === null || totCr >= minCr; - html += `
- ${esc(plan.name)}
- ${passCr} / ${totCr} cr.
-
`;
+ const majors = S.blocks.filter(b => b.planId === plan.id && b.role === 'major');
+ const minors = S.blocks.filter(b => b.planId === plan.id && b.role === 'minor');
+ const optionals = S.blocks.filter(b => b.planId === plan.id && b.role === 'optional');
+ const others = S.blocks.filter(b => b.planId === plan.id && !b.role);
- if (!pc.length) { html += `No courses in this plan
- ${esc(blk.name)}
-
+ const pClr = planBaseColor(plan);
+ html += `
`;
});
- // Unplanned courses
const up = S.courses.filter(c => !c.planId);
if (up.length) {
- html += `
+
`;
+ html += `
+
`;
- html += coursesMiniTable(bc);
- });
+
+ // Major section
+ html += roleGroupSection(plan.id, 'Major', 'major', majors, pc, pClr);
+
+ // Minor section
+ html += roleGroupSection(plan.id, 'Minor', 'minor', minors, pc, pClr);
+
+ // Optional Studies section (only when enabled in settings)
+ if (settings.showOptional) {
+ html += roleGroupSection(plan.id, 'Optional Studies', 'optional', optionals, pc, pClr);
+ }
+
+ // Legacy blocks (no role)
+ others.forEach(blk => { html += planBlockSection(plan.id, blk, '', pc); });
// Courses without a block
const nbc = pc.filter(c => !c.blockId);
if (nbc.length) {
- html += `
+ ${esc(plan.name)}
+ ${cycleBadge(plan.cycle)}
+ ${!creditOk ? WARN_SVG : ''}
+
+ ${passCr}/${totCr}${minCr !== null ? '/' + minCr : ''} cr.
+
+
+
+
+
+
No block
`;
- html += coursesMiniTable(nbc);
+ html += `No block
`;
+ html += coursesMgmtList(nbc);
}
- html += `
+
+
No Study Plan
`;
- html += coursesMiniTable(up, true);
- html += `
+
`;
}
return html;
}
+function planBlockSection(planId, blk, roleLabel, allPlanCourses) {
+ const bc = allPlanCourses.filter(c => c.blockId === blk.id);
+ const bm = blockMean(blk.id);
+ const bCr = bc.reduce((s, c) => s + (+c.credits || 0), 0);
+ const bClr = blockEffectiveColor(blk);
+ const sbs = S.subBlocks.filter(sb => sb.blockId === blk.id);
+ const freeC = bc.filter(c => !c.subBlockId);
+ const roleTxt = roleLabel
+ ? `${roleLabel}`
+ : '';
+ let html = `Without plan
+ ${coursesMgmtList(up)}
+
+
`;
+ return html;
+}
+
+function planSubBlockSection(planId, blockId, sb, courses, parentColor) {
+ const sbCr = courses.reduce((s, c) => s + (+c.credits || 0), 0);
+ const sbClr = subBlockEffectiveColor(sb);
+ return `
+ ${roleTxt}${esc(blk.name)}
+
`;
+ sbs.forEach(sb => {
+ const sbC = bc.filter(c => c.subBlockId === sb.id);
+ html += planSubBlockSection(planId, blk.id, sb, sbC, bClr);
+ });
+ if (freeC.length) {
+ html += `
+
+
+
+
+
+ ${sbs.length ? `
`;
+ } else if (!sbs.length) {
+ html += `Free courses
` : ''}
+ ${coursesMgmtList(freeC, false, bClr)}
+ No courses yet
`;
+ }
+ html += `
+
+
+
+
+
`;
+}
+
+const CAL_SVG = ``;
+
function dashSemesters() {
- if (!S.semesters.length) return emptyState('📅', 'No semesters yet.
+ ${esc(sb.name)}
+
+ ${courses.length ? coursesMgmtList(courses, false, sbClr) : '
+ ${sbCr} cr.
+
+
+
+ No courses yet
'}
+
+ Create one in the Semesters tab!'); + if (!S.semesters.length) return emptyState('📅', 'No semesters yet.
Tap + to create one!'); let html = ''; S.semesters.forEach(sem => { - const sc = S.courses.filter(c => c.semesterId === sem.id); + const sc = S.courses.filter(c => c.semesterId === sem.id); const totCr = sc.reduce((s, c) => s + (+c.credits || 0), 0); const passCr = sc.filter(c => status(c) === 'pass').reduce((s, c) => s + (+c.credits || 0), 0); const graded = sc.filter(c => !c.passFail && c.grade != null && c.grade !== ''); @@ -682,41 +966,63 @@ function dashSemesters() { const sumC = graded.reduce((s, c) => s + (+c.credits || 0), 0); const mean = sumC > 0 ? sumW / sumC : null; - html += `
- ${esc(sem.name)}
- ${passCr} / ${totCr} cr.
-
`;
-
- if (mean !== null) {
- html += `
- Avg: ${mean.toFixed(2)}
- ${sc.filter(c => status(c) === 'pass').length} / ${sc.length} passed
+ html += `
`;
});
return html;
}
-function coursesMiniTable(courses, showMeta) {
- let rows = '';
- courses.forEach(c => {
+function coursesMgmtList(courses, showPlan, inheritColor) {
+ if (!courses.length) return '
+
`;
+ html += `
+
+
`;
- }
- if (!sc.length) { html += `
+
+ ${esc(sem.name)}
+ ${esc(sem.season)} · ${sem.year}${mean !== null ? ` · avg ${mean.toFixed(2)}` : ''}
+
+ ${passCr}/${totCr} cr.
+
+
+
+
No courses this semester
`; }
- else html += coursesMiniTable(sc, true);
+ if (!sc.length) { html += `No courses this semester
`; }
+ else html += coursesMgmtList(sc, true);
- html += `No courses yet
';
+ return courses.map(c => {
const st = status(c);
- const meta = showMeta
- ? `${c.planId ? planName(c.planId) + (c.blockId ? ' › ' + blockName(c.blockId) : '') : ''}`
+ const meta = [
+ c.credits ? c.credits + ' cr.' : null,
+ !c.semesterId ? 'no semester' + NOSEM_SVG + '' : semName(c.semesterId),
+ showPlan && c.planId ? planName(c.planId) + (c.blockId ? ' › ' + blockName(c.blockId) : '') + (c.subBlockId ? ' › ' + subBlockName(c.subBlockId) : '') : null,
+ ].filter(Boolean).join(' · ');
+ const slotsStr = c.slots && c.slots.length
+ ? c.slots.map(s => WK_DAYS[s.day - 1] + ' ' + toHHMM(s.startMin) + '–' + toHHMM(s.endMin)).join(' · ')
: '';
- rows += `${esc(c.name)}
${meta ? `${meta}
` : ''}| Course | Cr. | Grade | Status |
|---|
+
`;
+ }).join('');
+}
+
+function showCourseModalPrefilled(planId, blockId, semId, subBlockId = '') {
+ showCourseModal(null, { planId, blockId, semId, subBlockId });
}
// ══════════════════════════════════════════════════════
@@ -726,42 +1032,62 @@ function renderCourses() {
const el = document.getElementById('courses-content');
if (!S.courses.length) { el.innerHTML = emptyState('📖', 'No courses yet.
+
+
+ ${meta}
+ ${slotsStr ? `${slotsStr}
` : ''}
+
+ ${badge(st)}
+ ${fmtGrade(c.grade, c.passFail)}
+
+
+
+ Tap + to add one!'); return; } - // Group by semester - const bySem = {}; - const noSem = []; - S.courses.forEach(c => { - if (c.semesterId) { (bySem[c.semesterId] = bySem[c.semesterId] || []).push(c); } - else noSem.push(c); - }); - let html = ''; - S.semesters.forEach(sem => { - const list = bySem[sem.id]; - if (!list || !list.length) return; - html += `
${esc(sem.name)}
`;
- list.forEach(c => html += courseCard(c));
- });
- if (noSem.length) {
- html += `No Semester
`;
- noSem.forEach(c => html += courseCard(c));
+
+ if (courseGroup === 'semester') {
+ const bySem = {};
+ const noSem = [];
+ S.courses.forEach(c => {
+ if (c.semesterId) { (bySem[c.semesterId] = bySem[c.semesterId] || []).push(c); }
+ else noSem.push(c);
+ });
+ S.semesters.forEach(sem => {
+ const list = bySem[sem.id];
+ if (!list || !list.length) return;
+ html += `${esc(sem.name)}
`;
+ list.forEach(c => html += courseCard(c));
+ });
+ if (noSem.length) {
+ html += `No Semester
`;
+ noSem.forEach(c => html += courseCard(c));
+ }
+ } else {
+ // Group by plan, then show semester info per course
+ S.studyPlans.forEach(plan => {
+ const pc = S.courses.filter(c => c.planId === plan.id);
+ if (!pc.length) return;
+ html += `${esc(plan.name)}${plan.cycle ? ` · ${plan.cycle}` : ''}
`;
+ pc.forEach(c => html += courseCard(c, true));
+ });
+ const unplanned = S.courses.filter(c => !c.planId);
+ if (unplanned.length) {
+ html += `No Study Plan
`;
+ unplanned.forEach(c => html += courseCard(c, true));
+ }
}
+
el.innerHTML = html;
+ initDrag(el);
}
-function courseCard(c) {
+function courseCard(c, showSem) {
const st = status(c);
- const meta = [
+ const metaParts = [
c.credits ? c.credits + ' cr.' : null,
- c.planId ? planName(c.planId) + (c.blockId ? ' › ' + blockName(c.blockId) : '') : null,
- ].filter(Boolean).join(' · ');
+ showSem && c.semesterId ? semName(c.semesterId) : null,
+ !showSem && c.planId ? planName(c.planId) + (c.blockId ? ' › ' + blockName(c.blockId) : '') : null,
+ ].filter(Boolean);
- return `
+ return `
+
+
+
${esc(c.name)}
${badge(st)}
-
+
${fmtGrade(c.grade)}
@@ -774,81 +1100,394 @@ function courseCard(c) {
}
// ══════════════════════════════════════════════════════
-// PLANS PAGE
+// DRAG AND DROP (courses)
// ══════════════════════════════════════════════════════
-function renderPlans() {
- const el = document.getElementById('plans-content');
- if (!S.studyPlans.length) { el.innerHTML = emptyState('📋', 'No study plans yet.
Tap + to create one!'); return; } +let dragSrcId = null; +let dragOverId = null; +// Touch drag state +let td = { active: false, id: null, clone: null, srcEl: null, overId: null, startY: 0, startTop: 0 }; - let html = ''; - S.studyPlans.forEach(plan => { - const pb = S.blocks.filter(b => b.planId === plan.id); - const pc = S.courses.filter(c => c.planId === plan.id); +function initDrag(container) { + // ── HTML5 drag (desktop) ── + container.addEventListener('dragstart', e => { + const card = e.target.closest('[data-id]'); + if (!card) { e.preventDefault(); return; } + // Only allow drag from handle + if (!e.target.closest('.drag-handle')) { e.preventDefault(); return; } + dragSrcId = card.dataset.id; + setTimeout(() => card.classList.add('dragging'), 0); + e.dataTransfer.effectAllowed = 'move'; + }); - html += `
Tap + to create one!'); return; } +const WK_START = 7 * 60; // 07:00 +const WK_END = 21 * 60; // 21:00 +const PX_PER_MIN = 1.4; +const WK_DAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; +const EV_COLORS = ['#4F46E5','#059669','#DC2626','#D97706','#7C3AED','#0891B2','#DB2777','#475569']; - let html = ''; - S.semesters.forEach(sem => { - const sc = S.courses.filter(c => c.semesterId === sem.id); - const totCr = sc.reduce((s, c) => s + (+c.credits || 0), 0); - const passCr = sc.filter(c => status(c) === 'pass').reduce((s, c) => s + (+c.credits || 0), 0); +function toHHMM(min) { + return `${Math.floor(min / 60).toString().padStart(2,'0')}:${(min % 60).toString().padStart(2,'0')}`; +} +function fromHHMM(str) { + const [h, m] = str.split(':').map(Number); + return h * 60 + (m || 0); +} - html += `
Tap + to create one!'); return; } +let dragSrcId = null; +let dragOverId = null; +// Touch drag state +let td = { active: false, id: null, clone: null, srcEl: null, overId: null, startY: 0, startTop: 0 }; - let html = ''; - S.studyPlans.forEach(plan => { - const pb = S.blocks.filter(b => b.planId === plan.id); - const pc = S.courses.filter(c => c.planId === plan.id); +function initDrag(container) { + // ── HTML5 drag (desktop) ── + container.addEventListener('dragstart', e => { + const card = e.target.closest('[data-id]'); + if (!card) { e.preventDefault(); return; } + // Only allow drag from handle + if (!e.target.closest('.drag-handle')) { e.preventDefault(); return; } + dragSrcId = card.dataset.id; + setTimeout(() => card.classList.add('dragging'), 0); + e.dataTransfer.effectAllowed = 'move'; + }); - html += `
-
`;
+ if (td.active && td.clone) {
+ e.preventDefault();
+ td.clone.style.top = (td.startTop + dy) + 'px';
+
+ td.clone.style.display = 'none';
+ const el = document.elementFromPoint(touch.clientX, touch.clientY);
+ td.clone.style.display = '';
+ const card = el && el.closest('[data-id]');
+ container.querySelectorAll('.course-card').forEach(c => c.classList.remove('drag-over'));
+ if (card && card.dataset.id !== td.id) {
+ card.classList.add('drag-over');
+ td.overId = card.dataset.id;
+ } else {
+ td.overId = null;
+ }
+ }
+ }, { passive: false });
+
+ document.addEventListener('touchend', () => {
+ if (!td.id) return;
+ if (td.active && td.overId) reorderCourse(td.id, td.overId);
+ if (td.clone) td.clone.remove();
+ if (td.srcEl) td.srcEl.classList.remove('dragging');
+ container.querySelectorAll('.course-card').forEach(c => c.classList.remove('drag-over'));
+ td = { active: false, id: null, clone: null, srcEl: null, overId: null, startY: 0, startTop: 0 };
});
- el.innerHTML = html;
+}
+
+function reorderCourse(srcId, targetId) {
+ const si = S.courses.findIndex(c => c.id === srcId);
+ const ti = S.courses.findIndex(c => c.id === targetId);
+ if (si < 0 || ti < 0) return;
+ const [removed] = S.courses.splice(si, 1);
+ S.courses.splice(ti, 0, removed);
+ save();
+ render(page);
}
// ══════════════════════════════════════════════════════
-// SEMESTERS PAGE
+// WEEK CALENDAR
// ══════════════════════════════════════════════════════
-function renderSemesters() {
- const el = document.getElementById('semesters-content');
- if (!S.semesters.length) { el.innerHTML = emptyState('📅', 'No semesters yet.
- ${esc(plan.name)}
-
`;
+ container.addEventListener('dragend', () => {
+ container.querySelectorAll('.course-card').forEach(el => el.classList.remove('dragging', 'drag-over'));
+ dragSrcId = dragOverId = null;
+ });
- if (pb.length) {
- pb.forEach(blk => {
- const bc = S.courses.filter(c => c.blockId === blk.id);
- const bm = blockMean(blk.id);
- html += `
- ${pc.length} courses
-
-
-
-
-
`;
- });
- } else {
- html += `
-
- ${esc(blk.name)}
- ${bc.length} courses${bm !== null ? ' · avg ' + bm.toFixed(2) : ''}
-
-
-
-
- No blocks yet.
`;
+ container.addEventListener('dragover', e => {
+ e.preventDefault();
+ const card = e.target.closest('[data-id]');
+ if (!card || card.dataset.id === dragSrcId) return;
+ container.querySelectorAll('.course-card').forEach(el => el.classList.remove('drag-over'));
+ card.classList.add('drag-over');
+ dragOverId = card.dataset.id;
+ });
+
+ container.addEventListener('drop', e => {
+ e.preventDefault();
+ if (dragSrcId && dragOverId && dragSrcId !== dragOverId) reorderCourse(dragSrcId, dragOverId);
+ container.querySelectorAll('.course-card').forEach(el => el.classList.remove('dragging', 'drag-over'));
+ dragSrcId = dragOverId = null;
+ });
+
+ // ── Touch drag (mobile) ──
+ container.addEventListener('touchstart', e => {
+ const handle = e.target.closest('.drag-handle');
+ if (!handle) return;
+ const card = handle.closest('[data-id]');
+ if (!card) return;
+ e.preventDefault(); // prevent scroll when starting from handle
+ const touch = e.touches[0];
+ td = {
+ active: false,
+ id: card.dataset.id,
+ clone: null,
+ srcEl: card,
+ overId: null,
+ startY: touch.clientY,
+ startTop: card.getBoundingClientRect().top
+ };
+ }, { passive: false });
+
+ document.addEventListener('touchmove', e => {
+ if (!td.id) return;
+ const touch = e.touches[0];
+ const dy = touch.clientY - td.startY;
+
+ if (!td.active && Math.abs(dy) > 6) {
+ td.active = true;
+ const rect = td.srcEl.getBoundingClientRect();
+ td.clone = td.srcEl.cloneNode(true);
+ td.clone.style.cssText = `position:fixed;z-index:9999;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;opacity:0.85;pointer-events:none;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.18);`;
+ document.body.appendChild(td.clone);
+ td.srcEl.classList.add('dragging');
}
- html += `
- Tap + to create one!'); return; } +const WK_START = 7 * 60; // 07:00 +const WK_END = 21 * 60; // 21:00 +const PX_PER_MIN = 1.4; +const WK_DAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; +const EV_COLORS = ['#4F46E5','#059669','#DC2626','#D97706','#7C3AED','#0891B2','#DB2777','#475569']; - let html = ''; - S.semesters.forEach(sem => { - const sc = S.courses.filter(c => c.semesterId === sem.id); - const totCr = sc.reduce((s, c) => s + (+c.credits || 0), 0); - const passCr = sc.filter(c => status(c) === 'pass').reduce((s, c) => s + (+c.credits || 0), 0); +function toHHMM(min) { + return `${Math.floor(min / 60).toString().padStart(2,'0')}:${(min % 60).toString().padStart(2,'0')}`; +} +function fromHHMM(str) { + const [h, m] = str.split(':').map(Number); + return h * 60 + (m || 0); +} - html += `
-
-
`);
+ // Scroll to 8:00
+ const sc = document.getElementById('wk-scroll');
+ if (sc) sc.scrollTop = (8 * 60 - WK_START) * PX_PER_MIN;
+}
+
+function courseSlotColor(courseId) {
+ const c = S.courses.find(x => x.id === courseId);
+ if (c) {
+ if (c.blockId) { const blk = S.blocks.find(b => b.id === c.blockId); if (blk) return blockEffectiveColor(blk); }
+ if (c.planId) { const plan = S.studyPlans.find(p => p.id === c.planId); if (plan) return planBaseColor(plan); }
+ }
+ let h = 0;
+ for (let i = 0; i < courseId.length; i++) h = (h * 31 + courseId.charCodeAt(i)) | 0;
+ return EV_COLORS[Math.abs(h) % EV_COLORS.length];
+}
+
+function renderWeekGrid(semId) {
+ // Manual events + course-slot events merged
+ const events = [...S.schedule.filter(e => e.semesterId === semId)];
+ S.courses.filter(c => c.semesterId === semId && c.slots && c.slots.length).forEach(c => {
+ c.slots.forEach(slot => events.push({
+ id: `__c_${c.id}_${slot.day}_${slot.startMin}`,
+ title: c.name,
+ day: slot.day,
+ startMin: slot.startMin,
+ endMin: slot.endMin,
+ color: courseSlotColor(c.id),
+ _courseId: c.id
+ }));
});
- el.innerHTML = html;
+ const totalH = (WK_END - WK_START) * PX_PER_MIN;
+
+ // Time labels
+ let timeLbls = '';
+ for (let m = WK_START; m <= WK_END; m += 60) {
+ const top = (m - WK_START) * PX_PER_MIN;
+ timeLbls += `
-
- ${esc(sem.name)}
- ${esc(sem.season)} · ${esc(String(sem.year))}
-
- ${passCr}/${totCr} cr.
-
-
-
+function showWeekCalendar(semId) {
+ const sem = S.semesters.find(x => x.id === semId);
+ if (!sem) return;
+ openModal(`
+
+
+
+
+
+
+
+ ${renderWeekGrid(semId)}
+
+
+
+ ${toHHMM(m)}
`;
+ }
+
+ // Gridlines (every 30 min, hour ones darker)
+ let gridLines = '';
+ for (let m = WK_START; m <= WK_END; m += 30) {
+ const top = (m - WK_START) * PX_PER_MIN;
+ gridLines += ``;
+ }
+
+ // Day columns
+ const dayCols = WK_DAYS.map((_, di) => {
+ const dayNum = di + 1;
+ const dayEvents = events.filter(e => e.day === dayNum);
+ const evHtml = dayEvents.map(ev => {
+ const t = Math.max(ev.startMin, WK_START);
+ const b = Math.min(ev.endMin, WK_END);
+ if (t >= b) return '';
+ const top = (t - WK_START) * PX_PER_MIN;
+ const height = Math.max((b - t) * PX_PER_MIN, 18);
+ const loc = ev.location ? `${esc(ev.location)}
` : '';
+ const onclick = ev._courseId
+ ? `showCourseModal('${ev._courseId}')`
+ : `showEventModal('${ev.semesterId}','${ev.id}')`;
+ return `
+ ${esc(ev.title)}${height > 30 ? `
${toHHMM(ev.startMin)}${loc}` : ''} +
`;
+ }).join('');
+ return `${toHHMM(ev.startMin)}${loc}` : ''} +
${gridLines}${evHtml}
`;
+ }).join('');
+
+ const dayHeaders = WK_DAYS.map(d => `${d}
`).join('');
+
+ return `
+ ${dayHeaders}
+
+
+
`;
+}
+
+function showEventModal(semId, id) {
+ const ev = id ? S.schedule.find(x => x.id === id) : null;
+ const defClr = ev ? ev.color : EV_COLORS[S.schedule.filter(e => e.semesterId === semId).length % EV_COLORS.length];
+ const dayOpts = WK_DAYS.map((d, i) =>
+ ``
+ ).join('');
+ const swatches = EV_COLORS.map(c =>
+ ``
+ ).join('');
+
+ openModal(`${timeLbls}
+ ${dayCols}
+
+
`);
+}
+
+function selectEvColor(color) {
+ const inp = document.getElementById('f-ev-color');
+ if (inp) inp.value = color;
+ document.querySelectorAll('.ev-swatch').forEach(s => {
+ const sel = s.dataset.color === color;
+ s.style.outline = sel ? '2px solid ' + color : 'none';
+ s.style.outlineOffset = sel ? '2px' : '0';
+ });
+}
+
+function saveEvent(semId, id) {
+ const title = document.getElementById('f-ev-title').value.trim();
+ if (!title) { alert('Please enter a title.'); return; }
+ const day = parseInt(document.getElementById('f-ev-day').value);
+ const loc = document.getElementById('f-ev-loc').value.trim();
+ const start = document.getElementById('f-ev-start').value;
+ const end = document.getElementById('f-ev-end').value;
+ const color = document.getElementById('f-ev-color').value || EV_COLORS[0];
+ const startMin = fromHHMM(start);
+ const endMin = fromHHMM(end);
+ if (endMin <= startMin) { alert('End time must be after start time.'); return; }
+ if (id) {
+ const i = S.schedule.findIndex(x => x.id === id);
+ if (i >= 0) S.schedule[i] = { ...S.schedule[i], title, day, startMin, endMin, color, location: loc, semesterId: semId };
+ } else {
+ S.schedule.push({ id: uid(), title, day, startMin, endMin, color, location: loc, semesterId: semId });
+ }
+ save(); showWeekCalendar(semId);
+}
+
+function deleteEvent(id, semId) {
+ if (!confirm('Delete this event?')) return;
+ S.schedule = S.schedule.filter(e => e.id !== id);
+ save(); showWeekCalendar(semId);
+}
+
+function importICS(input, semId) {
+ const file = input.files && input.files[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = function(e) {
+ const events = parseICS(e.target.result, semId);
+ if (!events.length) { alert('No weekly events found in this ICS file.'); return; }
+ if (!confirm(`Import ${events.length} event(s) into this week schedule?`)) return;
+ events.forEach(ev => S.schedule.push(ev));
+ save(); showWeekCalendar(semId);
+ };
+ reader.readAsText(file);
+ input.value = '';
+}
+
+function parseICS(text, semId) {
+ const events = [];
+ const DAY_MAP = { MO:1, TU:2, WE:3, TH:4, FR:5, SA:6, SU:7 };
+ const blocks = text.split(/BEGIN:VEVENT/i).slice(1);
+
+ blocks.forEach(block => {
+ const endIdx = block.search(/END:VEVENT/i);
+ if (endIdx < 0) return;
+ // Unfold continuation lines
+ const unfolded = block.slice(0, endIdx).replace(/\r?\n[ \t]/g, '');
+ const props = {};
+ unfolded.split(/\r?\n/).forEach(line => {
+ const ci = line.indexOf(':');
+ if (ci < 0) return;
+ const key = line.slice(0, ci).split(';')[0].trim().toUpperCase();
+ props[key] = line.slice(ci + 1).trim();
+ });
+
+ const summary = props['SUMMARY'];
+ const dtstart = props['DTSTART'];
+ const dtend = props['DTEND'];
+ const rrule = props['RRULE'];
+ if (!summary || !dtstart) return;
+
+ const tsm = dtstart.match(/T(\d{2})(\d{2})/);
+ const tem = dtend ? dtend.match(/T(\d{2})(\d{2})/) : null;
+ if (!tsm) return;
+ const startMin = +tsm[1] * 60 + +tsm[2];
+ const endMin = tem ? +tem[1] * 60 + +tem[2] : startMin + 60;
+
+ let days = [];
+ if (rrule) {
+ const rm = rrule.match(/BYDAY=([A-Z,]+)/i);
+ if (rm) days = rm[1].split(',').map(d => DAY_MAP[d.trim().toUpperCase()]).filter(Boolean);
+ }
+ if (!days.length) {
+ const dm = dtstart.match(/^(\d{4})(\d{2})(\d{2})/);
+ if (dm) {
+ const dow = new Date(+dm[1], +dm[2]-1, +dm[3]).getDay();
+ days = [dow === 0 ? 7 : dow];
+ }
+ }
+ const clr = EV_COLORS[events.length % EV_COLORS.length];
+ const loc = props['LOCATION'] || '';
+ days.forEach(day => events.push({
+ id: uid(), title: summary.replace(/\\n/g,' ').replace(/\\,/g,','),
+ day, startMin, endMin, color: clr, location: loc, semesterId: semId
+ }));
+ });
+ return events;
}
// ══════════════════════════════════════════════════════
@@ -864,21 +1503,54 @@ function overlayClick(e) { if (e.target.id === 'overlay') closeModal(); }
// ══════════════════════════════════════════════════════
// COURSE MODAL
// ══════════════════════════════════════════════════════
-function showCourseModal(id) {
+let _slots = []; // working slot list while course modal is open
+
+function renderSlotsUI() {
+ const chips = _slots.map((s, i) => {
+ const d = WK_DAYS[s.day - 1];
+ return `
+ ${d} ${toHHMM(s.startMin)}–${toHHMM(s.endMin)}
+
+ `;
+ }).join('');
+ return chips || `
+ ${ev ? 'Edit Event' : 'Add Event'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${swatches}
+
+
+
+ ${ev ? ``
+ : ``}
+
+
+ No schedule yet
`;
+}
+
+function addSlot() {
+ const day = parseInt(document.getElementById('f-slot-day').value);
+ const startMin = fromHHMM(document.getElementById('f-slot-start').value);
+ const endMin = fromHHMM(document.getElementById('f-slot-end').value);
+ if (endMin <= startMin) { alert('End must be after start.'); return; }
+ _slots.push({ day, startMin, endMin });
+ const el = document.getElementById('slots-list');
+ if (el) el.innerHTML = renderSlotsUI();
+}
+
+function removeSlot(i) {
+ _slots.splice(i, 1);
+ const el = document.getElementById('slots-list');
+ if (el) el.innerHTML = renderSlotsUI();
+}
+
+function showCourseModal(id, prefill = {}) {
const c = id ? S.courses.find(x => x.id === id) : null;
+ const curPlan = c ? (c.planId || '') : (prefill.planId || '');
+ const curBlock = c ? (c.blockId || '') : (prefill.blockId || '');
+ const curSubBlock = c ? (c.subBlockId || '') : (prefill.subBlockId || '');
+ const curSem = c ? (c.semesterId || '') : (prefill.semId || '');
+
const semOpts = S.semesters.map(s =>
- ``
+ ``
).join('');
const planOpts = `` + S.studyPlans.map(p =>
- ``
+ ``
).join('');
- const curPlan = c ? (c.planId || '') : '';
- const curBlock = c ? (c.blockId || '') : '';
const blockOpts = buildBlockOpts(curPlan, curBlock);
const isPF = c ? !!c.passFail : false;
+ _slots = c && c.slots ? c.slots.map(s => ({ ...s })) : [];
openModal(`
@@ -924,8 +1596,25 @@ function showCourseModal(id) {
+
+
+
+
-
+
+
+
+
+
${renderSlotsUI()}
+
+
+
+ –
+
+
+
@@ -935,19 +1624,42 @@ function showCourseModal(id) {
}
function buildBlockOpts(planId, selBlock) {
- if (!planId) return '';
+ if (!planId) return '';
const list = S.blocks.filter(b => b.planId === planId);
- if (!list.length) return '';
- return `` + list.map(b =>
- ``
+ if (!list.length) return '';
+ const minors = list.filter(b => b.role === 'minor');
+ return `` + list.map(b => {
+ const opts = list.filter(x => x.role === 'optional');
+ let prefix = '';
+ if (b.role === 'major') prefix = 'Major: ';
+ else if (b.role === 'minor') prefix = `Minor ${minors.indexOf(b) + 1}: `;
+ else if (b.role === 'optional') prefix = `Optional ${opts.indexOf(b) + 1}: `;
+ return ``;
+ }).join('');
+}
+
+function buildSubBlockOpts(blockId, selSubBlock) {
+ if (!blockId) return '';
+ const list = S.subBlocks.filter(sb => sb.blockId === blockId);
+ return `` + list.map(sb =>
+ ``
).join('');
}
function onPlanChange(pid) {
- const fg = document.getElementById('fg-block');
- const fs = document.getElementById('f-block');
+ const fg = document.getElementById('fg-block');
+ const fs = document.getElementById('f-block');
+ const fgSub = document.getElementById('fg-subblock');
if (pid) { fg.style.display = 'block'; fs.innerHTML = buildBlockOpts(pid, ''); }
else { fg.style.display = 'none'; }
+ if (fgSub) fgSub.style.display = 'none';
+}
+
+function onBlockChange(bid) {
+ const fgSub = document.getElementById('fg-subblock');
+ const fsSub = document.getElementById('f-subblock');
+ if (bid) { fgSub.style.display = 'block'; fsSub.innerHTML = buildSubBlockOpts(bid, ''); }
+ else { fgSub.style.display = 'none'; }
}
function onPassFailChange(checked) {
@@ -962,20 +1674,23 @@ function saveCourse(id) {
const gradeEl = document.getElementById('f-grade');
const gradeV = (!passFail && gradeEl) ? gradeEl.value : '';
const semId = document.getElementById('f-semester').value;
- const planId = document.getElementById('f-plan').value;
- const fg = document.getElementById('fg-block');
- const blockId = (fg && fg.style.display !== 'none') ? document.getElementById('f-block').value : '';
+ const planId = document.getElementById('f-plan').value;
+ const fg = document.getElementById('fg-block');
+ const blockId = (fg && fg.style.display !== 'none') ? document.getElementById('f-block').value : '';
+ const fgSub = document.getElementById('fg-subblock');
+ const subBlockId = (fgSub && fgSub.style.display !== 'none') ? document.getElementById('f-subblock').value : '';
if (!name) { alert('Please enter a course name.'); return; }
if (!credits || +credits < 0) { alert('Please enter valid credits.'); return; }
const grade = (!passFail && gradeV !== '') ? parseFloat(gradeV) : null;
+ const slots = [..._slots];
if (id) {
const i = S.courses.findIndex(c => c.id === id);
- if (i >= 0) S.courses[i] = { id, name, credits: +credits, semesterId: semId, grade, planId, blockId, passFail };
+ if (i >= 0) S.courses[i] = { id, name, credits: +credits, semesterId: semId, grade, planId, blockId, subBlockId, passFail, slots };
} else {
- S.courses.push({ id: uid(), name, credits: +credits, semesterId: semId, grade, planId, blockId, passFail });
+ S.courses.push({ id: uid(), name, credits: +credits, semesterId: semId, grade, planId, blockId, subBlockId, passFail, slots });
}
save(); closeModal(); render(page);
@@ -988,31 +1703,80 @@ function deleteCourse(id) {
}
// ══════════════════════════════════════════════════════
-// PLAN MODAL
+// PLAN MODALS
// ══════════════════════════════════════════════════════
-function showPlanModal(id) {
- const p = id ? S.studyPlans.find(x => x.id === id) : null;
+function showPlanTypeModal() {
openModal(`
`);
}
-function saveBlock(planId, id) {
- const name = document.getElementById('f-bname').value.trim();
- if (!name) { alert('Please enter a block name.'); return; }
- if (id) { const i = S.blocks.findIndex(x => x.id === id); if (i >= 0) S.blocks[i].name = name; }
- else S.blocks.push({ id: uid(), planId, name });
+function selectBlockColor(color) {
+ const inp = document.getElementById('f-bcolor');
+ if (inp) inp.value = color;
+ syncSwatchOutlines('cp-swatches', color);
+}
+
+function saveMinor(planId, id, role) {
+ const name = document.getElementById('f-bname').value.trim();
+ const color = document.getElementById('f-bcolor')?.value || '';
+ if (!name) { alert('Please enter a name.'); return; }
+ if (!id && role === 'major' && S.blocks.some(b => b.planId === planId && b.role === 'major')) {
+ alert('This plan already has a major. Only one major is allowed per plan.'); return;
+ }
+ if (id) {
+ const i = S.blocks.findIndex(x => x.id === id);
+ if (i >= 0) { S.blocks[i].name = name; S.blocks[i].role = role; S.blocks[i].color = color; }
+ } else {
+ S.blocks.push({ id: uid(), planId, name, role, color });
+ }
save(); closeModal(); render(page);
}
+function showSubBlockModal(blockId, id) {
+ const sb = id ? S.subBlocks.find(x => x.id === id) : null;
+ openModal(`
-
-
- ${p ? 'Edit Plan' : 'New Study Plan'}
+ New Study Plan
-
-
-
-
-
-
-
+
`);
}
-function savePlan(id) {
- const name = document.getElementById('f-pname').value.trim();
+function showPlanModal(id, cycleHint) {
+ const p = id ? S.studyPlans.find(x => x.id === id) : null;
+ const cycle = p ? p.cycle : (cycleHint || 'bachelor');
+ const label = cycle === 'master' ? 'Master' : 'Bachelor';
+ const count = S.studyPlans.filter(x => x.cycle === cycle && x.id !== id).length;
+ const defName = p ? esc(p.name) : `${label} ${count + 1}`;
+ const major = p ? S.blocks.find(b => b.planId === p.id && b.role === 'major') : null;
+ const defColor = planBaseColor(p || { color: null, id: '__new__' });
+
+ openModal(`
+
+
+
`);
+}
+
+function selectPlanColor(color) {
+ const inp = document.getElementById('f-pcolor');
+ if (inp) inp.value = color;
+ syncSwatchOutlines('cp-swatches', color);
+}
+
+function savePlan(id, cycle) {
+ const name = document.getElementById('f-pname').value.trim();
+ const majorName = document.getElementById('f-major').value.trim();
+ const color = document.getElementById('f-pcolor')?.value || '';
if (!name) { alert('Please enter a plan name.'); return; }
- if (id) { const i = S.studyPlans.findIndex(x => x.id === id); if (i >= 0) S.studyPlans[i].name = name; }
- else S.studyPlans.push({ id: uid(), name });
+ let planId = id;
+ if (id) {
+ const i = S.studyPlans.findIndex(x => x.id === id);
+ if (i >= 0) { S.studyPlans[i].name = name; S.studyPlans[i].cycle = cycle; S.studyPlans[i].color = color; }
+ if (majorName) {
+ const major = S.blocks.find(b => b.planId === id && b.role === 'major');
+ if (major) major.name = majorName;
+ else S.blocks.push({ id: uid(), planId: id, name: majorName, role: 'major' });
+ }
+ } else {
+ planId = uid();
+ S.studyPlans.push({ id: planId, name, cycle, color });
+ if (majorName) S.blocks.push({ id: uid(), planId, name: majorName, role: 'major' });
+ }
save(); closeModal(); render(page);
}
@@ -1025,38 +1789,116 @@ function deletePlan(id) {
}
// ══════════════════════════════════════════════════════
-// BLOCK MODAL
+// MINOR / BLOCK MODAL
// ══════════════════════════════════════════════════════
-function showBlockModal(planId, id) {
- const b = id ? S.blocks.find(x => x.id === id) : null;
+function showMinorModal(planId, id, role) {
+ const b = id ? S.blocks.find(x => x.id === id) : null;
+ const label = role === 'major' ? 'Major' : role === 'minor' ? 'Minor' : 'Optional Study';
+ const plan = S.studyPlans.find(p => p.id === planId);
+ const autoClr = (() => {
+ if (!b) {
+ if (role === 'major') return planBaseColor(plan);
+ if (role === 'minor') {
+ const cnt = S.blocks.filter(bk => bk.planId === planId && bk.role === 'minor').length;
+ return MINOR_PALETTE[cnt % MINOR_PALETTE.length];
+ }
+ const cnt = S.blocks.filter(bk => bk.planId === planId && bk.role === 'optional').length;
+ return MINOR_PALETTE[(cnt + 4) % MINOR_PALETTE.length];
+ }
+ return blockEffectiveColor({ ...b, color: '' });
+ })();
+ const curColor = b?.color || '';
+ const palette = role === 'major' ? PLAN_PALETTE : MINOR_PALETTE;
+
openModal(`
+ ${p ? 'Edit Plan' : `New ${label}`}
+
+
+
+
+
+
+
+
+
+
+
+
+ ${colorSwatches(PLAN_PALETTE, defColor, 'selectPlanColor', false, '')}
+
+
+
+
+
+
+
- ${b ? 'Edit Block' : 'New Block'}
+ ${b ? `Edit ${label}` : `Add ${label}`}
-
-
+
+
+
+
+
+ ${colorSwatches(palette, curColor, 'selectBlockColor', true, autoClr)}
+
-
+
+
`);
+}
+
+function saveSubBlock(blockId, id) {
+ const name = document.getElementById('f-sbname').value.trim();
+ if (!name) { alert('Please enter a block name.'); return; }
+ if (id) {
+ const i = S.subBlocks.findIndex(x => x.id === id);
+ if (i >= 0) S.subBlocks[i].name = name;
+ } else {
+ S.subBlocks.push({ id: uid(), blockId, name });
+ }
+ save(); closeModal(); render(page);
+}
+
+function deleteSubBlock(id) {
+ if (!confirm('Delete this block? Courses will lose their sub-block assignment.')) return;
+ S.subBlocks = S.subBlocks.filter(b => b.id !== id);
+ S.courses.forEach(c => { if (c.subBlockId === id) c.subBlockId = ''; });
+ save(); render(page);
+}
+
function deleteBlock(id) {
- if (!confirm('Delete this block? Courses will lose their block assignment.')) return;
+ if (!confirm('Delete this major/minor? All its blocks and course assignments will be cleared.')) return;
+ const sbIds = S.subBlocks.filter(sb => sb.blockId === id).map(sb => sb.id);
+ S.subBlocks = S.subBlocks.filter(sb => sb.blockId !== id);
+ S.courses.forEach(c => {
+ if (c.blockId === id) { c.blockId = ''; c.subBlockId = ''; }
+ else if (sbIds.includes(c.subBlockId)) { c.subBlockId = ''; }
+ });
S.blocks = S.blocks.filter(b => b.id !== id);
- S.courses.forEach(c => { if (c.blockId === id) c.blockId = ''; });
save(); render(page);
}
@@ -1073,21 +1915,20 @@ function showSemesterModal(id) {
${s ? 'Edit Semester' : 'New Semester'}
+ ${sb ? 'Edit Block' : 'Add Block'}
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
@@ -1097,18 +1938,11 @@ function showSemesterModal(id) {
`);
}
-function autoSemName() {
- const nameEl = document.getElementById('f-sname');
- const sea = document.getElementById('f-season').value;
- const yr = document.getElementById('f-syear').value;
- if (nameEl && sea && yr) nameEl.value = sea + ' ' + yr;
-}
-
function saveSemester(id) {
- const name = document.getElementById('f-sname').value.trim();
const season = document.getElementById('f-season').value;
- const year = parseInt(document.getElementById('f-syear').value, 10);
- if (!name) { alert('Please enter a semester name.'); return; }
+ const year = parseInt(document.getElementById('f-syear').value, 10);
+ const name = season + ' ' + year;
+ if (!season || !year) { alert('Please select a season and year.'); return; }
if (id) {
const i = S.semesters.findIndex(x => x.id === id);
if (i >= 0) S.semesters[i] = { ...S.semesters[i], name, season, year };
@@ -1125,6 +1959,66 @@ function deleteSemester(id) {
save(); render(page);
}
+// ══════════════════════════════════════════════════════
+// SETTINGS MODAL
+// ══════════════════════════════════════════════════════
+function settingsToggleRow(label, key) {
+ const on = !!settings[key];
+ return `
+ ${label}
+
+
`;
+}
+
+function showSettingsModal() {
+ openModal(`
+
`);
+}
+
+function updateSetting(key, val) {
+ const n = parseInt(val, 10);
+ if (n > 0) { settings[key] = n; saveSettings(); renderDash(); }
+}
+
+function toggleSetting(key, val) {
+ settings[key] = val;
+ saveSettings();
+ renderDash();
+ showSettingsModal();
+}
+
// ══════════════════════════════════════════════════════
// UTILITIES
// ══════════════════════════════════════════════════════
@@ -1144,21 +2038,31 @@ function showDataModal() {
Data Management
+ Settings
+
+
+ Credit Requirements
+
+
+
+
+
+
+
+
+
+
+ Semesters
+
+ ${settingsToggleRow('Show all seasons (Summer & Winter)', 'allSeasons')}
+
+ Study Plans
+
+ ${settingsToggleRow('Show "Optional Studies" section', 'showOptional')}
+
+
+
+
${total} course${total!==1?'s':''} · ${plans} plan${plans!==1?'s':''} · ${sems} semester${sems!==1?'s':''} stored locally
- Export
- Download a JSON backup you can re-import on any device.
- +Sync via QR Code
+ Show a QR code on this device, scan it on the other one.
+
+
+
+
- Import
- Load a previously exported JSON file. This will replace all current data.
+Export / Import JSON
+ Download a JSON backup or load one from a file.
+