latest
This commit is contained in:
Le Deng
@@ -1,177 +1,120 @@
|
||||
<div class="container">
|
||||
<div class="row" [hidden]="bookAdded">
|
||||
<div class="col s12">
|
||||
<h3 style="margin-top: 30px;" class="center-align">New Book Information <span style="font-size: small"> * is a required field</span>
|
||||
<div [hidden]="bookAdded">
|
||||
<h3 style="margin-top: 30px;">New Book Information <span style="font-size: small"> * is a required field</span>
|
||||
</h3>
|
||||
<form class="col s12" (ngSubmit)="onSubmit()">
|
||||
<div class="row">
|
||||
<div class="input-field col s12">
|
||||
<input id="title" type="text" class="validate" required [(ngModel)]="newBook.title" name="title">
|
||||
<label for="title">* Title</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<input id="author" type="text" class="validate" required [(ngModel)]="newBook.author" name="author">
|
||||
<label for="author">* Author</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="publisher" type="text" class="validate" [(ngModel)]="newBook.publisher" name="publisher">
|
||||
<label for="publisher">Publisher</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col s12">
|
||||
<span class="grey-text">Publication Date
|
||||
<input id="publicationDate" type="date" class="datepicker" [(ngModel)]="newBook.publicationDate"
|
||||
name="publicationDate"></span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<span class="grey-text">* Category</span>
|
||||
<select class="browser-default" id="category" name="category" [(ngModel)]="newBook.category">
|
||||
<option value="Management">Management</option>
|
||||
<option value="Fiction">Fiction</option>
|
||||
<option value="Engineering">Engineering</option>
|
||||
<option value="Programming">Programming</option>
|
||||
<option value="Arts & Literature">Arts & Literature</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-field col s6">
|
||||
<span class="grey-text">Format</span>
|
||||
<select class="browser-default" id="format" name="format" [(ngModel)]="newBook.format">
|
||||
<option value="paperback">Paperback</option>
|
||||
<option value="hardcover">Hardcover</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<input id="pageNumber" type="number" name="numberOfPages" class="validate" step="0.01"
|
||||
[(ngModel)]="newBook.numberOfPages">
|
||||
<label for="pageNumber">Number of Pages</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="isbn" type="text" class="validate" [(ngModel)]="newBook.isbn" name="isbn">
|
||||
<label for="isbn">* ISBN</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="input-field col s4">
|
||||
$
|
||||
<div class="input-field inline">
|
||||
<input id="listPrice" type="number" name="listPrice" class="validate" step="0.01"
|
||||
[(ngModel)]="newBook.listPrice">
|
||||
<label for="listPrice">List Price</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field col s4">
|
||||
$
|
||||
<div class="input-field inline">
|
||||
<input id="ourPrice" type="number" name="ourPrice" class="validate" step="0.01"
|
||||
[(ngModel)]="newBook.ourPrice">
|
||||
<label for="ourPrice">Our Price</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<div class="input-field inline">
|
||||
<input id="shippingWeight" type="number" name="shippingWeight" class="validate" step="0.01"
|
||||
[(ngModel)]="newBook.shippingWeight">
|
||||
<label for="shippingWeight">Shipping Weight</label>
|
||||
</div>
|
||||
ounces
|
||||
</div>
|
||||
|
||||
<div class="input-field col s6">
|
||||
<span class="grey-text">Language</span>
|
||||
<select class="browser-default" id="language" name="language" [(ngModel)]="newBook.language">
|
||||
<option value="english">English</option>
|
||||
<option value="spanish">Spanish</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<input id="inStockNumber" type="number" name="inStockNumber" class="validate" step="0.01"
|
||||
[(ngModel)]="newBook.inStockNumber">
|
||||
<label for="inStockNumber">Number In Stock</label>
|
||||
</div>
|
||||
|
||||
<div class="input-field col s6">
|
||||
<!-- Switch -->
|
||||
<div class="switch" id="active">
|
||||
<label>
|
||||
Inactive
|
||||
<input type="checkbox" [(ngModel)]="newBook.active" name="active">
|
||||
<span class="lever"></span>
|
||||
Active
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="row">
|
||||
<form class="col s12">
|
||||
<div class="row">
|
||||
<div class="input-field col s12">
|
||||
<textarea id="description" class="materialize-textarea" [(ngModel)]="newBook.description"
|
||||
name="description"></textarea>
|
||||
<label for="description">Description</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s10">
|
||||
<div class="file-field input-field">
|
||||
<div class="btn">
|
||||
<span>Image</span>
|
||||
<input type="file" id="bookImage" name="bookImage"
|
||||
(change)="uploadImageService.fileChangeEvent($event)"/>
|
||||
</div>
|
||||
<div class="file-path-wrapper">
|
||||
<input class="file-path validate" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<br/>
|
||||
<!--<button type="button" (click)="uploadImageService.upload()" class="waves-effect waves-teal btn-flat">Upload</button>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<button type="submit" class="waves-effect waves-light btn blue darken-2 text-white">Add Book</button>
|
||||
<a class="waves-effect waves-light btn red darken-2 text-white">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form (ngSubmit)="onSubmit()">
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="4" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="title" type="text" required [(ngModel)]="newBook.title" name="title" placeholder="Title">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="author" type="text" required [(ngModel)]="newBook.author" name="author" placeholder="Author">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="title" type="text" required [(ngModel)]="newBook.publisher" name="publisher" placeholder="Publisher">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="4" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="publicationDate" type="date" class="datepicker" [(ngModel)]="newBook.publicationDate" name="publicationDate" placeholder="Publication Date">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-select placeholder="Category" id="category" name="category" [(ngModel)]="newBook.category">
|
||||
<md-option value="Management">Management</md-option>
|
||||
<md-option value="Fiction">Fiction</md-option>
|
||||
<md-option value="Engineering">Engineering</md-option>
|
||||
<md-option value="Programming">Programming</md-option>
|
||||
<md-option value="Arts & Literature">Arts & Literature</md-option>
|
||||
</md-select>
|
||||
</md-grid-tile>
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-select placeholder="Format" iid="format" name="format" [(ngModel)]="newBook.format">
|
||||
<md-option value="paperback">Paperback</md-option>
|
||||
<md-option value="hardcover">Hardcover</md-option>
|
||||
</md-select>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="pageNumber" type="number" name="numberOfPages" class="validate" step="1" [(ngModel)]="newBook.numberOfPages" placeholder="Number of Pages">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="isbn" type="text" class="validate" [(ngModel)]="newBook.isbn" name="isbn" placeholder="ISBN">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
$
|
||||
<md-input-container>
|
||||
<input mdInput id="listPrice" type="number" name="listPrice" class="validate" step="0.01" [(ngModel)]="newBook.listPrice" placeholder="List Price">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
$
|
||||
<md-input-container>
|
||||
<input mdInput id="ourPrice" type="number" name="ourPrice" class="validate" step="0.01" [(ngModel)]="newBook.ourPrice" placeholder="Our Price">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="shippingWeight" type="number" name="shippingWeight" class="validate" step="0.01" [(ngModel)]="newBook.shippingWeight" placeholder="Shipping Weight">
|
||||
</md-input-container> ounces
|
||||
</md-grid-tile>
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-select placeholder="Language" iid="format" name="format" [(ngModel)]="newBook.format">
|
||||
<md-option value="english">English</md-option>
|
||||
<md-option value="spanish">Spanish</md-option>
|
||||
</md-select>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-grid-list cols="4" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<md-input-container>
|
||||
<input mdInput id="inStockNumber" type="number" name="inStockNumber" class="validate" step="0.01" [(ngModel)]="newBook.inStockNumber" placeholder="Numbers In Stock">
|
||||
</md-input-container>
|
||||
</md-grid-tile>
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
|
||||
<md-slide-toggle [color]="color" [checked]="checked" [disabled]="disabled" [(ngModel)]="newBook.active" name="active">
|
||||
Active
|
||||
</md-slide-toggle>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
<md-input-container>
|
||||
<textarea mdInput id="title" [(ngModel)]="newBook.description" name="description" placeholder="Description"></textarea>
|
||||
</md-input-container>
|
||||
Image
|
||||
<input id="title" type="file" id="bookImage" name="bookImage" (change)="uploadImageService.fileChangeEvent($event)">
|
||||
<br><br>
|
||||
<md-grid-list cols="20" rowHeight="60px">
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<button class="mat-primary" md-raised-button type="submit">Add Book</button>
|
||||
</md-grid-tile>
|
||||
<md-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<a class="mat-warn" md-raised-button routerLink="/">Cancel</a>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" [hidden]="!bookAdded">
|
||||
<div class="col s12">
|
||||
<h3>Book added successfully!</h3>
|
||||
<div class="row" [hidden]="!bookAdded">
|
||||
<h3>Book added successfully!</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,6 +18,18 @@ body {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
md-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
md-slide-toggle {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width:90%;
|
||||
margin:auto;
|
||||
|
||||
Reference in New Issue
Block a user