help texts edited, customer dashboard finished and feedback form added
This commit is contained in:
parent
24037e0454
commit
506e3b36da
7 changed files with 272 additions and 47 deletions
|
@ -12,7 +12,7 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Confirm Current Password</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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>
|
||||
|
@ -21,7 +21,7 @@
|
|||
<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">
|
||||
<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>
|
||||
|
@ -30,7 +30,7 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input">Enter New Password</label>
|
||||
<div class="col-md-9">
|
||||
<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>
|
||||
|
@ -39,16 +39,16 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Postcode</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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 class="card-block">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-input">Profile Picture</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" #fileInput formControlName="profile_picture">
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-input">Profile Picture</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" #fileInput formControlName="profile_picture">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -60,7 +60,7 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Business Name</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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>
|
||||
|
@ -69,16 +69,16 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Street Name</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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 class="card-block">
|
||||
<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">
|
||||
<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>
|
||||
|
@ -107,7 +107,7 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Full Name</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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>
|
||||
|
@ -116,7 +116,7 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Display Name</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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 class="form-group row">
|
||||
|
@ -21,14 +21,14 @@
|
|||
<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()">
|
||||
</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 class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Name</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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>
|
||||
<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>
|
||||
<div class="col-md-9">
|
||||
<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 class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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 class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></label>
|
||||
<div class="col-md-9">
|
||||
<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>
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
<div class="card">
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li class="hidden-sm-down">
|
||||
<li>
|
||||
<div class="text-muted">My Points</div>
|
||||
<strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<li>
|
||||
<div class="text-muted">My Rank</div>
|
||||
<div *ngIf="basicStats.user_position == 0" class="statuscontent">
|
||||
<strong>Unranked</strong>
|
||||
|
@ -15,23 +15,117 @@
|
|||
<strong>{{ basicStats.user_position }}</strong>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="text-muted">My Total Spend</div>
|
||||
<strong>{{ basicStats.user_sum | currency:'GBP':true:'1.2-2' }}</strong>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<li>
|
||||
<div class="text-muted">Value to Local Economy</div>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div *ngFor="let widget of widgetList" 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>
|
||||
<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 | 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>
|
||||
|
|
|
@ -8,7 +8,6 @@ import { GraphWidget } from '../widgets/graph-widget.component';
|
|||
templateUrl: 'dashboard-customer.component.html'
|
||||
})
|
||||
export class DashboardCustomerComponent implements OnInit {
|
||||
showSnippet: any;
|
||||
customersThisMonth: any;
|
||||
moneySpentThisMonth: any;
|
||||
pointsTotal: any;
|
||||
|
@ -36,21 +35,6 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
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(
|
||||
private http: Http,
|
||||
private api: ApiService,
|
||||
|
|
45
src/app/dashboard/feedback.component.html
Normal file
45
src/app/dashboard/feedback.component.html
Normal 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
88
src/app/dashboard/feedback.component.ts
Normal 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;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -83,6 +83,20 @@ export class ApiService {
|
|||
).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
|
||||
|
||||
public search(data) {
|
||||
|
|
Reference in a new issue