Public and user private functionality finished.

frontend/package.json

@@ -26,6 +26,7 @@
     "bootstrap-sass": "^3.3.7",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
+    "ng-alerts": "^1.0.6",
     "ng-bootstrap-dropdown": "^1.0.0",
     "ng2-bootstrap": "^1.6.2",
     "ngx-dropdown": "0.0.22",

frontend/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { FineService } from './service/fine.service';
 import { GenreService } from './service/genre.service';
 import { UserService } from './service/user.service';
 import { ResourceService } from './service/resource.service';
+import { ResourceCopyService } from './service/resource-copy.service';
 import { SessionService } from './service/session.service';
 
 @NgModule({
@@ -39,6 +40,7 @@ import { SessionService } from './service/session.service';
     GenreService,
     UserService,
     ResourceService,
+    ResourceCopyService,
     SessionService
   ],
   bootstrap: [AppComponent]

frontend/src/app/component/public/home/home.component.html

@@ -5,6 +5,12 @@
     </ul>
   </div>
 </div>
+<div *ngIf="successMessage" class="alert alert-success">
+  <strong>¡Reservado!</strong> {{message}}
+</div>
+<div *ngIf="errorMessage" class="alert alert-danger">
+  <strong>Algo ha ido mal...</strong> {{message}}
+</div>
 <div class="row">
   <div class="col-sm-12">
     <ngb-tabset>
@@ -18,10 +24,14 @@
                     <img [src]="sanitizer.bypassSecurityTrustUrl(book.image)" class="img-responsive" />
                     <div>
                       <div *ngIf="isLogged">
-                        <button *ngIf="book.avaiblereserve; else notEnough" (click)="reserveResource(book.id)" class="btn btn-reserve">Reservar</button>
-                        <ng-template #notEnough>
-                          <p class="btn btn-notEnough">No disponible</p>
-                        </ng-template>
+                        <div>
+                          <div *ngIf="book.avaiblereserve; else notEnough">
+                            <button (click)="reserveResource(book)" class="btn btn-reserve">Reservar</button>
+                          </div>
+                          <ng-template #notEnough>
+                            <p class="btn btn-notEnough">No disponible</p>
+                          </ng-template>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -57,10 +67,14 @@ <h5 class="authorName">por {{book.author}}</h5>
                     <img [src]="sanitizer.bypassSecurityTrustUrl(magazine.image)" class="img-responsive" />
                     <div>
                       <div *ngIf="isLogged">
-                        <button *ngIf="magazine.avaiblereserve; else notEnough" (click)="reserveResource(magazine.id)" class="btn btn-reserve">Reservar</button>
-                        <ng-template #notEnough>
-                          <p class="btn btn-notEnough">No disponible</p>
-                        </ng-template>
+                        <div>
+                          <div *ngIf="magazine.avaiblereserve; else notEnough">
+                            <button (click)="reserveResource(magazine)" class="btn btn-reserve">Reservar</button>
+                          </div>
+                          <ng-template #notEnough>
+                            <p class="btn btn-notEnough">No disponible</p>
+                          </ng-template>
+                        </div>
                       </div>
                     </div>
                   </div>

frontend/src/app/component/public/home/home.component.ts

@@ -2,11 +2,16 @@ import {Component, OnInit} from '@angular/core';
 import {STATUS_NO_CONTENT, BOOKS_IMG_URL} from "../../../util";
 import {DomSanitizer} from '@angular/platform-browser';
 
+import {Action} from '../../../model/action.model';
 import {Resource} from '../../../model/resource.model';
+import {User} from '../../../model/user.model';
 
+import {ActionService} from '../../../service/action.service';
+import {FileService} from '../../../service/file.service';
 import {ResourceService} from '../../../service/resource.service';
+import {ResourceCopyService} from '../../../service/resource-copy.service';
 import {SessionService} from '../../../service/session.service';
-import {FileService} from '../../../service/file.service';
+import {UserService} from '../../../service/user.service';
 
 @Component({
   templateUrl: 'home.component.html',
@@ -24,30 +29,38 @@ export class HomeComponent implements OnInit {
 
   books: Resource[];
   booksPage: number;
+  errorMessage: boolean;
   img_url: string;
   isLogged: boolean;
   magazines: Resource[];
   magazinesPage: number;
+  message: String;
   moreBooksActive: boolean;
   moreMagazActive: boolean;
-
+  successMessage: boolean;
+  user: User;
 
   constructor(private resourceService: ResourceService, private sessionService: SessionService,
-              private sanitizer: DomSanitizer, private fileService: FileService) {
+              private sanitizer: DomSanitizer, private fileService: FileService, private actionService: ActionService,
+              private resourceCopyService: ResourceCopyService, private userService: UserService) {
     this.books = [];
     this.booksPage = 0;
+    this.errorMessage = false;
     this.img_url = BOOKS_IMG_URL;
     this.isLogged = false;
     this.magazines = [];
     this.magazinesPage = 0;
     this.moreBooksActive = true;
     this.moreMagazActive = true;
+    this.successMessage = false;
+
     this.addBooks(true);
     this.addMagazines(true);
   }
 
   ngOnInit() {
     this.isLogged = this.sessionService.checkCredentials();
+    this.user = this.userService.getUserCompleted();
   }
 
   addBooks(userReq: boolean) {
@@ -98,17 +111,39 @@ export class HomeComponent implements OnInit {
   }
 
   downloadImages(resources: Resource[]) {
+    console.log('Downloading images from server...');
     for (let resource of resources) {
       this.fileService.getResourceFile(resource.id).subscribe(
         data => {
           let dataRecieved: string[] = data.split('"');
           resource.image = 'data:image/png;base64,' + dataRecieved[3];
         },
-        error => console.log("Fail adding resource " + resource.title + "image.")
+        error => console.log('Fail adding resource ' + resource.title + 'image.')
       );
     }
   }
 
-  reserveResource(id: number) {
+  reserveResource(resource: Resource) {
+    console.log('Trying to find a reserve copy avaible of ' + resource.title + '...')
+    let copy = this.resourceCopyService.getResourceCopyByLocationCode(resource.noReservedCopies[0]);
+    if (copy === undefined) {
+      console.log('Not enough copies or user is not allow to make the reserve.');
+      this.successMessage = false;
+      this.errorMessage = true;
+      this.message = 'La reserva no se ha podido realizar.';
+    } else {
+      let action: Action;
+      action = {copy: copy, user: this.user};
+      console.log(JSON.stringify(action));
+      this.actionService.postAction(action).subscribe(
+        response => {
+          this.errorMessage = false;
+          this.successMessage = true;
+          this.message = 'La reserva se ha realizado exitosamente.';
+          console.log('Reserve successfully completed.');
+        },
+        error => console.log('Fail trying to make the reserve.')
+      );
+    }
   }
 }

frontend/src/app/component/public/user/profile.component.html

@@ -74,9 +74,9 @@ <h4>
               <div class="row item">
                 <div class="col-sm-6 col-md-4 col-lg-2">
                   <div class="coverItem">
-                    <p>Avatar</p>
+                    <img [src]="sanitizer.bypassSecurityTrustUrl(action.copy.resource.image)" class="img-responsive" />
                     <br>
-                    <a href="#"> <span class="glyphicon glyphicon-info-sign"></span>ver libro
+                    <a [routerLink]="['/resource',action.copy.resource.id]"> <span class="glyphicon glyphicon-info-sign"></span>ver libro
                     </a>
                   </div>
                 </div>
@@ -110,9 +110,9 @@ <h4>
               <div class="row item">
                 <div class="col-sm-6 col-md-4 col-lg-2">
                   <div class="coverItem">
-                    <p>Avatar</p>
+                    <img [src]="sanitizer.bypassSecurityTrustUrl(action.copy.resource.image)" class="img-responsive" />
                     <br>
-                    <a href="#"> <span class="glyphicon glyphicon-info-sign"></span>ver libro
+                    <a [routerLink]="['/resource',action.copy.resource.id]"> <span class="glyphicon glyphicon-info-sign"></span>ver libro
                     </a>
                   </div>
                 </div>

frontend/src/app/component/public/user/profile.component.ts

@@ -6,6 +6,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 import {Action} from '../../../model/action.model';
 import {Fine} from '../../../model/fine.model';
 import {User} from '../../../model/user.model';
+import {Resource} from '../../../model/resource.model';
 
 import {ActionService} from '../../../service/action.service';
 import {FineService} from '../../../service/fine.service';
@@ -53,11 +54,15 @@ export class ProfileComponent implements OnInit {
     if (!this.sessionService.checkCredentials())
       this.router.navigate(['/login']);
     else {
+      let resources: Resource[];
       this.user = this.userService.getUserCompleted();
       this.actionService.getAllActions(this.currentActionsPage, false).subscribe(
         actions => {
           this.currentActions = actions;
+          for (let action of this.currentActions)
+            resources.push(action.copy.resource);
           this.currentActionsPage++;
+          this.downloadImages(resources);
         },
         error => console.log("Fail trying to charge " + this.user.name + " current loans.")
       );
@@ -68,10 +73,14 @@ export class ProfileComponent implements OnInit {
         },
         error => console.log("Fail trying to charge " + this.user.name + " fines.")
       );
+      resources = [];
       this.actionService.getAllActions(this.historyPage, true).subscribe(
         actions => {
           this.history = actions;
+          for (let action of this.history)
+            resources.push(action.copy.resource);
           this.historyPage++;
+          this.downloadImages(resources);
         },
         error => console.log("Fail trying to charge " + this.user.name + " history.")
       );
@@ -85,6 +94,19 @@ export class ProfileComponent implements OnInit {
     }
   }
 
+  downloadImages(resources: Resource[]) {
+    console.log('Downloading images from server...');
+    for (let resource of resources) {
+      this.fileService.getResourceFile(resource.id).subscribe(
+        data => {
+          let dataRecieved: string[] = data.split('"');
+          resource.image = 'data:image/png;base64,' + dataRecieved[3];
+        },
+        error => console.log('Fail adding resource ' + resource.title + 'image.')
+      );
+    }
+  }
+
   public editProfile() {
     this.modalProfileEdit.open(this.user);
   }

frontend/src/app/model/action.model.ts

@@ -1,9 +1,12 @@
 import {ResourceCopy} from './resource-copy.model';
 
+import {User} from './user.model';
+
 export interface Action {
   id?: number;
-  dateLoanInit: any;
-  dateLoanGiven: any;
-  dateLoanReturn: any;
+  dateLoanInit?: any;
+  dateLoanGiven?: any;
+  dateLoanReturn?: any;
   copy: ResourceCopy;
+  user: User;
 }

frontend/src/app/model/resource.model.ts

@@ -7,4 +7,5 @@ export interface Resource {
   avaiblereserve: boolean;
   description: string;
   hasPhoto: boolean;
+  noReservedCopies: string[];
 }

frontend/src/app/service/action.service.ts

@@ -4,6 +4,8 @@ import 'rxjs/Rx';
 import {Observable} from 'rxjs/Observable';
 import {ACTION_URL} from "../util";
 
+import {Action} from "../model/action.model";
+
 @Injectable()
 export class ActionService {
 
@@ -17,11 +19,21 @@ export class ActionService {
   }
 
   getAllActions(page: number, finished: boolean) {
-
     let headers: Headers = new Headers();
     headers.append('Authorization', 'Basic ' + this.authCreds);
     return this.http.get(ACTION_URL + '?page=' + page + '&finished=' + finished, {headers: headers})
       .map(response => response.json().content)
       .catch(error => Observable.throw('Server error'));
   }
+
+  postAction(action: Action) {
+    let body = JSON.stringify(action);
+    let headers: Headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+    headers.append('X-Requested-With', 'XMLHttpRequest');
+    headers.append('Authorization', 'Basic ' + this.authCreds);
+    return this.http.post(ACTION_URL, body, {headers: headers})
+      .map(response => response.json())
+      .catch(error => Observable.throw('Server error'));
+  }
 }

frontend/src/app/service/resource-copy.service.ts

@@ -0,0 +1,47 @@
+import {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
+import 'rxjs/Rx';
+import {Observable} from 'rxjs/Observable';
+import {RESOURCECOPY_URL} from "../util";
+
+import {ResourceCopy} from "../model/resource-copy.model";
+
+@Injectable()
+export class ResourceCopyService {
+
+  resourceCopy: ResourceCopy;
+  resourceCopies: ResourceCopy[];
+  authCreds: string;
+
+  constructor(private http: Http) {
+    this.resourceCopies = [];
+  }
+
+  setAuthHeaders(authCreds: string) {
+    this.authCreds = authCreds;
+  }
+
+  getResourceCopyByLocationCode(locationCode: string) {
+    let page = 0;
+    let morePages = true;
+    let headers: Headers = new Headers();
+    headers.append('Authorization', 'Basic ' + this.authCreds);
+    while (page <= 2) {
+      this.http.get(RESOURCECOPY_URL + '?page=' + page, {headers: headers})
+        .map(response => response.json().content)
+        .catch(error => Observable.throw('Server error')
+      ).subscribe(
+        response => {
+          this.resourceCopies = this.resourceCopies.concat(response);
+        },
+        error => morePages = false
+      );
+      page++;
+    }
+    for(let copy of this.resourceCopies) {
+      if (copy.locationCode === locationCode)
+        return copy;
+    }
+  }
+
+}

frontend/src/app/service/resource.service.ts

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
+import {Injectable} from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {Observable} from 'rxjs/Observable';
 import 'rxjs/Rx';
-import { RESOURCES_URL } from "../util";
+import {RESOURCES_URL} from "../util";
 
 @Injectable()
 export class ResourceService {
@@ -22,9 +22,9 @@ export class ResourceService {
       .catch(error => Observable.throw('Server error'));
   }
 
-  searchResources(name: string, page: number){
-      return this.http.get(RESOURCES_URL + '?name=' + name + '&page=' + page)
-        .map(response => response.json().content)
-        .catch(error => Observable.throw('Server error'));
-    }
+  searchResources(name: string, page: number) {
+    return this.http.get(RESOURCES_URL + '?name=' + name + '&page=' + page)
+      .map(response => response.json().content)
+      .catch(error => Observable.throw('Server error'));
+  }
 }