Merge pull request #1150 from totaldebug/develop

New Release
totaldebug · Sep 15, 2023 · ec5376c · ec5376c
2 parents 0dc423d + 381b9fd
commit ec5376c
Show file tree

Hide file tree

Showing 16 changed files with 120 additions and 65 deletions.
diff --git a/docs/configuration/main.rst b/docs/configuration/main.rst
@@ -20,7 +20,7 @@ Main Options
  startDaysAhead            integer   optional        v0.7.3     ``0`` If you set more than 0, events will be loaded starting `x` days from today. For example `1` - the component will show events starting from tomorrow, if a negative number is used, events previous will be shown.
  showDescription           boolean   optional        v0.8.4     ``false`` Shows long description of event from Google Calendar.
  showNoEventsForToday      boolean   optional        v0.8.6     ``false`` Shows `No events for today` if no events, instead of omit the entry.
- sortByStartTime           boolean   optional        v0.9.0     ``false`` Sort events by start time first instead of grouping them by calendar.
+ sortBy                    boolean   optional                   ``start`` Sort events by start time. ``start|milestone|none``
  disableEventLink          boolean   optional        v0.10.0    ``false`` disables links in event title.
  disableLocationLink       boolean   optional        v0.10.0    ``false`` disables links in event location.
  linkTarget                string    optional        v0.11.0    ``_blank`` Allows custom target for links, default will open new tab.
@@ -43,4 +43,5 @@ Main Options
  titleLength               integer   optional        v7.4.0     Sets the maximum length of the event titles
  showAllDayEvents          boolean   optional                   ``true`` if set false will hide all events that are a full day
  offsetHeaderDate          boolean   optional                   ``false`` if set true the header date will match the startDaysAhead offset date
+ allDayBottom              boolean   optional                   ``false`` if set true all day events will show below other running events
 ========================= ========= =============== ========== ==========================================================================================================================================================================================================================
