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

This commit is contained in:
Siroco 2018-06-05 03:52:00 +02:00
parent 26483ffe1e
commit 2cb935306d
26 changed files with 423 additions and 31 deletions

View File

@ -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 { }

View File

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

View File

@ -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({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = 'industria-paisaia'; title = 'industria-paisaia';
private pages : PageItem[];
constructor (
private pageService : PageService
) {}
ngOnInit() {
// this.pageService.getItems();
this.pageService.getParentPages()
.subscribe(data => {
this.pages = data;
});
}
} }

View File

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

View File

@ -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>

View File

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

View File

View File

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

View File

@ -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();
});
});

View File

@ -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;
});
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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 = '';
});
}
}

View File

@ -1,19 +1,16 @@
<div class="menu"> <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> <nav>
<ul class="nav"> <ul class="nav">
<li class="nav-item active">Inicio</li> <!-- <li class="nav-item" [routerLink]='home' [routerLinkActive]="['active']">Inicio</li> -->
<a href="proyecto.html"><li class="nav-item">Proyecto</li></a> <li *ngFor="let page of pages" class="nav-item" [routerLink]=page.slug [routerLinkActive]="['active']">{{page.title}}</li>
<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>
</ul> </ul>
</nav> </nav>
<!-- search --> <!-- search -->
<div id="search" class="Search" style="display:none;"> <div id="search" class="Search" style="display:none;">
<input type="search" placeholder="Search for a title..." value=""/> <input type="search" placeholder="Search for a title..." value=""/>
</div> </div>
<div class="language"> <div class="language" style="display:none;">
<span>EUS</span> <span>|</span> <span>ES</span> <span>EUS</span> <span>|</span> <span>ES</span>
</div> </div>
</div> </div>

View File

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

View File

@ -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();
}));
});

76
src/app/page.service.ts Normal file
View File

@ -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;
});
});
}
}

16
src/app/page.ts Normal file
View File

@ -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;
// }
}

View File

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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);
});
}
}

View File

@ -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> <section>
<a href="proyecto.html"> <a href="/{{page.slug}}">
<div class="row section-content"> <div class="row section-content">
<div class="col-md-1 ia-select"></div> <div class="col-md-1 ia-select"></div>
<div class="col-md-5"><h1><span>Proyecto</span></h1></div> <div class="col-md-5"><h1><span>{{page.title}}</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-6" [innerHTML]="page.excerpt"></div>
</div> </div>
</a> </a>
</section> </section>

View File

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

View File

@ -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.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 {word-wrap: break-word;}
header.section h1 span {font-size:3em;background-color:#d2e8eb; padding:10px;} header.section h1 span {font-size:2.5em;background-color:#d2e8eb; padding:10px;}
header.section h3 {text-transform:uppercase;font-size:2em;font-weight:400; color:#f7886c; font-family:"Manteka";} 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 {color:#000;}
a:hover { color:#000; text-decoration:none;} a:hover { color:#000; text-decoration:none;}
@ -63,7 +64,7 @@ div.ia-section div.col-md-6 { padding:20px;}
/*article*/ /*article*/
article {padding-top:80px;} 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 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 p {font-size:0.9em;}
article h2 span {background:#d2e8eb;padding:10px;} 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 { text-align:center; min-height:200px; margin-top:20px;}
footer div.row h2 {margin-bottom:20px;} footer div.row h2 {margin-bottom:20px;}
footer div.row h2 span {font-weight:400; background-color:#f7886c; padding:5px;} 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*/
.video-container video {width:100%;} .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: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;}
.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%;}