From 4eecbc1cfdf30c0d0d5f77c5608265bd4648ed78 Mon Sep 17 00:00:00 2001
From: "Daniel Nguyen (NAVWAR)" <daniel.nguyen13.civ@us.navy.mil>
Date: Tue, 5 Sep 2023 15:37:28 -0700
Subject: [PATCH] Adding seconds to calendar widget

---
 .../timeline-card.component.html              |  6 ++---
 .../timeline-card/timeline-card.component.ts  | 10 +++++++-
 .../trial-creator.component.html              |  6 ++---
 .../trial-creator/trial-creator.component.ts  | 24 +++++++------------
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.html b/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.html
index 6c181b1..b7de9d8 100644
--- a/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.html
+++ b/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.html
@@ -80,10 +80,9 @@
           [owlDateTime]="dt1"
           [owlDateTimeTrigger]="dt1">
         <button mat-button [owlDateTimeTrigger]="dt1" matSuffix mat-icon-button aria-label="start_datetime">
-          <owl-date-time hour12Timer="true" #dt1></owl-date-time>
+          <owl-date-time hour12Timer="true" showSecondsTimer="true" #dt1></owl-date-time>
           <mat-icon>calendar_today</mat-icon>
         </button>
-        <owl-date-time #dt1></owl-date-time>
       </mat-form-field>
       <button mat-icon-button (click)="toggleEditStartDatetime()">
         <mat-icon>done</mat-icon>
@@ -119,10 +118,9 @@
               [owlDateTime]="dt2"
               [owlDateTimeTrigger]="dt2">
             <button mat-button [owlDateTimeTrigger]="dt2" matSuffix mat-icon-button aria-label="end_datetime">
-              <owl-date-time hour12Timer="true" #dt2></owl-date-time>
+              <owl-date-time hour12Timer="true" showSecondsTimer="true" #dt2></owl-date-time>
               <mat-icon>calendar_today</mat-icon>
             </button>
-            <owl-date-time #dt2></owl-date-time>
           </mat-form-field>
           <button id="button-mat-form-field-done" mat-icon-button (click)="toggleEditEndDatetime()">
             <mat-icon>done</mat-icon>
diff --git a/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.ts b/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.ts
index aeaf431..bccee70 100644
--- a/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.ts
+++ b/angular/app/src/app/shared/components/timeline/timeline-card/timeline-card.component.ts
@@ -9,6 +9,7 @@ import {
   HostListener,
   EventEmitter,
 } from '@angular/core';
+import { OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';
 import { Event, EventType, EventImage, Pose } from '../../../models'
 import { MatDialog } from '@angular/material/dialog';
 import { EventDialogComponent } from '../../event/event-dialog/event-dialog.component';
@@ -27,10 +28,17 @@ const enum ResizeState {
   RESIZE = 1
 }
 
+export const MY_NATIVE_FORMATS = {
+  fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'},
+};
+
 @Component({
   selector: 'mole-timeline-card',
   templateUrl: './timeline-card.component.html',
-  styleUrls: ['./timeline-card.component.scss']
+  styleUrls: ['./timeline-card.component.scss'],
+  providers: [
+    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS },
+],
 })
 export class TimelineCardComponent implements OnInit, AfterViewInit {
 
diff --git a/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.html b/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.html
index ac84d88..0ff5354 100644
--- a/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.html
+++ b/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.html
@@ -17,20 +17,18 @@
           <mat-label>Start Datetime</mat-label>
           <input matInput formControlName="start_datetime" [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="yyyyy-MMM-ddTHH:mm:ss:">
           <button mat-button [owlDateTimeTrigger]="dt1" matSuffix mat-icon-button aria-label="start_datetime">
-            <owl-date-time color="primary" hour12Timer="true" #dt1></owl-date-time>
+            <owl-date-time color="primary" hour12Timer="true" showSecondsTimer="true" #dt1></owl-date-time>
             <mat-icon>calendar_today</mat-icon>
           </button>
-          <owl-date-time #dt1></owl-date-time>
       </mat-form-field>
 
       <mat-form-field appearance="fill" class="form-element-md ml-2">
           <mat-label>End Datetime</mat-label>
           <input matInput formControlName="end_datetime" [owlDateTime]="dt2" [owlDateTimeTrigger]="dt2" placeholder="yyyyy-MMM-ddTHH:mm:ss:">
           <button mat-button [owlDateTimeTrigger]="dt2" matSuffix mat-icon-button aria-label="end_datetime">
-            <owl-date-time color="primary" hour12Timer="true" #dt2></owl-date-time>
+            <owl-date-time color="primary" hour12Timer="true" showSecondsTimer="true" #dt2></owl-date-time>
             <mat-icon>calendar_today</mat-icon>
           </button>
-          <owl-date-time #dt2></owl-date-time>
 
       </mat-form-field>
 
diff --git a/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.ts b/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.ts
index 793c951..25a6198 100644
--- a/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.ts
+++ b/angular/app/src/app/shared/components/trial/trial-creator/trial-creator.component.ts
@@ -1,14 +1,23 @@
 import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators , FormControl} from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';
 
 import { Trial, Campaign, ClockConfig } from '../../../models';
 import { TrialApiService, AuthService, CampaignApiService } from '../../../services';
 
+
+export const MY_NATIVE_FORMATS = {
+  fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'},
+};
+
 @Component({
   selector: 'mole-trial-creator',
   templateUrl: './trial-creator.component.html',
   styleUrls: ['./trial-creator.component.scss'],
+  providers: [
+    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS },
+],
 })
 export class TrialCreatorComponent implements OnInit {
 
@@ -186,21 +195,6 @@ export class TrialCreatorComponent implements OnInit {
 
   public modifyTrialPayload() {
 
-    // set trial start and end time seconds to 0
-    var trialStartDatetime = this.trialForm.get('start_datetime');
-    if (trialStartDatetime) {
-      var startDate = new Date(trialStartDatetime.value);
-      startDate.setSeconds(0);
-      this.trialForm.get('start_datetime').setValue(startDate);
-    }
-
-    var trialEndDatetime = this.trialForm.get('end_datetime');
-    if (trialEndDatetime) {
-      var endDate = new Date(trialEndDatetime.value);
-      endDate.setSeconds(0);
-      this.trialForm.get('end_datetime').setValue(endDate);
-    }
-
     var testersUrl = [];
     this.temp = this.trialForm.get('testers')
     this.temp = this.temp.value