Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

help texts edited, customer dashboard finished and feedback form added

Browse source
This commit is contained in:
piratefinn 2017-09-01 14:36:31 +01:00
parent 24037e0454
commit 506e3b36da
7 changed files with 272 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/app/dashboard/account-edit.component.html
View file

@ -12,7 +12,7 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Confirm Current Password</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Confirm Current Password</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="password" class="form-control" formControlName="password"> <input type="password" class="form-control" formControlName="password">
<span class="help-block">This is a help text</span> <span class="help-block">Required for security purposes.</span>
</div> </div>
</div> </div>
</div> </div>
@ -21,7 +21,7 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Email</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Email</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" formControlName="email"> <input type="text" class="form-control" formControlName="email">
<span class="help-block">This is a help text</span> <span class="help-block">Change this to alter your current account email.</span>
</div> </div>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
<label class="col-md-3 form-control-label" for="text-input">Enter New Password</label> <label class="col-md-3 form-control-label" for="text-input">Enter New Password</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="password" class="form-control" formControlName="new_password"> <input type="password" class="form-control" formControlName="new_password">
<span class="help-block">This is a help text</span> <span class="help-block">Enter a new password here if you wish to alter your current one.</span>
</div> </div>
</div> </div>
</div> </div>
@ -39,16 +39,16 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Postcode</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Postcode</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" formControlName="postcode"> <input type="text" class="form-control" formControlName="postcode">
<span class="help-block">This is a help text</span> <span class="help-block">Change this if your location of residence has changed.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="card-block"> <div class="card-block">
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="file-input">Profile Picture</label> <label class="col-md-3 form-control-label" for="file-input">Profile Picture</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="file" #fileInput formControlName="profile_picture"> <input type="file" #fileInput formControlName="profile_picture">
</div> </div>
</div> </div>
</div> </div>
</form> </form>
@ -60,7 +60,7 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Business Name</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Business Name</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" formControlName="name"> <input type="text" class="form-control" formControlName="name">
<span class="help-block">This is a help text</span> <span class="help-block">Change this if your business name has changed.</span>
</div> </div>
</div> </div>
</div> </div>
@ -69,16 +69,16 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Street Name</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Street Name</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" formControlName="street_name"> <input type="text" class="form-control" formControlName="street_name">
<span class="help-block">This is a help text</span> <span class="help-block">Change this if your located street has changed.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="card-block"> <div class="card-block">
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Location</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>City/Town Location</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" formControlName="town"> <input type="text" class="form-control" formControlName="town">
<span class="help-block">This is a help text</span> <span class="help-block">Change this if the city or town your business is located at has changed.</span>
</div> </div>
</div> </div>
</div> </div>
@ -107,7 +107,7 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Full Name</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Full Name</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" formControlName="full_name"> <input type="text" class="form-control" formControlName="full_name">
<span class="help-block">This is a help text</span> <span class="help-block">Change this if your full name has changed.</span>
</div> </div>
</div> </div>
</div> </div>
@ -116,7 +116,7 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Display Name</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Display Name</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" formControlName="display_name"> <input type="text" class="form-control" formControlName="display_name">
<span class="help-block">This is a help text</span> <span class="help-block">Change this if wish to alter your user display name.</span>
</div> </div>
</div> </div>
</div> </div>

12
src/app/dashboard/add-data.component.html
View file

@ -11,7 +11,7 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="datetime-local" class="form-control" [min]="minDate" [(ngModel)]="myDate" (ngModelChange)="transactionFormValidate()"> <input type="datetime-local" class="form-control" [min]="minDate" [(ngModel)]="myDate" (ngModelChange)="transactionFormValidate()">
<span class="help-block">This is a help text</span> <span class="help-block">Enter the date and time the transaction occurred.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
@ -21,14 +21,14 @@
<span class="input-group-addon"><i class="fa fa-gbp"></i></span> <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
<input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()"> <input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()">
</div> </div>
<span class="help-block">This is a help text</span> <span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Name</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Name</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" placeholder="Organisation Name" [(ngModel)]="submitOrg.name" (input)="organisationSearch($event)" (ngModelChange)="transactionFormValidate()"> <input type="text" class="form-control" placeholder="Organisation Name" [(ngModel)]="submitOrg.name" (input)="organisationSearch($event)" (ngModelChange)="transactionFormValidate()">
<span class="help-block">This is a help text</span> <span class="help-block">Enter the name of the organisation money was spent. Choose existing ones from below or if not found, enter the details below.</span>
</div> </div>
</div> </div>
<org-table *ngIf="storeList != null" [orgList]="storeList" (onClick)="addStore($event)"></org-table> <org-table *ngIf="storeList != null" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
@ -37,21 +37,21 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()"> <input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()">
<span class="help-block">This is a help text</span> <span class="help-block">Enter the street name where the organisation is located at.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()"> <input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()">
<span class="help-block">This is a help text</span> <span class="help-block">Enter the name of the town where the organisation is located at.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()"> <input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()">
<span class="help-block">This is a help text</span> <span class="help-block">Enter the postcode where the organisation is located at.</span>
</div> </div>
</div> </div>
</div> </div>

