Fix sorting event dates. Refactor source links to keep things DRY.

jonkristian · May 19, 2023 · 50d99bd · 50d99bd
1 parent 0f85dd3
commit 50d99bd
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 140 deletions.
diff --git a/dist/mediatracker-card.js b/dist/mediatracker-card.js
diff --git a/src/mediatracker-card.ts b/src/mediatracker-card.ts
@@ -92,7 +92,7 @@ export class MediaTrackerCard extends LitElement implements LovelaceCard {
     dayjs.locale(lang);
 
     this._fetchCalendarEvents();
-    const days = groupEventsByDay(this._events);
+    const groups = groupEventsByDay(this._events);
 
     return html`
     <ha-card>
@@ -102,14 +102,14 @@ export class MediaTrackerCard extends LitElement implements LovelaceCard {
         </div>
 
         <div class="mt-calendar${this._config.constrict_height?' constrict':''}">
-          ${days ? html`
-            ${days.map(
-              (events) => html`
+          ${groups ? html`
+            ${groups.map(
+              (group) => html`
                 <div class="mt-day">
                   <mediatracker-card-events
                     .hass=${this.hass}
-                    .date=${events[0].start}
-                    .events="${events}"
+                    .date=${group.date}
+                    .events="${group.events}"
                     .config="${this._config}"
                   ></mediatracker-card-events>
                 </div>

diff --git a/src/templates/event-backdrop.ts b/src/templates/event-backdrop.ts
@@ -7,6 +7,7 @@ import updateLocale from "dayjs/plugin/updateLocale";
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 import setupCustomlocalize from "../localize/localize";
+import { getSourceLinks } from "../utils";
 
 @customElement("mediatracker-event-backdrop")
 export class MediaTrackerCardEvent extends LitElement {
@@ -42,7 +43,7 @@ export class MediaTrackerCardEvent extends LitElement {
           </header>
           <div class="mt-event-details">
             ${this.rating && data.tmdb_rating ? html`<span>${customLocalize("card.rating")}: ${data.tmdb_rating.toFixed(1)}</span>`:''}
-            ${this.get_source_links(data.sources)}
+            ${getSourceLinks(this.source_links, data.sources)}
           </div>
           ${showDescription == true || this.description == 'all'
             ? html`
@@ -54,23 +55,6 @@ export class MediaTrackerCardEvent extends LitElement {
     `;
   }
 
-  get_source_links(sources) {
-    if(this.source_links == 'all') {
-      return html`
-        ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-        ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
-        ${sources.imdb ? html`<a class="mt-event-source" href="${sources.imdb}">IMDB</a>`:''}
-      `
-    }
-    if(this.source_links == 'primary') {
-      return html`
-        ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-        ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
-      `
-    }
-    return html``;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       .mt-event {

diff --git a/src/templates/event-poster.ts b/src/templates/event-poster.ts
@@ -7,6 +7,7 @@ import updateLocale from "dayjs/plugin/updateLocale";
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 import setupCustomlocalize from "../localize/localize";
+import { getSourceLinks } from "../utils";
 
 @customElement("mediatracker-event-poster")
 export class MediaTrackerCardEvent extends LitElement {
@@ -45,7 +46,7 @@ export class MediaTrackerCardEvent extends LitElement {
           </header>
           <div class="mt-event-details">
             ${this.rating && data.tmdb_rating ? html`<span>${customLocalize("card.rating")}: ${data.tmdb_rating.toFixed(1)}</span>`:''}
-            ${this.get_source_links(data.sources)}
+            ${getSourceLinks(this.source_links, data.sources)}
           </div>
           ${showDescription == true || this.description == 'all'
             ? html`
@@ -57,23 +58,6 @@ export class MediaTrackerCardEvent extends LitElement {
     `;
   }
 
-  get_source_links(sources) {
-    if(this.source_links == 'all') {
-      return html`
-        ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-        ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
-        ${sources.imdb ? html`<a class="mt-event-source" href="${sources.imdb}">IMDB</a>`:''}
-      `
-    }
-    if(this.source_links == 'primary') {
-      return html`
-        ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-        ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
-      `
-    }
-    return html``;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       .mt-event {

diff --git a/src/templates/event.ts b/src/templates/event.ts
@@ -7,6 +7,7 @@ import updateLocale from "dayjs/plugin/updateLocale";
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 import setupCustomlocalize from "../localize/localize";
+import { getSourceLinks } from "../utils";
 
 @customElement("mediatracker-event")
 export class MediaTrackerCardEvent extends LitElement {
@@ -43,7 +44,7 @@ export class MediaTrackerCardEvent extends LitElement {
 
           <div class="mt-event-details">
             ${this.rating && data.tmdb_rating ? html`Rating: ${data.tmdb_rating.toFixed(1)}`:''}
-            ${this.get_source_links(data.sources)}
+            ${getSourceLinks(this.source_links, data.sources)}
           </div>
 
           ${showDescription == true || this.description == 'all'
@@ -56,23 +57,6 @@ export class MediaTrackerCardEvent extends LitElement {
     `;
   }
 
-  get_source_links(sources) {
-    if(this.source_links == 'all') {
-      return html`
-        ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-        ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
-        ${sources.imdb ? html`<a class="mt-event-source" href="${sources.imdb}">IMDB</a>`:''}
-      `
-    }
-    if(this.source_links == 'primary') {
-      return html`
-        ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-        ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
-      `
-    }
-    return html``;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       .mt-event {

diff --git a/src/types.ts b/src/types.ts
@@ -56,4 +56,10 @@ export interface MediaTrackerCalendarEvent {
   description: string;
   location: string;
   [key: string]: any;
-}
+}
+
+export interface MediaTrackerCalendarEventSources {
+  igdb?: string;
+  tmdb?: string;
+  imdb?: string;
+};
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,6 +1,6 @@
+import { html } from "lit";
 import { HomeAssistant } from "custom-card-helpers";
-
-import type { MediaTrackerCalendar, MediaTrackerCalendarEvent } from "./types";
+import type { MediaTrackerCalendar, MediaTrackerCalendarEvent, MediaTrackerCalendarEventSources } from "./types";
 
 import dayjs from "dayjs";
 import "dayjs/locale/nb";
@@ -79,6 +79,7 @@ const getCalendarDate = (dateObj: any): string | undefined => {
   return undefined;
 };
 
+
 export const getCalendars = (hass): MediaTrackerCalendar[] =>
   Object.keys(hass.states)
     .sort()
@@ -89,23 +90,30 @@ export const getCalendars = (hass): MediaTrackerCalendar[] =>
 
 
 export function groupEventsByDay(events) {
-  // grouping events by days, returns object with days and events
-  const ev: any[] = [].concat(...events);
-  const groupsOfEvents = ev.reduce(function (r, a: { start: number }) {
-    r[a.start] = r[a.start] || [];
-    r[a.start].push(a);
-    return r;
+  const groups = events.reduce((groups, event) => {
+    const date = event.start;
+    if (!groups[date]) {
+      groups[date] = [];
+    }
+    groups[date].push(event);
+    return groups;
   }, {});
 
-  let groupedEvents = Object.keys(groupsOfEvents).map(function (k) {
-    return groupsOfEvents[k];
+  const sortedStarts = Object.keys(groups).sort((a, b) => {
+    const dateA = new Date(a).getTime();
+    const dateB = new Date(b).getTime();
+    return dateA - dateB;
   });
 
-  groupedEvents = groupedEvents;
+  const groupArrays = sortedStarts.map(date => ({
+    date,
+    events: groups[date]
+  }));
 
-  return groupedEvents;
+  return groupArrays;
 }
 
+
 export const COLORS = [
   "#44739e",
   "#984ea3",
@@ -181,11 +189,20 @@ export function getGraphColorByIndex(
   );
 }
 
-export function getMediaUrl(mediaItem) {
-  const audibleDomain = 'com';
-  mediaItem.imdb = `https://www.imdb.com/title/${mediaItem.imdbId}`
-  mediaItem.tmdb = `https://www.themoviedb.org/${mediaItem.mediaType}/${mediaItem.tmdbId}`
-  mediaItem.igdb = `https://www.igdb.com/games/${mediaItem.title.toLowerCase().replaceAll(' ', '-')}`
-  mediaItem.openlibrary = `https://openlibrary.org${mediaItem.openlibraryId}`
-  mediaItem.audible = `https://audible.${audibleDomain}/pd/${mediaItem.audibleId}?overrideBaseCountry=true&ipRedirectOverride=true`
+
+export function getSourceLinks(type: string, sources: MediaTrackerCalendarEventSources) {
+  if(type == 'all') {
+    return html`
+      ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
+      ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
+      ${sources.imdb ? html`<a class="mt-event-source" href="${sources.imdb}">IMDB</a>`:''}
+    `
+  }
+  if(type == 'primary') {
+    return html`
+      ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
+      ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
+    `
+  }
+  return html``;
 }