Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

master
Trivernis 5 years ago committed by Gitea
commit c8ab42e0f4

13
package-lock.json generated

@ -9337,6 +9337,14 @@
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true "dev": true
}, },
"ngx-infinite-scroll": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-8.0.1.tgz",
"integrity": "sha512-YpgkTPDNT7UCEp0GRX178V1nF+M2slCPJ2TX3CpvPZb5AR99JYwj/fNivcue5lN51oUaTySEG27qjVU73vKhjw==",
"requires": {
"opencollective-postinstall": "^2.0.2"
}
},
"ngx-socket-io": { "ngx-socket-io": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-2.1.1.tgz", "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-2.1.1.tgz",
@ -9823,6 +9831,11 @@
"is-wsl": "^1.1.0" "is-wsl": "^1.1.0"
} }
}, },
"opencollective-postinstall": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
"integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
},
"opn": { "opn": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",

@ -33,6 +33,7 @@
"graphql-tag": "^2.10.0", "graphql-tag": "^2.10.0",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"js-sha512": "^0.8.0", "js-sha512": "^0.8.0",
"ngx-infinite-scroll": "^8.0.1",
"ngx-socket-io": "^2.1.1", "ngx-socket-io": "^2.1.1",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",

@ -30,6 +30,8 @@ import { AboutComponent } from './components/about/about.component';
import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component'; import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MatSliderModule } from '@angular/material/slider'; import { MatSliderModule } from '@angular/material/slider';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
@ -114,6 +116,7 @@ const appRoutes: Routes = [
SocketIoModule.forRoot(config), SocketIoModule.forRoot(config),
GraphQLModule, GraphQLModule,
HttpClientModule, HttpClientModule,
InfiniteScrollModule,
MatDatepickerModule, MatDatepickerModule,
MatNativeDateModule, MatNativeDateModule,
RouterModule.forRoot( RouterModule.forRoot(

@ -1,4 +1,8 @@
<div id="home"> <div id="home"
infinite-scroll
[infiniteScrollDistance]="0.5"
[scrollWindow]="false"
(scrolled)="onScroll()">
<div [hidden]="!loggedIn"> <div [hidden]="!loggedIn">
<mat-card > <mat-card >
<mat-card-content> <mat-card-content>
@ -45,7 +49,10 @@
<div id="complete-feed"> <div id="complete-feed">
<div id="feedlist"> <div id="feedlist">
<feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist> <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner> <div style="height: 60px;" [hidden]='(!loadingNew && view === "new") || (!loadingMostLiked && view === "mostLiked") '>
<!--<mat-spinner *ngIf='loadingNew && view === "mostLiked"' style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>-->
<mat-spinner style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -8,6 +8,7 @@
#home #home
width: 100% width: 100%
height: 100% height: 100%
overflow-y: scroll
#complete-feed #complete-feed
box-sizing: border-box box-sizing: border-box

@ -12,7 +12,8 @@ import { User } from 'src/app/models/user';
styleUrls: ['./feed.component.sass'] styleUrls: ['./feed.component.sass']
}) })
export class FeedComponent implements OnInit { export class FeedComponent implements OnInit {
loading = true; loadingNew = true;
loadingMostLiked = true;
checked = false; // if the "I protected the environment."-box is checked checked = false; // if the "I protected the environment."-box is checked
view = 'new'; view = 'new';
@ -41,11 +42,20 @@ export class FeedComponent implements OnInit {
this.activityService.activitylist.subscribe(response => { this.activityService.activitylist.subscribe(response => {
this.actionlist = response; this.actionlist = response;
}); });
this.feedService.getNewPosts(); this.feedService.getPosts('NEW');
this.feedService.posts.subscribe(response => { this.feedService.posts.subscribe(response => {
if (response.length > 0) {this.loading = false; } if (response.length > 0) {
// this.loading = false;
}
this.parentSelectedPostList = response; this.parentSelectedPostList = response;
}); });
this.feedService.newPostsAvailable.subscribe(response => {
this.loadingNew = response;
});
this.feedService.topPostsAvailable.subscribe(response => {
console.log(response);
this.loadingMostLiked = response;
});
} }
createPost(pElement, activityId: string) { createPost(pElement, activityId: string) {
@ -62,11 +72,17 @@ export class FeedComponent implements OnInit {
} }
} }
onScroll() {
console.log('scrolled');
this.feedService.getNextPosts();
}
showNew() { showNew() {
this.feedService.getNewPosts(); this.feedService.getPosts('NEW');
} }
showMostLiked() { showMostLiked() {
this.feedService.getMostLikedPosts(); this.view = 'mostLiked';
this.feedService.getPosts('TOP');
} }
} }