diff --git a/src/defaults.ts b/src/defaults.ts
@@ -22,7 +22,8 @@ export default {
 	startDaysAhead: 0, // shows the events starting on x days from today. Default 0.
 	showLastCalendarWeek: false, // always shows last line/week in calendar mode, even if it's not the current month
 
-	sortByStartTime: true, // sort first by calendar, then by time
+	sortBy: "start", // sort first by start time or milestone
+	allDayBottom: false, // show all day events at the bottom of the day
 	disableEventLink: false, // disables links to event calendar
 	disableLocationLink: false, // disables links to event calendar
 	disableCalMonthLink: false, // disables the link on the month name in calendar mode

diff --git a/src/editor.ts b/src/editor.ts
@@ -210,6 +210,7 @@ export class AtomicCalendarReviveEditor extends ScopedRegistryHost(LitElement) i
 
         const linkTargets: string[] = ['_blank', '_self', '_parent', '_top'];
         const defaultModes: string[] = ['Event', 'Calendar'];
+        const sortBy: string[] = ['start', 'milestone', 'none'];
 
         this.options = {
             entities: {
@@ -310,6 +311,14 @@ export class AtomicCalendarReviveEditor extends ScopedRegistryHost(LitElement) i
                         label: localize('main.fields.linkTarget'),
                         selected: linkTargets.indexOf(this._config.linkTarget || defaultConfig.linkTarget),
                     },
+                    {
+                        type: 'dropdown',
+                        items: sortBy,
+                        name: 'sortBy',
+                        section: 'main',
+                        label: localize('main.fields.sortBy'),
+                        selected: sortBy.indexOf(this._config.sortBy || defaultConfig.sortBy),
+                    },
                     {
                         type: 'text',
                         name: 'cardHeight',
@@ -333,12 +342,6 @@ export class AtomicCalendarReviveEditor extends ScopedRegistryHost(LitElement) i
                         name: 'showDeclined',
                         label: localize('main.fields.showDeclined'),
                     },
-                    {
-                        type: 'switch',
-                        name: 'sortByStartTime',
-                        label: localize('main.fields.sortByStartTime'),
-                        default: defaultConfig.sortByStartTime,
-                    },
                     {
                         type: 'switch',
                         name: 'hideFinishedEvents',
@@ -397,6 +400,12 @@ export class AtomicCalendarReviveEditor extends ScopedRegistryHost(LitElement) i
                         label: localize('main.fields.offsetHeaderDate'),
                         default: defaultConfig.offsetHeaderDate,
                     },
+                    {
+                        type: 'switch',
+                        name: 'allDayBottom',
+                        label: localize('main.fields.allDayBottom'),
+                        default: defaultConfig.allDayBottom,
+                    },
                 ],
             },
             event: {

diff --git a/src/functions/sort_events.ts b/src/functions/sort_events.ts
@@ -0,0 +1,69 @@
+import dayjs from 'dayjs';
+
+// Function to sort events
+export default function sortEvents(events, config) {
+    const currentDateTime = dayjs(); // Current date and time
+
+    events.sort((a, b) => {
+        const isRunningA = currentDateTime.isBetween(a.startDateTime, a.endDateTime);
+        const isRunningB = currentDateTime.isBetween(b.startDateTime, b.endDateTime);
+
+        if (isRunningA && !isRunningB) {
+            return -1;
+        } else if (!isRunningA && isRunningB) {
+            return 1;
+        } else {
+            const timeDiffA = Math.min(
+                Math.abs(a.startDateTime.diff(currentDateTime)),
+                Math.abs(a.endDateTime.diff(currentDateTime))
+            );
+
+            const timeDiffB = Math.min(
+                Math.abs(b.startDateTime.diff(currentDateTime)),
+                Math.abs(b.endDateTime.diff(currentDateTime))
+            );
+
+            return timeDiffA - timeDiffB;
+        }
+    });
+
+    // Sort all-day events by entity and title
+    const allDayEvents = events.filter(event => event.isAllDay);
+
+    allDayEvents.sort((a, b) => {
+        if (a.entity !== b.entity) {
+            return a.entity.localeCompare(b.entity);
+        } else {
+            return a.title.localeCompare(b.title);
+        }
+    });
+
+    // Combine sorted all-day and non-all-day events
+    const sortedEvents = [...events];
+    sortedEvents.forEach((event, index) => {
+        const allDayIndex = allDayEvents.findIndex(adEvent => adEvent.id === event.id);
+        if (allDayIndex !== -1) {
+            sortedEvents.splice(index, 1);
+            sortedEvents.push(allDayEvents[allDayIndex]);
+        }
+    });
+
+    // Apply all-day sorting based on the 'config.allDayBottom' boolean
+    if (config.allDayBottom) {
+        sortedEvents.sort((a, b) => b.startDateTime.diff(a.startDateTime));
+    } else {
+        sortedEvents.sort((a, b) => a.startDateTime.diff(b.startDateTime));
+    }
+
+    if (config.sortBy === "milestone") {
+        // Move finished events to the bottom when sorting by milestone
+        sortedEvents.sort((a, b) => {
+            if (a.isFinished !== b.isFinished) {
+                return a.isFinished ? 1 : -1;
+            }
+            return 0;
+        });
+    }
+
+    return sortedEvents;
+}
diff --git a/src/index.ts b/src/index.ts
@@ -608,8 +608,8 @@ export class AtomicCalendarRevive extends LitElement {
    						style="${dayStyleOtherMonth}${dayStyleSat}${dayStyleSun}${dayStyleClicked} --cal-grid-color: ${this._config
 						.calGridColor}; --cal-day-color: ${this._config.calDayColor}"
    					>
-   						<div class="calDay ${dayClassToday}">
-   							<div style="position: relative; top: 5%;">${day.date.date()}</div>
+   						<div class="calDay">
+   							<div class="${dayClassToday}" style="position: relative; top: 5%;">${day.date.date()}</div>
    							<div>${handleCalendarIcons(day)}</div>
    						</div>
    					</td>

diff --git a/src/lib/event.func.ts b/src/lib/event.func.ts
@@ -5,6 +5,7 @@ import { atomicCardConfig } from '../types/config';
 import { EntityConfig } from '../types';
 import CalendarDay from './calendar.class';
 import EventClass from './event.class';
+import sortEvents from '../functions/sort_events';
 
 dayjs.extend(customParseFormat);
 dayjs.extend(isBetween);
@@ -199,37 +200,6 @@ export async function getAllEvents(start: dayjs.Dayjs, end: dayjs.Dayjs, config:
 	return { failedEvents, events: processEvents(allEvents, config, mode) };
 }
 
-/**
- * Sorts all day events into order of entities
- * @param {Array<Events>} list of events
- * @param {Array<EntityConfig>} all entities for card
- * @return {Promise<Array<EventClass>>}
- */
-function sortEventsByEntity(events: EventClass[], entities: EntityConfig[]): any[] {
-	const allDayEvents = events.filter((event) => event.isAllDayEvent);
-	const otherEvents = events.filter((event) => !event.isAllDayEvent);
-
-	allDayEvents.sort((event1, event2) => {
-		const entity1 = entities.find(
-			(entity) => entity.entity === event1.entity.entity_id
-		);
-		const entity2 = entities.find(
-			(entity) => entity.entity === event2.entity.entity_id
-		);
-		if (!entity1 || !entity2) {
-			return 0;
-		}
-		const index1 = entities.indexOf(entity1);
-		const index2 = entities.indexOf(entity2);
-		if (index1 === index2) {
-			return event1.title.localeCompare(event2.title);
-		}
-		return index1 - index2;
-	});
-
-	return [...allDayEvents, ...otherEvents];
-}
-
 /**
  * converts all calendar events to CalendarEvent objects
  * @param {Array<Events>} list of raw caldav calendar events
@@ -347,10 +317,8 @@ export function processEvents(allEvents: any[], config: atomicCardConfig, mode:
 		newEvents = updatedEvents;
 	}
 
-	// sort events by date starting with soonest
-	if (config.sortByStartTime) {
-		newEvents.sort((a: EventClass, b: EventClass) => (a.startDateTime.isBefore(b.startDateTime) ? -1 : 1));
-	}
+	// sort events
+	newEvents = sortEvents(newEvents, config);
 
 	// check if the maxEventCount is set, if it is we will remove any events
 	// that go over this limit, unless softLimit is set, in which case we
@@ -359,6 +327,5 @@ export function processEvents(allEvents: any[], config: atomicCardConfig, mode:
 		(config.softLimit && newEvents.length > config.maxEventCount + config.softLimit))) {
 		newEvents.length = config.maxEventCount;
 	}
-	newEvents = sortEventsByEntity(newEvents, config.entities)
 	return newEvents;
 }
diff --git a/src/localize/languages/da.json b/src/localize/languages/da.json
@@ -37,7 +37,8 @@
             "showLoader": "Vis animeret indlæsning",
             "showDate": "Vis dato på kort",
             "showDeclined": "Vis afviste aftaler",
-            "sortByStartTime": "Sorter på start tid",
+            "sortBy": "Sorter på",
+            "allDayBottom": "Vis heldagsbegivenheder nederst",
             "hideFinishedEvents": "Skjul overståede aftaler",
             "dateFormat": "Dato format",
             "hoursFormat": "Time format",

diff --git a/src/localize/languages/de.json b/src/localize/languages/de.json
@@ -36,7 +36,8 @@
             "showLoader": "Ladeanimation anzeigen",
             "showDate": "Datum mitanzeigen",
             "showDeclined": "Abgelehnte Einträge anzeigen",
-            "sortByStartTime": "Nach Startzeit sortieren",
+            "sortBy": "Sortiere nach",
+            "allDayBottom": "Ganztägige Ereignisse unten anzeigen",
             "hideFinishedEvents": "Beendete Einträge ausblenden",
             "dateFormat": "Datumsformat",
             "hoursFormat": "Stundenformat",

diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -37,7 +37,8 @@
 			"showLoader": "Show loader animation",
 			"showDate": "Show date on card",
 			"showDeclined": "Show declined events",
-			"sortByStartTime": "Sort by start time",
+			"sortBy": "Sort by",
+			"allDayBottom": "Show all day events at the bottom",
 			"hideFinishedEvents": "Hide finished events",
 			"dateFormat": "Date format",
 			"hoursFormat": "Hours format",

diff --git a/src/localize/languages/et.json b/src/localize/languages/et.json
@@ -14,7 +14,7 @@
 		"common": {
 			"previous": "Eelmine",
 			"next": "Järgmine",
-            "week": "Nädal"
+			"week": "Nädal"
 		}
 	},
 	"errors": {
@@ -36,7 +36,8 @@
 			"showLoader": "Kuva laadimisel animatsiooni",
 			"showDate": "Kuva tänane kuupäev",
 			"showDeclined": "Kuva summutatud sündmused",
-			"sortByStartTime": "Järjesta ajaliselt",
+			"sortBy": "Sorteerima",
+			"allDayBottom": "Kuva allosas kogu päeva sündmused",
 			"hideFinishedEvents": "Peida lõppenud sündmused",
 			"dateFormat": "Kuupäeva vorming",
 			"hoursFormat": "Kellaaja vorming",

diff --git a/src/localize/languages/fi.json b/src/localize/languages/fi.json
@@ -37,7 +37,8 @@
 			"showLoader": "Näytä latausanimaatio",
 			"showDate": "Näytä päivämäärä kortissa",
 			"showDeclined": "Näytä hylätyt tapahtumat",
-			"sortByStartTime": "Lajittele alkamisajan mukaan",
+			"sortBy": "Järjestä",
+			"allDayBottom": "Näytä koko päivän tapahtumat alareunassa",
 			"hideFinishedEvents": "Piilota valmiit tapahtumat",
 			"dateFormat": "Päivämäärämuoto",
 			"hoursFormat": "Tuntien muoto",

diff --git a/src/localize/languages/fr.json b/src/localize/languages/fr.json
@@ -14,7 +14,7 @@
 		"common": {
 			"previous": "Précédent",
 			"next": "Suivant",
-            "week": "Semaine"
+			"week": "Semaine"
 		}
 	},
 	"errors": {
@@ -37,7 +37,8 @@
 			"showLoader": "Afficher l'animation de chargement",
 			"showDate": "Afficher la date sur la carte",
 			"showDeclined": "Afficher les événements déclinés",
-			"sortByStartTime": "Trier par date de début",
+			"sortBy": "Trier par",
+			"allDayBottom": "Afficher les événements de la journée en bas",
 			"hideFinishedEvents": "Cacher les événements terminés",
 			"dateFormat": "Format de date",
 			"hoursFormat": "Format des heures",

diff --git a/src/localize/languages/nb.json b/src/localize/languages/nb.json
@@ -37,7 +37,8 @@
 			"showLoader": "Vis animasjon ved innlasting",
 			"showDate": "Vis dato på kort",
 			"showDeclined": "Vis avviste hendelser",
-			"sortByStartTime": "Sortér på starttid",
+			"sortBy": "Sorter efter",
+			"allDayBottom": "Vis heldagshendelser nederst",
 			"hideFinishedEvents": "Skjul avsluttede hendelser",
 			"dateFormat": "Datoformat",
 			"hoursFormat": "Timesformat",

diff --git a/src/localize/languages/sl.json b/src/localize/languages/sl.json
@@ -37,7 +37,8 @@
             "showLoader": "Pokaži animacijo nalagalnika",
             "showDate": "Prikaži datum na kartici",
             "showDeclined": "Prikaži zavrnjene dogodke",
-            "sortByStartTime": "Razvrsti po času začetka",
+            "sortBy": "Razvrsti po",
+            "allDayBottom": "Pokaži celodnevne dogodke na dnu",
             "hideFinishedEvents": "Skrij končane dogodke",
             "dateFormat": "Format datuma",
             "hoursFormat": "Format ur",

diff --git a/src/localize/languages/sv.json b/src/localize/languages/sv.json
@@ -14,7 +14,7 @@
 		"common": {
 			"previous": "Föregående",
 			"next": "Nästa",
-            "week": "Vecka"
+			"week": "Vecka"
 		}
 	},
 	"errors": {
@@ -36,7 +36,8 @@
 			"showLoader": "Visa animation för laddning",
 			"showDate": "Visa datum på kortet",
 			"showDeclined": "Visa nekade händelser",
-			"sortByStartTime": "Sortera efter starttid",
+			"sortBy": "Sortera efter",
+			"allDayBottom": "Visa heldagshändelser längst ner",
 			"hideFinishedEvents": "Hide finished events Dölj avslutade händelser",
 			"dateFormat": "Datumformat",
 			"hoursFormat": "Timformat",

diff --git a/src/style.ts b/src/style.ts
@@ -299,17 +299,16 @@ export const styles: CSSResultGroup = css`
 			margin: auto;
 		}
 
-		.calDay.currentDay {
+		.currentDay {
+			position: relative;
+			width: 20px;
 			height: 20px;
 			background-color: var(--primary-color);
+			color: var(--text-primary-color) !important;
+			text-align: center;
+			line-height: 20px;
 			border-radius: 50%;
 			display: inline-block;
-			text-align: center;
-			white-space: nowrap;
-			width: max-content;
-			min-width: 20px;
-			line-height: 140%;
-			color: var(--text-primary-color) !important;
 		}
 
 		tr.cal {