iSharkFly-Docs/java-tutorials
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

BAEL-797 functionality in the UI is here now just need to connect to the http endpoints

Browse Source
This commit is contained in:
tschiman 2017-04-24 22:14:21 -06:00
parent be326a42ad
commit 765cdecb59
8 changed files with 52 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.html
View File

@ -9,10 +9,10 @@
<div *ngIf="!principal.authenticated; then loginForm else loginMessage"></div>
<ng-template #loginForm>
<form (ngSubmit)="onLogin(f)" class="form-inline mt-2 mt-md-0" #f="ngForm">
<input name="username" [(ngModel)]="credentials.username" required class="form-control mr-sm-2" type="text" placeholder="Username">
<input name="password" [(ngModel)]="credentials.password" required class="form-control mr-sm-2" type="password" placeholder="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f.valid">Login</button>
</form>
<input name="username" [(ngModel)]="credentials.username" required class="form-control mr-sm-2" type="text" placeholder="Username">
<input name="password" [(ngModel)]="credentials.password" required class="form-control mr-sm-2" type="password" placeholder="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f.valid">Login</button>
</form>
</ng-template>
<ng-template #loginMessage>
<button type="button" class="btn btn-link" (click)="onLogout()">Logout</button>

2
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts
View File

@ -23,7 +23,7 @@ export class AppComponent {
principal: Principal = new Principal(false, []);
// principal: Principal = new Principal(true, [new Authority("ROLE_ADMIN")]);
// principal: Principal = new Principal(true, [new Authority("ROLE_USER")]);
loginFailed: boolean = false;

2
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.html
View File

@ -6,6 +6,6 @@
<h4 class="card-title">Title: {{selectedBook.title}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Author: {{selectedBook.author}}</h6>
<p class="card-text">A quick summary of the book</p>
<app-rating *ngIf="principal.authenticated" [bookId]="selectedBook.id"></app-rating>
<app-rating *ngIf="principal.authenticated" [bookId]="selectedBook.id" [principal]="principal"></app-rating>
</div>
</div>

3
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.css
View File

@ -0,0 +1,3 @@
.custom-close {
float:right;
}

2
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
View File

@ -14,7 +14,7 @@ export class BookListComponent implements OnInit {
books: Book[] = [];
newBooks: Book[] = [];
newBook: Book = new Book(null, '', '');
newBook: Book = new Book(Math.floor(Math.random() * 1000), '', '');
booksToEdit: number[] = [];
isAddNewBook: boolean = false;
selectedBook: Book = null;

8
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.css
View File

@ -1,3 +1,11 @@
div.progress {
margin-top: 5px;
}
.rating:hover {
border: solid blue;
}
.selected {
border: solid blue;
}

16
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.html
View File

@ -1,7 +1,14 @@
Ratings:
<div *ngFor="let rating of ratings">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" [style.width]="findWidth(rating)" [attr.aria-valuenow]="rating.stars" aria-valuemin="0" aria-valuemax="5"></div>
<div *ngFor="let rating of ratings; let i = index;" class="row">
<div class="col-md-10">
<div class="progress" [ngClass]="{'selected': principal.isAdmin() && rating === newRating, 'rating': principal.isAdmin()}" (click)="selectRating(rating)">
<div class="progress-bar bg-success" role="progressbar" [style.width]="findWidth(rating)" [attr.aria-valuenow]="rating.stars" aria-valuemin="0" aria-valuemax="5"></div>
</div>
</div>
<div class="col-md-1">
<button *ngIf="principal?.isAdmin()" type="button" class="close" aria-label="Close" (click)="deleteRating(i)">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
@ -11,6 +18,7 @@ Ratings:
<input class="form-check-input" type="radio" name="star" [(ngModel)]="newRating.stars" [value]="star">{{star}}
</label>
</div>
<button type="submit" class="btn btn-secondary" [disabled]="!f.valid">Add Rating</button>
<button *ngIf="newRating.id === null" type="submit" class="btn btn-secondary" [disabled]="!f.valid">Add Rating</button>
<button *ngIf="principal.isAdmin() && newRating.id !== null" type="button" class="btn btn-secondary" (click)="cancelSelection()">Cancel</button>
</form>

26
spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.ts
View File

@ -1,5 +1,6 @@
import {Component, OnInit, Input, OnChanges} from "@angular/core";
import {Rating} from "../rating";
import {Principal} from "../principal";
@Component({
selector: 'app-rating',
@ -9,7 +10,7 @@ import {Rating} from "../rating";
export class RatingComponent implements OnInit, OnChanges {
@Input() bookId: number;
@Input() principal: Principal = null;
ratings: Rating[] = [];
stars: number[] = [1,2,3,4,5];
newRating: Rating = null;
@ -30,15 +31,32 @@ export class RatingComponent implements OnInit, OnChanges {
}
private loadRatings() {
let rating: Rating = new Rating(1, this.bookId, this.bookId);
let rating1: Rating = new Rating(1, this.bookId, this.bookId);
let rating: Rating = new Rating(1, this.bookId, 1);
let rating1: Rating = new Rating(1, this.bookId, 1);
this.ratings.push(rating, rating1);
}
onSubmit() {
console.log(this.newRating);
let ratingCopy: Rating = Object.assign({}, this.newRating, {id: 101});
let ratingCopy: Rating = Object.assign({}, this.newRating, {id: Math.floor(Math.random() * 1000)});
this.ratings.push(ratingCopy);
}
selectRating(rating: Rating) {
if (this.principal.isAdmin()) {
this.newRating = rating;
}
}
cancelSelection() {
this.newRating = new Rating(null, this.bookId, 1);
}
deleteRating(index: number) {
if (this.ratings[index] === this.newRating) {
this.newRating = new Rating(null, this.bookId, 1);
}
this.ratings.splice(index, 1);
}
}