Skip to content

Commit 6933bc4

Browse files
camiloserrcamiloserr
authored
Merge pull request #11 from CapituloJaverianoACM/serrano
Sliders update when cause or community is selected
2 parents 007e7b9 + 32a00f3 commit 6933bc4

14 files changed

+609
-133
lines changed

‎src/app/app.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<app-toolbar></app-toolbar>
2-
<app-main style="padding: 30px;"></app-main>
2+
<app-main style="padding: 30px; margin-bottom: 100px;"></app-main>
33

44
<app-footer></app-footer>

‎src/app/components/footer/footer.component.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22

33
#footer{
44
height: 200px;
5-
padding: 5px;
65
padding: 30px;
76
background-color: white;
8-
position: fixed;
7+
position: relative;
98
left: 0;
109
bottom: 0;
1110
}

‎src/app/components/main/dialog_new_cause.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<h1 mat-dialog-title>Nueva causa</h1>
22
<mat-dialog-content >
33
<form [formGroup]="form">
4-
<p>Que nombre tendra tu causa?</p>
4+
<p>Qué nombre tendrá tu causa?</p>
55
<mat-form-field>
66
<mat-label>nombre</mat-label>
77
<input matInput [(ngModel)]="cause.name" formControlName="name">
88
</mat-form-field>
99

10-
<p>Cuanto necesitas?</p>
10+
<p>Cuánto necesitas?</p>
1111
<mat-form-field>
1212
<mat-label>presupuesto</mat-label>
1313
<input matInput [(ngModel)]="cause.budget" formControlName="budget">
1414
</mat-form-field>
1515

16-
<p>En que moneda?</p>
16+
<p>En qué moneda?</p>
1717
<mat-form-field appearance="fill">
1818
<mat-label>Moneda</mat-label>
1919
<mat-select [(ngModel)]="cause.currency" formControlName="currency">
@@ -28,7 +28,6 @@ <h1 mat-dialog-title>Nueva causa</h1>
2828
</form>
2929
</mat-dialog-content>
3030

31-
{{form.status}}
3231
<div mat-dialog-actions>
3332
<button mat-button (click)="onNoClick()">Cancelar</button>
3433
<button mat-button [disabled]="form.status == 'INVALID'" [mat-dialog-close]="cause" cdkFocusInitial>Ok</button>

‎src/app/components/main/dialog_new_comm.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
<h1 mat-dialog-title>Nueva Comunidad</h1>
22
<mat-dialog-content >
33
<form [formGroup]="form">
4-
<p>Que nombre tendra tu comunidad?</p>
4+
<p>Qué nombre tendrá tu comunidad?</p>
55
<mat-form-field>
66
<mat-label>Nombre</mat-label>
77
<input matInput [(ngModel)]="community.name" formControlName="name">
88
</mat-form-field>
99

10-
<p>Que tamanio tiene tu comunidad?</p>
10+
<p>Qué tamaño tiene tu comunidad?</p>
1111
<mat-form-field>
12-
<mat-label>Tamanio</mat-label>
12+
<mat-label>Tamaño</mat-label>
1313
<input matInput [(ngModel)]="community.size" formControlName="size">
1414
</mat-form-field>
1515
</form>
1616
</mat-dialog-content>
1717

18-
{{form.status}}
1918
<div mat-dialog-actions>
2019
<button mat-button (click)="onNoClick()">Cancelar</button>
2120
<button mat-button [disabled]="form.status == 'INVALID'" [mat-dialog-close]="community" cdkFocusInitial>Agregar</button>

‎src/app/components/main/main.component.html

