Skip to content

Commit 2ddac42

Browse files
jweismanjweisman
committed
Use Cloud Apps Style
Bump to SDK 0.1.25 and use Cloud App style
1 parent e96dce8 commit 2ddac42

21 files changed

+761
-776
lines changed

‎cloudapp/src/app/app.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { AppService } from './app.service';
33

44
@Component({
55
selector: 'app-root',
6-
template: '<app-topmenu></app-topmenu><router-outlet></router-outlet>'
6+
template: '<router-outlet></router-outlet>'
77
})
88
export class AppComponent {
99

‎cloudapp/src/app/bind/bind.component.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<app-topmenu>
2+
<div buttons>
3+
<button mat-flat-button type="button" color="primary" (click)="save()" [disabled]="!(form?.dirty)">Save</button>
4+
</div>
5+
</app-topmenu>
6+
<div class="loading-shade" *ngIf="saving">
7+
<mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
8+
</div>
19
<div *ngIf="form; else noitem">
210
<p><strong>BIB Title:</strong> {{ form.get('bib_data.title').value }}</p>
311
<form [formGroup]="form">
@@ -16,10 +24,6 @@
1624
</mat-form-field>
1725
</ng-container>
1826
</form>
19-
<div class="commands-container">
20-
<button mat-stroked-button type="button" color="primary" (click)="save()" [disabled]="!form.dirty">Save</button>
21-
<mat-spinner diameter="30" class="spinner" *ngIf="saving"></mat-spinner>
22-
</div>
2327
</div>
2428
<ng-template #noitem>
2529
Please navigate to an item record.

‎cloudapp/src/app/configuration/configuration.component.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1+
<app-topmenu>
2+
<div buttons>
3+
<button mat-flat-button type="button" color="primary" (click)="save()" [disabled]="!(form?.dirty)">Save</button>
4+
</div>
5+
</app-topmenu>
6+
<div class="loading-shade" *ngIf="saving">
7+
<mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
8+
</div>
19
<form [formGroup]="form">
210
<section class="config-section">
311
<mat-form-field>
412
<input matInput placeholder="Service URL" formControlName="serviceUrl">
513
</mat-form-field>
614
</section>
7-
</form>
8-
9-
<div class="commands-container">
10-
<button mat-stroked-button type="button" color="primary" (click)="save()" [disabled]="!form.dirty">Save</button>
11-
<mat-spinner diameter="30" class="spinner" *ngIf="saving"></mat-spinner>
12-
</div>
15+
</form>

‎cloudapp/src/app/external/external.component.html‎

Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,73 @@
1-
<form>
2-
<h3>Hathitrust Bibliographic API</h3>
3-
<p>This API is open and does not require authentication. Enter an identifier and select an identifier type to search the API.</p>
4-
<section class="settings-section">
5-
<mat-form-field>
6-
<mat-label>Identifier Type</mat-label>
7-
<mat-select value="isbn" #identifierType>
8-
<mat-option value="oclc">OCLC Number</mat-option>
9-
<mat-option value="lccn">LCCN</mat-option>
10-
<mat-option value="issn">ISSN</mat-option>
11-
<mat-option value="isbn">ISBN</mat-option>
12-
<mat-option value="htid">HathiTrust Volume ID</mat-option>
13-
<mat-option value="recordnumber">HathiTrust record number</mat-option>
14-
</mat-select>
15-
</mat-form-field>
16-
</section>
17-
<section class="settings-section">
18-
<mat-form-field>
19-
<mat-label>Identifier</mat-label>
20-
<input matInput #identifier value="0394530934">
21-
</mat-form-field>
22-
</section>
23-
</form>
24-
25-
<div class="commands-container">
26-
<button mat-stroked-button type="button" color="primary" (click)="search(identifierType.value, identifier.value)">Search</button>
27-
<mat-spinner diameter="30" class="spinner" *ngIf="running.search"></mat-spinner>
1+
<app-topmenu></app-topmenu>
2+
<div class="loading-shade" *ngIf="running">
3+
<mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
4+
</div>
5+
<div class="section">
6+
<form>
7+
<h2>HathiTrust Bibliographic API</h2>
8+
<p>This API is open and does not require authentication. Enter an identifier and select an identifier type to search the API.</p>
9+
<section class="settings-section">
10+
<mat-form-field>
11+
<mat-label>Identifier Type</mat-label>
12+
<mat-select value="isbn" #identifierType>
13+
<mat-option value="oclc">OCLC Number</mat-option>
14+
<mat-option value="lccn">LCCN</mat-option>
15+
<mat-option value="issn">ISSN</mat-option>
16+
<mat-option value="isbn">ISBN</mat-option>
17+
<mat-option value="htid">HathiTrust Volume ID</mat-option>
18+
<mat-option value="recordnumber">HathiTrust record number</mat-option>
19+
</mat-select>
20+
</mat-form-field>
21+
</section>
22+
<section class="settings-section">
23+
<mat-form-field>
24+
<mat-label>Identifier</mat-label>
25+
<input matInput #identifier value="0394530934">
26+
</mat-form-field>
27+
</section>
28+
</form>
29+
30+
<button mat-flat-button type="button" color="primary" (click)="search(identifierType.value, identifier.value)">Search</button>
31+
32+
33+
<mat-card *ngIf="record">
34+
<mat-card-header>
35+
<mat-card-title>HathiTrust Record</mat-card-title>
36+
</mat-card-header>
37+
<mat-card-content>
38+
<img *ngIf="record.items.length>0" src="https://babel.hathitrust.org/cgi/imgsrv/cover?id={{record.items[0].htid}}" class="pull-right">
39+
<ul>
40+
<li><strong>Record ID: </strong> <a href="{{record.recordURL}}" target="_blank">{{ record.id }}</a></li>
41+
<li><strong>Title: </strong>{{ record.titles[0] }}</li>
42+
<li><strong>Held By:</strong>
43+
<ul>
44+
<li *ngFor="let item of record.items"><a href="{{item.itemURL}}" target="_blank">{{item.orig}}</a></li>
45+
</ul>
46+
</li>
47+
</ul>
48+
</mat-card-content>
49+
</mat-card>
2850
</div>
2951

30-
<mat-card *ngIf="record">
31-
<mat-card-header>
32-
<mat-card-title>HathiTrust Record</mat-card-title>
33-
</mat-card-header>
34-
<mat-card-content>
35-
<img *ngIf="record.items.length>0" src="https://babel.hathitrust.org/cgi/imgsrv/cover?id={{record.items[0].htid}}" class="pull-right">
36-
<ul>
37-
<li><strong>Record ID: </strong> <a href="{{record.recordURL}}" target="_blank">{{ record.id }}</a></li>
38-
<li><strong>Title: </strong>{{ record.titles[0] }}</li>
39-
<li><strong>Held By:</strong>
40-
<ul>
41-
<li *ngFor="let item of record.items"><a href="{{item.itemURL}}" target="_blank">{{item.orig}}</a></li>
42-
</ul>
43-
</li>
44-
</ul>
45-
</mat-card-content>
46-
</mat-card>
4752

48-
<section *ngIf="authToken">
49-
<h3>Hathitrust Data API</h3>
53+
<div class="section" *ngIf="authToken">
54+
<h2>HathiTrust Data API</h2>
5055
<p>This API is restricted and requires authentication.</p>
5156
<section class="settings-section">
5257
<mat-form-field>
5358
<mat-label>Identifier</mat-label>
5459
<input matInput #data_api_identifier value="mdp.39015000000128">
5560
</mat-form-field>
5661
</section>
57-
<div class="commands-container">
58-
<button mat-stroked-button type="button" color="primary" (click)="dataApi(data_api_identifier.value)">Retrieve Metadata</button>
59-
<mat-spinner diameter="30" class="spinner" *ngIf="running.data"></mat-spinner>
60-
</div>
62+
<button mat-flat-button type="button" color="primary" (click)="dataApi(data_api_identifier.value)">Retrieve Metadata</button>
6163
<mat-card *ngIf="images.length>0">
6264
<mat-card-header>
6365
<mat-card-title>HathiTrust Page Scans</mat-card-title>
6466
</mat-card-header>
6567
<mat-card-content>
6668
<p>Retrieved <strong>{{images.length}}</strong> pages from the API for this title.</p>
67-
<button mat-stroked-button type="button" color="primary" (click)="openModal()">View images</button>
69+
<button mat-flat-button type="button" color="primary" (click)="openModal()">View images</button>
6870
</mat-card-content>
6971
</mat-card>
70-
</section>
72+
</div>
7173
<app-lightbox></app-lightbox>

‎cloudapp/src/app/external/external.component.scss‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
.section {
2+
border: 1px grey solid;
3+
padding: 5px 7px;
4+
margin-bottom: 10px;
5+
}
6+
17
.settings-section {
28
display: flex;
39
align-content: center;
@@ -9,15 +15,14 @@
915
margin: 0 10px;
1016
}
1117

12-
.pull-right {
13-
margin-right: 15px;
14-
float: right;
15-
}
16-
1718
li {
1819
margin-bottom: 5px;
1920
}
2021

2122
mat-card {
2223
margin-bottom: 20px
24+
}
25+
26+
button {
27+
margin-bottom: 20px;
2328
}

‎cloudapp/src/app/external/external.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { CloudAppEventsService } from '@exlibris/exl-cloudapp-angular-lib';
1414
})
1515
export class ExternalComponent implements OnInit {
1616
@ViewChild(LightboxComponent, {static: true}) lightbox: LightboxComponent;
17-
running = { search: false, data: false };
17+
running = false;
1818
record: any;
1919
images: Array<string> = [];
2020
authToken: string;
@@ -33,7 +33,7 @@ export class ExternalComponent implements OnInit {
3333
}
3434

3535
search(identifierType: string, identifier: string) {
36-
this.running.search = true;
36+
this.running = true;
3737
this.record = null;
3838
this.http.get<any>(hathitrustSearchUrl(identifierType, identifier))
3939
.pipe(
@@ -45,7 +45,7 @@ export class ExternalComponent implements OnInit {
4545
{ id: Object.keys(res.records)[0] }, Object.values(res.records)[0] )
4646
}
4747
}),
48-
finalize(() => this.running.search = false)
48+
finalize(() => this.running = false)
4949
)
5050
.subscribe({
5151
next: resp => this.record = resp,
@@ -56,15 +56,15 @@ export class ExternalComponent implements OnInit {
5656
dataApi(id: string) {
5757
const headers = {'Authorization': `Bearer ${this.authToken}` };
5858
this.lightbox.headers = headers;
59-
this.running.data = true;
59+
this.running = true;
6060
this.http.get<any>(hathitrustMetaUrl(id), { headers } ).pipe(
6161
map( resp => {
6262
if (resp['htd:seqmap'] && resp['htd:seqmap'][0] && resp['htd:seqmap'][0]['htd:seq']) {
6363
const seqmap: Array<any> = resp['htd:seqmap'][0]['htd:seq'];
6464
return seqmap.map( s => hathitrustImageUrl(id, s.pseq) );
6565
}
6666
}),
67-
finalize(() => this.running.data = false)
67+
finalize(() => this.running = false)
6868
).subscribe({
6969
next: resp => this.images = resp,
7070
error: e => this.toastr.error(e.message)

‎cloudapp/src/app/main/main.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<section>
22
<h1>
3-
CloudApp Tutorials
3+
Cloud App Tutorials
44
</h1>
5-
<p>This app includes all of the code referenced in the <a href="https://developers.exlibrisgroup.com/cloudapps/tutorials" target="_blank">tutorials section of the CloudApps documentation</a>. The following menu will lead you to the component referenced in the corresponding tutorial:</p>
5+
<p>This app includes all of the code referenced in the <a href="https://developers.exlibrisgroup.com/cloudapps/tutorials" target="_blank">tutorials section of the Cloud Apps documentation</a>. The following menu will lead you to the component referenced in the corresponding tutorial:</p>
66
<ul>
77
<li><a [routerLink]="['newroute']">Adding additional routes</a></li>
88
<li><a [routerLink]="['theming']">Using Material components & theming</a></li>

‎cloudapp/src/app/multi-select/multi-select.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<app-topmenu></app-topmenu>
12
<p>A total of <strong>{{ ids.size }}</strong> items have been selected.</p>
23
<div *ngIf="entities.length>0 else noEntities">
34
<p>Select the desired items:</p>

‎cloudapp/src/app/newroute/newroute.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
<app-topmenu></app-topmenu>
12
<p>newroute works!</p>

‎cloudapp/src/app/parallel/parallel.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<app-topmenu>
2+
<div buttons>
3+
<button mat-flat-button type="button" color="secondary" (click)="clear()">Clear</button>
4+
<button mat-flat-button type="button" color="primary" (click)="run()">Retrieve users</button>
5+
</div>
6+
</app-topmenu>
17
<div class="loading-shade" *ngIf="loading">
28
<mat-progress-spinner
39
[mode]="showProgress ? 'determinate' : 'indeterminate'"
@@ -19,10 +25,6 @@
1925
</mat-select>
2026
</mat-form-field>
2127
<mat-checkbox [(ngModel)]="showProgress" labelPosition="before">Show progress</mat-checkbox>
22-
<div class="commands-container">
23-
<button mat-stroked-button type="button" color="primary" (click)="run()">Retrieve users</button>
24-
<button mat-flat-button type="button" (click)="clear()">Clear</button>
25-
</div>
2628

2729
<ul>
2830
<li *ngFor="let user of users">

0 commit comments

Comments
 (0)