Basicos para la gestión de paginas y contenidos del backend en Wordpress

src/app/app-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PageComponent } from './page/page.component';
+import { HomeComponent } from './home/home.component';
+
+
+const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full'},
+  { path: 'home', component: HomeComponent },
+  { path: ':id', component: PageComponent },
+  { path: ':parent/intro', redirectTo:':parent'},
+  { path: ':parent/:id', component: PageComponent},
+  { path: '**', component: HomeComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [
+    RouterModule
+  ],
+  declarations: []
+})
+
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,4 +1,3 @@
-<app-menu></app-menu>
-<app-header></app-header>
-<app-section></app-section>
+<router-outlet></router-outlet>
+<app-menu [pages]=pages></app-menu>
 <app-footer></app-footer>

src/app/app.component.ts

@@ -1,10 +1,26 @@
-import { Component } from '@angular/core';
+import { Component,OnInit } from '@angular/core';
+import { PageService } from './page.service';
+import { PageItem } from './page';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'industria-paisaia';
+  private pages : PageItem[];
+
+  constructor (
+    private pageService : PageService
+  ) {}
+
+  ngOnInit() {
+    // this.pageService.getItems();
+    this.pageService.getParentPages()
+      .subscribe(data => {
+        this.pages = data;
+      });
+  }
+
 }

src/app/app.module.ts

@@ -1,12 +1,17 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpModule } from '@angular/http';
 
-
+import { PageService } from './page.service';
 import { AppComponent } from './app.component';
 import { MenuComponent } from './menu/menu.component';
 import { HeaderComponent } from './header/header.component';
 import { SectionComponent } from './section/section.component';
 import { FooterComponent } from './footer/footer.component';
