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

Merge pull request #71 from Pear-Trading/finn/Release-v0.1.6

Browse source 
v0.1.6 Release
This commit is contained in:
Finn 2018-03-21 16:58:48 +00:00 committed by GitHub
commit 867bfda871
19 changed files with 406 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
CHANGELOG.md
View file

@ -2,9 +2,19 @@
# Next Release # Next Release
# v0.1.6
* Changed layout of category choosing on upload
* Added ability to edit and remove recurring transactions
* Fixed HttpClient error log viewing
* Made transaction validation more lenient
# v0.1.5 # v0.1.5
* Fixed category viewing on purchase * Fixed category viewing on purchase
* Changed category view from radio buttons to full label buttons
* Amended local validation of submit
* Changed recurring purchase selection view
# v0.1.4 # v0.1.4

6
package-lock.json generated
View file

@ -6752,9 +6752,9 @@
"integrity": "sha1-zJJ7GR2Yb+D7atKVeQdQxV3L6FE=" "integrity": "sha1-zJJ7GR2Yb+D7atKVeQdQxV3L6FE="
}, },
"ngx-bootstrap": { "ngx-bootstrap": {
"version": "2.0.0-beta.8", "version": "2.0.0-rc.1",
"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.8.tgz", "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-rc.1.tgz",
"integrity": "sha512-e+3euXDb4nhzxn9kBO4RPWwRaI2ef7Lg+us8Yo2DBfD/Kuk/vl7ksWjoolMFLKEGpcTcKhMT/4BH5dUx+S4AtA==" "integrity": "sha512-/ARJ2LLrT4bDghOVS16btJovJ7lsDcILmBUvGt0EXzNlU1HbTQZKfl/OKhrufmRgHQIzc6kXckVUhz5d5QIsUA=="
}, },
"ngx-pagination": { "ngx-pagination": {
"version": "3.0.3", "version": "3.0.3",

2
package.json
View file

@ -35,7 +35,7 @@
"moment": "^2.21.0", "moment": "^2.21.0",
"ng2-charts": "1.6.0", "ng2-charts": "1.6.0",
"ng2-validation-manager": "0.5.3", "ng2-validation-manager": "0.5.3",
"ngx-bootstrap": "2.0.0-beta.8", "ngx-bootstrap": "2.0.0-rc.1",
"ngx-pagination": "3.0.3", "ngx-pagination": "3.0.3",
"rxjs": "5.5.6", "rxjs": "5.5.6",
"ts-helpers": "1.1.2", "ts-helpers": "1.1.2",

16
src/app/auth/register.component.ts
View file

@ -78,24 +78,18 @@ export class RegisterComponent {
.register(data) .register(data)
.subscribe( .subscribe(
result => { result => {
console.log('registered!');
this.registerStatus = 'success'; this.registerStatus = 'success';
console.log(this.registerStatus);
this.router.navigate(['/dashboard']); this.router.navigate(['/dashboard']);
}, },
error => { error => {
console.log('Register Error'); console.log('Register Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.registerStatusError = 'There was a server error, please try again later.'; this.registerStatusError = 'There was a server error, please try again later.';
} }
this.registerStatus = 'send_failed'; this.registerStatus = 'send_failed';
console.log(this.registerStatus);
} }
); );
} }
@ -127,19 +121,13 @@ export class RegisterComponent {
.register(data) .register(data)
.subscribe( .subscribe(
result => { result => {
console.log('registered!');
this.registerStatus = 'success'; this.registerStatus = 'success';
console.log(this.registerStatus);
this.router.navigate(['/dashboard']); this.router.navigate(['/dashboard']);
}, },
error => { error => {
console.log('Register Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.registerStatusError = 'There was a server error, please try again later.'; this.registerStatusError = 'There was a server error, please try again later.';
} }

9
src/app/dashboard/account-edit.component.ts
View file

@ -105,23 +105,17 @@ export class AccountEditComponent implements OnInit {
.accountEditUpdate(submitData) .accountEditUpdate(submitData)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.submitStatus = 'success'; this.submitStatus = 'success';
console.log(this.submitStatus);
}, },
error => { error => {
console.log('Edit Error'); console.log('Edit Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); this.submitStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.submitStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.submitStatusError = 'There was a server error, please try again later.'; this.submitStatusError = 'There was a server error, please try again later.';
} }
this.submitStatus = 'send_failed'; this.submitStatus = 'send_failed';
console.log(this.submitStatus);
} }
); );
} }
@ -131,7 +125,6 @@ export class AccountEditComponent implements OnInit {
if (!this.settingForm.valid && !this.settingCustomerForm.valid) { if (!this.settingForm.valid && !this.settingCustomerForm.valid) {
console.log('Not Valid!'); console.log('Not Valid!');
this.submitStatus = 'validation_failed'; this.submitStatus = 'validation_failed';
console.log(this.submitStatus);
return; return;
} }

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

@ -46,29 +46,22 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6 btn-group-vertical">
<div> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'daily'">
<input value="daily" type="radio" name="daily" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()"> <input value="daily" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Daily
<label>Daily</label> </label>
</div> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'weekly'">
<div> <input value="weekly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Weekly
<input value="weekly" type="radio" name="weekly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()"> </label>
<label>Weekly</label> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'fortnightly'">
</div> <input value="fortnightly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Fortnightly
<div> </label>
<input value="fortnightly" type="radio" name="fortnightly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()"> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'monthly'">
<label>Fortnightly</label> <input value="monthly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Monthly
</div> </label>
</div> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'quarterly'">
<div class="col-md-6"> <input value="quarterly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Quarterly
<div> </label>
<input value="monthly" type="radio" name="monthly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Monthly</label>
</div>
<div>
<input value="quarterly" type="radio" name="quarterly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Quarterly</label>
</div>
</div> </div>
</div> </div>
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span> <span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
@ -78,21 +71,18 @@
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label> <label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
<div class="col-md-9"> <div class="col-md-9">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6 btn-group-vertical">
<div> <label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
<input value="" type="radio" name="radios" [(ngModel)]="categoryId"> <input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
<label>Uncategorised</label> </label>
</div> <label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
<div class="radio" *ngFor="let category of leftCategoryIdList, let i=index"> <input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category] }}
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId"> </label>
<label>{{ leftCategoryNameList[i] }}</label>
</div>
</div>
<div class="col-md-6">
<div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
<input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
<label>{{ rightCategoryNameList[i] }}</label>
</div> </div>
<div class="col-md-6 btn-group-vertical">
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
<input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category2] }}
</label>
</div> </div>
</div> </div>
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span> <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
@ -108,21 +98,21 @@
<org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table> <org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
<div *ngIf="showAddStore"> <div *ngIf="showAddStore">
<div class="form-group row"> <div class="form-group row">
<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">Organisation Street Name</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">Enter the street name where the organisation is located at.</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">Organisation Town</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">Enter the name of the town where the organisation is located at.</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">Organisation Postcode</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">Enter the postcode where the organisation is located at.</span> <span class="help-block">Enter the postcode where the organisation is located at.</span>

