feat(online-event): enable endingDate config when creating a new onli…

…ne event

src/app/common/scss/components.scss

@@ -242,6 +242,10 @@
             min-width: 75px;
             max-width: 25%;
         }
+
+        &[type="datetime-local"] {
+            max-width: calc(60% - 2rem);
+        }
     }
 }
 

src/app/common/services/server.service.ts

@@ -67,15 +67,15 @@ export class ServerService {
         racesLimit: number,
         serverId: string,
         trackId: string,
-        endDate: Date | null
+        endingDate: Date | null
     ): Observable<RecordModel> {
         return from(
             environment.pb.collection('events').create({
                 name: name,
                 racesLimit: racesLimit,
                 server: serverId,
                 track: trackId,
-                endDate: endDate
+                endingDate: endingDate
             })
         );
     }

src/app/common/utils/date.utils.ts

@@ -9,7 +9,7 @@ export class DateUtils {
         const duration = intervalToDuration({ start: date, end: reference });
         const timeDiff = date.getTime() - reference.getTime();
         if (timeDiff < 0) {
-            return 'closed';
+            return 'Closed';
         }
 
         if (duration.years || duration.months || duration.weeks || Math.abs(duration.days!) > 1) {
@@ -21,6 +21,6 @@ export class DateUtils {
         if (Math.abs(duration.minutes!) > 1) {
             return `${Math.floor(timeDiff / DateUtils.MINUTE)} min.`;
         }
-        return 'closing';
+        return 'Closing';
     }
 }

src/app/pages/create-online-event/create-online-event.component.html

@@ -69,6 +69,15 @@
                 />
             </div>
             }
+            <div class="retro-form-line">
+                <div class="label">Ending date</div>
+                <input
+                    type="datetime-local"
+                    class="retro-input"
+                    formControlName="endingDate"
+                    placeholder="Optionnal"
+                />
+            </div>
         </div>
     </form>
 </div>

src/app/pages/create-online-event/create-online-event.component.ts

@@ -16,6 +16,7 @@ interface OnlineEventForm {
     type: FormControl<'time-attack' | 'race' | null>;
     races: FormControl<number | null>;
     track: FormControl<string | null>;
+    endingDate: FormControl<string | null>;
 }
 
 @Component({
@@ -49,13 +50,19 @@ export class CreateOnlineEventComponent extends Destroyable {
 
     protected createEvent() {
         if (this.form.valid) {
+            let endingDate = null;
+            try {
+                endingDate = this.form.value.endingDate ? new Date(this.form.value.endingDate) : null;
+            } catch (error) {
+                console.warn('Unable to determine ending date, will note use it', error);
+            }
             this.serverService
                 .addEvent$(
                     this.form.value.name!,
                     this.form.value.races ?? 0,
                     this.serverId,
                     this.form.value.track!,
-                    null
+                    endingDate
                 )
                 .pipe(
                     tap(() => this.goBack()),
@@ -70,7 +77,8 @@ export class CreateOnlineEventComponent extends Destroyable {
             name: new FormControl(null, [Validators.required, Validators.minLength(3), Validators.maxLength(16)]),
             type: new FormControl('race', Validators.required),
             races: new FormControl(2, [Validators.required, Validators.min(1), Validators.max(10)]),
-            track: new FormControl(null, Validators.required)
+            track: new FormControl(null, Validators.required),
+            endingDate: new FormControl(null)
         });
     }
 

src/app/pages/server/server.component.html

@@ -62,7 +62,7 @@
         ); track event.id) {
         <div
             class="retro-item"
-            [class.inactive]="event.endingDateLabel === 'closed'"
+            [class.inactive]="event.endingDateLabel === 'Closed'"
             routerLink="/online-event/{{ event.id }}"
         >
             <div class="name">

src/app/pages/server/server.component.scss

@@ -35,7 +35,6 @@
             color: var(--color-surface);
             border-radius: var(--border-radius-large);
             font-size: var(--text-mini);
-            text-transform: capitalize;
 
             .icon {
                 scale: 0.7;