Update the UI

2024-12-22 03:22:48 +00:00 · 2019-11-07 18:02:26 +00:00 · 2019-11-07 18:02:26 +00:00 · 642e0ebf04
commit 642e0ebf04
parent f3ffb599a9
16 changed files with 204 additions and 138 deletions
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,4 +1,10 @@
-<mat-sidenav-container class="all-wrap" fullscreen>
+<mat-toolbar color="primary">
+  <mat-toolbar-row>
+    <button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
+    <span class="page-title">{{pageTitle}}</span>
+  </mat-toolbar-row>
+</mat-toolbar>
+<mat-sidenav-container>
  <mat-sidenav #menu mode="over">
    <mat-nav-list>
      <a mat-list-item (click)="menu.close()" routerLink="/service">Service</a>
@ -13,51 +19,43 @@
      <mat-slide-toggle color="primary" [checked]="fastSwitching" (change)="sliderChanged($event)">Fast switching</mat-slide-toggle>
    </mat-nav-list>
  </mat-sidenav>
-<div class="page-wrap">
-<header>
-  <mat-toolbar style="background-color: #64aef3;">
-    <button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
-    <span>OpenLP Remote</span>
-    <span class="filler"></span>
-    <button *ngIf="showLogin" mat-button (click)="login()">Login</button>
-  </mat-toolbar>
-</header>
-<main class="content">
-  <router-outlet></router-outlet>
-</main>
-<footer>
-    <mat-toolbar class="footer">
-      <button mat-icon-button (click)="previousItem()" matTooltip="Previous item">
-        <mat-icon>first_page</mat-icon>
-      </button>
-      <button mat-icon-button (click)="nextItem()" matTooltip="Next item">
-        <mat-icon>last_page</mat-icon>
-      </button>
-      <button mat-icon-button (click)="previousSlide()" matTooltip="Previous slide">
-        <mat-icon>navigate_before</mat-icon>
-      </button>
-      <button mat-icon-button (click)="nextSlide()" matTooltip="Next slide">
-        <mat-icon>navigate_next</mat-icon>
-      </button>
-      <button mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank" matTooltip="Show black">
-        <mat-icon>videocam_off</mat-icon>
-      </button>
-      <button mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme" matTooltip="Show background">
-        <mat-icon>wallpaper</mat-icon>
-      </button>
-      <button mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display" matTooltip="Show Desktop">
-        <mat-icon>desktop_windows</mat-icon>
-      </button>
-      <button mat-icon-button (click)="showDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.live()" matTooltip="Show Presentation">
-        <mat-icon>videocam</mat-icon>
-      </button>
-    </mat-toolbar>
-    <mat-toolbar *ngIf="fastSwitching" class="fast-access">
-        <button mat-icon-button routerLink="/service"><mat-icon>list</mat-icon></button>
-        <button mat-icon-button routerLink="/slides"><mat-icon>collections</mat-icon></button>
-        <button mat-icon-button routerLink="/alerts"><mat-icon>error</mat-icon></button>
-        <button mat-icon-button routerLink="/search"><mat-icon>search</mat-icon></button>
+  <mat-sidenav-content>
+    <main class="content">
+      <router-outlet></router-outlet>
+    </main>
+    <footer>
+      <mat-toolbar class="footer">
+        <button mat-icon-button (click)="previousItem()" matTooltip="Previous item">
+          <mat-icon>first_page</mat-icon>
+        </button>
+        <button mat-icon-button (click)="nextItem()" matTooltip="Next item">
+          <mat-icon>last_page</mat-icon>
+        </button>
+        <button mat-icon-button (click)="previousSlide()" matTooltip="Previous slide">
+          <mat-icon>navigate_before</mat-icon>
+        </button>
+        <button mat-icon-button (click)="nextSlide()" matTooltip="Next slide">
+          <mat-icon>navigate_next</mat-icon>
+        </button>
+        <button mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank" matTooltip="Show black">
+          <mat-icon>videocam_off</mat-icon>
+        </button>
+        <button mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme" matTooltip="Show background">
+          <mat-icon>wallpaper</mat-icon>
+        </button>
+        <button mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display" matTooltip="Show Desktop">
+          <mat-icon>desktop_windows</mat-icon>
+        </button>
+        <button mat-icon-button (click)="showDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.live()" matTooltip="Show Presentation">
+          <mat-icon>videocam</mat-icon>
+        </button>
      </mat-toolbar>