62
src/app/dashboard/add-data.component.ts
View file

@ -30,8 +30,6 @@ export class AddDataComponent implements OnInit {
organisationTown: string; organisationTown: string;
organisationPostcode: string; organisationPostcode: string;
amount: number; amount: number;
// Assumes Groceries is 1st category
categoryId: number = 1;
essentialPurchase = false; essentialPurchase = false;
recurringPurchase = false; recurringPurchase = false;
recurringType: string; recurringType: string;
@ -42,10 +40,11 @@ export class AddDataComponent implements OnInit {
transactionFormInvalid = true; transactionFormInvalid = true;
myDate: any; myDate: any;
minDate: any; minDate: any;
leftCategoryIdList: number[] = []; categoryList: any;
rightCategoryIdList: number[] = []; categoryIdList: any;
leftCategoryNameList: number[] = []; leftCategoryList: number[] = [];
rightCategoryNameList: number[] = []; rightCategoryList: string[] = [];
categoryId: number;
constructor( constructor(
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
@ -75,7 +74,9 @@ export class AddDataComponent implements OnInit {
// this.myDate = new Date().toISOString().slice(0, 16); // this.myDate = new Date().toISOString().slice(0, 16);
this.api.categoryList().subscribe( this.api.categoryList().subscribe(
result => { result => {
this.setCategoryList(result.categories); this.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
this.setCategoryList(this.categoryIdList);
}, },
error => { error => {
console.log('Retrieval Error'); console.log('Retrieval Error');
@ -90,13 +91,9 @@ export class AddDataComponent implements OnInit {
} }
private setCategoryList(data: any) { private setCategoryList(data: any) {
let categoryIdList = Object.keys(data.ids).map(key => data.ids[key]); let halfLength = Math.floor(data.length / 2);
let categoryNameList = Object.keys(data.names).map(key => data.names[key]); this.leftCategoryList = data.splice(0, halfLength);
let halfLength = Math.floor(categoryIdList.length / 2); this.rightCategoryList = data;
this.leftCategoryIdList = categoryIdList.splice(0, halfLength);
this.leftCategoryNameList = categoryNameList.splice(0, halfLength);
this.rightCategoryIdList = categoryIdList;
this.rightCategoryNameList = categoryNameList;
} }
getMinDate() { getMinDate() {
@ -177,14 +174,15 @@ export class AddDataComponent implements OnInit {
} }
transactionFormValidate() { transactionFormValidate() {
if (this.submitOrg.name.length === 0 || if (this.submitOrg.name.length &&
this.submitOrg.town.length === 0 || this.amount &&
this.amount === 0 || (this.recurringPurchase &&
this.recurringPurchase && this.recurringType ||
!this.recurringType) { !this.recurringPurchase &&
this.transactionFormInvalid = true; !this.recurringType)) {
} else {
this.transactionFormInvalid = false; this.transactionFormInvalid = false;
} else {
this.transactionFormInvalid = true;
} }
} }
@ -238,31 +236,22 @@ export class AddDataComponent implements OnInit {
.subscribe( .subscribe(
result => { result => {
if ( result.success === true ) { if ( result.success === true ) {
console.log('Successful Upload');
console.log(result);
this.transactionFormStatus = 'success'; this.transactionFormStatus = 'success';
console.log(this.transactionFormStatus);
this.resetForm(); this.resetForm();
} else { } else {
console.log('Upload Error');
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message); this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed'; this.transactionFormStatus = 'send_failed';
console.log(this.transactionFormStatus);
} }
}, },
error => { error => {
console.log('Upload Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); console.log(error.error);
const jsonError = error.json(); this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
console.log('boop');
this.transactionFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.'; this.transactionFormStatusError = 'There was a server error, please try again later.';
} }
this.transactionFormStatus = 'send_failed'; this.transactionFormStatus = 'send_failed';
console.log(this.transactionFormStatus);
} }
); );
} }
@ -290,14 +279,11 @@ export class AddDataComponent implements OnInit {
.orgPayroll(this.payrollForm.value) .orgPayroll(this.payrollForm.value)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.payrollFormStatus = 'success'; this.payrollFormStatus = 'success';
console.log(this.payrollFormStatus);
}, },
error => { error => {
console.log( error._body ); console.log( error._body );
this.payrollFormStatus = 'send_failed'; this.payrollFormStatus = 'send_failed';
console.log(this.payrollFormStatus);
} }
); );
} }
@ -309,14 +295,10 @@ export class AddDataComponent implements OnInit {
.orgSupplier(this.singleSupplierForm.value) .orgSupplier(this.singleSupplierForm.value)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.singleSupplierFormStatus = 'success'; this.singleSupplierFormStatus = 'success';
console.log(this.singleSupplierFormStatus);
}, },
error => { error => {
console.log( error._body );
this.singleSupplierFormStatus = 'send_failed'; this.singleSupplierFormStatus = 'send_failed';
console.log(this.singleSupplierFormStatus);
} }
); );
} }
@ -328,14 +310,10 @@ export class AddDataComponent implements OnInit {
.orgEmployee(this.employeeForm.value) .orgEmployee(this.employeeForm.value)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.employeeFormStatus = 'success'; this.employeeFormStatus = 'success';
console.log(this.employeeFormStatus);
}, },
error => { error => {
console.log( error._body );
this.employeeFormStatus = 'send_failed'; this.employeeFormStatus = 'send_failed';
console.log(this.employeeFormStatus);
} }
); );
} }

