Devices have replaced Clients for authentication as well as location using sections.

Printing of reports done.
Main section is now a fixture

User and Devices list gives last login details.

bookie/src/app/auth/auth.service.ts

@@ -4,7 +4,9 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { environment } from '../../environments/environment';
+import { Device } from '../core/device';
 import { User } from '../core/user';
+import { CookieService } from '../shared/cookie.service';
 
 const loginUrl = '/token';
 const refreshUrl = '/refresh';
@@ -14,10 +16,14 @@ const JWT_USER = 'JWT_USER';
 export class AuthService {
   private currentUserSubject: BehaviorSubject<User>;
   public currentUser: Observable<User>;
+  public device: Device;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private cs: CookieService) {
     this.checkStorage();
     this.currentUser = this.currentUserSubject.asObservable();
+    const deviceId = this.cs.getCookie('device_id');
+    const device = this.cs.getCookie('device');
+    this.device = new Device({ id: deviceId, name: device });
   }
 
   static parseJwt(token): User {

bookie/src/app/core/device.ts

@@ -3,5 +3,13 @@ import { Section } from './section';
 export class Device {
   id: string;
   name: string;
+  enabled: boolean;
   section: Section;
+  creationDate: string;
+  lastUser: string;
+  lastDate?: string;
+
+  public constructor(init?: Partial<Device>) {
+    Object.assign(this, init);
+  }
 }

bookie/src/app/core/user.ts

@@ -11,6 +11,8 @@ export class User {
   access_token?: string;
   exp?: number;
   ver: string;
+  lastDevice: string;
+  lastDate?: string;
 
   public constructor(init?: Partial<User>) {
     Object.assign(this, init);

bookie/src/app/devices/device-detail/device-detail.component.html

@@ -39,6 +39,9 @@
             </mat-select>
           </mat-form-field>
         </div>
+        <div fxLayout="row">
+          <mat-checkbox formControlName="enabled">Enabled?</mat-checkbox>
+        </div>
       </form>
     </mat-card-content>
     <mat-card-actions>
@@ -47,5 +50,8 @@
         Delete
       </button>
     </mat-card-actions>
+    <mat-card-subtitle>
+      Created on <strong>{{ item.creationDate | localTime }}</strong>
+    </mat-card-subtitle>
   </mat-card>
 </div>

bookie/src/app/devices/device-detail/device-detail.component.ts

@@ -35,6 +35,7 @@ export class DeviceDetailComponent implements OnInit, AfterViewInit {
     this.form = this.fb.group({
       name: '',
       section: '',
+      enabled: '',
     });
   }
 
@@ -50,6 +51,7 @@ export class DeviceDetailComponent implements OnInit, AfterViewInit {
     this.form.setValue({
       name: this.item.name || '',
       section: this.item.section.id ? this.item.section.id : '',
+      enabled: this.item.enabled,
     });
   }
 
@@ -100,6 +102,7 @@ export class DeviceDetailComponent implements OnInit, AfterViewInit {
     const formModel = this.form.value;
     this.item.name = formModel.name;
     this.item.section.id = formModel.section;
+    this.item.enabled = formModel.enabled;
     return this.item;
   }
 }

bookie/src/app/devices/device-list/device-list.component.html

@@ -17,11 +17,31 @@
       </ng-container>
 
       <!-- Section Column -->
-      <ng-container matColumnDef="tax">
+      <ng-container matColumnDef="section">
         <mat-header-cell *matHeaderCellDef>Section</mat-header-cell>
         <mat-cell *matCellDef="let row">{{ row.section.name }}</mat-cell>
       </ng-container>
 
+      <!-- Section Column -->
+      <ng-container matColumnDef="enabled">
+        <mat-header-cell *matHeaderCellDef>Enabled</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.enabled }}</mat-cell>
+      </ng-container>
+
+      <!-- Creation Date Column -->
+      <ng-container matColumnDef="creationDate">
+        <mat-header-cell *matHeaderCellDef>Created</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.creationDate | localTime }}</mat-cell>
+      </ng-container>
+
+      <!-- Last Login Column -->
+      <ng-container matColumnDef="last">
+        <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
+        <mat-cell *matCellDef="let row"
+          >{{ row.lastUser }} @ {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+        >
+      </ng-container>
+
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
     </mat-table>

bookie/src/app/devices/device-list/device-list.component.ts

@@ -14,7 +14,7 @@ export class DeviceListComponent implements OnInit {
   dataSource: DeviceListDataSource;
   list: Device[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name'];
+  displayedColumns = ['name', 'section', 'enabled', 'creationDate', 'last'];
 
   constructor(private route: ActivatedRoute) {}
 

bookie/src/app/devices/device.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
@@ -6,10 +6,7 @@ import { catchError } from 'rxjs/operators';
 import { Device } from '../core/device';
 import { ErrorLoggerService } from '../core/error-logger.service';
 
-const httpOptions = {
-  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
-};
-const url = '/v1/devices';
+const url = '/api/devices';
 const serviceName = 'DeviceService';
 
 @Injectable({
@@ -19,7 +16,7 @@ export class DeviceService {
   constructor(private http: HttpClient, private log: ErrorLoggerService) {}
 
   get(id: string): Observable<Device> {
-    const getUrl: string = id === null ? `${url}/new` : `${url}/${id}`;
+    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
     return <Observable<Device>>(
       this.http
         .get<Device>(getUrl)
@@ -28,10 +25,9 @@ export class DeviceService {
   }
 
   list(): Observable<Device[]> {
-    const options = { params: new HttpParams().set('l', '') };
     return <Observable<Device[]>>(
       this.http
-        .get<Device[]>(url, options)
+        .get<Device[]>(`${url}/list`)
         .pipe(catchError(this.log.handleError(serviceName, 'list')))
     );
   }
@@ -39,7 +35,7 @@ export class DeviceService {
   save(device: Device): Observable<Device> {
     return <Observable<Device>>(
       this.http
-        .post<Device>(`${url}/new`, device, httpOptions)
+        .post<Device>(`${url}`, device)
         .pipe(catchError(this.log.handleError(serviceName, 'save')))
     );
   }
@@ -47,7 +43,7 @@ export class DeviceService {
   update(device: Device): Observable<Device> {
     return <Observable<Device>>(
       this.http
-        .put<Device>(`${url}/${device.id}`, device, httpOptions)
+        .put<Device>(`${url}/${device.id}`, device)
         .pipe(catchError(this.log.handleError(serviceName, 'update')))
     );
   }
@@ -62,7 +58,7 @@ export class DeviceService {
   delete(id: string): Observable<Device> {
     return <Observable<Device>>(
       this.http
-        .delete<Device>(`${url}/${id}`, httpOptions)
+        .delete<Device>(`${url}/${id}`)
         .pipe(catchError(this.log.handleError(serviceName, 'delete')))
     );
   }

bookie/src/app/devices/devices.module.ts

@@ -5,6 +5,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -12,6 +13,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 
+import { SharedModule } from '../shared/shared.module';
+
 import { DeviceDetailComponent } from './device-detail/device-detail.component';
 import { DeviceListComponent } from './device-list/device-list.component';
 import { DevicesRoutingModule } from './devices-routing.module';
@@ -31,6 +34,8 @@ import { DevicesRoutingModule } from './devices-routing.module';
     MatTableModule,
     ReactiveFormsModule,
     DevicesRoutingModule,
+    MatCheckboxModule,
+    SharedModule,
   ],
   declarations: [DeviceListComponent, DeviceDetailComponent],
 })

bookie/src/app/home/home.component.html

@@ -199,5 +199,5 @@
   </mat-card>
 </div>
 <footer class="footer">
-  <p>Backend: v{{ auth.user?.ver }} / Frontend: v{{ version }}</p>
+  <p>Backend: v{{ auth.user?.ver }} / Frontend: v{{ version }} on {{ auth.device.name }}</p>
 </footer>

bookie/src/app/users/user-list/user-list.component.html

@@ -32,6 +32,15 @@
         </mat-cell>
       </ng-container>
 
+      <!-- Last Login Column -->
+      <ng-container matColumnDef="last">
+        <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
+        <mat-cell *matCellDef="let row"
+          >{{ row.lastDevice }} @
+          {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+        >
+      </ng-container>
+
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
     </mat-table>

bookie/src/app/users/user-list/user-list.component.ts

@@ -14,7 +14,7 @@ export class UserListComponent implements OnInit {
   dataSource: UserListDataSource;
   list: User[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'lockedOut', 'roles'];
+  displayedColumns = ['name', 'lockedOut', 'roles', 'last'];
 
   constructor(private route: ActivatedRoute) {}