Cambios y estilos actualizados.

.angular-cli.json

@@ -19,7 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.scss"
+        "styles.scss", "assets/bootstrap.min.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

src/app/app.component.css

@@ -1,5 +1,5 @@
-*{
-  font-family: Roboto, sans-serif;
+.header{
+  margin: 1vh 0;
 }
 .sebm-google-map-container {
   height: 300px;

src/app/app.component.html

@@ -1,23 +1,26 @@
-
-<nav class="navbar navbar-default">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <h1> 
-        {{title}}
-      </h1>
-    </div>
-    <div *ngIf="isLoggedIn" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav navbar-right">
-        <li><a class="btn" (click)="logout()">Logout</a></li>
+<div class="container">
+  <div class="header clearfix">
+    <nav>
+      <ul class="nav nav-pills float-right">
+        <li class="nav-item" *ngIf="!isLoggedIn">
+          <a class="nav-link active" href="javascript://" (click)="login()">Entrar</a>
+        </li>
+        <li class="nav-item" *ngIf="isLoggedIn">
+          <a class="nav-link" href="javascript://" (click)="logout()">Salir</a>
+        </li>
       </ul>
-    </div>
+    </nav>
+    <h3 class="text-muted">{{title}}</h3>
   </div>
-</nav>
 
-<sebm-google-map [latitude]="lat" [longitude]="lng">
-  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
-</sebm-google-map>
+  <sebm-google-map [latitude]="lat" [longitude]="lng">
+    <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
+  </sebm-google-map>
 
-<div class="app-content">
   <router-outlet></router-outlet>
+  <hr>
+  <footer class="footer text-center">
+    <p>&copy; El Rico Dato 2017</p>
+  </footer>
+
 </div>

src/app/app.component.ts

@@ -13,21 +13,18 @@ export class AppComponent {
   lat: number = 0;
   lng: number = 0;
   title: string = 'El Rico Dato';
+  isLoggedIn: boolean;
 
   private limit: Subject<number> = new Subject<number>();
-
-  isLoggedIn: boolean;
+
   constructor(
     public afService: AngularFireAuthService,
     private router: Router
   ) {
-    // This asynchronously checks if our user is logged it and will automatically
-    // redirect them to the Login page when the status changes.
-    // This is just a small thing that Firebase does that makes it easy to use.
+
     this.afService.af.auth.subscribe(
       (auth) => {
         if(auth == null) {
-          this.router.navigate(['login']);
           this.isLoggedIn = false;
         }
         else {
@@ -60,6 +57,13 @@ export class AppComponent {
     //   af.database.object(`test/i0`).set(random);
     // }, 6000);
   }
+  login() {
+    console.log(this.afService.loginWithGoogle);
+    this.afService.loginWithGoogle().then((data) => {
+      console.log(data);
+      this.isLoggedIn = true;
+    })
+  }
   logout() {
     this.afService.logout();
   }

src/app/app.module.ts

@@ -2,11 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { RouterModule, Routes } from "@angular/router";
-import { AngularFireModule } from 'angularfire2';
-import { AgmCoreModule } from 'angular2-google-maps/core';
-
 import { environment } from '../environments/environment';
 
 import { AppComponent } from './app.component';
@@ -16,6 +12,10 @@ import { AngularFireAuthService } from './providers/angular-fire-auth.service';
 import { LoginPageComponent } from './login-page/login-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
 
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { AngularFireModule } from 'angularfire2';
+import { AgmCoreModule } from 'angular2-google-maps/core';
+
 const routes: Routes = [
   { path: '', component: HomePageComponent },
   { path: 'login', component: LoginPageComponent }

src/app/login-page/login-page.component.css

@@ -12,7 +12,6 @@
 .loginmodal-container h1 {
   text-align: center;
   font-size: 1.8em;
-  font-family: roboto;
 }
 .loginmodal-submit {
   /* border: 1px solid #3079ed; */
@@ -22,9 +21,8 @@
   text-shadow: 0 1px rgba(0,0,0,0.1);
   background-color: #4d90fe;
   padding: 17px 0px;
-  font-family: roboto;
   font-size: 21px;
-   background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed));
+  background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed));
 }
 .loginmodal-submit:hover {
   /* border: 1px solid #2f5bb7; */

src/app/login-page/login-page.component.html

@@ -1,6 +1,6 @@
 <div class="modal-dialog">
   <div class="loginmodal-container">
-    <h1>Ingresar</h1><br>
+    <h1>Ingresar</h1>
     <button class="login loginmodal-submit" (click)="login()">Entrar con Google</button>
   </div>
 </div>

src/app/restaurant/restaurant.component.html

@@ -1,8 +1,8 @@
 <form>
   <h3>Ingresar Restaurant</h3>
 
-  <input #restName type="text" placeholder="Nombre Restaurant" ><br>
-  <input #restPicture type="text" placeholder="Foto Restaurant" ><br>
-  <input #restLat type="text" placeholder="Latitud" ><br>
-  <input #restLong type="text" placeholder="Longitud" ><br>
+  <input #restName type="text" class="form-control" placeholder="Nombre Restaurant" ><br>
+  <input #restPicture type="text" class="form-control" placeholder="Foto Restaurant" ><br>
+  <input #restLat type="hidden" class="form-control" placeholder="Latitud" ><br>
+  <input #restLong type="hidden" class="form-control" placeholder="Longitud" ><br>
 </form>

src/index.html

@@ -6,6 +6,8 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./assets/bootstrap.min.css">
+
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>