24
src/app/dashboard/category-month.component.html
View file

@ -12,8 +12,8 @@
<ul *ngIf="weekList1" class="horizontal-bars type-2"> <ul *ngIf="weekList1" class="horizontal-bars type-2">
<li *ngIf="weekEssential1"> <li *ngIf="weekEssential1">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential1 ? weekEssential1.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential1.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential1 ? weekEssential1.value : 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -22,7 +22,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;"> <li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
@ -54,8 +54,8 @@
<ul *ngIf="weekList2" class="horizontal-bars type-2"> <ul *ngIf="weekList2" class="horizontal-bars type-2">
<li *ngIf="weekEssential2"> <li *ngIf="weekEssential2">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential2.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential2 ? weekEssential2.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential2.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential2 ? weekEssential2.value : 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -64,7 +64,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;"> <li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
@ -96,8 +96,8 @@
<ul *ngIf="weekList3" class="horizontal-bars type-2"> <ul *ngIf="weekList3" class="horizontal-bars type-2">
<li *ngIf="weekEssential3"> <li *ngIf="weekEssential3">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential3 ? weekEssential3.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential3.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential3 ? weekEssential3.value : 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -106,7 +106,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;"> <li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
@ -138,8 +138,8 @@
<ul *ngIf="weekList4" class="horizontal-bars type-2"> <ul *ngIf="weekList4" class="horizontal-bars type-2">
<li *ngIf="weekEssential4"> <li *ngIf="weekEssential4">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential4.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential4 ? weekEssential4.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential4.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential4 ? weekEssential4.value : 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -148,7 +148,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;"> <li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">

