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

made input two columns if wide enough

Browse source
This commit is contained in:
piratefinn 2018-01-25 16:19:02 +00:00
parent 6dd8aeaad9
commit 24b39c06af
2 changed files with 34 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,15 +25,33 @@
</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">Category</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="radio" *ngFor="let category of categoryIdList, let i=index"> <div class="row">
<label> <div class="col-md-6">
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId"> <div>
{{ categoryNameList[i] }} <label>
</label> <input value="" type="radio" name="radios" [(ngModel)]="categoryId">
Uncategorised
</label>
</div>
<div class="radio" *ngFor="let category of leftCategoryIdList, let i=index">
<label>
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
{{ categoryNameList[i] }}
</label>
</div>
</div>
<div class="col-md-6">
<div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
<label>
<input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
{{ categoryNameList[category2 - 1] }}
</label>
</div>
</div>
</div> </div>
<span class="help-block"><strong>Optional:</strong> Choose the relevant Category for the purchase.</span> <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">

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

@ -39,7 +39,8 @@ export class AddDataComponent implements OnInit {
transactionFormInvalid = true; transactionFormInvalid = true;
myDate: any; myDate: any;
minDate: any; minDate: any;
categoryIdList: number[] = []; leftCategoryIdList: number[] = [];
rightCategoryIdList: number[] = [];
categoryNameList: string[] = []; categoryNameList: string[] = [];
constructor( constructor(
@ -85,8 +86,14 @@ export class AddDataComponent implements OnInit {
} }
private setCategoryList(data: any) { private setCategoryList(data: any) {
this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]); let categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]); this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
console.log(categoryIdList);
let halfLength = Math.floor(categoryIdList.length / 2);
this.leftCategoryIdList = categoryIdList.splice(0, halfLength);
console.log(this.leftCategoryIdList);
this.rightCategoryIdList = categoryIdList;
console.log(this.rightCategoryIdList);
} }
getMinDate() { getMinDate() {