-  </footer>
-</div>
+      <mat-toolbar *ngIf="fastSwitching" class="fast-access">
+          <button mat-icon-button routerLink="/service"><mat-icon>list</mat-icon></button>
+          <button mat-icon-button routerLink="/slides"><mat-icon>collections</mat-icon></button>
+          <button mat-icon-button routerLink="/alerts"><mat-icon>error</mat-icon></button>
+          <button mat-icon-button routerLink="/search"><mat-icon>search</mat-icon></button>
+        </mat-toolbar>
+    </footer>
+  </mat-sidenav-content>
 </mat-sidenav-container>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@ -1,47 +1,36 @@
 mat-sidenav {
-    background: white;
-}
-.all-wrap {
-    min-height: 100vh;
-  }
-
-.page-wrap {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
+  background: white;
 }

-.filler {
-    flex-grow: 1;
-}
-
-.content {
-    flex: 1;
+mat-sidenav-container {
+  min-height: 100vh;
 }

 mat-slide-toggle {
-    margin-left: 1rem;
+  margin-top: 0.8rem;
+  margin-left: 1rem;
+  font-size: 80%;
 }

 .fast-access {
-    display: flex;
-    justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }

 .footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
 }

 /*
 * Make the Component injected by Router Outlet full height:
 */
 main {
-    display: flex;
-    flex-direction: column;
-    > *:not(router-outlet) {
-        flex: 1;
-        display: block;
-    }
-}
+  display: flex;
+  flex-direction: column;
+  > *:not(router-outlet) {
+    flex: 1;
+    display: block;
+  }
+}
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { MatSlideToggleChange, MatDialog } from '@angular/material';
+
 import { State } from './responses';
 import { OpenLPService } from './openlp.service';
-import { MatSlideToggleChange, MatDialog } from '@angular/material';
+import { PageTitleService } from './page-title.service';
 import { LoginComponent } from './components/login/login.component';