12
src/app/dashboard/category-month.component.ts
View file

@ -31,15 +31,13 @@ export class CategoryMonthComponent implements OnInit {
weekEssential3: number = 0; weekEssential3: number = 0;
weekEssential4: number = 0; weekEssential4: number = 0;
categoryList: number[] = []; categoryList: any;
dayList: any[] = []; dayList: any[] = [];
valueList: number[] = []; valueList: number[] = [];
myWeek1: any; myWeek1: any;
myWeek2: any; myWeek2: any;
myWeek3: any; myWeek3: any;
myWeek4: any; myWeek4: any;
categoryIdList: number[] = [];
categoryNameList: string[] = [];
categoryLimit1: number = 6; categoryLimit1: number = 6;
categoryLimit2: number = 6; categoryLimit2: number = 6;
categoryLimit3: number = 6; categoryLimit3: number = 6;
@ -51,7 +49,8 @@ export class CategoryMonthComponent implements OnInit {
this.setDate(); this.setDate();
this.api.categoryList().subscribe( this.api.categoryList().subscribe(
result => { result => {
this.setCategoryList(result.categories); this.categoryList = result.categories;
console.log('Category List received');
}, },
error => { error => {
console.log('Retrieval Error'); console.log('Retrieval Error');
@ -72,11 +71,6 @@ export class CategoryMonthComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
private setCategoryList(data: any) {
this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
}
private setDate () { private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD'); this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');

4
src/app/dashboard/dashboard.module.ts
View file

@ -31,6 +31,8 @@ import { PiePanel } from '../panels/pie-panel.component';
import { DashboardRoutingModule } from './dashboard.routing'; import { DashboardRoutingModule } from './dashboard.routing';
import { OrgResultComponent } from '../shared/org-result.component'; import { OrgResultComponent } from '../shared/org-result.component';
import { OrgTableComponent } from '../shared/org-table.component'; import { OrgTableComponent } from '../shared/org-table.component';
import { RecurResultComponent } from '../shared/recur-result.component';
import { RecurTableComponent } from '../shared/recur-table.component';
import { TransactionResultComponent } from '../shared/transaction-result.component'; import { TransactionResultComponent } from '../shared/transaction-result.component';
import { PayrollResultComponent } from '../shared/payroll-result.component'; import { PayrollResultComponent } from '../shared/payroll-result.component';
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component'; import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
@ -61,6 +63,8 @@ import { environment } from '../../environments/environment';
AddDataComponent, AddDataComponent,
OrgResultComponent, OrgResultComponent,
OrgTableComponent, OrgTableComponent,
RecurResultComponent,
RecurTableComponent,
TransactionLogComponent, TransactionLogComponent,
CategoryMonthComponent, CategoryMonthComponent,
TransactionResultComponent, TransactionResultComponent,

10
src/app/dashboard/feedback.component.ts
View file

@ -55,9 +55,7 @@ export class FeedbackComponent implements OnInit {
result => { result => {
if ( result.success === true ) { if ( result.success === true ) {
console.log('Successful Upload'); console.log('Successful Upload');
console.log(result);
this.feedbackFormStatus = 'success'; this.feedbackFormStatus = 'success';
console.log(this.feedbackFormStatus);
this.feedbackForm.patchValue({ this.feedbackForm.patchValue({
feedbacktext: '', feedbacktext: '',
}); });
@ -65,22 +63,16 @@ export class FeedbackComponent implements OnInit {
console.log('Upload Error'); console.log('Upload Error');
this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message); this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.feedbackFormStatus = 'send_failed'; this.feedbackFormStatus = 'send_failed';
console.log(this.feedbackFormStatus);
} }
}, },
error => { error => {
console.log('Upload Error'); console.log('Upload Error');
console.log(error);
try { try {
console.log(error.error); this.feedbackFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.feedbackFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.feedbackFormStatusError = 'There was a server error, please try again later.'; this.feedbackFormStatusError = 'There was a server error, please try again later.';
} }
this.feedbackFormStatus = 'send_failed'; this.feedbackFormStatus = 'send_failed';
console.log(this.feedbackFormStatus);
} }
); );
} }

1
src/app/dashboard/trail-map.component.ts
View file

@ -51,7 +51,6 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
} }
public onMarkerClick(clickedMarker, template: TemplateRef<any>) { public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
console.log(clickedMarker);
this.clickedMarker = clickedMarker; this.clickedMarker = clickedMarker;
this.assocLogo = 'assets/img/association/' + this.assocMap + '-logo.png'; this.assocLogo = 'assets/img/association/' + this.assocMap + '-logo.png';
this.openModal(template); this.openModal(template);

96
src/app/dashboard/transaction-log.component.html
View file

@ -44,6 +44,102 @@
No Transactions available. No Transactions available.
</div> </div>
</div> </div>
<div class="card">
<div class="card-header">
<strong>Recurring Transactions</strong>
<small>Select a Recurring Transaction below to edit it.</small>
</div>
<div *ngIf="!noRecurringList" class="card-block">
<recur-table [recurList]="recurringTransactionList" [categories]="categoryList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
<ng-template #template>
<div class="modal-header d-flex justify-content-between">
<h4 class="modal-title">Edit Recurring Transaction</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<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" [(ngModel)]="updatedTime">
<span class="help-block">Enter the date and time the transaction occurred.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Amount</strong></label>
<div class="col-md-9">
<div class="input-group">
<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)]="clickedRecur.value">
</div>
<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">Essential Purchase</label>
<div class="col-md-9">
<div class="input-group">
<input type="checkbox" class="mr-auto" [(ngModel)]="clickedRecur.essential">
</div>
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
<div class="col-md-9">
<div class="input-group">
<select type="text" class="form-control" [(ngModel)]="clickedRecur.recurring_period">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthly</option>
<option value="quarterly">Quarterly</option>
</select>
</div>
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
<div class="col-md-9">
<div class="input-group">
<select type="text" class="form-control" [(ngModel)]="clickedRecur.category">
<option value="0">Uncategorised</option>
<option *ngFor="let category of categoryIdList" [ngValue]="category">
{{ categoryList[category] }}
</option>
</select>
</div>
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<span class="col-12"><strong>WARNING: Clicking "Delete" will completely remove the Recurring Transaction.</strong></span>
</div>
</div>
<div class="col-md-12">
<div [ngSwitch]="transactionFormStatus">
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
{{transactionFormStatusSuccess}}
</div>
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
{{transactionFormStatusError}}
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="submit" (click)="deleteRecurringTransaction()" class="btn btn-sm btn-danger"><i class="fa fa-times"></i> Delete</button>
<button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Edit</button>
</div>
</ng-template>
</div>
<div *ngIf="noRecurringList" class="card-block">
No Recurring Transactions.
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