114
src/app/dashboard/dashboard-customer.component.html
View file

@ -2,11 +2,11 @@
<div class="card"> <div class="card">
<div class="card-footer"> <div class="card-footer">
<ul> <ul>
<li class="hidden-sm-down"> <li>
<div class="text-muted">My Points</div> <div class="text-muted">My Points</div>
<strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong> <strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
</li> </li>
<li class="hidden-sm-down"> <li>
<div class="text-muted">My Rank</div> <div class="text-muted">My Rank</div>
<div *ngIf="basicStats.user_position == 0" class="statuscontent"> <div *ngIf="basicStats.user_position == 0" class="statuscontent">
<strong>Unranked</strong> <strong>Unranked</strong>
@ -15,23 +15,117 @@
<strong>{{ basicStats.user_position }}</strong> <strong>{{ basicStats.user_position }}</strong>
</div> </div>
</li> </li>
<li class="hidden-sm-down"> </ul>
</div>
<div class="card-footer">
<ul>
<li>
<div class="text-muted">My Total Spend</div> <div class="text-muted">My Total Spend</div>
<strong>{{ basicStats.user_sum | currency:'GBP':true:'1.2-2' }}</strong> <strong>{{ basicStats.user_sum | currency:'GBP':true:'1.2-2' }}</strong>
</li> </li>
<li class="hidden-sm-down"> <li>
<div class="text-muted">Value to Local Economy</div> <div class="text-muted">Value to Local Economy</div>
<strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':true:'1.2-2' }}</strong> <strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':true:'1.2-2' }}</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3"> <div class="col-sm-6 col-lg-3">
<widget-graph *ngIf="widget.type == 'graph'" [graphName]="widget.name" [graphTitle]="widget.title" [graphIcon]="widget.icon"></widget-graph> <div class="card card-inverse card-primary">
</div> <div class="card-block">
<div class="h4 mb-0">{{ basicStats.today_sum | currency:'GBP':true:'1.2-2' }}</div>
<div>Total Today</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{ basicStats.today_sum / (basicStats.today_count ? basicStats.today_count : 1) | currency:'GBP':true:'1.2-2' }}</div>
<div>Avg. Spend Today</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{ basicStats.week_sum | currency:'GBP':true:'1.2-2' }}</div>
<div>Last Week Total</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{ basicStats.week_sum / (basicStats.week_count ? basicStats.week_count : 1) | currency:'GBP':true:'1.2-2' }}</div>
<div>Last Week Avg. Spend</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{ basicStats.month_sum | currency:'GBP':true:'1.2-2' }}</div>
<div>Last Month Total</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{ basicStats.month_sum / (basicStats.month_count ? basicStats.month_count : 1) | currency:'GBP':true:'1.2-2' }}</div>
<div>Last Month Avg. Spend</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{ basicStats.user_sum | currency:'GBP':true:'1.2-2' }}</div>
<div>User Total</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{ basicStats.user_sum / (basicStats.user_count ? basicStats.user_count : 1) | currency:'GBP':true:'1.2-2' }}</div>
<div>User Avg. Spend</div>
<!-- <div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
</div>
</div>
</div><!--/.col-->
</div><!--/.row--> </div><!--/.row-->
</div> </div>

16
src/app/dashboard/dashboard-customer.component.ts
View file

