diff --git a/src/EventEmitter.ts b/src/EventEmitter.ts index 78a2173..728baef 100644 --- a/src/EventEmitter.ts +++ b/src/EventEmitter.ts @@ -1,13 +1,13 @@ -export type EventHandler = () => void | Promise; +export type EventHandler = (value: T) => void | Promise; -export class EventEmitter { - private listeners: EventHandler[] = []; +export class EventEmitter { + private listeners: EventHandler[] = []; - public addListener(l: EventHandler) { + public addListener(l: EventHandler) { this.listeners.push(l); } - public fire() { - this.listeners.forEach((h) => h()); + public fire(value: T) { + this.listeners.forEach((h) => h(value)); } } diff --git a/src/content/add-billability-chart.ts b/src/content/add-billability-chart.ts index e8d541a..abcc24b 100644 --- a/src/content/add-billability-chart.ts +++ b/src/content/add-billability-chart.ts @@ -38,10 +38,12 @@ async function doAddBillabilityChart(date: Date, user: User) { chartContainer = createBillabilityCard(addTimePanel); } + updateLoadingState(true); const [times, company] = await Promise.all([ getTimes(user.id, date, GET_TIMES_WEEKS), api.getCompany(), ]); + updateLoadingState(false); const settings = getSettings(); @@ -77,7 +79,8 @@ function createBillabilityCard(addTimePanel: Element) { spinner.className = 'title-date-spinner'; const spinnerIcon = document.createElement('i'); spinner.appendChild(spinnerIcon); - spinnerIcon.className = 'fa fa-circle-o-notch fa-spin'; + spinnerIcon.id = 'billability-loading'; + spinnerIcon.className = 'fa fa-circle-o-notch fa-spin hidden'; const toggleViewBtn = document.createElement('button'); @@ -103,6 +106,15 @@ function createBillabilityCard(addTimePanel: Element) { return chartContainer; } +function updateLoadingState(loading: boolean) { + const spinner = document.getElementById('billability-loading'); + if (spinner) { + loading + ? spinner.classList.remove('hidden') + : spinner.classList.add('hidden'); + } +} + /** * Gets times from TimeChimp for the given weeks in the past, and filters out the ones for the given user id. * Optionally a date can be provided, by default it will get times for the current date. diff --git a/src/content/index.ts b/src/content/index.ts index d8bb4ce..6596029 100644 --- a/src/content/index.ts +++ b/src/content/index.ts @@ -10,7 +10,7 @@ import { settingsUpdateEvent } from './settings'; setDefaultOptions({ // Weeks start on Monday. weekStartsOn: 1, - // Week number 1 should contain the 4th on January. + // Week number 1 should contain the 4th of January. firstWeekContainsDate: 4, });