@ -12,9 +12,14 @@ import { User } from 'src/app/models/user';
}) })
export class FeedService { export class FeedService {
public newPostsAvailable = new BehaviorSubject<boolean>(true);
public topPostsAvailable = new BehaviorSubject<boolean>(true);
public posts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array()); public posts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
public newPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array()); public newPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
public mostLikedPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array()); public mostLikedPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
private activePostList = 'NEW';
private mostLikedOffset = 0;
private newOffset = 0;
constructor(private http: Http) { } constructor(private http: Http) { }
@ -49,7 +54,7 @@ export class FeedService {
const updatedposts = this.newPosts.getValue(); const updatedposts = this.newPosts.getValue();
updatedposts.unshift(this.renderPost(response.json())); updatedposts.unshift(this.renderPost(response.json()));
this.newPosts.next(updatedposts); this.newPosts.next(updatedposts);
this.posts.next(this.newPosts.getValue()); this.setPost('NEW');
}); });
} }
@ -85,7 +90,7 @@ export class FeedService {
const updatedposts = this.newPosts.getValue(); const updatedposts = this.newPosts.getValue();
updatedposts.unshift(this.renderPost(response.json())); updatedposts.unshift(this.renderPost(response.json()));
this.newPosts.next(updatedposts); this.newPosts.next(updatedposts);
this.posts.next(this.newPosts.getValue()); this.setPost('NEW');
}); });
} }
@ -132,59 +137,67 @@ export class FeedService {
return this.http.post(environment.graphQLUrl, body); return this.http.post(environment.graphQLUrl, body);
} }
public getNewPosts() { public getPosts(sort: string) {
if (this.newPosts.getValue().length === 0) { if ((sort === 'NEW' && this.newPosts.getValue().length === 0) ||
(sort === 'TOP' && this.mostLikedPosts.getValue().length === 0)) {
const headers = new Headers(); const headers = new Headers();
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.buildJsonNew()) this.http.post(environment.graphQLUrl, this.buildJson(sort, 0))
.subscribe(response => { .subscribe(response => {
this.newPosts.next(this.renderAllPosts(response.json())); if (sort === 'NEW') {
this.posts.next(this.newPosts.getValue()); this.newPosts.next(this.renderAllPosts(response.json()));
} else if (sort === 'TOP') {
this.mostLikedPosts.next(this.renderAllPosts(response.json()));
}
this.setPost(sort);
}); });
} else {this.posts.next(this.newPosts.getValue()); } } this.setPost(sort);
} }
public getMostLikedPosts() { public getNextPosts() {
if (this.mostLikedPosts.getValue().length === 0) { if (this.activePostList === 'NEW' && this.newPostsAvailable) {
this.newOffset += 10;
const headers = new Headers();
headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset))
.subscribe(response => {
let updatedposts = this.newPosts.getValue();
updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
if (this.renderAllPosts(response.json()).length < 1) {
this.newPostsAvailable.next(false);
}
this.newPosts.next(updatedposts);
this.setPost('NEW');
});
} else if (this.activePostList === 'TOP' && this.topPostsAvailable) {
this.mostLikedOffset += 10;
const headers = new Headers(); const headers = new Headers();
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.buildJsonMostLiked()) this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.mostLikedOffset))
.subscribe(response => { .subscribe(response => {
this.mostLikedPosts.next(this.renderAllPosts(response.json())); let updatedposts = this.mostLikedPosts.getValue();
this.posts.next(this.mostLikedPosts.getValue()); updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
if (this.renderAllPosts(response.json()).length < 1) {
this.topPostsAvailable.next(false);
}
this.mostLikedPosts.next(updatedposts);
this.setPost('TOP');
}); });
} else {this.posts.next(this.mostLikedPosts.getValue()); } }
} }
buildJsonNew() { setPost(sort: string) {
const body = {query: `{ this.activePostList = sort;
getPosts (first: 1000, offset: 0) { if (sort === 'NEW') {
id, this.posts.next(this.newPosts.getValue());
content, } else if (sort === 'TOP') {
htmlContent, this.posts.next(this.mostLikedPosts.getValue());
upvotes, }
downvotes,
userVote,
deletable,
activity{
id
name
description
points
},
author{
name,
handle,
id},
createdAt}
}`, variables: {
}};
return body;
} }
buildJsonMostLiked() { buildJson(sort: string, offset: number) {
const body = {query: `{ const body = {query: `query($offset: Int, $sort: SortType){
getPosts (first: 1000, offset: 0, sort: TOP) { getPosts (first: 10, offset: $offset, sort: $sort) {
id, id,
content, content,
htmlContent, htmlContent,
@ -204,6 +217,8 @@ export class FeedService {
id}, id},
createdAt} createdAt}
}`, variables: { }`, variables: {
offset,
sort
}}; }};
return body; return body;
} }

Loading…
Cancel
Save