Skip to content

Commit

Permalink
layout updates and changes to modal dialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
@webprofusion-chrisc
webprofusion-chrisc committed May 25, 2016
1 parent f4c5a1f commit f81e46c
Show file tree
Hide file tree
Showing 10 changed files with 225 additions and 151 deletions.
47 changes: 31 additions & 16 deletions App/Ionic2/ocm-app/app/pages/comment/comment.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@
</ion-navbar>
<ion-content class="comment-page" padding>

<div class="banner">
<h1>{{poi.AddressInfo.Title}}</h1>
<p>{{poi.AddressInfo.AddressLine1}}</p>
</div>

<ion-list>

<ion-item>
<ion-item>
<ion-label stacked>Comment Type</ion-label>
<ion-select [(ngModel)]="commentModel.UserCommentTypeID">
<ion-option *ngFor="let item of commentTypes" [value]="item.ID" [checked]="false">{{item.Title}}</ion-option>
Expand All @@ -31,26 +34,38 @@ <h1>{{poi.AddressInfo.Title}}</h1>

</ion-item>


<ion-item>
<ion-label stacked>Your Rating</ion-label>
<ion-select [(ngModel)]="commentModel.Rating">
<ion-option value="5">5 - Excellent</ion-option>
<ion-option value="4">4 - Good</ion-option>
<ion-option value="3">3 - Average</ion-option>
<ion-option value="2">2 - Not Good</ion-option>
<ion-option value="1">1 - Bad</ion-option>


<ion-select [(ngModel)]="commentModel.Rating">
<ion-option value="5">5 - Excellent</ion-option>
<ion-option value="4">4 - Good</ion-option>
<ion-option value="3">3 - Average</ion-option>
<ion-option value="2">2 - Not Good</ion-option>
<ion-option value="1">1 - Bad</ion-option>
<ion-option value="" [checked]="true">Not Rated</ion-option>
</ion-select>
</ion-item>


</ion-list>

<div padding>
<button block (click)="cancel()">Cancel</button>
<button primary block (click)="addComment()">Add Comment</button>
</div>
</ion-content>

</ion-content>
<ion-toolbar position="bottom">
<ion-buttons start>
<button (click)="cancel()">
<ion-icon name="close"></ion-icon>
Cancel

</button>
</ion-buttons>
<ion-buttons end>
<button royal>
Add Comment
<ion-icon name="send"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
8 changes: 7 additions & 1 deletion App/Ionic2/ocm-app/app/pages/mediaupload/mediaupload.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</ion-navbar>
<ion-content class="media-upload" padding>

<div class="poi-summary">
<div class="banner">
<h1>{{poi.AddressInfo.Title}}</h1>
<p>{{poi.AddressInfo.AddressLine1}}</p>
</div>
Expand Down Expand Up @@ -68,7 +68,13 @@ <h1>{{poi.AddressInfo.Title}}</h1>

</ion-content>
<ion-toolbar position="bottom">
<ion-buttons start>
<button (click)="cancel()">
<ion-icon name="close"></ion-icon>
Cancel

</button>
</ion-buttons>
<ion-buttons end>
<button royal>
Upload
Expand Down
4 changes: 4 additions & 0 deletions App/Ionic2/ocm-app/app/pages/mediaupload/mediaupload.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,15 @@ export class MediaUploadPage {
this.appManager.submitMediaItem(submission).then((result) => {
this.appManager.dismissLoadingProgress();
this.appManager.showToastNotification(this.nav, "Upload completed");
this.nav.pop();
//todo: refresh POI details to show new upload
}, (rejected) => {
this.appManager.dismissLoadingProgress();
this.appManager.showToastNotification(this.nav, "Upload failed, please try again.");
});
}

cancel() {
this.nav.pop();
}
}
174 changes: 97 additions & 77 deletions App/Ionic2/ocm-app/app/pages/poi-details/poi-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,22 @@
</ion-title>
</ion-navbar>

<ion-toolbar *ngIf="hasNavbar==false">

<ion-title>{{ 'ocm.details.sectionTitle' | translate }}</ion-title>
<ion-buttons end>
<button royal (click)="close()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>


<ion-content class="poi-details" padding>

<div class="poi-heading">
<div class="banner">

<div class="poi-heading-info">

<h2>{{poi.AddressInfo.Title}} <small>OCM-{{poi.ID}}</small></h2>

