Vista general de documento y URL divididas

src/app/app-routing.module.ts

@@ -6,15 +6,21 @@ import { LoginComponent } from './login/login.component';
 import { ParticiparComponent } from './participar/participar.component';
 import { DocumentoComponent } from './documento/documento.component';
 import { NuevoComponent } from './nuevo/nuevo.component';
-
+import { RevisionComponent} from './revision/revision.component';
+import { LlamadaComponent} from './llamada/llamada.component';
+import { AnalisisComponent} from './analisis/analisis.component';
+
 const routes: Routes = [
 
     { path: '', redirectTo: '/inicio', pathMatch: 'full' },
     { path: 'inicio', component: InicioComponent },
     { path: 'login', component: LoginComponent},
     { path: 'participar', component: ParticiparComponent},
     { path: 'documento/:id', component: DocumentoComponent},
-    { path: 'nuevo', component: NuevoComponent}
+    { path: 'nuevo', component: NuevoComponent},
+    { path: 'texto', component: RevisionComponent},
+    { path: 'analisis', component: AnalisisComponent},
+    { path: 'llamada', component: LlamadaComponent}
 ];
 
 @NgModule({

src/app/app.component.html

@@ -7,6 +7,8 @@
     <nav class = 'navegacion'>
 
 
+
+
         <a class = 'inicio' routerLink = "/inicio">Inicio</a>
         <a class = 'login' routerLink = "/participar">Participa</a>
         <a class = 'login'routerLink = "/login">Login</a>

src/app/doc.service.ts

@@ -12,7 +12,7 @@ export class DocService {
 
     { id: 3, nombre: 'Documento 3', creador: 'carlos', participante: 'carlos', texto: 'Cohn trató por todos los medios frenar la conflagración. Al igual que con el Tratado de Libre Comercio de América del Norte (TLCAN), buscó que primase la negociación. Pero en esta ocasión falló. Ni siquiera su triunfo con la titánica reforma fiscal, el mayor éxito político hasta la fecha de la Casa Blanca, le valió para hacer valer su palabra. Trump, jaleado por Navarro y los epígonos de Steve Bannon que aún quedan en la Casa Blanca, volvió a sus raíces, alzó la bandera del América Primero y anunció que las guerras comerciales son “buenas y fáciles de ganar”.', etapa: 'cambios'},
 
-    { id: 4, nombre: 'Documento 4', creador: 'jorge', participante: 'jorge', texto: 'El golpe fue excesivo para el financiero de Wall Street. Su teórico subordinado, Peter Navarro, le había ganado la partida y había impuesto la línea dura en un tema altamente volátil y que marcará la estrategia económica el mandato. Estados Unidos, en contra de su criterio, se enfrentaba a cara de perro con sus socios y vecinos. Europa, Canadá, México iban a sufrir los embates. Y el siguiente en la lista era China. El gigante asiático, que hasta ahora se ha mantenido a salvo de las iras de Trump por su apoyo en el cerco a Corea Norte, entraba en rumbo de colisión.', etapa: 'revision' }
+    { id: 4, nombre: 'Documento 4', creador: 'jorge', participante: 'jorge', texto: 'El golpe fue excesivo para el financiero de Wall Street. Su teórico subordinado, Peter Navarro, le había ganado la partida y había impuesto la línea dura en un tema altamente volátil y que marcará la estrategia económica el mandato. Estados Unidos, en contra de su criterio, se enfrentaba a cara de perro con sus socios y vecinos. Europa, Canadá, México iban a sufrir los embates. Y el siguiente en la lista era China. El gigante asiático, que hasta ahora se ha mantenido a salvo de las iras de Trump por su apoyo en el cerco a Corea Norte, entraba en rumbo de colisión.', etapa: 'analisis' }
 
     ];
 

src/app/documento/documento.component.css

@@ -0,0 +1,37 @@
+
+.top{
+
+    display: inline-block;
+    width: 100%;
+
+}
+
+.izq{
+
+    display: inline-block;
+    float: left;
+    text-align: left
+}
+
+.der{
+
+    float: right;
+
+
+}
+
+.bot{
+
+    text-align: left;
+
+
+}
+
+.mat-tab-label{
+
+
+    font-size: 30px;
+
+
+}
+

src/app/documento/documento.component.html

@@ -1,3 +1,62 @@
+<div class = "top">
+    <div class = "izq">
+        <button (click)="documentos()" class='boton' mat-raised-button>Volver</button>
+        <h2> Titulo: {{getNombre()}} </h2>
+        <h3> Fase: {{etapa()}} </h3>
+    </div>
+
+
+    <div class = "der">
+
+        <button (click)="verDoc()" class='boton' mat-raised-button>Ver documento</button>
+
+    </div>
+</div>
+
+<div class = "bot">
+
+    <mat-tab-group>
+        <mat-tab class="cosa" label="Información">
+            <br><br>
+            <div>
+                Nombre: {{getNombre()}}<br><br>
+                Descripcion: <br><br>
+                Referencias: <br><br>
+            </div>
+        </mat-tab>
+        <mat-tab label="Fases">
+            <br><br>
+            <div>
+                Fechas especificadas para las diferentes fases del documento.
+            </div>
+        </mat-tab>
+        <mat-tab label="Analisis">
+            <br><br>
+            <div>
+                Resumenes de votos, estadisticas etc
+            </div>
+        </mat-tab>
+        <mat-tab label = "Versiones">
+            <br><br>
+            <div>
+                Versiones del documento
+            </div>
+        </mat-tab>
+        <mat-tab label = "Admins">
+            <br><br>
+            <div>
+                Administradores del documento
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+
+
+</div>
+
+
+
+
+
 <div *ngIf="mostrar()">
     <div *ngIf="isAdmin()">
         <app-revision *ngIf="etapa() == 'revision'"></app-revision>

src/app/documento/documento.component.ts

@@ -2,7 +2,8 @@ import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Doc } from '../doc';
 import { DocService } from '../doc.service';
-import { UserService } from '../user.service'
+import { UserService } from '../user.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-documento',
@@ -19,7 +20,8 @@ export class DocumentoComponent implements OnInit{
 
     constructor(private route: ActivatedRoute,
                private docService: DocService,
-                 private userService: UserService
+                 private userService: UserService,
+                 private router:Router
                ){};
 
 
@@ -33,6 +35,14 @@ export class DocumentoComponent implements OnInit{
         */
     }
 
+    verDoc(){
+
+        if(this.doc.etapa == 'analisis') this.router.navigate(['/'+this.doc.etapa], {replaceUrl: true});
+            else if(this.doc.etapa == 'llamada') this.router.navigate(['/'+ this.doc.etapa], {replaceUrl: true});
+                else this.router.navigate(['/texto'], { replaceUrl: true });
+
+    }
+
     isLog(){
 
 
@@ -47,6 +57,12 @@ export class DocumentoComponent implements OnInit{
 
     }
 
+    getNombre(){
+
+        return this.doc.nombre;
+
+    }
+
     isAdmin(){
 
         return this.userService.isAdmin();
@@ -81,5 +97,11 @@ export class DocumentoComponent implements OnInit{
         return false;
 
     }
+
+    documentos(){
+
+        this.router.navigate(['/participar'], { replaceUrl: true });
+
+    }
 
 }