...
 
Commits (4)
......@@ -22,6 +22,9 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Design
[Angular Material](https://material.angular.io/)
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
......@@ -23,6 +23,9 @@
"src/assets"
],
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.css"
],
"scripts": []
......@@ -72,6 +75,9 @@
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.css"
],
"scripts": [],
......
......@@ -123,6 +123,14 @@
"tslib": "^1.9.0"
}
},
"@angular/cdk": {
"version": "6.4.7",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.4.7.tgz",
"integrity": "sha512-18x0U66fLD5kGQWZ9n3nb75xQouXlWs7kUDaTd8HTrHpT1s2QIAqlLd1KxfrYiVhsEC2jPQaoiae7VnBlcvkBg==",
"requires": {
"tslib": "^1.7.1"
}
},
"@angular/cli": {
"version": "6.0.8",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.8.tgz",
......@@ -365,6 +373,14 @@
"integrity": "sha512-nN29Ovomg21eL8acwOSUFAYwWFI1TuFwUgUu37ZssfVQrYdaV+BFx3yv3P0nKU90h3Hp+oIkWHd8U34UYrvBCg==",
"dev": true
},
"@angular/material": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.1.tgz",
"integrity": "sha512-SBoUXxHknkgwzp5pNDHW0jyrTM0d0Tk4lVyDbtEX8VEPtXqG5nL3BSgyjpJbTvqlmy2kOooUu3qgAmt87VH9lw==",
"requires": {
"tslib": "^1.7.1"
}
},
"@angular/platform-browser": {
"version": "6.1.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.10.tgz",
......
......@@ -17,6 +17,7 @@
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.2.1",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
......@@ -24,7 +25,8 @@
"core-js": "^2.5.4",
"firebase": "^5.5.9",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
"zone.js": "^0.8.26",
"@angular/cdk": "^6.2.0"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
......
.sidenav-container {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.form-contaniner {
display: flex;
flex-direction: column;
}
.form-contaniner> * {
width: 100%;
}
.sidenav {
width: 200px;
box-shadow: 3px 0 6px rgba(0,0,0,.24);
}
<form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
<label for="phone">Celular</label>
<input type="phone" formControlName="phone" />
<label for="password">Clave de acceso</label>
<input type="password" formControlName="password" />
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary">Get paper</button>
</div>
</form>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Intercambio TingSoluciones!</span>
</mat-toolbar>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="emailForm">
<ng-template matStepLabel>Ingresa tus datos!</ng-template>
<form [formGroup]="emailForm" (ngSubmit)="onSubmit()" *ngIf="assignedPapers.length === 0">
<mat-form-field>
<input matInput type="phone" formControlName="phone" placeholder="Celular" />
</mat-form-field>
<mat-form-field>
<input matInput type="password" formControlName="password" placeholder="Contraseña" />
</mat-form-field>
<div class="form-group">
<button [disabled]="loading" matStepperNext mat-raised-button color="primary">Dame mi papelito!</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Papelito</ng-template>
You are now done.
</mat-step>
</mat-horizontal-stepper>
</mat-sidenav-content>
</mat-sidenav-container>
......@@ -9,17 +9,24 @@ import { FirestoreService } from './services/firestore/firestore.service';
})
export class AppComponent implements OnInit {
emailForm: FormGroup;
isLinear = true;
submitted = false;
people = [];
papers = []
extraPapers = []
papers = [];
extraPapers = [];
assignedPapers = [];
hasChallenge = false;
constructor(private formBuilder: FormBuilder, private firestoreService: FirestoreService) {
}
ngOnInit() {
/** this.firestoreService.addPaper({ name: 'Sandra Valencia', kind: 0 });
this.firestoreService.addPaper({ name: 'Invitas un six (No tecate)', kind: 1 });
this.firestoreService.addPaper({ name: 'Armando Hernandez', kind: 0 });
this.firestoreService.addPaper({ name: 'Eva Garcia', kind: 0 });
this.firestoreService.addPaper({ name: 'Patricia Fajardo', kind: 0 }); */
this.firestoreService.getPapers().subscribe((papersSnapshot) => {
this.papers = [];
papersSnapshot.forEach((paperData: any) => {
......@@ -40,7 +47,8 @@ export class AppComponent implements OnInit {
id: peopleData.payload.doc.id,
phone: data.phone,
password: data.password,
name: data.name
name: data.name,
hasPaper: data.hasPaper
});
})
});
......@@ -79,21 +87,42 @@ export class AppComponent implements OnInit {
}
if (people.password !== this.emailForm.value.password) {
alert('Pinche tramposooooooo!!!!');
alert('Contraseña incorrecta!!');
return;
}
console.log(this.getPaper(people));
if (people.hasPaper) {
alert('Pinche tramposooooooo!!!!');
return;
}
people.hasPaper = true;
this.firestoreService.updatePerson(people.id, people);
this.getPaper(people);
}
getPaper(people) {
const paper = this.papers[Math.floor(Math.random() * 11)]
const paper = this.papers[Math.floor(Math.random() * (this.papers.length - 1))];
if (paper.name === people.name) {
this.getPaper(people);
} else {
return paper.name;
if (paper.kind === 1 && !this.hasChallenge) {
this.hasChallenge = true;
this.assignedPapers.push(paper);
this.firestoreService.deletePaper(paper.id);
this.getPaper(people);
return;
}
if (paper.kind === 1) {
this.getPaper(people);
return;
} else {
this.assignedPapers.push(paper);
this.firestoreService.deletePaper(paper.id);
people.papers = this.assignedPapers;
this.firestoreService.updatePerson(people.id, people);
return;
}
}
}
}
......@@ -2,11 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatToolbarModule, MatButtonModule, MatStepperModule, MatGridListModule, MatSidenavModule, MatInputModule, MatFormFieldModule, MatIconModule, MatListModule, MatCardModule } from '@angular/material';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestore } from 'angularfire2/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
@NgModule({
declarations: [
......@@ -14,8 +18,21 @@ import { AppComponent } from './app.component';
],
imports: [
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
AngularFireModule.initializeApp(environment.firebase)
AngularFireModule.initializeApp(environment.firebase),
BrowserAnimationsModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatCardModule,
LayoutModule,
MatFormFieldModule,
MatInputModule,
MatGridListModule,
MatStepperModule
],
providers: [AngularFirestore],
bootstrap: [AppComponent]
......
......@@ -14,6 +14,10 @@ export class FirestoreService {
return this.firestore.collection('people').doc(documentId).snapshotChanges();
}
public updatePerson(documentId: string, data: any) {
return this.firestore.collection('people').doc(documentId).update(data);
}
public getPeoples() {
return this.firestore.collection('people').snapshotChanges();
}
......@@ -26,4 +30,12 @@ export class FirestoreService {
return this.firestore.collection('extraPapers').snapshotChanges();
}
public addPaper(data: any) {
return this.firestore.collection('papers').add(data);
}
public deletePaper(documentId: string) {
return this.firestore.collection('papers').doc(documentId).delete();
}
}
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<meta charset="utf-8">
<title>El Mantecas</title>
<title>Intercambio TingSoluciones!</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
......
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
body { margin: 0; }