Make stage views use the 12 hour time setting

src/app/components/chord-view/chord-view.component.html

@@ -11,7 +11,7 @@
     </div>
   </div>
   <div class="sidebar">
-    <div class="time">{{ time|date:'HH:mm' }}</div>
+    <div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
     <div class="transpose">
       <button mat-icon-button (click)="transposeUp()">
         <mat-icon>keyboard_arrow_up</mat-icon>

src/app/components/stage-view/stage-view.component.html

@@ -16,7 +16,7 @@
   </div>
   <div class="sidebar">
     <div class="top">
-      <div class="time">{{ time|date:'HH:mm' }}</div>
+      <div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
       <div class="notes" [innerHTML]="notes|nl2br"></div>
     </div>
     <div class="close"><button mat-raised-button class="closeButton" routerLink="/">Close</button></div>

src/app/openlp.service.ts

@@ -39,6 +39,7 @@ const httpOptions = {
 export class OpenLPService {
   private apiURL: string;
   public stateChanged$: EventEmitter<State>;
+  private isTwelveHourTime: boolean = true;
 
   constructor(private http: HttpClient) {
     const host = window.location.hostname;
@@ -53,11 +54,12 @@ export class OpenLPService {
 
     this.stateChanged$ = new EventEmitter<State>();
     this.retrieveSystemInformation().subscribe(info => {
-    const ws = new WebSocket(`ws://${host}:${info.websocket_port}`);
+      const ws = new WebSocket(`ws://${host}:${info.websocket_port}`);
       ws.onmessage = (event) => {
         const reader = new FileReader();
         reader.onload = () => {
           const state = deserialize(JSON.parse(reader.result as string).results, State);
+          this.isTwelveHourTime = state.twelve;
           this.stateChanged$.emit(state);
         };
         reader.readAsText(event.data);
@@ -69,6 +71,10 @@ export class OpenLPService {
     httpOptions.headers = httpOptions.headers.set('Authorization', token);
   }
 
+  getIsTwelveHourTime(): boolean {
+    return this.isTwelveHourTime;
+  }
+
   retrieveSystemInformation(): Observable<SystemInformation> {
     return this.http.get<SystemInformation>(`${this.apiURL}/core/system`, httpOptions);
   }