Permalink
Browse files

Step 19.14: Update the layout of the party details

  • Loading branch information...
dotansimha authored and DAB0mB committed Sep 27, 2016
1 parent 88535d8 commit 58a42036d9c5b9c3ca89df5863fdc1a0039ed497
Showing with 52 additions and 57 deletions.
  1. +52 −57 client/imports/app/parties/party-details.component.html
@@ -1,61 +1,56 @@
<div class="row ma-party-details-container">
<div class="col-sm-6 col-sm-offset-3">
<legend>View and Edit Your Party Details:</legend>
<form class="form-horizontal" *ngIf="party" (submit)="saveParty()">
<div class="form-group">
<label>Party Name</label>
<input [disabled]="!isOwner" type="text" [(ngModel)]="party.name" name="name" class="form-control">
</div>
<div class="party-details-container" *ngIf="party">
<div class="row">
<div class="party-details">
<md-card>
<h2>{{ party.name }}</h2>
<form layout="column" (submit)="saveParty()">
<label>Party Name: </label>
<md-input [disabled]="!isOwner" [(ngModel)]="party.name" name="name"></md-input>
<br />
<label>Party Description: </label>
<md-input [disabled]="!isOwner" [(ngModel)]="party.description" name="description"></md-input>
<br />
<label>Location name: </label>
<md-input [disabled]="!isOwner" [(ngModel)]="party.location.name" name="location"></md-input>
<br />
<md-checkbox [disabled]="!isOwner" [(checked)]="party.public" name="public" aria-label="Public">
Public party?
</md-checkbox>
<div class="form-group">
<label>Description</label>
<input [disabled]="!isOwner" type="text" [(ngModel)]="party.description" name="description" class="form-control">
</div>
<div class="form-group">
<label>Location name</label>
<input [disabled]="!isOwner" type="text" [(ngModel)]="party.location.name" name="location" class="form-control">
</div>
<div class="form-group">
<button [disabled]="!isOwner" type="submit" class="btn btn-primary">Save</button>
<a [routerLink]="['/']" class="btn">Back</a>
</div>
</form>
<ul class="ma-invite-list" *ngIf="isOwner || isPublic">
<h3>
Users to invite:
</h3>
<li *ngFor="let user of users | async">
<div>{{ user | displayName }}</div>
<button (click)="invite(user)" class="btn btn-primary btn-sm">Invite</button>
</li>
</ul>
<div *ngIf="isInvited">
<h2>Reply to the invitation</h2>
<input type="button" class="btn btn-primary" value="I'm going!" (click)="reply('yes')">
<input type="button" class="btn btn-warning" value="Maybe" (click)="reply('maybe')">
<input type="button" class="btn btn-danger" value="No" (click)="reply('no')">
<div layout="row" layout-align="left">
<button [disabled]="!isOwner" type="submit" md-raised-button color="accent">Save</button>
<a [routerLink]="['/']" md-raised-button class="md-raised">Back</a>
</div>
</form>
</md-card>
</div>
<h3 class="ma-map-title">
Click the map to set the party location
</h3>
<div class="angular-google-map-container">
<sebm-google-map
[latitude]="lat || centerLat"
[longitude]="lng || centerLng"
[zoom]="8"
(mapClick)="mapClicked($event)">
<sebm-google-map-marker
*ngIf="lat && lng"
[latitude]="lat"
[longitude]="lng">
</sebm-google-map-marker>
</sebm-google-map>
<div class="party-invites">
<md-card>
<h2>Invitations</h2>
<span [hidden]="!party.public">Public party, no need for invitations!</span>
<md-list>
<md-list-item *ngFor="let user of users | async">
<div>{{ user | displayName }}</div>
<button (click)="invite(user)" md-raised-button>Invite</button>
</md-list-item>
</md-list>
</md-card>
</div>
<div class="party-map">
<md-card>
<h2>Party location</h2>
<sebm-google-map
[latitude]="lat || centerLat"
[longitude]="lng || centerLng"
[zoom]="8"
(mapClick)="mapClicked($event)">
<sebm-google-map-marker
*ngIf="lat && lng"
[latitude]="lat"
[longitude]="lng">
</sebm-google-map-marker>
</sebm-google-map>
</md-card>
</div>
</div>
</div>
</div>

0 comments on commit 58a4203

Please sign in to comment.