<button small (click)="addComment()">
Expand All @@ -26,7 +36,7 @@ <h2>{{poi.AddressInfo.Title}} <small>OCM-{{poi.ID}}</small></h2>
<button small (click)="toggleFavourite()">
<ion-icon name="star"></ion-icon> Favourite
</button>
</div>

</div>


Expand Down Expand Up @@ -100,84 +110,91 @@ <h2>{{poi.AddressInfo.Title}} <small>OCM-{{poi.ID}}</small></h2>



<ion-grid>
<ion-row>
<ion-col width-50>
<ion-card>
<ion-card-header>
<ion-icon name="book"></ion-icon> Usage Restrictions
</ion-card-header>
<ion-card-content>
<p *ngIf="poi.StatusType!=null">{{ 'ocm.details.operationalStatus' | translate }}: {{poi.StatusType.Title}}</p>
<p *ngIf="poi.UsageType!=null">{{ 'ocm.details.usageType' | translate }}: {{poi.UsageType.Title}}</p>
<p *ngIf="poi.UsageCost!=null">{{ 'ocm.details.usageCost' | translate }}: {{poi.UsageCost}}</p>
<p *ngIf="poi.GeneralComments!=null"><br>{{ 'ocm.details.generalComments' | translate }}: <br>{{poi.GeneralComments}}</p>
<ion-card-title>
{{ 'ocm.details.operator.sectionTitle' | translate }}
</ion-card-title>
<p padding-left>
{{poi.OperatorInfo.Title}}
</p>
<p *ngIf="poi.OperatorInfo.WebsiteURL!=null">
<ion-icon name="link"></ion-icon> {{poi.OperatorInfo.WebsiteURL}}
</p>
<p *ngIf="poi.OperatorInfo.ContactEmail!=null">
<ion-icon name="mail"></ion-icon> {{poi.OperatorInfo.ContactEmail}}
</p>
<p *ngIf="poi.OperatorInfo.FaultReportEmail!=null && poi.OperatorInfo.FaultReportEmail!=poi.OperatorInfo.ContactEmail">
<ion-icon name="mail"></ion-icon> {{poi.OperatorInfo.FaultReportEmail}}
</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col width-50>
<ion-card>
<ion-card-header>
<ion-icon name="battery-charging"></ion-icon> {{ 'ocm.details.equipment.sectionTitle' | translate }}
</ion-card-header>
<ion-card-content>


<ion-list>
<ion-item *ngFor="let item of poi.Connections">
<ion-avatar item-left>
<ion-icon name="flash"></ion-icon>
</ion-avatar>
<h3>{{item.ConnectionType?.Title}} <span class="details-minor" *ngIf="item.Quantity">x{{item.Quantity}}</span></h3>
<p *ngIf="item.PowerKW">{{item.PowerKW}} kW</p>

<p>
<span *ngIf="item.Amps" class="details-minor">{{item.Amps}}A</span>
<span *ngIf="item.Voltage" class="details-minor">{{item.Voltage}}V</span>
<span *ngIf="item.CurrentType" class="details-minor">{{item.CurrentType?.Title}}</span>

</p>

</ion-item>

</ion-list>
</ion-card-content>
</ion-card>

<ion-card>
<ion-card-header>
<ion-icon name="info"></ion-icon> {{ 'ocm.details.advancedDetails' | translate }}
</ion-card-header>
<ion-card-content>


<p *ngIf="poi.NumberOfPoints!=null">{{ 'ocm.details.numberOfPoints' | translate }}: {{poi.NumberOfPoints}}</p>
<ion-card-title>
{{ 'ocm.details.dataProvider.sectionTitle' | translate }}

</ion-card-title>
<p>{{poi.DataProvider?.Title}}</p>
<a target="_system" href="{{poi.DataProvider.WebsiteURL}}">{{poi.DataProvider.WebsiteURL}}</a>

<p>{{poi.DataProvider.License}}</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>






