reservations_display/src/ipad.ts

import 'core-js/stable/url';
import 'core-js/stable/function';

import './ipad.html';
import './modal.css';

console.log = function (message) {
  let div = document.createElement('div');
  div.textContent = message;
  document.getElementById('errorContainer')!.appendChild(div);
};
console.error = console.log;
console.info = console.log;

window.onerror = function (message, url, line) {
  console.log(`${message} ${url} ${line}`);
};

document.body.addEventListener('touchmove', (e) => e.preventDefault(), {
  passive: false,
});

const calendarImg = document.getElementById('calendar')! as HTMLImageElement;
const spinner = document.getElementById('loadingSpinner')!;
const errorModal = document.getElementById('errorModal')!;
let loadTimeoutId = -1;

calendarImg.addEventListener('load', () => {
  clearTimeout(loadTimeoutId);
  spinner.style.display = 'none';
  errorModal.style.display = 'none';
});

calendarImg.addEventListener('error', (event) => {
  spinner.style.display = 'none';
  errorModal.style.display = '';
  const message = errorModal.querySelector('.modal-message')!;
  message.textContent = `Failed to fetch events. Displayed events may not be accurate.`;
});

function refresh() {
  spinner.style.display = '';

  const url = new URL('/ipad.png', window.location.href);
  url.searchParams.set(
    'viewport',
    `${window.innerWidth}x${window.innerHeight}x${window.devicePixelRatio}`
  );

  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('tool')) {
    url.searchParams.set('tool', urlParams.get('tool')!);
  }

  calendarImg.src = url.toString();
  calendarImg.width = window.innerWidth;
  calendarImg.height = window.innerHeight;

  loadTimeoutId = window.setTimeout(() => {
    spinner.style.display = 'none';
    errorModal.style.display = '';
    const message = errorModal.querySelector('.modal-message')!;
    message.textContent =
      'Timed out loading events. Displayed events may not be accurate.';
  }, 11000);
}

window.addEventListener('load', () => refresh());

// refresh data every five minutes
window.setInterval(refresh, 5 * 60 * 1000);

// refresh page every hour
window.setInterval(() => window.location.reload(), 60 * 60 * 1000);