Skip to content

Commit

Permalink
New resource view & updated resource add (fixes #336) (#338)
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulbert
paulbert authored Feb 13, 2018
1 parent 74cac6c commit 56a182f
Show file tree
Hide file tree
Showing 8 changed files with 235 additions and 180 deletions.
5 changes: 4 additions & 1 deletion src/app/home/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,12 @@ export class HomeComponent implements OnInit, AfterViewInit {
this.mainContent._changeDetectorRef.markForCheck();
}

// Used to swap in different background.
// Should remove when background is finalized.
backgroundRoute() {
const routesWithBackground = [ 'resources', 'courses' ];
const routesWithoutBackground = [ 'resources/add', 'resources/view' ];
// Leaving the exception variable in so we can easily use this while still testing backgrounds
const routesWithoutBackground = [];
const isException = routesWithoutBackground
.findIndex((route) => this.router.url.indexOf(route) > -1) > -1;
const isRoute = routesWithBackground
Expand Down
204 changes: 106 additions & 98 deletions src/app/resources/resources-add.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,107 @@
<h2 i18n>New Resource</h2>
<form [formGroup]="resourceForm" (ngSubmit)="onSubmit()" novalidate>
<mat-grid-list cols="3">
<mat-form-field>
<input matInput i18n-placeholder placeholder="Title" formControlName="title" required>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.title"></planet-form-error-messages></mat-error>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Author" formControlName="author">
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Year" formControlName="year">
</mat-form-field>
</mat-grid-list>
<div>
<mat-form-field>
<textarea matInput i18n-placeholder placeholder="Description" formControlName="description" required></textarea>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.description"></planet-form-error-messages></mat-error>
</mat-form-field>
<mat-toolbar>
<a mat-icon-button routerLink="/resources"><mat-icon>arrow_back</mat-icon></a>
</mat-toolbar>

<div class="space-container">
<mat-toolbar class="primary-color font-size-1" i18n>New resource</mat-toolbar>
<div class="view-container">
<form class="view-container" [formGroup]="resourceForm" (ngSubmit)="onSubmit()" novalidate>
<mat-grid-list cols="3">
<mat-form-field>
<input matInput i18n-placeholder placeholder="Title" formControlName="title" required>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.title"></planet-form-error-messages></mat-error>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Author" formControlName="author">
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Year" formControlName="year">
</mat-form-field>
</mat-grid-list>
<div>
<mat-form-field>
<textarea matInput i18n-placeholder placeholder="Description" formControlName="description" required></textarea>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.description"></planet-form-error-messages></mat-error>
</mat-form-field>
</div>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Language" formControlName="language">
<mat-option i18n value="English">English</mat-option>
<mat-option i18n value="Spanish">Español</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Publisher/Attribution" formControlName="publisher">
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Link to License" formControlName="linkToLicense">
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Subject(s)" formControlName="subject" multiple>
<mat-option *ngFor="let subject of subjectList" [value]="subject">{{subject}}</mat-option>
</mat-select>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.subject"></planet-form-error-messages></mat-error>
</mat-form-field>
<mat-form-field>
<mat-select i18n-placeholder placeholder="Level(s)" formControlName="level" multiple>
<mat-option *ngFor="let level of levelList" [value]="level">{{level}}</mat-option>
</mat-select>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.level"></planet-form-error-messages></mat-error>
</mat-form-field>
<mat-form-field>
<mat-select i18n-placeholder placeholder="Open" formControlName="openWith">
<mat-option *ngFor="let open of openWith" [value]="open">
{{ open }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Resource For" formControlName="resourceFor" multiple>
<mat-option i18n value="default">Default</mat-option>
<mat-option i18n value="leader">Leader</mat-option>
<mat-option i18n value="learner">learner</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select i18n-placeholder placeholder="Media" formControlName="medium">
<mat-option *ngFor="let medium of media" [value]="medium">
{{ medium }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [(ngModel)]="currentDate" formControlName="articleDate" i18n-placeholder placeholder="Article Date" readonly>
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Resource Type" formControlName="resourceType">
<mat-option *ngFor="let type of resourceType" [value]="type">
{{ type }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder [(ngModel)]="name" placeholder="Added By" formControlName="addedBy" readonly>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Open URL" formControlName="openUrl" >
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="1">
<mat-form-field>
<input matInput i18n-placeholder placeholder="Open Which File" formControlName="openWhichFile">
</mat-form-field>
<label>File Upload:</label>
<input type="file" (change)="bindFile($event)" />
</mat-grid-list>
<button mat-raised-button type="submit" color="primary" i18n>Submit</button>
<button mat-raised-button type="button" color="warn" (click)="cancel()" i18n>Cancel</button>
</form>
</div>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Language" formControlName="language">
<mat-option i18n value="English">English</mat-option>
<mat-option i18n value="Spanish">Español</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Publisher/Attribution" formControlName="publisher">
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Link to License" formControlName="linkToLicense">
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Subject(s)" formControlName="subject" multiple>
<mat-option *ngFor="let subject of subjectList" [value]="subject">{{subject}}</mat-option>
</mat-select>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.subject"></planet-form-error-messages></mat-error>
</mat-form-field>
<mat-form-field>
<mat-select i18n-placeholder placeholder="Level(s)" formControlName="level" multiple>
<mat-option *ngFor="let level of levelList" [value]="level">{{level}}</mat-option>
</mat-select>
<mat-error><planet-form-error-messages [control]="resourceForm.controls.level"></planet-form-error-messages></mat-error>
</mat-form-field>
<mat-form-field>
<mat-select i18n-placeholder placeholder="Open" formControlName="openWith">
<mat-option *ngFor="let open of openWith" [value]="open">
{{ open }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Resource For" formControlName="resourceFor" multiple>
<mat-option i18n value="default">Default</mat-option>
<mat-option i18n value="leader">Leader</mat-option>
<mat-option i18n value="learner">learner</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select i18n-placeholder placeholder="Media" formControlName="medium">
<mat-option *ngFor="let medium of media" [value]="medium">
{{ medium }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [(ngModel)]="currentDate" formControlName="articleDate" i18n-placeholder placeholder="Article Date" readonly>
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="3">
<mat-form-field>
<mat-select i18n-placeholder placeholder="Resource Type" formControlName="resourceType">
<mat-option *ngFor="let type of resourceType" [value]="type">
{{ type }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder [(ngModel)]="name" placeholder="Added By" formControlName="addedBy" readonly>
</mat-form-field>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Open URL" formControlName="openUrl" >
</mat-form-field>
</mat-grid-list>
<mat-grid-list cols="1">
<mat-form-field>
<input matInput i18n-placeholder placeholder="Open Which File" formControlName="openWhichFile">
</mat-form-field>
<label>File Upload:</label>
<input type="file" (change)="bindFile($event)" />
</mat-grid-list>
<button mat-raised-button type="submit" color="primary" i18n>Submit</button>
<button mat-raised-button type="button" color="warn" (click)="cancel()" i18n>Cancel</button>
</form>
</div>
13 changes: 12 additions & 1 deletion src/app/resources/resources-add.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,18 @@ import { forkJoin } from 'rxjs/observable/forkJoin';
import { PlanetMessageService } from '../shared/planet-message.service';

@Component({
templateUrl: './resources-add.component.html'
templateUrl: './resources-add.component.html',
styles: [ `
/* Consider using space-container app wide for route views */
.space-container {
margin: 64px 30px;
background: none;
}
.view-container {
background-color: #FFFFFF;
padding: 1rem;
}
` ]
})

export class ResourcesAddComponent implements OnInit {
Expand Down
127 changes: 55 additions & 72 deletions src/app/resources/view-resources/resources-view.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,59 @@
<mat-grid-list cols="2" *ngIf="resource">
<mat-grid-tile>
<mat-card>
<mat-card-header>
<mat-card-title><h3>{{resource.title}}</h3> - Author: <i>{{resource.author}}</i></mat-card-title>
<mat-card-subtitle>Published by: {{resource.Publisher}} on {{resource.year}} </mat-card-subtitle>
</mat-card-header>
<div [ngSwitch]="mediaType">
<img [src]="resourceSrc" *ngSwitchCase="'image'">
<video controls *ngSwitchCase="'video'">
<source [src]="resourceSrc" [type]="contentType" />
Browser not supported
</video>
<audio controls *ngSwitchCase="'audio'">
<source [src]="resourceSrc" [type]="contentType" />
Browser not supported
</audio>
<object [data]="pdfSrc" *ngSwitchCase="'pdf'" width="800" height="600"></object>
<div *ngSwitchCase="'other'"><a class='btn btn-primary' href={{resourceSrc}}>Open File</a></div>
<iframe *ngSwitchCase="'HTML'" [src]="pdfSrc"></iframe>
</div>
<a mat-raised-button [href]="couchSrc" target="_blank" color="primary" *ngIf="mediaType === 'HTML'">Open in new tab</a>
<mat-card-content *ngIf="resource.medium">
<p>
Media: {{ resource.medium }}
</p>
</mat-card-content>
<mat-card-content *ngIf="resource.language">
<p>
Language: {{ resource.language }}
</p>
</mat-card-content>
<mat-card-content *ngIf="resource.subject">
<p>
Subject/s: {{resource.subject}}
</p>
</mat-card-content>
<mat-card-content *ngIf="resource.linkToLicense">
<p>
Link to License: <a href={{resource.linkToLicense}} target="_blank">{{resource.linkToLicense}}</a>
</p>
</mat-card-content>
<mat-card-content *ngIf="resource.resourceFor">
<p>
Resource: {{ resource.resourceFor }}
</p>
</mat-card-content>
<mat-card-content *ngIf="resource.resourceType">
<p>
Resource Type: {{ resource.resourceType }}
</p>
</mat-card-content>
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<div class="list-item-rating">
<span class="stars">
<mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon>
<!-- used simple arithmetic to get 20 and converted into % -->
<span [ngStyle]="{'width': rating.average * 20 + '%'}">
<mat-toolbar>
<a mat-icon-button routerLink="/resources"><mat-icon>arrow_back</mat-icon></a>
<span i18n>Library</span>
</mat-toolbar>

<div class="space-container">
<mat-toolbar class="primary-color font-size-1">
<span class="margin-lr-3">{{resource.title}}</span>
<button mat-button (click)="toggleFullView()" i18n>
{fullView, select, on {Show} off {Hide}} details
</button>
</mat-toolbar>
<div class="view-container" [ngClass]="{'full-view-container':fullView==='on'}">
<div class="resource-detail bg-grey" [ngClass]="{'invisible':fullView==='on'}">
<div class="list-item-rating">
<span class="stars">
<mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon>
<!-- used simple arithmetic to get 20 and converted into % -->
<span [ngStyle]="{'width': rating.average * 20 + '%'}">
<mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star</mat-icon>
</span>
</span>
</span>
<div class="stats stats-total">{{ rating.totalCount }} Total</div>
<div class="stats stats-female">{{ rating.femalePercent }}% Female</div>
<div class="stats stats-male">{{ rating.malePercent }}% Male</div>
<div class="rating">
<span class="rating-number">{{ rating.average.toFixed(1) }}</span>
<button mat-button (click)="openRatingDialog(resource._id)" class="uppercase" [ngSwitch]="rating.userRating.rate">
<span *ngSwitchCase="" i18n>Rate</span>
<span *ngSwitchDefault i18n>Update Your Rating</span>
</button>
<div class="stats stats-total">{{ rating.totalCount }} Total</div>
<div class="stats stats-female">{{ rating.femalePercent }}% Female</div>
<div class="stats stats-male">{{ rating.malePercent }}% Male</div>
<div class="rating">
<span class="rating-number">{{ rating.average.toFixed(1) }}</span>
<button mat-button (click)="openRatingDialog(resource._id)" class="uppercase" [ngSwitch]="rating.userRating.rate">
<span *ngSwitchCase="" i18n>Rate</span>
<span *ngSwitchDefault i18n>Update Your Rating</span>
</button>
</div>
</div>
<p>Author: <i>{{resource.author}}</i></p>
<p>Published by: {{resource.Publisher}} on {{resource.year}}</p>
<p>Media: {{ resource.medium }}</p>
<p>Language: {{ resource.language }}</p>
<p>Subject/s: {{resource.subject}}</p>
<p>Link to License: <a href={{resource.linkToLicense}} target="_blank">{{resource.linkToLicense}}</a></p>
<p>Resource: {{ resource.resourceFor }}</p>
<p>Resource Type: {{ resource.resourceType }}</p>
<a mat-raised-button [href]="couchSrc" target="_blank" color="primary" *ngIf="mediaType === 'HTML'">Open in new tab</a>
</div>
<div class="resource-view" [ngSwitch]="mediaType">
<img [src]="resourceSrc" *ngSwitchCase="'image'">
<video controls *ngSwitchCase="'video'">
<source [src]="resourceSrc" [type]="contentType" />
Browser not supported
</video>
<audio controls *ngSwitchCase="'audio'">
<source [src]="resourceSrc" [type]="contentType" />
Browser not supported
</audio>
<object [data]="pdfSrc" *ngSwitchCase="'pdf'" width="800" height="600"></object>
<div *ngSwitchCase="'other'"><a class='btn btn-primary' href={{resourceSrc}}>Open File</a></div>
<iframe *ngSwitchCase="'HTML'" [src]="pdfSrc"></iframe>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
Loading

0 comments on commit 56a182f

Please sign in to comment.