130
src/app/dashboard/transaction-log.component.ts
View file

@ -1,10 +1,8 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, EventEmitter, TemplateRef } from '@angular/core';
import { ApiService } from '../providers/api-service'; import { ApiService } from '../providers/api-service';
// import { PaginatePipe } from 'ngx-pagination'; import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { PaginationInstance } from 'ngx-pagination'; import { PaginationInstance } from 'ngx-pagination';
// import { PaginationControlsComponent } from 'ngx-pagination';
// import { PaginationControlsDirective } from 'ngx-pagination';
// import { TransactionResultComponent } from '../shared/transaction-result.component';
import * as moment from 'moment'; import * as moment from 'moment';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
@ -13,11 +11,24 @@ import 'rxjs/add/operator/map';
}) })
export class TransactionLogComponent implements OnInit { export class TransactionLogComponent implements OnInit {
transactionList; transactionList: any;
recurringTransactionList: any;
noTransactionList = true; noTransactionList = true;
noRecurringList = true;
myDate: any; myDate: any;
minDate: any; minDate: any;
public p: any; public p: any;
public modalRef: BsModalRef;
clickedRecur: any;
public updatedDate: string;
public startTime: string;
categoryIdList: any;
categoryList: any;
categoryNameList: string[] = [];
transactionFormStatus: string;
transactionFormStatusSuccess: string;
transactionFormStatusError = 'Error received, please try again.';
updatedTime: string;
public paginateConfig: PaginationInstance = { public paginateConfig: PaginationInstance = {
id: 'transpaginate', id: 'transpaginate',
@ -28,31 +39,27 @@ export class TransactionLogComponent implements OnInit {
constructor( constructor(
private api: ApiService, private api: ApiService,
private modalService: BsModalService,
) { ) {
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm'); this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
this.api.categoryList().subscribe(
result => {
this.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
// this.myDate = new Date().toISOString().slice(0, 16); // this.myDate = new Date().toISOString().slice(0, 16);
} }
ngOnInit(): void { ngOnInit(): void {
this.getMinDate();
this.loadTransactions(1); this.loadTransactions(1);
} }
getMinDate() {
// gets the April 1st date of the current year
const aprilDate = moment().month(3).date(1);
const now = moment();
// Checks if current time is before April 1st, if so returns true
const beforeApril = now.isBefore(aprilDate);
if ( beforeApril === true ) {
this.minDate = aprilDate.subtract(2, 'years').format('YYYY-MM-DD');
} else {
this.minDate = aprilDate.subtract(1, 'years').format('YYYY-MM-DD');
}
}
loadTransactions(logPage: number) { loadTransactions(logPage: number) {
console.log(logPage);
this.api.transList(logPage).subscribe( this.api.transList(logPage).subscribe(
result => { result => {
if (result.transactions.length > 0) { if (result.transactions.length > 0) {
@ -66,6 +73,13 @@ export class TransactionLogComponent implements OnInit {
this.transactionList = null; this.transactionList = null;
this.noTransactionList = true; this.noTransactionList = true;
} }
if (result.recurring_transactions) {
this.recurringTransactionList = result.recurring_transactions;
this.noRecurringList = false;
} else {
this.recurringTransactionList = null;
this.noRecurringList = true;
}
}, },
error => { error => {
console.log(error); console.log(error);
@ -73,4 +87,78 @@ export class TransactionLogComponent implements OnInit {
); );
} }
recurringTransactionDetails(clicked, template: TemplateRef<any>) {
this.clickedRecur = clicked;
this.updatedTime = moment(this.clickedRecur.display_time, 'llll').format('YYYY-MM-DD[T]HH:mm');
this.openModal(template);
}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
editRecurringTransaction() {
let updatedTimeSubmit = moment(this.updatedTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
this.clickedRecur.display_time = moment(this.updatedTime).format('llll');
let myParams = {
category: (this.clickedRecur.category == 0 ? undefined : this.clickedRecur.category),
essential: this.clickedRecur.essential,
id: this.clickedRecur.id,
apply_time: updatedTimeSubmit,
recurring_period: this.clickedRecur.recurring_period,
seller: this.clickedRecur.seller,
value: this.clickedRecur.value,
};
this.api
.recurUpdate(myParams)
.subscribe(
result => {
if ( result.success === true ) {
this.transactionFormStatus = 'success';
this.transactionFormStatusSuccess = 'Edit Succeeded.';
} else {
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
}
},
error => {
console.log(error);
try {
this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.';
}
this.transactionFormStatus = 'send_failed';
}
);
}
deleteRecurringTransaction() {
let myParams = {
id: this.clickedRecur.id,
};
this.api
.recurDelete(myParams)
.subscribe(
result => {
if ( result.success === true ) {
this.transactionFormStatus = 'success';
this.transactionFormStatusSuccess = 'Delete Succeeded.';
} else {
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
}
},
error => {
console.log(error);
try {
this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.';
}
this.transactionFormStatus = 'send_failed';
}
);
}
} }

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

@ -158,6 +158,26 @@ export class ApiService {
); );
} }
// Edits a recurring transaction
public recurUpdate(data) {
data.session_key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/recurring-transactions',
data
);
}
// Edits a recurring transaction
public recurDelete(data) {
data.session_key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/recurring-transactions/delete',
data
);
}
// gets payroll list for log // gets payroll list for log
public payrollList(data) { public payrollList(data) {

6
src/app/shared/recur-result.component.html Normal file
View file

@ -0,0 +1,6 @@
<td (click)="recurClick()">{{recur.seller}}</td>
<td (click)="recurClick()">{{categories[recur.category] || 'Uncategorised'}}</td>
<td (click)="recurClick()">{{recur.essential == 1 ? 'true' : 'false'}}</td>
<td (click)="recurClick()">{{recur.display_time}}</td>
<td (click)="recurClick()">{{recur.recurring_period}}</td>
<td (click)="recurClick()">{{recur.value}}</td>

40
src/app/shared/recur-result.component.ts Normal file
View file

@ -0,0 +1,40 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as moment from 'moment';
interface RecurData {
category: number;
essential: number;
id: number;
last_updated: string;
recurring_period: string;
seller: string;
start_time: string;
value: number;
display_time: any;
}
@Component({
// tslint:disable-next-line
selector: '[recur-result]',
templateUrl: 'recur-result.component.html',
})
export class RecurResultComponent {
@Input() public recur: RecurData;
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public updatedDate: string;
ngOnInit(): void {
if (this.recur.last_updated) {
this.recur.display_time = moment(this.recur.last_updated).format('llll');
} else {
this.recur.display_time = moment(this.recur.start_time).format('llll');
}
}
public recurClick(): void {
this.onClick.emit(
this.recur
);
}
}

17
src/app/shared/recur-table.component.html Normal file
View file

@ -0,0 +1,17 @@
<div class="form-group row">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Seller</th>
<th>Category</th>
<th>Essential</th>
<th>Last Applied</th>
<th>Recurring Period</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr recur-result *ngFor="let recur of recurList" [categories]="categories" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
</tbody>
</table>
</div>

30
src/app/shared/recur-table.component.ts Normal file
View file

@ -0,0 +1,30 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { RecurResultComponent } from '../shared/recur-result.component';
interface RecurData {
category: string;
essential: number;
id: number;
last_updated: string;
recurring_period: string;
seller: string;
start_time: string;
value: number;
display_time: any;
}
@Component({
// tslint:disable-next-line
selector: 'recur-table',
templateUrl: 'recur-table.component.html',
})
export class RecurTableComponent {
@Input() public recurList: Array<RecurData>;
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public recurClick(event: any): void {
this.onClick.emit( event );
}
}