Split start/end location fields to Events

public/single.html

@@ -43,8 +43,12 @@
 
 			<div class='event-location-container my-4'>
 				<h3 class='text-2xl'>Location</h3>
-				<p class='event-location'>
-				</p>
+				<div class='event-location-start'>
+					<span>Start location: </span>
+				</div>
+				<div class='event-location-end'>
+					<span>End location: </span>
+				</div>
 			</div>
 
 			<div class='event-notes-container my-4'>

public/single.js

@@ -56,10 +56,17 @@ async function main() {
 	$event.querySelector('.event-start .event-datetime').innerText = event.start;
 	$event.querySelector('.event-end .event-datetime').innerText = event.end ? event.end : 'N/A';
 
-	if (event.location)
-		$event.querySelector('.event-location').appendChild(getDirectionLink(event.location));
+	if (event.startLocation) {
+		$event.querySelector('.event-location-start').appendChild(getDirectionLink(event.startLocation));
+
+		if (event.endLocation)
+			$event.querySelector('.event-location-end').appendChild(getDirectionLink(event.endLocation));
 		else
-		$event.querySelector('.event-location').innerText = 'There is no location specified for this event';
+			$event.querySelector('.event-location-end').innerText = '';
+	} else {
+		$event.querySelector('.event-location-start').innerText = 'There are no locations specified for this event';
+		$event.querySelector('.event-location-end').innerText = '';
+	}
 
 	$event.querySelector('.event-notes').innerText = event.notes ?? 'There are no notes for this event';
 

src/collections/Events.ts

@@ -110,9 +110,25 @@ const Events: CollectionConfig = {
 			]
 		},
 		{
-			name: 'location',
-			label: 'Location',
-			type: 'text'
+			type: 'row',
+			fields: [
+				{
+					name: 'startLocation',
+					label: 'Start Location',
+					type: 'text',
+					admin: {
+						width: '50%',
+					}
+				},
+				{
+					name: 'endLocation',
+					label: 'End Location',
+					type: 'text',
+					admin: {
+						width: '50%',
+					}
+				},
+			]
 		},
 		{
 			name: 'notes',

src/payload-types.ts

@@ -41,7 +41,8 @@ export interface Event {
   };
   start: string;
   end?: string;
-  location?: string;
+  startLocation?: string;
+  endLocation?: string;
   notes?: string;
   uploads: {
     upload: string | Upload;