From 2cb935306deda92d4604eebc0543c41238ee2a6e Mon Sep 17 00:00:00 2001 From: Siroco Date: Tue, 5 Jun 2018 03:52:00 +0200 Subject: [PATCH] =?UTF-8?q?Basicos=20para=20la=20gesti=C3=B3n=20de=20pagin?= =?UTF-8?q?as=20y=20contenidos=20del=20backend=20en=20Wordpress?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app-routing.module.ts | 26 +++++++ src/app/app.component.html | 5 +- src/app/app.component.ts | 20 ++++- src/app/app.module.ts | 20 ++++- src/app/header/header.component.html | 13 +++- src/app/header/header.component.ts | 9 ++- src/app/home/home.component.css | 0 src/app/home/home.component.html | 2 + src/app/home/home.component.spec.ts | 25 ++++++ src/app/home/home.component.ts | 31 ++++++++ src/app/menu-childs/menu-childs.component.css | 0 .../menu-childs/menu-childs.component.html | 4 + .../menu-childs/menu-childs.component.spec.ts | 25 ++++++ src/app/menu-childs/menu-childs.component.ts | 33 ++++++++ src/app/menu/menu.component.html | 11 +-- src/app/menu/menu.component.ts | 6 +- src/app/page.service.spec.ts | 15 ++++ src/app/page.service.ts | 76 +++++++++++++++++++ src/app/page.ts | 16 ++++ src/app/page/page.component.css | 0 src/app/page/page.component.html | 21 +++++ src/app/page/page.component.spec.ts | 25 ++++++ src/app/page/page.component.ts | 40 ++++++++++ src/app/section/section.component.html | 8 +- src/app/section/section.component.ts | 5 +- src/styles.css | 18 +++-- 26 files changed, 423 insertions(+), 31 deletions(-) create mode 100644 src/app/app-routing.module.ts create mode 100644 src/app/home/home.component.css create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.spec.ts create mode 100644 src/app/home/home.component.ts create mode 100644 src/app/menu-childs/menu-childs.component.css create mode 100644 src/app/menu-childs/menu-childs.component.html create mode 100644 src/app/menu-childs/menu-childs.component.spec.ts create mode 100644 src/app/menu-childs/menu-childs.component.ts create mode 100644 src/app/page.service.spec.ts create mode 100644 src/app/page.service.ts create mode 100644 src/app/page.ts create mode 100644 src/app/page/page.component.css create mode 100644 src/app/page/page.component.html create mode 100644 src/app/page/page.component.spec.ts create mode 100644 src/app/page/page.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..695eac1 --- /dev/null +++ b/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 { } diff --git a/src/app/app.component.html b/src/app/app.component.html index 56e834f..bc0dad0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,3 @@ - - - + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 117ea2a..e73f91e 100644 --- a/src/app/app.component.ts +++ b/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; + }); + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index feea01f..a6c1852 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index bb32088..6ec072d 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1 +1,12 @@ - + +
+
+

+
+

+ +
+
+
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 3ee4d0f..f033506 100644 --- a/src/app/header/header.component.ts +++ b/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; + } + } diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..1c54022 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..490e81b --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..98c0f4f --- /dev/null +++ b/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; + }); + } + +} diff --git a/src/app/menu-childs/menu-childs.component.css b/src/app/menu-childs/menu-childs.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/menu-childs/menu-childs.component.html b/src/app/menu-childs/menu-childs.component.html new file mode 100644 index 0000000..8941e0d --- /dev/null +++ b/src/app/menu-childs/menu-childs.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/menu-childs/menu-childs.component.spec.ts b/src/app/menu-childs/menu-childs.component.spec.ts new file mode 100644 index 0000000..4ee5a19 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MenuChildsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MenuChildsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/menu-childs/menu-childs.component.ts b/src/app/menu-childs/menu-childs.component.ts new file mode 100644 index 0000000..92b7ca6 --- /dev/null +++ b/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 = ''; + }); + } + +} diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html index 8c36d58..aefdda5 100644 --- a/src/app/menu/menu.component.html +++ b/src/app/menu/menu.component.html @@ -1,19 +1,16 @@
- + -
+
diff --git a/src/app/menu/menu.component.ts b/src/app/menu/menu.component.ts index af2aede..7e57b9a 100644 --- a/src/app/menu/menu.component.ts +++ b/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() { diff --git a/src/app/page.service.spec.ts b/src/app/page.service.spec.ts new file mode 100644 index 0000000..0809a45 --- /dev/null +++ b/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(); + })); +}); diff --git a/src/app/page.service.ts b/src/app/page.service.ts new file mode 100644 index 0000000..46235f5 --- /dev/null +++ b/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 { + 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 { + 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; + }); + }); + } + +} diff --git a/src/app/page.ts b/src/app/page.ts new file mode 100644 index 0000000..b232c19 --- /dev/null +++ b/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; + // } +} diff --git a/src/app/page/page.component.css b/src/app/page/page.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/page/page.component.html b/src/app/page/page.component.html new file mode 100644 index 0000000..921e272 --- /dev/null +++ b/src/app/page/page.component.html @@ -0,0 +1,21 @@ + + +
+
+
+ + + + + + + +
+
+
+
diff --git a/src/app/page/page.component.spec.ts b/src/app/page/page.component.spec.ts new file mode 100644 index 0000000..de61672 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/page/page.component.ts b/src/app/page/page.component.ts new file mode 100644 index 0000000..16c46a5 --- /dev/null +++ b/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); + }); + } + +} diff --git a/src/app/section/section.component.html b/src/app/section/section.component.html index 8d2502a..db80993 100644 --- a/src/app/section/section.component.html +++ b/src/app/section/section.component.html @@ -1,10 +1,10 @@ -
+
- +
-

Proyecto

-

Texto introducción de la seccioń. Algo sencillo que anime a seguir adelante en esta sección y descubrir su contenido.

+

{{page.title}}

+
diff --git a/src/app/section/section.component.ts b/src/app/section/section.component.ts index 0cd3c44..4b279c2 100644 --- a/src/app/section/section.component.ts +++ b/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() { diff --git a/src/styles.css b/src/styles.css index 5e46326..750678b 100644 --- a/src/styles.css +++ b/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%;}