<ion-card>
<ion-card-header>
<ion-icon name="book"></ion-icon> Usage Restrictions
</ion-card-header>
<ion-card-content>
<p *ngIf="poi.StatusType!=null">{{ 'ocm.details.operationalStatus' | translate }}: {{poi.StatusType.Title}}</p>
<p *ngIf="poi.UsageType!=null">{{ 'ocm.details.usageType' | translate }}: {{poi.UsageType.Title}}</p>
<p *ngIf="poi.UsageCost!=null">{{ 'ocm.details.usageCost' | translate }}: {{poi.UsageCost}}</p>
<p *ngIf="poi.GeneralComments!=null"><br>{{ 'ocm.details.generalComments' | translate }}: <br>{{poi.GeneralComments}}</p>
<ion-card-title>
{{ 'ocm.details.operator.sectionTitle' | translate }}
</ion-card-title>
<p padding-left>
{{poi.OperatorInfo.Title}}
</p>
<p *ngIf="poi.OperatorInfo.WebsiteURL!=null">
<ion-icon name="link"></ion-icon> {{poi.OperatorInfo.WebsiteURL}}
</p>
<p *ngIf="poi.OperatorInfo.ContactEmail!=null">
<ion-icon name="mail"></ion-icon> {{poi.OperatorInfo.ContactEmail}}
</p>
<p *ngIf="poi.OperatorInfo.FaultReportEmail!=null && poi.OperatorInfo.FaultReportEmail!=poi.OperatorInfo.ContactEmail">
<ion-icon name="mail"></ion-icon> {{poi.OperatorInfo.FaultReportEmail}}
</p>
</ion-card-content>
</ion-card>

<ion-card>
<ion-card-header>
<ion-icon name="battery-charging"></ion-icon> {{ 'ocm.details.equipment.sectionTitle' | translate }}
</ion-card-header>
<ion-card-content>


<ion-list>
<ion-item *ngFor=let item of poi.Connections">
<ion-avatar item-left>
<ion-icon name="flash"></ion-icon>
</ion-avatar>
<h3>{{item.ConnectionType?.Title}} <span class="details-minor" *ngIf="item.Quantity">x{{item.Quantity}}</span></h3>
<p *ngIf="item.PowerKW">{{item.PowerKW}} kW</p>

<p>
<span *ngIf="item.Amps" class="details-minor">{{item.Amps}}A</span>
<span *ngIf="item.Voltage" class="details-minor">{{item.Voltage}}V</span>
<span *ngIf="item.CurrentType" class="details-minor">{{item.CurrentType?.Title}}</span>

</p>

</ion-item>

</ion-list>
</ion-card-content>
</ion-card>

<ion-card>
<ion-card-header>
<ion-icon name="info"></ion-icon> {{ 'ocm.details.advancedDetails' | translate }}
</ion-card-header>
<ion-card-content>


<p *ngIf="poi.NumberOfPoints!=null">{{ 'ocm.details.numberOfPoints' | translate }}: {{poi.NumberOfPoints}}</p>
<p>
{{ 'ocm.details.dataProvider.sectionTitle' | translate }}: {{poi.DataProvider?.Title}}</p>

<p>
{{poi.DataProvider.WebsiteURL}}
</p>
<p>{{poi.DataProvider.License}}</p>
</ion-card-content>
</ion-card>
</div>

<div *ngIf="selectedTab=='comments'" padding>
Expand All @@ -187,7 +204,7 @@ <h3>{{item.ConnectionType?.Title}} <span class="details-minor" *ngIf="item.Quant
<ion-icon name="contacts"></ion-icon> {{ 'ocm.details.commentsAndRatings.sectionTitle' | translate }}
</ion-card-header>
<ion-card-content>
<ion-list>
<ion-list *ngIf="poi._hasComments==true">

<ion-item *ngFor="let item of poi.UserComments">
<ion-avatar item-left>
Expand All @@ -209,6 +226,9 @@ <h3>{{item.ConnectionType?.Title}} <span class="details-minor" *ngIf="item.Quant
</ion-item>

</ion-list>
<p *ngIf="poi._hasComments==false">
{{ 'ocm.details.commentsAndRatings.zeroComments' | translate }}
</p>
</ion-card-content>
</ion-card>
</div>
Expand Down
21 changes: 1 addition & 20 deletions App/Ionic2/ocm-app/app/pages/poi-details/poi-details.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,6 @@
.poi-details {


.poi-heading{
background-color: #5D5D5D;
margin:0;
color:white;

h2 {

}
h2 small {
font-size:0.6em;
color:#c0c0c0;
}
}

.poi-heading-info {
background-color: rgba(0, 0, 0, 0.19);
padding:1em;
}


.left-col{
float:left;
width:50%;
Expand Down
Loading

0 comments on commit f81e46c

Please sign in to comment.