+112-85
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,119 @@
1-
<div fxLayout="row" fxLayoutAlign="space-evenly stretch">
2-
3-
<!--LEFT PANE-->
4-
5-
<!--CAUSE-->
6-
<div class="section" id="left" fxFlex="50" fxLayout="column" fxLayoutAlign="space-around stretch"
7-
*ngIf="showingCause">
8-
<label class="subtitle"> <b>Calcula...</b></label>
9-
<label class="text">¿Cuánto necesitas en total?</label>
10-
<mat-slider
11-
thumbLabel
12-
class="slider"
13-
min="1000" max="10000000000"
14-
color="primary"
15-
[displayWith]="formatLabel"
16-
(input)="updateBudget($event)"></mat-slider>
17-
18-
<div fxLayout="row" fxLayoutAlign="space-between center" >
19-
<div>10.000</div>
20-
<div>COP</div>
21-
<div>100.000.000.000</div>
22-
</div>
23-
24-
<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" >
25-
<mat-form-field appearance="fill">
26-
<mat-label>Selecciona una causa</mat-label>
27-
<mat-select>
28-
<mat-option value="option">Salvar una ballena</mat-option>
29-
<mat-option value="option">Darle de comer a un niño</mat-option>
30-
<mat-option value="option">Darle educacion a un niño</mat-option>
31-
<mat-option value="option">Construir un colegio</mat-option>
32-
<mat-option value="option">Acabar con el hambre mundial</mat-option>
33-
</mat-select>
34-
</mat-form-field>
35-
<div>
36-
Agrega tu causa
37-
<button mat-flat-button (click)="addCause()" style="background-color: #20AD76; color: white;">+</button>
38-
39-
</div>
40-
</div>
41-
<div fxLayout="row" fxLayoutAlign="end center" >
42-
<button mat-raised-button color="primary" (click)="showCommunity()">Continuar ></button>
43-
</div>
1+
2+
3+
<div fxLayout="row" fxLayoutAlign="space-evenly stretch" id="main_div">
4+
5+
<!--LEFT PANE-->
6+
7+
<!--CAUSE-->
8+
<div class="section" id="left" fxFlex="50" fxLayout="column" fxLayoutAlign="start stretch"
9+
*ngIf="showingCause" >
10+
<label class="subtitle"> <b>Calcula...</b></label>
11+
<label class="content">¿Cuánto necesitas en total?</label>
12+
<mat-slider
13+
thumbLabel
14+
id="budget-slider"
15+
[min]="minMoney" [max]="maxMoney"
16+
color="primary"
17+
[(ngModel)]="price"
18+
[displayWith]="formatLabel"
19+
(input)="updateBudget($event)"></mat-slider>
20+
21+
<div fxLayout="row" fxLayoutAlign="space-between center" class="content">
22+
<div>{{minMoney | currency:' ' : 'symbol' : '1.0-0'}}</div>
23+
<div>
24+
<mat-form-field>
25+
<mat-label >{{selectedCurrency}}</mat-label>
26+
<mat-select >
27+
<mat-option (click)="changeCurrency('COP')" >COP</mat-option>
28+
<mat-option (click)="changeCurrency('USD')" >USD</mat-option>
29+
30+
</mat-select>
31+
</mat-form-field>
32+
</div>
33+
<div>{{maxMoney | currency:' ' : 'symbol' : '1.0-0'}}</div>
4434
</div>
4535

46-
<!--COMMUNITY-->
47-
<div class="section" id="left" fxFlex="50" fxLayout="column" fxLayoutAlign="space-around stretch" *ngIf="!showingCause">
48-
<label class="subtitle"><strong>Calcula...</strong></label>
49-
<label class="text">¿Cuántas personas necesitas en total?</label>
50-
<label id="example-radio-group-label">Selecciona una Comunidad:</label>
51-
<mat-radio-group
52-
aria-labelledby="example-radio-group-label"
53-
class="community-radio-group"
54-
[(ngModel)]="chosenCommunity">
55-
<mat-radio-button class="community-radio-button" *ngFor="let community of communities" [value]="community">
56-
{{community.name}}
57-
</mat-radio-button>
58-
</mat-radio-group>
59-
<div>
60-
Agrega tu Comunidad
61-
<button mat-flat-button (click)="addCommunity()" style="background-color: #20AD76; color: white;">+</button>
62-
</div>
63-
64-
<mat-slider
65-
thumbLabel
66-
class="slider"
67-
min="1" max="10000000000"
68-
step="10000" value="1"
69-
color="primary"
70-
[displayWith]="formatLabel"
71-
(input)="updatePopulation($event)"></mat-slider>
72-
73-
<div fxLayout="row" fxLayoutAlign="space-between center" >
74-
<div>1</div>
75-
<div>Personas</div>
76-
<div>7.794.798.739</div>
77-
</div>
78-
79-
<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" >
80-
<button mat-raised-button color="primary" (click)="showCauses()">Regresar</button>
81-
<button mat-raised-button color="primary" (click)="calculate()">Calcular</button>
82-
</div>
8336

37+
<div fxLayout="row" fxLayoutAlign="space-between center" class="content">
38+
39+
<mat-form-field appearance="fill">
40+
<mat-label>Selecciona una causa</mat-label>
41+
<mat-select >
42+
<mat-option *ngFor="let c of values" [value]="c" (click)="changeCause(c)" >{{c.name}}</mat-option>
43+
</mat-select>
44+
</mat-form-field>
45+
46+
<div>
47+
Agrega tu causa
48+
<button mat-flat-button (click)="addCause()" style="background-color: #20AD76; color: white;">+</button>
49+
50+
</div>
8451
</div>
8552

