// Google Calendar-Style Healthwatcher Calendar // Flat JS pattern - no IIFE wrapper var state = { currentDate: new Date(), selectedDate: new Date(), view: 'month', events: [] }; var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; var DAYS_SHORT = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; function isSameDay(d1, d2) { return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate(); } function isToday(date) { return isSameDay(date, new Date()); } function formatTime(date) { var h = date.getHours(); var m = date.getMinutes(); var ampm = h >= 12 ? 'PM' : 'AM'; h = h % 12; h = h ? h : 12; return h + ':' + (m < 10 ? '0' + m : m) + ' ' + ampm; } function getStartOfWeek(date) { var d = new Date(date); d.setDate(d.getDate() - d.getDay()); return d; } function getEventsForDate(date) { return state.events.filter(function(e) { return isSameDay(new Date(e.start), date); }); } function createEl(tag, className, text) { var el = document.createElement(tag); if (className) el.className = className; if (text) el.textContent = text; return el; } // === Mini Calendar === function renderMiniCalendar() { var container = document.getElementById('gc-mini-calendar'); if (!container) return; container.innerHTML = ''; var year = state.currentDate.getFullYear(); var month = state.currentDate.getMonth(); var firstDay = new Date(year, month, 1).getDay(); var daysInMonth = new Date(year, month + 1, 0).getDate(); var daysInPrevMonth = new Date(year, month, 0).getDate(); // Header var header = createEl('div', 'gc-mini-month-header'); var prevBtn = createEl('button', 'gc-mini-nav-btn', '<'); prevBtn.id = 'gc-mini-prev'; var title = createEl('span', 'gc-mini-month-title', MONTHS[month] + ' ' + year); var nextBtn = createEl('button', 'gc-mini-nav-btn', '>'); nextBtn.id = 'gc-mini-next'; header.appendChild(prevBtn); header.appendChild(title); header.appendChild(nextBtn); container.appendChild(header); // Weekdays var weekdays = createEl('div', 'gc-mini-weekdays'); for (var i = 0; i < 7; i++) { weekdays.appendChild(createEl('div', null, DAYS_SHORT[i])); } container.appendChild(weekdays); // Days var days = createEl('div', 'gc-mini-days'); // Previous month for (var i = 0; i < firstDay; i++) { var day = daysInPrevMonth - firstDay + i + 1; var dayEl = createEl('div', 'gc-mini-day other-month', day); dayEl.dataset.date = new Date(year, month - 1, day).toISOString(); days.appendChild(dayEl); } // Current month for (var day = 1; day <= daysInMonth; day++) { var date = new Date(year, month, day); var dayEl = createEl('div', 'gc-mini-day', day); if (isToday(date)) dayEl.classList.add('today'); if (isSameDay(date, state.selectedDate)) dayEl.classList.add('selected'); dayEl.dataset.date = date.toISOString(); days.appendChild(dayEl); } // Next month var totalCells = 42; var currentCells = firstDay + daysInMonth; for (var i = 1; i <= totalCells - currentCells; i++) { var dayEl = createEl('div', 'gc-mini-day other-month', i); dayEl.dataset.date = new Date(year, month + 1, i).toISOString(); days.appendChild(dayEl); } container.appendChild(days); // Event listeners prevBtn.onclick = function() { state.currentDate = new Date(year, month - 1, 1); render(); }; nextBtn.onclick = function() { state.currentDate = new Date(year, month + 1, 1); render(); }; days.querySelectorAll('.gc-mini-day').forEach(function(el) { el.onclick = function() { state.selectedDate = new Date(el.dataset.date); state.currentDate = new Date(state.selectedDate); render(); }; }); } // === Month View === function renderMonthView() { var grid = document.getElementById('gc-month-grid'); if (!grid) return; grid.innerHTML = ''; var year = state.currentDate.getFullYear(); var month = state.currentDate.getMonth(); var firstDay = new Date(year, month, 1).getDay(); var daysInMonth = new Date(year, month + 1, 0).getDate(); var daysInPrevMonth = new Date(year, month, 0).getDate(); // Previous month days for (var i = 0; i < firstDay; i++) { var day = daysInPrevMonth - firstDay + i + 1; grid.appendChild(renderDayCell(new Date(year, month - 1, day), true)); } // Current month days for (var day = 1; day <= daysInMonth; day++) { grid.appendChild(renderDayCell(new Date(year, month, day), false)); } // Next month days var totalCells = 42; var currentCells = firstDay + daysInMonth; for (var i = 1; i <= totalCells - currentCells; i++) { grid.appendChild(renderDayCell(new Date(year, month + 1, i), true)); } // Event click handlers grid.querySelectorAll('.gc-event').forEach(function(el) { el.onclick = function(e) { e.stopPropagation(); var eventId = el.dataset.eventId; var event = state.events.find(function(ev) { return ev.id === eventId; }); if (event) showEventDrawer(event); }; }); // Day cell click handlers grid.querySelectorAll('.gc-day-cell').forEach(function(el) { el.onclick = function() { state.selectedDate = new Date(el.dataset.date); state.view = 'day'; render(); }; }); } function renderDayCell(date, isOtherMonth) { var events = getEventsForDate(date); var cell = createEl('div', 'gc-day-cell'); if (isOtherMonth) cell.classList.add('other-month'); if (isToday(date)) cell.classList.add('today'); cell.dataset.date = date.toISOString(); var numDiv = createEl('div', 'gc-day-number', date.getDate()); cell.appendChild(numDiv); var eventsDiv = createEl('div', 'gc-day-events'); var maxEvents = 3; for (var i = 0; i < Math.min(events.length, maxEvents); i++) { eventsDiv.appendChild(renderEventPill(events[i])); } if (events.length > maxEvents) { var more = createEl('div', 'gc-more-events', (events.length - maxEvents) + ' more'); eventsDiv.appendChild(more); } cell.appendChild(eventsDiv); return cell; } function renderEventPill(event) { var pill = createEl('div', 'gc-event type-' + (event.type || 'appointment'), event.title); pill.dataset.eventId = event.id; return pill; } // === Week View === function renderWeekView() { var headersEl = document.getElementById('gc-week-headers'); var bodyEl = document.getElementById('gc-week-body'); if (!headersEl || !bodyEl) return; headersEl.innerHTML = ''; bodyEl.innerHTML = ''; var weekStart = getStartOfWeek(state.currentDate); // Headers for (var i = 0; i < 7; i++) { var date = new Date(weekStart); date.setDate(date.getDate() + i); var header = createEl('div', 'gc-day-header'); if (isToday(date)) header.classList.add('today'); header.appendChild(createEl('div', 'gc-day-header-name', DAYS[i])); header.appendChild(createEl('div', 'gc-day-header-date', date.getDate())); headersEl.appendChild(header); } // Time slots var slots = createEl('div', 'gc-time-slots'); for (var h = 0; h < 24; h++) { var label = h === 0 ? '12 AM' : (h < 12 ? h + ' AM' : (h === 12 ? '12 PM' : (h - 12) + ' PM')); slots.appendChild(createEl('div', 'gc-time-slot-label', label)); } bodyEl.appendChild(slots); // Day columns var columns = createEl('div', 'gc-day-columns'); for (var i = 0; i < 7; i++) { var date = new Date(weekStart); date.setDate(date.getDate() + i); columns.appendChild(renderDayColumn(date)); } bodyEl.appendChild(columns); } function renderDayColumn(date) { var events = getEventsForDate(date); var col = createEl('div', 'gc-day-column'); col.dataset.date = date.toISOString(); // Hour blocks for (var h = 0; h < 24; h++) { var block = createEl('div', 'gc-hour-block'); block.dataset.hour = h; col.appendChild(block); } // Events events.forEach(function(event) { var startDate = new Date(event.start); var endDate = new Date(event.end || event.start); var startHour = startDate.getHours() + startDate.getMinutes() / 60; var endHour = endDate.getHours() + endDate.getMinutes() / 60; var top = startHour * 48; var height = Math.max((endHour - startHour) * 48, 24); var eventEl = createEl('div', 'gc-time-event type-' + (event.type || 'appointment')); eventEl.style.top = top + 'px'; eventEl.style.height = height + 'px'; eventEl.dataset.eventId = event.id; var strong = document.createElement('strong'); strong.textContent = event.title; eventEl.appendChild(strong); eventEl.appendChild(document.createElement('br')); eventEl.appendChild(document.createTextNode(formatTime(startDate))); col.appendChild(eventEl); }); return col; } // === Day View === function renderDayView() { var headerEl = document.getElementById('gc-day-header'); var bodyEl = document.getElementById('gc-day-body'); if (!headerEl || !bodyEl) return; headerEl.innerHTML = ''; bodyEl.innerHTML = ''; var date = state.selectedDate; var header = createEl('div', 'gc-day-header'); header.style.flex = '1'; if (isToday(date)) header.classList.add('today'); header.appendChild(createEl('div', 'gc-day-header-name', DAYS[date.getDay()])); header.appendChild(createEl('div', 'gc-day-header-date', date.getDate())); headerEl.appendChild(header); // Time slots var slots = createEl('div', 'gc-time-slots'); for (var h = 0; h < 24; h++) { var label = h === 0 ? '12 AM' : (h < 12 ? h + ' AM' : (h === 12 ? '12 PM' : (h - 12) + ' PM')); slots.appendChild(createEl('div', 'gc-time-slot-label', label)); } bodyEl.appendChild(slots); var columns = createEl('div', 'gc-day-columns'); columns.appendChild(renderDayColumn(date)); bodyEl.appendChild(columns); } // === Event Drawer === function showEventDrawer(event) { var drawer = document.getElementById('gc-event-drawer'); var body = document.getElementById('gc-drawer-body'); if (!drawer || !body) return; body.innerHTML = ''; var startDate = new Date(event.start); // Type badge var typeLabels = { appointment: 'Appointment', screening: 'Health Screening', suggested: 'Suggested', reminder: 'Reminder', followup: 'Follow-up' }; var typeColors = { appointment: '#4285f4', screening: '#9c27b0', suggested: '#ff9800', reminder: '#4caf50', followup: '#4285f4' }; var badge = createEl('span', 'gc-event-badge'); badge.textContent = typeLabels[event.type] || 'Appointment'; badge.style.cssText = 'display:inline-block;padding:0.25rem 0.75rem;border-radius:1rem;font-size:0.75rem;font-weight:600;color:#fff;background:' + (typeColors[event.type] || '#4285f4') + ';margin-bottom:1rem;'; body.appendChild(badge); // Title var title = createEl('h3', null, event.title); title.style.cssText = 'margin:0 0 1.5rem 0;font-size:1.25rem;font-weight:600;color:var(--text-primary);'; body.appendChild(title); // Info card var infoCard = createEl('div', 'gc-event-info'); infoCard.style.cssText = 'background:var(--bg-hover);border-radius:0.5rem;padding:1rem;margin-bottom:1.5rem;'; // Date row var dateRow = createEl('div', 'gc-info-row'); dateRow.style.cssText = 'display:flex;align-items:center;margin-bottom:0.75rem;'; var dateIcon = createEl('span'); dateIcon.innerHTML = ''; dateIcon.style.cssText = 'margin-right:0.75rem;color:var(--text-subtle);display:flex;'; var dateText = createEl('span', null, DAYS[startDate.getDay()] + ', ' + MONTHS[startDate.getMonth()] + ' ' + startDate.getDate() + ', ' + startDate.getFullYear()); dateRow.appendChild(dateIcon); dateRow.appendChild(dateText); infoCard.appendChild(dateRow); // Time row var timeRow = createEl('div', 'gc-info-row'); timeRow.style.cssText = 'display:flex;align-items:center;'; var timeIcon = createEl('span'); timeIcon.innerHTML = ''; timeIcon.style.cssText = 'margin-right:0.75rem;color:var(--text-subtle);display:flex;'; var timeText = createEl('span', null, formatTime(startDate)); timeRow.appendChild(timeIcon); timeRow.appendChild(timeText); infoCard.appendChild(timeRow); body.appendChild(infoCard); // Description if (event.description) { var descLabel = createEl('div', null, 'Notes'); descLabel.style.cssText = 'font-size:0.75rem;font-weight:600;color:var(--text-subtle);text-transform:uppercase;margin-bottom:0.5rem;'; body.appendChild(descLabel); var descText = createEl('p', null, event.description); descText.style.cssText = 'margin:0 0 1.5rem 0;color:var(--text-primary);line-height:1.5;'; body.appendChild(descText); } // Action buttons var btnContainer = createEl('div', 'gc-event-actions'); btnContainer.style.cssText = 'display:flex;gap:0.75rem;margin-top:1rem;'; if (event.type === 'suggested') { var confirmBtn = createEl('button', 'btn btn-primary', 'Confirm Appointment'); confirmBtn.style.flex = '1'; confirmBtn.onclick = function() { window.confirmAppointment(event.id); }; btnContainer.appendChild(confirmBtn); } else { var editBtn = createEl('button', 'btn btn-primary', 'Edit'); editBtn.style.flex = '1'; editBtn.onclick = function() { showEditEventDrawer(event); }; btnContainer.appendChild(editBtn); var deleteBtn = createEl('button', 'btn btn-secondary', 'Delete'); deleteBtn.style.cssText = 'flex:1;color:#dc3545;border-color:#dc3545;'; deleteBtn.onclick = function() { deleteEvent(event.id); }; btnContainer.appendChild(deleteBtn); } body.appendChild(btnContainer); drawer.classList.remove('hidden'); drawer.classList.add('visible'); } function showEditEventDrawer(event) { var drawer = document.getElementById('gc-event-drawer'); var body = document.getElementById('gc-drawer-body'); if (!drawer || !body) return; body.innerHTML = ''; var startDate = new Date(event.start); // Title var heading = createEl('h3', null, 'Edit Appointment'); heading.style.cssText = 'margin:0 0 1.5rem 0;font-size:1.25rem;font-weight:600;'; body.appendChild(heading); // Form var form = createEl('div', 'gc-edit-form'); // Type var typeLabel = createEl('label', null, 'Type'); typeLabel.style.cssText = 'display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem;'; form.appendChild(typeLabel); var typeSelect = document.createElement('select'); typeSelect.id = 'edit-apt-type'; typeSelect.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;background:var(--bg-card);'; var types = [{v:'appointment',t:'Regular Appointment'},{v:'screening',t:'Health Screening'},{v:'followup',t:'Follow-up'},{v:'reminder',t:'Reminder'}]; types.forEach(function(opt) { var o = document.createElement('option'); o.value = opt.v; o.textContent = opt.t; if (opt.v === event.type) o.selected = true; typeSelect.appendChild(o); }); form.appendChild(typeSelect); // Title var titleLabel = createEl('label', null, 'Title'); titleLabel.style.cssText = 'display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem;'; form.appendChild(titleLabel); var titleInput = document.createElement('input'); titleInput.type = 'text'; titleInput.id = 'edit-apt-title'; titleInput.value = event.title || ''; titleInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;'; form.appendChild(titleInput); // Date var dateLabel = createEl('label', null, 'Date'); dateLabel.style.cssText = 'display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem;'; form.appendChild(dateLabel); var dateInput = document.createElement('input'); dateInput.type = 'date'; dateInput.id = 'edit-apt-date'; dateInput.value = startDate.toISOString().split('T')[0]; dateInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;'; form.appendChild(dateInput); // Time var timeLabel = createEl('label', null, 'Time'); timeLabel.style.cssText = 'display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem;'; form.appendChild(timeLabel); var timeInput = document.createElement('input'); timeInput.type = 'time'; timeInput.id = 'edit-apt-time'; var hours = startDate.getHours().toString().padStart(2, '0'); var mins = startDate.getMinutes().toString().padStart(2, '0'); timeInput.value = hours + ':' + mins; timeInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;'; form.appendChild(timeInput); // Notes var notesLabel = createEl('label', null, 'Notes'); notesLabel.style.cssText = 'display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem;'; form.appendChild(notesLabel); var notesInput = document.createElement('textarea'); notesInput.id = 'edit-apt-notes'; notesInput.rows = 3; notesInput.value = event.description || ''; notesInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;resize:vertical;'; form.appendChild(notesInput); body.appendChild(form); // Buttons var btnContainer = createEl('div', 'gc-edit-actions'); btnContainer.style.cssText = 'display:flex;gap:0.75rem;margin-top:1rem;'; var cancelBtn = createEl('button', 'btn btn-secondary', 'Cancel'); cancelBtn.style.flex = '1'; cancelBtn.onclick = function() { showEventDrawer(event); }; btnContainer.appendChild(cancelBtn); var saveBtn = createEl('button', 'btn btn-primary', 'Save Changes'); saveBtn.style.flex = '1'; saveBtn.onclick = function() { saveEventEdit(event.id); }; btnContainer.appendChild(saveBtn); body.appendChild(btnContainer); } function saveEventEdit(eventId) { var typeEl = document.getElementById('edit-apt-type'); var titleEl = document.getElementById('edit-apt-title'); var dateEl = document.getElementById('edit-apt-date'); var timeEl = document.getElementById('edit-apt-time'); var notesEl = document.getElementById('edit-apt-notes'); if (!titleEl.value.trim()) { Swal.fire({ icon: 'warning', title: 'Missing Information', text: 'Please enter a title.' }); return; } var updatedData = { type: typeEl.value, title: titleEl.value.trim(), date: dateEl.value, time: timeEl.value, notes: notesEl.value.trim() }; // Call update processor updatedData.id = eventId; phoros.processor('o2quLvGNpEQiTe34v', updatedData, function(err, res) { if (err || !res || !res.success) { Swal.fire({ icon: 'error', title: 'Update Failed', timer: 2000, showConfirmButton: false }); return; } var eventIndex = state.events.findIndex(function(e) { return e.id === eventId; }); if (eventIndex !== -1 && res.data) { state.events[eventIndex].type = res.data.type; state.events[eventIndex].title = res.data.title; state.events[eventIndex].start = res.data.start; state.events[eventIndex].description = res.data.description; } Swal.fire({ icon: 'success', title: 'Appointment Updated', timer: 1500, showConfirmButton: false }); hideEventDrawer(); render(); }); } function deleteEvent(eventId) { Swal.fire({ title: 'Delete Appointment?', text: 'This action cannot be undone.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#dc3545', confirmButtonText: 'Delete' }).then(function(result) { if (result.isConfirmed) { phoros.processor('BYT83EAALwuf47TSF', { id: eventId }, function(err, res) { state.events = state.events.filter(function(e) { return e.id !== eventId; }); Swal.fire({ icon: 'success', title: 'Deleted', timer: 1500, showConfirmButton: false }); hideEventDrawer(); render(); }); } }); } function hideEventDrawer() { var drawer = document.getElementById('gc-event-drawer'); if (drawer) { drawer.classList.remove('visible'); setTimeout(function() { drawer.classList.add('hidden'); }, 300); } } window.gcHideDrawer = hideEventDrawer; window.gcDrawerBackdropClick = function(e) { if (e.target.id === 'gc-event-drawer') { hideEventDrawer(); } }; // === Title Update === function updateTitle() { var titleEl = document.getElementById('gc-title'); if (!titleEl) return; var year = state.currentDate.getFullYear(); var month = state.currentDate.getMonth(); if (state.view === 'month') { titleEl.textContent = MONTHS[month] + ' ' + year; } else if (state.view === 'week') { var weekStart = getStartOfWeek(state.currentDate); var weekEnd = new Date(weekStart); weekEnd.setDate(weekEnd.getDate() + 6); titleEl.textContent = MONTHS[weekStart.getMonth()] + ' ' + weekStart.getDate() + ' - ' + (weekEnd.getMonth() !== weekStart.getMonth() ? MONTHS[weekEnd.getMonth()] + ' ' : '') + weekEnd.getDate() + ', ' + year; } else { titleEl.textContent = MONTHS[state.selectedDate.getMonth()] + ' ' + state.selectedDate.getDate() + ', ' + state.selectedDate.getFullYear(); } } // === Main Render === function render() { updateTitle(); renderMiniCalendar(); document.querySelectorAll('.gc-view').forEach(function(el) { el.classList.add('hidden'); }); document.querySelectorAll('.gc-view-btn').forEach(function(el) { el.classList.toggle('active', el.dataset.view === state.view); }); if (state.view === 'month') { document.getElementById('gc-month-view').classList.remove('hidden'); renderMonthView(); } else if (state.view === 'week') { document.getElementById('gc-week-view').classList.remove('hidden'); renderWeekView(); } else if (state.view === 'day') { document.getElementById('gc-day-view').classList.remove('hidden'); renderDayView(); } } // === Load Data === function loadAppointments() { phoros.processor('gG7sfZtPDwTM4cw95', {}, function(err, res) { if (!err && res && res.success && Array.isArray(res.data)) { state.events = res.data; } render(); }); } // === Navigation === function goToToday() { state.currentDate = new Date(); state.selectedDate = new Date(); render(); } window.gcGoToToday = goToToday; function navigate(direction) { if (state.view === 'month') { state.currentDate.setMonth(state.currentDate.getMonth() + direction); } else if (state.view === 'week') { state.currentDate.setDate(state.currentDate.getDate() + (7 * direction)); } else { state.selectedDate.setDate(state.selectedDate.getDate() + direction); state.currentDate = new Date(state.selectedDate); } render(); } window.gcNavigate = navigate; window.gcSetView = function(view) { state.view = view; render(); }; // === Initialize === function init() { loadAppointments(); } // === New Appointment Drawer === window.showNewAppointmentDrawer = function() { var drawer = document.getElementById('gc-event-drawer'); var body = document.getElementById('gc-drawer-body'); if (!drawer || !body) return; body.innerHTML = ''; // Title body.appendChild(createEl('h3', null, 'New Appointment')); // Form var form = createEl('div', 'gc-appointment-form'); form.style.marginTop = '1rem'; // Appointment Type var typeLabel = createEl('label', null, 'Type'); typeLabel.style.display = 'block'; typeLabel.style.marginBottom = '0.25rem'; typeLabel.style.fontWeight = '500'; form.appendChild(typeLabel); var typeSelect = document.createElement('select'); typeSelect.id = 'new-apt-type'; typeSelect.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;'; var types = [{v:'appointment',t:'Regular Appointment'},{v:'screening',t:'Health Screening'},{v:'followup',t:'Follow-up'}]; types.forEach(function(opt) { var o = document.createElement('option'); o.value = opt.v; o.textContent = opt.t; typeSelect.appendChild(o); }); form.appendChild(typeSelect); // Title/Reason var titleLabel = createEl('label', null, 'Reason for Visit'); titleLabel.style.display = 'block'; titleLabel.style.marginBottom = '0.25rem'; titleLabel.style.fontWeight = '500'; form.appendChild(titleLabel); var titleInput = document.createElement('input'); titleInput.type = 'text'; titleInput.id = 'new-apt-title'; titleInput.placeholder = 'e.g., Annual checkup'; titleInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;'; form.appendChild(titleInput); // Date var dateLabel = createEl('label', null, 'Preferred Date'); dateLabel.style.display = 'block'; dateLabel.style.marginBottom = '0.25rem'; dateLabel.style.fontWeight = '500'; form.appendChild(dateLabel); var dateInput = document.createElement('input'); dateInput.type = 'date'; dateInput.id = 'new-apt-date'; dateInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;'; var tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); dateInput.value = tomorrow.toISOString().split('T')[0]; form.appendChild(dateInput); // Time var timeLabel = createEl('label', null, 'Preferred Time'); timeLabel.style.display = 'block'; timeLabel.style.marginBottom = '0.25rem'; timeLabel.style.fontWeight = '500'; form.appendChild(timeLabel); var timeInput = document.createElement('input'); timeInput.type = 'time'; timeInput.id = 'new-apt-time'; timeInput.value = '09:00'; timeInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;'; form.appendChild(timeInput); // Notes var notesLabel = createEl('label', null, 'Additional Notes'); notesLabel.style.display = 'block'; notesLabel.style.marginBottom = '0.25rem'; notesLabel.style.fontWeight = '500'; form.appendChild(notesLabel); var notesInput = document.createElement('textarea'); notesInput.id = 'new-apt-notes'; notesInput.rows = 3; notesInput.placeholder = 'Any symptoms or concerns...'; notesInput.style.cssText = 'width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:1rem;box-sizing:border-box;resize:vertical;'; form.appendChild(notesInput); body.appendChild(form); // Submit button var submitBtn = createEl('button', 'btn btn-primary', 'Request Appointment'); submitBtn.style.width = '100%'; submitBtn.onclick = function() { submitNewAppointment(); }; body.appendChild(submitBtn); drawer.classList.remove('hidden'); drawer.classList.add('visible'); } function submitNewAppointment() { var typeEl = document.getElementById('new-apt-type'); var titleEl = document.getElementById('new-apt-title'); var dateEl = document.getElementById('new-apt-date'); var timeEl = document.getElementById('new-apt-time'); var notesEl = document.getElementById('new-apt-notes'); if (!titleEl.value.trim()) { Swal.fire({ icon: 'warning', title: 'Missing Information', text: 'Please enter a reason for your visit.' }); return; } var appointmentData = { type: typeEl.value, title: titleEl.value.trim(), date: dateEl.value, time: timeEl.value, notes: notesEl.value.trim() }; phoros.processor('si3DmXnDpdeDyHyJj', appointmentData, function(err, res) { if (!err && res && res.success) { Swal.fire({ icon: 'success', title: 'Request Submitted', text: 'Your appointment request has been submitted.', timer: 2500, showConfirmButton: false }); hideEventDrawer(); loadAppointments(); } else { Swal.fire({ icon: 'error', title: 'Request Failed', text: 'Could not submit appointment request.', timer: 2000, showConfirmButton: false }); } }); } window.confirmAppointment = function(eventId) { phoros.processor('si3DmXnDpdeDyHyJj', { eventId: eventId }, function(err, res) { if (!err && res && res.success) { Swal.fire({ icon: 'success', title: 'Appointment Confirmed', timer: 2000, showConfirmButton: false }); hideEventDrawer(); loadAppointments(); } else { Swal.fire({ icon: 'error', title: 'Error', text: res && res.error || 'Failed to confirm appointment' }); } }); }; init(); // ========== IMAGE CAPTURE FUNCTIONALITY ========== var capturedImageData = null; var extractedReadingData = null; function openImageCaptureModal() { $("#image-capture-modal").removeClass("hidden"); clearCapturedImage(); } function closeImageCaptureModal() { $("#image-capture-modal").addClass("hidden"); clearCapturedImage(); } function handleImageSelect(input) { if (input.files && input.files[0]) { var file = input.files[0]; var reader = new FileReader(); reader.onload = function(e) { capturedImageData = e.target.result; $("#captured-image-preview").attr("src", capturedImageData); $("#image-preview-container").show(); processImageWithAI(); }; reader.readAsDataURL(file); } } function clearCapturedImage() { capturedImageData = null; extractedReadingData = null; $("#captured-image-preview").attr("src", ""); $("#image-preview-container").hide(); $("#extraction-status").hide(); $("#extracted-reading").hide(); $("#reading-display").empty(); $("#save-reading-btn").prop("disabled", true); } function processImageWithAI() { if (!capturedImageData) { Swal.fire({ icon: "error", title: "Error", text: "No image captured" }); return; } var deviceType = $("#device-type").val(); $("#extraction-status").show(); $("#extracted-reading").hide(); $("#save-reading-btn").prop("disabled", true); phoros.processor("2rygyuujTxRQeK5pY", { type: "extract", image: capturedImageData, device_type: deviceType }, function(err, result) { $("#extraction-status").hide(); if (err || !result || !result.success) { Swal.fire({ icon: "error", title: "Extraction Failed", text: result && result.error ? result.error : "Could not extract reading from image" }); return; } extractedReadingData = result.data; displayExtractedReading(extractedReadingData, deviceType); $("#extracted-reading").show(); $("#save-reading-btn").prop("disabled", false); }); } function displayExtractedReading(data, deviceType) { var container = $("#reading-display"); container.empty(); var mainValue = document.createElement("span"); var unitSpan = document.createElement("span"); unitSpan.className = "reading-unit"; if (deviceType === "blood_pressure") { mainValue.textContent = (data.systolic || "--") + "/" + (data.diastolic || "--"); unitSpan.textContent = " mmHg"; container.append(mainValue).append(unitSpan); if (data.pulse) { var pulseDiv = document.createElement("div"); pulseDiv.style.cssText = "font-size: 1rem; font-weight: 500; margin-top: 0.5rem;"; pulseDiv.textContent = "Pulse: " + data.pulse + " bpm"; container.append(pulseDiv); } } else if (deviceType === "glucose") { mainValue.textContent = data.value || "--"; unitSpan.textContent = " " + (data.unit || "mg/dL"); container.append(mainValue).append(unitSpan); if (data.timing) { var timingDiv = document.createElement("div"); timingDiv.style.cssText = "font-size: 0.875rem; color: var(--text-subtle); margin-top: 0.25rem;"; timingDiv.textContent = data.timing; container.append(timingDiv); } } else if (deviceType === "thermometer") { mainValue.textContent = data.value || "--"; unitSpan.textContent = " " + String.fromCharCode(176) + (data.unit || "F"); container.append(mainValue).append(unitSpan); } else if (deviceType === "weight") { mainValue.textContent = data.value || "--"; unitSpan.textContent = " " + (data.unit || "lbs"); container.append(mainValue).append(unitSpan); } else if (deviceType === "pulse_oximeter") { mainValue.textContent = "SpO2: " + (data.spo2 || "--") + "%"; container.append(mainValue); if (data.pulse) { var pulseDiv = document.createElement("div"); pulseDiv.style.cssText = "font-size: 1rem; font-weight: 500; margin-top: 0.5rem;"; pulseDiv.textContent = "Pulse: " + data.pulse + " bpm"; container.append(pulseDiv); } } if (data.confidence) { var confDiv = document.createElement("div"); confDiv.className = "reading-confidence"; confDiv.textContent = "Confidence: " + Math.round(data.confidence * 100) + "%"; container.append(confDiv); } if (data.device_detected) { var deviceDiv = document.createElement("div"); deviceDiv.className = "reading-confidence"; deviceDiv.textContent = "Device: " + data.device_detected; container.append(deviceDiv); } } function saveExtractedReading() { if (!extractedReadingData) { Swal.fire({ icon: "error", title: "Error", text: "No reading to save" }); return; } var deviceType = $("#device-type").val(); phoros.processor("2rygyuujTxRQeK5pY", { type: "save", reading: extractedReadingData, device_type: deviceType, image: capturedImageData }, function(err, result) { if (err || !result || !result.success) { Swal.fire({ icon: "error", title: "Save Failed", text: result && result.error ? result.error : "Could not save reading" }); return; } Swal.fire({ icon: "success", title: "Reading Saved", text: "Your health reading has been recorded.", timer: 2000, showConfirmButton: false }); closeImageCaptureModal(); if (typeof loadHealthReadings === "function") { loadHealthReadings(); } }); } $(document).on("keydown", function(e) { if (e.key === "Escape") { closeImageCaptureModal(); } }); $(document).on("click", "#image-capture-modal", function(e) { if (e.target === this) { closeImageCaptureModal(); } }); // ========== HEALTH READINGS DISPLAY ========== var healthReadingsCache = {}; function loadHealthReadings() { phoros.processor("2rygyuujTxRQeK5pY", { type: "list" }, function(err, result) { if (err || !result || !result.success) { console.log("No saved readings found or error loading"); return; } if (result.data && result.data.readings) { healthReadingsCache = result.data.readings; updateHealthCards(); } }); } function updateHealthCards() { // Update each card with the most recent reading var cardMappings = { "Blood Pressure": "blood_pressure", "Heart Rate": "blood_pressure", // pulse from BP "Steps Count": null, // Not from image capture "Sleep Hours": null, // Not from image capture "Calories Burned": null // Not from image capture }; $(".card").each(function() { var cardTitle = $(this).find("h2").text(); var deviceType = cardMappings[cardTitle]; if (deviceType && healthReadingsCache[deviceType]) { var reading = healthReadingsCache[deviceType]; var valueEl = $(this).find(".metric-value"); if (cardTitle === "Blood Pressure" && reading.systolic && reading.diastolic) { valueEl.html(reading.systolic + "/" + reading.diastolic + ' mmHg'); } else if (cardTitle === "Heart Rate" && reading.pulse) { valueEl.html(reading.pulse + ' bpm'); } } }); } // Load readings on page init (after small delay to ensure page is ready) Meteor.setTimeout(function() { loadHealthReadings(); }, 1000);

Healthwatcher

January 2026

Capture Health Reading

Extracted Reading