commit c155b6d02ea224abc0b58587650e0805ed4a80b8
parent 5d6a9afdfb79642bfcc48314c2e69c7ee7f9e41e
Author: MTRNord <mtrnord1@gmail.com>
Date: Sun, 11 Feb 2018 20:13:09 +0100
Factor out some components
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
14 files changed, 153 insertions(+), 72 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -11,6 +11,8 @@ import { MainComponent } from './main/main.component';
import {AppRoutingModule} from './app.routing';
import { PaperComponent } from './paper/paper.component';
import { PapersComponent } from './papers/papers.component';
+import { TweetListComponent } from './tweet-list/tweet-list.component';
+import { PapersListComponent } from './papers-list/papers-list.component';
export const config: GalleryConfig = {
@@ -31,6 +33,8 @@ export const config: GalleryConfig = {
MainComponent,
PaperComponent,
PapersComponent,
+ TweetListComponent,
+ PapersListComponent,
],
imports: [
BrowserModule.withServerTransition({appId: 'snn-app'}),
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
@@ -23,7 +23,7 @@
<div class="container text-center white-text wow fadeInUp">
<h2>Social Networks News is a FOSS App to generate a Newspaper of your needs</h2>
<br>
- <h5>It happens automatic based on your Hashtags and Lists</h5>
+ <h5>It happens automatic based on your Hashtags and TwitterLists</h5>
<p>You will find the most amusing or interesting content of your hashtag</p>
<br>
<p>Already prepared and baked to be ready to be read by you!</p>
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -35,39 +35,7 @@
<main class="text-center py-5">
<div class="container" *ngIf="isBrowser" gallerize>
- <div class="card-deck row" *ngFor="let rows of chunkedData">
- <div class="card card-cascade" *ngFor="let item of rows">
- <!--Retweet Badge-->
- <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true">
- <i class="fa fa-retweet"></i>
- </div>
- <!--Card image-->
- <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.imageURL">
- <img [src]="item.imageURL" class="img-fluid" style="z-index: 0">
- <a>
- <div class="mask"></div>
- </a>
- </div>
- <!--Card content-->
- <div class="card-body">
- <!--Title when Text exists-->
- <h4 class="card-title text-left" *ngIf="(item.text && item.imageURL) || (item.text && !item.imageURL)"><a href="{{item.userLink}}">{{item.title}}</a></h4>
- <!--Title when no Text exists-->
- <h4 class="card-title align-middle" *ngIf="!item.text || !item.imageURL"><a href="{{item.userLink}}">{{item.title}}</a></h4>
- <!--Text-->
- <p class="card-text text-justify" *ngIf="item.text">{{item.text}}</p>
- </div>
- <!-- Card footer -->
- <div class="card-data">
- <ul>
- <li><i class="fa fa-clock-o"> </i>{{item.createdAt.toLocaleString()}}</li>
- <li><i class="fa fa-comments-o"> </i>{{item.replies.toLocaleString()}}</li>
- <li><i class="fa fa-heart"> </i>{{item.favs.toLocaleString()}}</li>
- <li><i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}}</li>
- </ul>
- </div>
- </div>
- </div>
+ <app-tweet-list [tweetData]="testData"></app-tweet-list>
</div>
</main>
diff --git a/src/app/paper/paper.component.ts b/src/app/paper/paper.component.ts
@@ -11,18 +11,9 @@ export class PaperComponent {
paperTitle = 'Test Paper';
paperSubtitle = 'Something to test';
testData = [{title: 'Simon Wüllhorst', 'userLink': 'https://twitter.com/des_cilla', text: 'Yaay, neue LTE-Antennen sind da. Es gibt bald endlich wieder schnelles Internet auf dem Dorf. :) #Freifunk', imageURL: 'https://pbs.twimg.com/media/DVmb2UCWsAA8oTD.jpg', createdAt: '09.02.2018', replies: 0, favs: 2, retweets: 1}, {title: 'Jason Scott', retweet: true, 'userLink': 'https://twitter.com/textfiles', imageURL: 'https://pbs.twimg.com/media/DVZ5gw0U0AA_mOu.jpg', createdAt: '07.02.2018', replies: 75, favs: 8003, retweets: 2813}, {title: 'Christian Dresel', 'userLink': 'https://twitter.com/DreselChristian', text: 'Soviel Richtfunk (blaue Linien)... soooo geiiiilllll :) @freifunk @FreifunkFranken #freifunk', imageURL: 'https://pbs.twimg.com/media/DViJcIRX0AAk1TT.jpg:large', createdAt: '08.02.2018', replies: 1, favs: 3, retweets: 0}];
- chunkedData = PaperComponent.chunk(this.testData, 3);
isBrowser: boolean;
constructor(@Inject(PLATFORM_ID) platformId: Object) {
this.isBrowser = isPlatformBrowser(platformId);
}
-
- static chunk(arr, size) {
- const newArr = [];
- for (let i = 0; i < arr.length; i += size) {
- newArr.push(arr.slice(i, i + size));
- }
- return newArr;
- }
}
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -0,0 +1,20 @@
+<div class="card-deck row" *ngFor="let rows of chunkedData">
+ <div class="card mx-auto" *ngFor="let item of rows" style="max-width: 33.33%">
+ <!--Card image-->
+ <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.logoURL">
+ <img [src]="item.logoURL" class="img-fluid" style="z-index: 0">
+ <a>
+ <div class="mask"></div>
+ </a>
+ </div>
+ <!--Card content-->
+ <div class="card-body">
+ <!--Title when Text exists-->
+ <h4 class="card-title text-left" *ngIf="(item.description && item.logoURL) || (item.description && !item.logoURL)"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
+ <!--Title when no Text exists-->
+ <h4 class="card-title align-middle" *ngIf="!item.description || !item.logoURL"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
+ <!--Text-->
+ <p class="card-text text-justify" *ngIf="item.description">{{item.description}}</p>
+ </div>
+ </div>
+</div>
diff --git a/src/app/papers-list/papers-list.component.scss b/src/app/papers-list/papers-list.component.scss
diff --git a/src/app/papers-list/papers-list.component.spec.ts b/src/app/papers-list/papers-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PapersListComponent } from './papers-list.component';
+
+describe('PapersListComponent', () => {
+ let component: PapersListComponent;
+ let fixture: ComponentFixture<PapersListComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PapersListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PapersListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/papers-list/papers-list.component.ts b/src/app/papers-list/papers-list.component.ts
@@ -0,0 +1,22 @@
+import {Component, Input} from '@angular/core';
+import {TweetListComponent} from '../tweet-list/tweet-list.component';
+
+@Component({
+ selector: 'app-papers-list',
+ templateUrl: './papers-list.component.html',
+ styleUrls: ['./papers-list.component.scss']
+})
+export class PapersListComponent {
+ @Input() papersData: object[];
+ chunkedData = TweetListComponent.chunk(this.papersData, 3);
+ constructor() { }
+
+ static chunk(arr, size) {
+ const newArr = [];
+ for (let i = 0; i < arr.length; i += size) {
+ newArr.push(arr.slice(i, i + size));
+ }
+ return newArr;
+ }
+
+}
diff --git a/src/app/papers/papers.component.html b/src/app/papers/papers.component.html
@@ -35,26 +35,7 @@
<main class="text-center py-5">
<div class="container">
- <div class="card-deck row" *ngFor="let rows of chunkedData">
- <div class="card mx-auto" *ngFor="let item of rows" style="max-width: 33.33%">
- <!--Card image-->
- <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.logoURL">
- <img [src]="item.logoURL" class="img-fluid" style="z-index: 0">
- <a>
- <div class="mask"></div>
- </a>
- </div>
- <!--Card content-->
- <div class="card-body">
- <!--Title when Text exists-->
- <h4 class="card-title text-left" *ngIf="(item.description && item.logoURL) || (item.description && !item.logoURL)"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
- <!--Title when no Text exists-->
- <h4 class="card-title align-middle" *ngIf="!item.description || !item.logoURL"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
- <!--Text-->
- <p class="card-text text-justify" *ngIf="item.description">{{item.description}}</p>
- </div>
- </div>
- </div>
+ <app-papers-list [papersData]="testData"></app-papers-list>
</div>
</main>
diff --git a/src/app/papers/papers.component.ts b/src/app/papers/papers.component.ts
@@ -10,19 +10,10 @@ export class PapersComponent {
pageTitle = 'Find Papers';
pageSubtitle = 'Get the full blast of different Newspapers';
testData = [{title: 'Freifunk News', uuid: 0, logoURL: 'https://blog.freifunk.net/wp-content/uploads/2017/03/Freifunk.net_.svg_.png', description: ''}];
- chunkedData = PapersComponent.chunk(this.testData, 3);
isBrowser: boolean;
constructor( @Inject(PLATFORM_ID) platformId: Object) {
this.isBrowser = isPlatformBrowser(platformId);
}
- static chunk(arr, size) {
- const newArr = [];
- for (let i = 0; i < arr.length; i += size) {
- newArr.push(arr.slice(i, i + size));
- }
- return newArr;
- }
-
}
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -0,0 +1,33 @@
+<div class="card-deck row" *ngFor="let rows of chunkedData">
+ <div class="card card-cascade" *ngFor="let item of rows">
+ <!--Retweet Badge-->
+ <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true">
+ <i class="fa fa-retweet"></i>
+ </div>
+ <!--Card image-->
+ <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.imageURL">
+ <img [src]="item.imageURL" class="img-fluid" style="z-index: 0">
+ <a>
+ <div class="mask"></div>
+ </a>
+ </div>
+ <!--Card content-->
+ <div class="card-body">
+ <!--Title when Text exists-->
+ <h4 class="card-title text-left" *ngIf="(item.text && item.imageURL) || (item.text && !item.imageURL)"><a href="{{item.userLink}}">{{item.title}}</a></h4>
+ <!--Title when no Text exists-->
+ <h4 class="card-title align-middle" *ngIf="!item.text || !item.imageURL"><a href="{{item.userLink}}">{{item.title}}</a></h4>
+ <!--Text-->
+ <p class="card-text text-justify" *ngIf="item.text">{{item.text}}</p>
+ </div>
+ <!-- Card footer -->
+ <div class="card-data">
+ <ul>
+ <li><i class="fa fa-clock-o"> </i>{{item.createdAt.toLocaleString()}}</li>
+ <li><i class="fa fa-comments-o"> </i>{{item.replies.toLocaleString()}}</li>
+ <li><i class="fa fa-heart"> </i>{{item.favs.toLocaleString()}}</li>
+ <li><i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}}</li>
+ </ul>
+ </div>
+ </div>
+</div>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
diff --git a/src/app/tweet-list/tweet-list.component.spec.ts b/src/app/tweet-list/tweet-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TweetListComponent } from './tweet-list.component';
+
+describe('TweetListComponent', () => {
+ let component: TweetListComponent;
+ let fixture: ComponentFixture<TweetListComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TweetListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TweetListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -0,0 +1,21 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+ selector: 'app-tweet-list',
+ templateUrl: './tweet-list.component.html',
+ styleUrls: ['./tweet-list.component.scss']
+})
+export class TweetListComponent {
+ @Input() tweetData: object[];
+ chunkedData = TweetListComponent.chunk(this.tweetData, 3);
+
+ constructor() { }
+
+ static chunk(arr, size) {
+ const newArr = [];
+ for (let i = 0; i < arr.length; i += size) {
+ newArr.push(arr.slice(i, i + size));
+ }
+ return newArr;
+ }
+}