+import { AppRoutingModule } from './app-routing.module';
+import { PageComponent } from './page/page.component';
+import { HomeComponent } from './home/home.component';
+import { MenuChildsComponent } from './menu-childs/menu-childs.component';
 
 
 @NgModule({
@@ -15,12 +20,19 @@ import { FooterComponent } from './footer/footer.component';
     MenuComponent,
     HeaderComponent,
     SectionComponent,
-    FooterComponent
+    FooterComponent,
+    PageComponent,
+    HomeComponent,
+    MenuChildsComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HttpModule,
+    AppRoutingModule,
+  ],
+  providers: [
+    PageService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/header/header.component.html

@@ -1 +1,12 @@
-<header class="homepage" id="header"></header>
+
+<header *ngFor="let page of pages" class="section" [ngStyle]="{'background-size':'cover','background-image': 'url('+page.background_image+')'}">
+			<div class="row" style="">
+				<div class="col-md-10 offset-md-1"><h1><span [innerHTML]=page.title></span></h1></div>
+				<div class="col-md-10 offset-md-1">
+					<h3 [innerHTML]="page.excerpt"></h3>
+					<!-- <a href="#more">
+						<div class="arrow-down">&#8681;</div>
+					</a> -->
+				</div>
+			</div>
+</header>

src/app/header/header.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input} from '@angular/core';
+import { PageItem } from '../page';
 
 @Component({
   selector: 'app-header',
@@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
+  @Input() pages : PageItem[];
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  isHome():boolean {
+    return false;
+  }
+
 }

src/app/home/home.component.html

@@ -0,0 +1,2 @@
+<header class="homepage" id="header"></header>
+<app-section [pages]=pages></app-section>

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { PageService } from '../page.service';
+import { PageItem } from '../page';
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  pages : PageItem[];
+
+  constructor(
+    private route: ActivatedRoute,
+    private pageService: PageService
+  )
+  {
+        this.route.params.subscribe( params => console.log(params.id) );
+  }
+
+  ngOnInit() {
+    // this.pageService.getItems();
+    this.pageService.getParentPages()
+      .subscribe(data => {
+        this.pages = data;
+      });
+  }
+
+}

src/app/menu-childs/menu-childs.component.html

@@ -0,0 +1,4 @@
+<ul class="filters">
+  <!-- <li *ngIf="childs?.length > 0" routerLink="/{{plink}}">Presentacion</li> -->
+  <li *ngFor="let child of childs" routerLink="/{{child.link}}"  [routerLinkActive]="['active']" [innerHTML]='child.title'></li>
+</ul>

src/app/menu-childs/menu-childs.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuChildsComponent } from './menu-childs.component';
+
+describe('MenuChildsComponent', () => {
+  let component: MenuChildsComponent;
+  let fixture: ComponentFixture<MenuChildsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MenuChildsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuChildsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/menu-childs/menu-childs.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { PageItem } from '../page';
+import { PageService } from '../page.service';
+
+
+
+@Component({
+  selector: 'app-menu-childs',
+  templateUrl: './menu-childs.component.html',
+  styleUrls: ['./menu-childs.component.css']
+})
+export class MenuChildsComponent implements OnInit {
+
+  @Input() parent_id: string;
+  @Input() parent_link: string;
+  childs : PageItem[];
+  plink:string;
+
+  constructor(private pageService : PageService) { }
+
+  ngOnInit() {
+    this.getChilds();
+  }
+
+  getChilds() {
+    this.pageService.getChilds(this.parent_id)
+      .subscribe(data => {
+        this.childs = data;
+        this.plink = '';
+      });
+  }
+
+}

src/app/menu/menu.component.html

@@ -1,19 +1,16 @@
 <div class="menu">
-  <img src="../../assets/industria-paisaia.svg" width="150" height="60" alt=""/>
+  <a  routerLink="/"><img src="../../assets/industria-paisaia.svg" width="150" height="60" alt=""/></a>
   <nav>
     <ul class="nav">
-      <li class="nav-item active">Inicio</li>
-      <a href="proyecto.html"><li class="nav-item">Proyecto</li></a>
-      <a href="exposicion.html"><li class="nav-item">Expo</li></a>
-      <a href="entrevistas.html"><li class="nav-item">Entrevistas</li></a>
-      <a href="media.html"><li class="nav-item">Media</li></a>
+      <!-- <li class="nav-item" [routerLink]='home' [routerLinkActive]="['active']">Inicio</li> -->
+      <li *ngFor="let page of pages" class="nav-item" [routerLink]=page.slug [routerLinkActive]="['active']">{{page.title}}</li>
     </ul>
   </nav>
   <!-- search -->
   <div id="search" class="Search" style="display:none;">
     <input type="search" placeholder="Search for a title..." value=""/>
   </div>
-  <div class="language">
+  <div class="language" style="display:none;">
     <span>EUS</span> <span>|</span> <span>ES</span>
   </div>
 </div>

src/app/menu/menu.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { PageItem } from '../page';
+
 
 @Component({
   selector: 'app-menu',
@@ -7,6 +9,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MenuComponent implements OnInit {
 
+  @Input() pages : PageItem[];
+
   constructor() { }
 
   ngOnInit() {

src/app/page.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PageService } from './page.service';
+
+describe('PageService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PageService]
+    });
+  });
+
+  it('should be created', inject([PageService], (service: PageService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/page.service.ts

@@ -0,0 +1,76 @@
+import { Injectable } from '@angular/core';
+import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angular/http';
+import { Observable } from 'rxjs';
+import 'rxjs/add/operator/map';
+import { PageItem } from './page';
+
+// @Injectable({providedIn : 'root'}) {}
+@Injectable()
+
+export class PageService {
+
+  apiUrl : string = "https://backend.industriapaisaia.eus/wp-json/wp/v2"
+
+  constructor(
+    private http: Http
+  ) { }
+
+  getItems() : void {
+    //console.log("getItems");
+    let url = `${this.apiUrl}/pages`;
+    let search = new URLSearchParams();
+    search.set('foo', 'moo');
+    search.set('limit', "25");
+    this.http.get(url,{search:search})
+      .toPromise()
+      .then(res => console.log(res.json()));
+  }
+
+  getParentPages() : Observable<PageItem[]> {
+    let search = new URLSearchParams();
+    search.set('parent','0');
+    return this.getPages(search);
+  }
+
+  getPage(slug:string) {
+    let search = new URLSearchParams();
+    search.set('slug',slug);
+    return this.getPages(search);
+  }
+
+  getChilds(id:string) {
+    // console.log("childs de: "+id);
+    let search = new URLSearchParams();
+    search.set('parent',id);
+    return this.getPages(search);
+  }
+
+  getPages(searchParams) : Observable<PageItem[]> {
+    searchParams.set('orderby','menu_order');
+    //searchParams.set('context','embed');
+    let url = `${this.apiUrl}/pages`;
+    return this.http.get(url,{search:searchParams})
+      .map(res => {
+        return res.json().map(item => {
+          console.log(item);
+          let page = new PageItem(
+            item.id as string,
+            item.title.rendered,
+            item.excerpt.rendered,
+            item.content.rendered,
+            item.slug,
+            item.parent
+          );
+          if (item.acf.background_image) { page['background_image'] = item.acf.background_image.sizes.large; }
+          else  { page['background_image'] = ''; }
+
+          let link = document.createElement('a');
+          link.href = item.link;
+          page['link'] = link.pathname;
+
+          return page;
+        });
+      });
+  }
+
+}

src/app/page.ts

@@ -0,0 +1,16 @@
+export class PageItem {
+  constructor(
+    public id : string,
+    public title : string,
+    public excerpt : string,
+    public content : string,
+    public slug : string,
+    public parent? : string,
+    public background_image? : string,
+    public link?: string
+  ) {}
+
+  // public set (key,attr) {
+  //   this['key'] = attr;
+  // }
+}

src/app/page/page.component.html

@@ -0,0 +1,21 @@
+<app-header [pages]=pages></app-header>
+<!-- <app-section [pages]=pages></app-section> -->
+<article *ngFor="let page of pages">
+		<div class="row">
+			<div class="col-md-3 offset-md-1 info">
+        <!-- <h1><span>{{page.title}}</span></h1> -->
+				<!-- <h2 [innerHTML]={{parent}}></h2>  -->
+        <!-- <h2>{{page.id}}</h2> -->
+				<!-- <ul class="filters">
+					<li class="active">All</li>
+					<li>Audio</li>
+					<li>Video</li>
+					<li>Imágen</li>
+				</ul> -->
+        <app-menu-childs *ngIf="page.parent==0" [parent_id]="page.id" [parent_link]="page.link"></app-menu-childs>
+        <app-menu-childs *ngIf="page.parent>0" [parent_id]="page.parent" [parent_link]="page.link"></app-menu-childs>
+        <!-- imagenes en lista-->
+      </div>
+			<div class="col-md-7" [innerHTML]="page.content"><!--content--></div>
+		</div>
+  </article>

src/app/page/page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageComponent } from './page.component';
+
+describe('PageComponent', () => {
+  let component: PageComponent;
+  let fixture: ComponentFixture<PageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page/page.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { PageService } from '../page.service';
+import { PageItem } from '../page';
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+  selector: 'app-page',
+  templateUrl: './page.component.html',
+  styleUrls: ['./page.component.css']
+})
+export class PageComponent implements OnInit {
+
+  pages : PageItem[];
+  slug : string;
+  parent : string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private pageService: PageService
+  )
+  {
+        this.route.params.subscribe( params => {
+          this.slug = params.id;
+          this.parent = params.parent;
+          this.getPage();
+        } );
+  }
+
+  ngOnInit() {}
+
+  getPage() {
+    console.log(this.slug);
+    this.pageService.getPage(this.slug)
+      .subscribe(data => {
+        this.pages = data;
+        console.log(data);
+      });
+  }
+
+}

src/app/section/section.component.html

@@ -1,10 +1,10 @@
-<div class="ia-section bg1" id="proyecto">
+<div *ngFor="let page of pages" class="ia-section bg1" id="{{page.slug}}">
 	<section>
-	<a href="proyecto.html">
+	<a href="/{{page.slug}}">
 	<div class="row section-content">
 		<div class="col-md-1 ia-select"></div>
-		<div class="col-md-5"><h1><span>Proyecto</span></h1></div>
-		<div class="col-md-6"><p>Texto introducción de la seccioń. Algo sencillo que anime a seguir adelante en esta sección y descubrir su contenido.</p></div>
+		<div class="col-md-5"><h1><span>{{page.title}}</span></h1></div>
+		<div class="col-md-6" [innerHTML]="page.excerpt"></div>
 	</div>
 	</a>
 	</section>

src/app/section/section.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { PageItem } from '../page';
 
 @Component({
   selector: 'app-section',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SectionComponent implements OnInit {
 
+  @Input() pages : PageItem[];
+
   constructor() { }
 
   ngOnInit() {

src/styles.css

@@ -20,12 +20,13 @@ header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;
 
 header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;}
 
-header.section { padding-top:10%;background-attachment: fixed; }
+header.section { background-attachment: fixed; }
+header.section > div {padding-top:10%;background-color:rgba(255,255,255,0.6); height:100vh;}
 header.section h1 {word-wrap: break-word;}
-header.section h1 span {font-size:3em;background-color:#d2e8eb; padding:10px;}
-header.section h3 {text-transform:uppercase;font-size:2em;font-weight:400; color:#f7886c; font-family:"Manteka";}
+header.section h1 span {font-size:2.5em;background-color:#d2e8eb; padding:10px;}
+header.section h3 {text-align:center; font-size:1.5em;font-weight:400; color:#000; font-family:"Raleway";background-color:#f7886c;padding:20px;}
 
-header.section h1::after {content:'';width:100%;height:100%;position:absolute;background:#f00;}
+header.section h1::after {content:'';width:100%;height:100%;position:absolute;}
 
 a {color:#000;}
 a:hover { color:#000; text-decoration:none;}
@@ -63,7 +64,7 @@ div.ia-section div.col-md-6  { padding:20px;}
 /*article*/
 
 article {padding-top:80px;}
-article img {border:3px solid #f7886c;width:100%;margin:20px auto;filter:grayscale(0.8);}
+article img {border:3px solid #f7886c;margin:20px auto;filter:grayscale(0.8);}
 article img:hover {filter:none; box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);cursor:pointer;}
 article p {font-size:0.9em;}
 article h2 span {background:#d2e8eb;padding:10px;}
@@ -74,9 +75,9 @@ footer { min-height:300px; height:100%; background-color:#d2e8eb; padding:20px;
 footer div.row { text-align:center; min-height:200px; margin-top:20px;}
 footer div.row h2 {margin-bottom:20px;}
 footer div.row h2 span {font-weight:400; background-color:#f7886c; padding:5px;}
-footer div.row p {font-size:0.9em;padding:5px;}
+footer div.row p {font-size:0.7em;padding:5px;}
 
-footer.single { min-height:100px; height:100%; margin-top:30px; padding:20px; color:#888; background:transparent; font-size:0.8em; text-align:center; background:#fff; font-weight:bold;}
+footer.single { min-height:100px; height:100%; margin-top:30px; padding:20px; color:#888; background:transparent; font-size:0.6em; text-align:center; background:#fff; font-weight:bold;}
 
 /*video*/
 .video-container video {width:100%;}
@@ -126,3 +127,6 @@ header.item { margin-top:50px;height:0;}
 .info ul.filters li:hover {border-right:0px;color:#f7886c;}
 .info ul.filters li:active {border-right:0px;color:#fff;background-color:#f7886c;}
 .info ul.filters li.active {border-right:0px;color:#fff;background-color:#f7886c;}
+
+/* imagen */
+img.fullwidth {width:100%;}