commit 5e802451ac983c1548cec1925a4dd5bb92ce39cf
parent 4fc152c0f8aa40c946a670457fd7329192a095b3
Author: MTRNord <mtrnord1@gmail.com>
Date: Tue, 13 Feb 2018 21:40:55 +0100
Prepare for not yet published API Server
Diffstat:
8 files changed, 81 insertions(+), 26 deletions(-)
diff --git a/src/app/api.service.spec.ts b/src/app/api.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [ApiService]
+ });
+ });
+
+ it('should be created', inject([ApiService], (service: ApiService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
@@ -0,0 +1,16 @@
+import {Inject, Injectable} from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {DOCUMENT} from '@angular/common';
+
+@Injectable()
+export class ApiService {
+ private url;
+ constructor(@Inject(DOCUMENT) private document, private http: HttpClient) {
+ this.url = document.location.protocol + '//' + document.location.hostname + ':8000';
+ }
+
+ // Uses http.get() to load data from a single API endpoint
+ getYesterday(uuid: string) {
+ return this.http.get(`${this.url}/paper/${uuid}/yesterday`);
+ }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,13 +1,13 @@
import { BrowserModule } from '@angular/platform-browser';
import {NgModule} from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { ScrollbarModule } from './utils/scrollbar';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {GalleryConfig, GalleryModule} from 'ng-gallery';
import { AvatarModule } from 'ngx-avatar';
-
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import {AppRoutingModule} from './app.routing';
@@ -16,6 +16,8 @@ import { PapersComponent } from './papers/papers.component';
import { TweetListComponent } from './tweet-list/tweet-list.component';
import { PapersListComponent } from './papers-list/papers-list.component';
+import { ApiService } from './api.service';
+
export const config: GalleryConfig = {
'gestures': true,
@@ -46,8 +48,10 @@ export const config: GalleryConfig = {
BrowserAnimationsModule,
GalleryModule.forRoot(config),
AvatarModule,
+ HttpClientModule,
],
providers: [
+ ApiService,
],
bootstrap: [AppComponent]
})
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -56,7 +56,7 @@
<div class="container-fluid" *ngIf="isBrowser" gallerize>
<div class="row">
<div class="col-xl-9">
- <app-tweet-list [data]="chunkedData"></app-tweet-list>
+ <app-tweet-list [uuid]="uuid"></app-tweet-list>
</div>
<!--Card-->
<div class="col-xl-3">
diff --git a/src/app/paper/paper.component.ts b/src/app/paper/paper.component.ts
@@ -1,6 +1,6 @@
import {Component, Inject, PLATFORM_ID, ViewEncapsulation} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
-import {TweetListComponent} from '../tweet-list/tweet-list.component';
+import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-paper',
@@ -11,19 +11,14 @@ import {TweetListComponent} from '../tweet-list/tweet-list.component';
export class PaperComponent {
paperTitle = 'Test Paper';
paperSubtitle = 'Something to test';
- private testData: Array<object> = [{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}];
- public chunkedData = this.chunk(this.testData, 3);
+ private uuid: string;
+ private testData: Array<object> = [{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}];
isBrowser: boolean;
- constructor(@Inject(PLATFORM_ID) platformId: Object) {
+ constructor(@Inject(PLATFORM_ID) platformId: Object, private route: ActivatedRoute) {
this.isBrowser = isPlatformBrowser(platformId);
+ this.uuid = this.route.snapshot.params.paperUUID;
}
- private 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
@@ -1,4 +1,4 @@
-<div class="row" *ngFor="let rows of data">
+<div class="row mb-5" *ngFor="let rows of data">
<div class="card-deck col-md-4" *ngFor="let item of rows">
<div class="card card-cascade">
<!--Retweet Badge-->
@@ -6,27 +6,29 @@
<i class="fa fa-retweet"></i>
</div>
<!--Card image-->
- <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.imageURL">
+ <!-- Todo Fix for more than one 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>
+ </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>
+ <!-- Todo Fix for more than one image -->
+ <!-- <h4 class="card-title text-left" *ngIf="(item.text && item.imageURL) || (item.text && !item.imageURL)"><a href="{{item.userprofile_link}}">{{item.username}}</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>
+ <!-- Todo Fix for more than one image -->
+ <h4 class="card-title align-middle" *ngIf="!item.text || !item.imageURL"><a href="{{item.userprofile_link}}">{{item.username}}</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-clock-o"> </i>{{item.created_at.toLocaleString()}}</li>
+ <li><i class="fa fa-heart"> </i>{{item.favorites.toLocaleString()}}</li>
<li><i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}}</li>
</ul>
</div>
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -1,11 +1,34 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../api.service';
@Component({
selector: 'app-tweet-list',
templateUrl: './tweet-list.component.html',
styleUrls: ['./tweet-list.component.scss']
})
-export class TweetListComponent {
- @Input() data;
+export class TweetListComponent implements OnInit {
+ @Input() uuid;
+ data;
+
+ constructor(private apiService: ApiService) {}
+
+ ngOnInit() { this.getYesterday(); }
+
+ getYesterday() {
+ this.apiService.getYesterday(this.uuid)
+ .subscribe(
+ data => { this.data = this.chunk(data['tweets'], 3); },
+ err => console.error('API ERR: ', err),
+ () => console.log('done loading Yesterday')
+ );
+ }
+
+ private 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/styles.scss b/src/styles.scss
@@ -1,6 +1,6 @@
/* You can add global styles to this file, and also import other style files */
html { overflow:auto; }
-.navbar.navbar-dark .breadcrumb .nav-item.active > .nav-link, .navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link {
+.navbar.navbar-dark, .navbar.navbar-light .breadcrumb .nav-item.active > .nav-link, .navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link {
border-radius: 5px;
}