@ -8,7 +8,6 @@ import { GraphWidget } from '../widgets/graph-widget.component';
templateUrl: 'dashboard-customer.component.html' templateUrl: 'dashboard-customer.component.html'
}) })
export class DashboardCustomerComponent implements OnInit { export class DashboardCustomerComponent implements OnInit {
showSnippet: any;
customersThisMonth: any; customersThisMonth: any;
moneySpentThisMonth: any; moneySpentThisMonth: any;
pointsTotal: any; pointsTotal: any;
@ -36,21 +35,6 @@ export class DashboardCustomerComponent implements OnInit {
user_position: 0, user_position: 0,
}; };
public widgetList = [
{
type: 'graph',
name: 'customers_last_7_days',
icon: 'icon-people',
title: 'Customers Last 7 Days',
},
{
type: 'graph',
name: 'customers_last_30_days',
icon: 'icon-people',
title: 'Customers Last 30 Days',
},
];
constructor( constructor(
private http: Http, private http: Http,
private api: ApiService, private api: ApiService,

45
src/app/dashboard/feedback.component.html Normal file
View file

@ -0,0 +1,45 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>Submit Transaction</strong>
<small>Required Data marked in <strong>bold</strong>.</small>
</div>
<form class="form-horizontal" [formGroup]="feedbackForm" (ngSubmit)="onSubmit()">
<div class="card-block">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Email</strong></label>
<div class="col-md-9">
<input type="text" class="form-control" formControlName="email" [(ngModel)]="loggedInEmail" [readonly]="loggedIn">
<span class="help-block">Enter your account email if it is not shown here.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Enter Feedback Here</strong></label>
<div class="col-md-9">
<textarea rows="7" class="form-control" formControlName="feedbacktext">
<span class="help-block">Please enter your feedback in this textbox.</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-9">
<div [ngSwitch]="feedbackFormStatus">
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
Submit Succeeded.
</div>
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
{{feedbackFormStatusError}}
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" [disabled]="!payrollForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
</div>
</form>
</div>
</div>
</div><!--/.row-->
</div>

88
src/app/dashboard/feedback.component.ts Normal file
View file

@ -0,0 +1,88 @@
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'add-data.component.html',
providers: [ApiService]
})
export class FeedbackPage {
feedbackForm: FormGroup;
loggedIn: boolean;
loggedInEmail: any;
username: any;
feedbackFormStatus: any;
feedbackFormStatusError: string = 'Error received, please try again.';
constructor(
private http: Http,
private formBuilder: FormBuilder,
private api: ApiService,
) {
this.getUserEmail();
this.feedbackForm = this.formBuilder.group({
email: ['', [Validators.required]],
feedbacktext: ['', [Validators.required]],
});
}
onSubmit() {
this.api
.feedback(this.feedbackForm.value)
.subscribe(
result => {
if ( result.success == true ) {
console.log('Successful Upload');
console.log(result);
this.feedbackFormStatus = "success";
console.log(this.feedbackFormStatus);
this.feedbackForm.patchValue({
feedbacktext: '',
});
} else {
console.log('Upload Error');
this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.feedbackFormStatus = "send_failed";
console.log(this.feedbackFormStatus);
}
},
error => {
console.log('Upload Error');
console.log(error);
try {
console.log(error.error);
let jsonError = error.json();
console.log("boop");
this.feedbackFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch(e) {
this.feedbackFormStatusError = 'There was a server error, please try again later.';
}
this.feedbackFormStatus = "send_failed";
console.log(this.feedbackFormStatus);
}
);
}
getUserEmail() {
this.api.getEmail().subscribe(
result => {
if (result) {
console.log('Email has been received');
this.loggedInEmail = result;
this.loggedIn = true;
} else {
console.log('Email is not available');
this.loggedIn = false;
}
},
err => {
console.log('Email could not be received');
this.loggedIn = false;
}
);
}
}

14
src/app/providers/api-service.ts
View file

@ -83,6 +83,20 @@ export class ApiService {
).map( response => { this.removeSessionKey(); return response.json() } ); ).map( response => { this.removeSessionKey(); return response.json() } );
} }
// Submits feedback
public feedback(data) {
data.app_name = 'Foodloop Web';
data.package_name = 'Foodloop Web';
data.version_code = '';
data.version_number = '';
console.log(data);
return this.http.post(
this.apiUrl + '/feedback',
data
).map( response => response.json() );
}
// Searches organisations used for transaction submission // Searches organisations used for transaction submission
public search(data) { public search(data) {