86-
<!--RIGHT PANE-->
87-
<div class="section" fxLayout="column" fxFlex="50" fxLayoutAlign="space-around center">
88-
<p color="accent" id="display_value"> {{display | currency:' ' : 'symbol' : '1.0-0'}} </p>
89-
<span> Alcanza para {{result(display!)}} </span>
53+
<div fxLayout="row" fxLayoutAlign="end center" >
54+
<button mat-raised-button color="primary" (click)="showCommunity()">Continuar ></button>
9055
</div>
56+
</div>
57+
58+
<!--COMMUNITY-->
59+
<div class="section" id="left" fxFlex="50" fxLayout="column" fxLayoutAlign="space-around stretch" *ngIf="!showingCause">
60+
<label class="subtitle"><strong>Calcula...</strong></label>
61+
<label class="text">¿Cuántas personas necesitas en total?</label>
62+
<label id="example-radio-group-label">Selecciona una Comunidad:</label>
63+
<mat-radio-group
64+
aria-labelledby="example-radio-group-label"
65+
class="community-radio-group"
66+
[(ngModel)]="chosenCommunity"
67+
(change)="handleCommunityChange($event)">
68+
<mat-radio-button class="community-radio-button" *ngFor="let community of communities" [value]="community">
69+
{{community.name}}
70+
</mat-radio-button>
71+
</mat-radio-group>
72+
73+
<div>
74+
Agrega tu Comunidad
75+
<button mat-flat-button (click)="addCommunity()" style="background-color: #20AD76; color: white;">+</button>
76+
</div>
77+
78+
<mat-slider
79+
thumbLabel
80+
id="budget-slider"
81+
class="slider"
82+
min="1" max="7794798739"
83+
value="1"
84+
color="primary"
85+
[(ngModel)]="people"
86+
[displayWith]="formatLabel"
87+
(input)="updatePopulation($event)"></mat-slider>
88+
89+
<div fxLayout="row" fxLayoutAlign="space-between center" >
90+
<div>1</div>
91+
<div>Personas</div>
92+
<div>7.794.798.739</div>
93+
</div>
94+
95+
<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" >
96+
<!--TODO: quitar estos botones y hacerlo con carousel-->
97+
<button mat-raised-button color="primary" (click)="showCauses()">Regresar</button>
98+
<button mat-raised-button color="primary" (click)="calculate()">Calcular</button>
99+
</div>
100+
101+
</div>
102+
103+
<!--RIGHT PANE-->
104+
<div class="section" fxLayout="column" fxFlex="50" fxLayoutAlign="space-around center">
105+
<p><a color="accent" id="display_value"> {{displayMoney | currency:' ' : 'symbol' : '1.0-0'}} </a> <a id="display_currency">{{selectedCurrency}}</a> </p>
106+
<img [src]="billsIllustrationPath" id="bills">
107+
<div fxLayout="row" fxLayoutAlign="end center" id="next_div">
108+
<button mat-raised-button color="primary" (click)="navigateToDetails()" *ngIf="!showingCause">Detalles</button>
109+
</div>
110+
111+
<span> Alcanza para {{result(displayMoney!)}} </span>
112+
<!--TODO: quitar estas dos variables, solo es para visualizar y hacer pruebas
113+
<span> Popsize = {{displayPopSize}}</span>
114+
<span> people = {{people}}</span>
115+
-->
116+
117+
</div>
91118

92-
</div>
119+
</div>

‎src/app/components/main/main.component.scss

+27-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
@import 'src/ACM-theme.scss';
22

3+
#bills{
4+
width:250px
5+
}
6+
7+
8+
#main_div{
9+
min-height: 80%;
10+
padding-top: 120px;
11+
}
12+
13+
#next_div{
14+
width: 250px;
15+
}
316

417
.slider{
518
width: 100%;
@@ -11,6 +24,14 @@
1124
font-family: Montserrat;
1225
color: mat-color($ACM-theme-accent, default);
1326
font-size: 80px;
27+
margin-top: 0;
28+
}
29+
30+
#display_currency{
31+
font-family: Montserrat;
32+
color: mat-color($ACM-theme-accent, default);
33+
font-size: 40px;
34+
margin-top: 0;
1435
}
1536

1637
#left{
@@ -19,7 +40,8 @@
1940

2041

2142
.section{
22-
padding: 30px;
43+
padding-right: 30px;
44+
padding-left: 30px;
2345
}
2446

2547

@@ -28,6 +50,7 @@
2850
margin: 20px;
2951
}
3052

31-
.text{
32-
margin: 20px;
33-
}
53+
54+
.content{
55+
margin-bottom: 20px;;
56+
}

0 commit comments

Comments
 (0)