@Component({
@ -13,8 +15,11 @@ export class AppComponent implements OnInit {
  fastSwitching = false;
  state = new State();
  showLogin = false;
+  pageTitle = 'OpenLP Remote';

-  constructor(private openlpService: OpenLPService, private dialog: MatDialog) {
+  constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService,
+              private dialog: MatDialog) {
+    pageTitleService.pageTitleChanged$.subscribe(pageTitle => this.pageTitle = pageTitle);
    openlpService.stateChanged$.subscribe(item => this.state = item);
  }

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -1,5 +1,5 @@
-import { BrowserModule } from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { BrowserModule, Title } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

 import { NgModule } from '@angular/core';

@ -18,6 +18,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';


 import { AppComponent } from './app.component';
+import { PageTitleService } from './page-title.service';
 import { OpenLPService } from './openlp.service';
 import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app.routing';
@ -68,7 +69,9 @@ import { LoginComponent } from './components/login/login.component';
    MatSnackBarModule
  ],
  providers: [
-    OpenLPService
+    PageTitleService,
+    OpenLPService,
+    Title
  ],
  entryComponents: [
    LoginComponent
--- a/src/app/components/alert/alert.component.ts
+++ b/src/app/components/alert/alert.component.ts
@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-
-
-import { OpenLPService } from '../../openlp.service';
 import { MatSnackBar } from '@angular/material';

+import { PageTitleService } from '../../page-title.service';
+import { OpenLPService } from '../../openlp.service';
+
@Component({
  selector: 'openlp-alert',
  templateUrl: './alert.component.html',
@ -15,7 +15,10 @@ export class AlertComponent {

  public alert: string;

-  constructor(private openlpService: OpenLPService, private snackBar: MatSnackBar) { }
+  constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService,
+              private snackBar: MatSnackBar) {
+    pageTitleService.changePageTitle('Alerts');
+  }

  onSubmit() {
    this.openlpService.showAlert(this.alert).subscribe(res => this.snackBar.open('Alert submitted', '', {duration: 2000}));
--- a/src/app/components/search/search.component.ts
+++ b/src/app/components/search/search.component.ts
@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+
 import { OpenLPService } from '../../openlp.service';
+import { PageTitleService } from '../../page-title.service';
 import { PluginDescription } from '../../responses';

@Component({
@ -8,17 +10,16 @@ import { PluginDescription } from '../../responses';
  styleUrls: ['./search.component.scss'],
  providers: [OpenLPService]
 })
-
-
 export class SearchComponent implements OnInit {
-
  public searchPlugins: PluginDescription[] = [];
  public searchText = null;
  public searchResults = null;
  public selectedPlugin = 'songs';
  public currentPlugin: string;

-  constructor(private openlpService: OpenLPService) {}
+  constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
+    pageTitleService.changePageTitle('Search');
+  }

  onSubmit() {
    this.currentPlugin = this.selectedPlugin;
--- a/src/app/components/service/service.component.html
+++ b/src/app/components/service/service.component.html
@ -1,9 +1,3 @@
-<h3>Service items:</h3>
-<div>
-  <mat-nav-list>
-    <a mat-list-item *ngFor="let item of items;let counter = index;" (click)="onItemSelected(counter)"  [class.selected]="item.selected">
-      <mat-icon mat-list-icon>{{ getIcon(item) }}</mat-icon>
-      <p mat-line>{{item.title}}<p>
-    </a>
-  </mat-nav-list>
-</div>
+<mat-card *ngFor="let item of items; let counter = index;" (click)="onItemSelected(counter)" [tabindex]="counter" class="service-item">
+  <mat-icon>{{ getIcon(item) }}</mat-icon> {{ item.title }}
+</mat-card>
--- a/src/app/components/service/service.component.ts
+++ b/src/app/components/service/service.component.ts
@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';

 import { OpenLPService } from '../../openlp.service';
+import { PageTitleService } from '../../page-title.service';
 import { ServiceItem } from '../../responses';

@Component({
@ -13,6 +14,7 @@ import { ServiceItem } from '../../responses';

 export class ServiceComponent implements OnInit {
  items: ServiceItem[] = [];
+
  ngOnInit() {
    this.getServiceItems();
  }
@ -26,7 +28,9 @@ export class ServiceComponent implements OnInit {
    this.openlpService.getServiceItems().subscribe(items => this.items = items);
  }

-  constructor(private openlpService: OpenLPService, private router: Router) {
+  constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService,
+              private router: Router) {
+    pageTitleService.changePageTitle('Service');
    openlpService.stateChanged$.subscribe(item => this.getServiceItems());
  }

--- a/src/app/components/slides/slides.component.html
+++ b/src/app/components/slides/slides.component.html
@ -1,9 +1,4 @@
-<h3>Slides:</h3>
-<div>
-  <mat-nav-list>
-    <mat-list-item *ngFor="let slide of slides; let counter = index;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
-      <span MatListAvatar>{{ slide.tag }}</span>
-      <span MatLine style="margin-left: 2rem;">{{ slide.text }}</span>
-    </mat-list-item>
-  </mat-nav-list>
-</div>
+<mat-card mat-list-item *ngFor="let slide of slides; let counter = index;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
+  <div class="verse-tag">{{ slide.tag }}</div>
+  <div class="verse-text">{{ slide.text }}</div>
+</mat-card>
--- a/src/app/components/slides/slides.component.scss
+++ b/src/app/components/slides/slides.component.scss
@ -1,3 +1,16 @@
+mat-card {
+  cursor: pointer;
+}
+
 .selected {
    font-weight: 700;
 }
+
+.verse-tag {
+  float: left;
+}
+
+.verse-text {
+  margin-left: 2.5rem;
+  white-space: pre-wrap;
+}
--- a/src/app/components/slides/slides.component.ts
+++ b/src/app/components/slides/slides.component.ts
@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';

-
 import { OpenLPService } from '../../openlp.service';
+import { PageTitleService } from '../../page-title.service';

@Component({
  selector: 'openlp-slides',
@ -12,6 +12,12 @@ import { OpenLPService } from '../../openlp.service';

 export class SlidesComponent implements OnInit {
  slides = null;
+
+  constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
+    pageTitleService.changePageTitle('Slides');
+    openlpService.stateChanged$.subscribe(item => this.getSlides());
+  }
+
  ngOnInit() {
    this.getSlides();
  }
@ -23,8 +29,4 @@ export class SlidesComponent implements OnInit {
  getSlides() {
    this.openlpService.getItemSlides().subscribe(slides => this.slides = slides);
  }
-
-  constructor(private openlpService: OpenLPService) {
-    openlpService.stateChanged$.subscribe(item => this.getSlides());
-  }
 }
--- a/src/app/openlp.service.ts
+++ b/src/app/openlp.service.ts
@ -1,11 +1,20 @@
 import { Injectable, EventEmitter } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-
 import { Observable } from 'rxjs';

-import { PluginDescription, State, Slide, ServiceItem, MainView, SystemInformation, Credentials, AuthToken } from './responses';
+import {
+  PluginDescription,
+  State,
+  Slide,
+  ServiceItem,
+  MainView,
+  SystemInformation,
+  Credentials,
+  AuthToken
+} from './responses';
 import { environment } from '../environments/environment';

+
 const deserialize = (json, cls) => {
  const inst = new cls();
  for (const p in json) {
@ -21,12 +30,14 @@ const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
 };

+
@Injectable()
 export class OpenLPService {
  private apiURL: string;
  public stateChanged$: EventEmitter<State>;

  constructor(private http: HttpClient) {
+    const host = window.location.hostname;
    let port: string;
    if (environment.production) {
      port = window.location.port;
@ -34,12 +45,11 @@ export class OpenLPService {
    else {
      port = '4316';
    }
-    this.apiURL = `http://localhost:${port}/api/v1`;
-
+    this.apiURL = `http://${host}:${port}/api/v1`;

    this.stateChanged$ = new EventEmitter<State>();
    this.retrieveSystemInformation().subscribe(info => {
-      const ws = new WebSocket(`ws://localhost:${info.websocket_port}/state`);
+    const ws = new WebSocket(`ws://${host}:${info.websocket_port}/state`);
      ws.onmessage = (event) => {
        const reader = new FileReader();
        reader.onload = () => {
--- a/src/app/page-title.service.ts
+++ b/src/app/page-title.service.ts
@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class PageTitleService {
+  private pageTitleSource = new Subject<string>();
+  public pageTitleChanged$ = this.pageTitleSource.asObservable();
+
+  constructor(private titleService: Title) {}
+
+  changePageTitle(pageTitle: string) {
+    this.pageTitleSource.next(pageTitle);
+    this.titleService.setTitle(pageTitle + ' | OpenLP Remote');
+  }
+}
--- a/src/index.html
+++ b/src/index.html
@ -2,12 +2,11 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>OpenLP &bull; Remote</title>
+  <title>OpenLP Remote</title>
  <base href="/">
-
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
  <app-root>
--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,39 +1,74 @@
 /* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import '~@angular/material/theming';

+@include mat-core();
+$primary: mat-palette($mat-indigo);
+$accent: mat-palette($mat-light-blue, A200, A100, A400);
+$theme: mat-light-theme($primary, $accent);
+@include angular-material-theme($theme);

 * {
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
 }

 mat-sidenav-layout {
-	background: rgba(0,0,0,0.03);
+  background: rgba(0,0,0,0.03);
 }
+
 mat-sidenav {
-	width: 200px;
+  width: 12rem;
+}
+
+mat-card {
+  margin-bottom: 1rem;
+}
+
+mat-card.service-item,
+mat-card.slide {
+  cursor: pointer;
 }

 .displayButton .active {
-	background: 'teal';
+  background: 'teal';
+}
+
+.page-title {
+  margin-left: 1rem;
 }

 .content {
-	margin: 20px;
+  margin: 1rem;
 }

-.chordline {                                                                                                 
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.chordline {
    line-height: 1.8;
  }
-  
+
  .chordline1 {
-    line-height: 1.0 
+    line-height: 1.0
  }
-  
+
  .chordline span.chord span {
    position: relative;
  }
-  
+
  .chordline span.chord span strong {
    position: absolute;
    top: -2.1rem;
--- a/tslint.json
+++ b/tslint.json
@ -72,7 +72,6 @@
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
-    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
@ -115,12 +114,12 @@
      "check-type"
    ],
    "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true