diff --git a/package-lock.json b/package-lock.json index 4be04a3..82a6089 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9337,6 +9337,14 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "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": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-2.1.1.tgz", @@ -9823,6 +9831,11 @@ "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": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", diff --git a/package.json b/package.json index abb61d3..388a508 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "graphql-tag": "^2.10.0", "hammerjs": "^2.0.8", "js-sha512": "^0.8.0", + "ngx-infinite-scroll": "^8.0.1", "ngx-socket-io": "^2.1.1", "node-sass": "^4.13.0", "rxjs": "~6.3.3", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 595c8f7..2c5b1b3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -30,6 +30,8 @@ import { AboutComponent } from './components/about/about.component'; import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; + import { MatSliderModule } from '@angular/material/slider'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -64,6 +66,7 @@ import {MatTooltipModule} from '@angular/material/tooltip'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatNativeDateModule} from '@angular/material/'; +import {MatSnackBarModule} from '@angular/material/snack-bar'; // import logo from 'src/assets/gv-new-logo.svg'; import logo from '!!raw-loader!./gv-new-logo-white.svg'; @@ -114,6 +117,7 @@ const appRoutes: Routes = [ SocketIoModule.forRoot(config), GraphQLModule, HttpClientModule, + InfiniteScrollModule, MatDatepickerModule, MatNativeDateModule, RouterModule.forRoot( @@ -147,7 +151,8 @@ const appRoutes: Routes = [ MatDialogModule, MatTooltipModule, MatExpansionModule, - MatDatepickerModule + MatDatepickerModule, + MatSnackBarModule, ], entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ], providers: [], diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html index f0d7f9d..1a31a56 100644 --- a/src/app/components/about/about.component.html +++ b/src/app/components/about/about.component.html @@ -1,5 +1,6 @@
+

Greenvironment






Keep it clean and green!

@@ -9,7 +10,57 @@

What's Greenvironment?

-

We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.

+

We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.

+
+

What does the level mean?

+

There are different levels you can reach through green behaviour. + Collect 100 points to level up! The levels are called: +

+ + + + + + + + + + + +
level {{level.level}} level name {{level.name}}
+
+

How to level up?

+

There is an always growing list of things you can do, + to support your environment + and earn points to level up at the same time. + You can get a different amount of points + for differnet actions you can see in the list below: +

+ + + + + + + + + + + + + + + + + + + + + + + +
points {{action.points}} action {{action.name}} description {{action.description}}

We believe, that together we can do amazing things to protect our environment and keep it clean and green.

diff --git a/src/app/components/about/about.component.sass b/src/app/components/about/about.component.sass index 90e88b1..be12ffc 100644 --- a/src/app/components/about/about.component.sass +++ b/src/app/components/about/about.component.sass @@ -1,7 +1,5 @@ @import '../../../styles/mixins.sass' @import '../../../styles/vars.sass' -@import '~@angular/material/theming' -@import '../../../styles/greenvironment-material-theme.scss' #about position: fixed @@ -28,3 +26,11 @@ width: 100% max-width: 30em margin-bottom: 1em + +.mat-table + width: 100% + max-width: 690px + margin: 0 auto + text-align: left +.mat-header-cell + padding-right: 0.5em diff --git a/src/app/components/about/about.component.ts b/src/app/components/about/about.component.ts index 88f7f9f..d2907cd 100644 --- a/src/app/components/about/about.component.ts +++ b/src/app/components/about/about.component.ts @@ -1,4 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { Activitylist } from 'src/app/models/activity'; +import { Levellist } from 'src/app/models/levellist'; +import {MatSort} from '@angular/material/sort'; +import {MatTableDataSource} from '@angular/material/table'; +import { ActivityService } from 'src/app/services/activity/activity.service'; @Component({ selector: 'app-about', @@ -6,10 +11,24 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./about.component.sass'] }) export class AboutComponent implements OnInit { + actionlist: Activitylist = new Activitylist(); + levellist: Levellist = new Levellist(); - constructor() { } + displayedColumns = ['points', 'name', 'description']; + dataSource = new MatTableDataSource(this.actionlist.Actions); + displayedLevelColumns = ['level', 'name']; + levelSource = this.levellist.levels; + constructor(private activityService: ActivityService) { } + + @ViewChild(MatSort, {static: true}) sort: MatSort; ngOnInit() { + this.activityService.getActivitys(); + this.activityService.activitylist.subscribe(response => { + this.actionlist = response; + this.dataSource = new MatTableDataSource(this.actionlist.Actions); + this.dataSource.sort = this.sort; + }); } } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index c51821b..8dd1575 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -1,4 +1,8 @@ -
+
@@ -9,18 +13,18 @@

- I protected the environment. + I protected the environment.

What did you do? - + nothing ;) - - {{action.name}} + + {{action.name}} ({{action.description}}) - @@ -37,20 +41,18 @@
- + New Most Liked
-
- + +
+ +
-
- -
-
\ No newline at end of file diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 2780ae2..c3d660c 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -8,6 +8,7 @@ #home width: 100% height: 100% + overflow-y: scroll #complete-feed box-sizing: border-box diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index 73094f0..64efd5d 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -1,8 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { Post } from 'src/app/models/post'; import { FeedService } from 'src/app/services/feed/feed.service'; -import { Actionlist } from 'src/app/models/actionlist'; +import { Activitylist } from 'src/app/models/activity'; import { DatasharingService } from '../../services/datasharing.service'; +import { ActivityService } from 'src/app/services/activity/activity.service'; import { User } from 'src/app/models/user'; @Component({ @@ -11,71 +12,76 @@ import { User } from 'src/app/models/user'; styleUrls: ['./feed.component.sass'] }) export class FeedComponent implements OnInit { - loading = true; - checked: boolean; // if the "I protected the environment."-box is checked - empty: boolean; - // points value of the green action - value: any; - viewNew = true; - viewMostLiked = false; + loadingNew = true; + loadingMostLiked = true; - feedNew: Array; - feedMostLiked: Array; + checked = false; // if the "I protected the environment."-box is checked + view = 'new'; + empty: any; + // id of the green activity + value: any; parentSelectedPostList: Array; - - actionlist: Actionlist = new Actionlist(); + actionlist: Activitylist = new Activitylist(); loggedIn = false; - userId: number; user: User; - constructor(private feedService: FeedService, private data: DatasharingService) { } + constructor( + private feedService: FeedService, + private data: DatasharingService, + private activityService: ActivityService + ) { } ngOnInit() { this.data.currentUserInfo.subscribe(user => { this.user = user; this.loggedIn = user.loggedIn; - this.feedService.getAllPostsRaw().subscribe(response => { - this.loading = false; - this.feedNew = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedNew; - this.feedMostLiked = this.feedNew; - }); }); - + this.activityService.getActivitys(); + this.activityService.activitylist.subscribe(response => { + this.actionlist = response; + }); + this.feedService.getPosts('NEW'); + this.feedService.posts.subscribe(response => { + if (response.length > 0) { + // this.loading = false; + } + this.parentSelectedPostList = response; + }); + this.feedService.newPostsAvailable.subscribe(response => { + this.loadingNew = response; + }); + this.feedService.topPostsAvailable.subscribe(response => { + console.log(response); + this.loadingMostLiked = response; + }); } - createPost(pElement) { - this.feedService.createPost(pElement.value); + createPost(pElement, activityId: string) { + if (pElement && activityId && this.checked) { + this.feedService.createPostActivity(pElement.value, activityId); pElement.value = ''; - this.feedService.getAllPostsRaw().subscribe(response => { - this.feedNew = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedNew; - this.feedMostLiked = this.feedNew; }); + this.empty = ''; + this.view = 'new'; + } else if (pElement) { + this.feedService.createPost(pElement.value); + pElement.value = ''; + this.empty = ''; + this.view = 'new'; + } } - showNew() { - this.feedService.getAllPostsRaw().subscribe(response => { - this.feedNew = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedNew; }); - this.viewNew = true; - this.viewMostLiked = false; + onScroll() { + console.log('scrolled'); + this.feedService.getNextPosts(); } - showMostLiked() { - this.feedService.getAllPostsRaw().subscribe(response => { - this.feedMostLiked = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedMostLiked; }); - this.viewNew = false; - this.viewMostLiked = true; + showNew() { + this.feedService.getPosts('NEW'); } - - refresh($event) { - this.feedService.getAllPostsRaw().subscribe(response => { - this.parentSelectedPostList = this.feedService.renderAllPosts(response.json()); - }); + showMostLiked() { + this.feedService.getPosts('TOP'); } - } diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html index 6d6d510..6b0db0d 100644 --- a/src/app/components/feed/postlist/postlist.component.html +++ b/src/app/components/feed/postlist/postlist.component.html @@ -21,16 +21,19 @@ -
- - - - -
+ + + +
{{post.author.name}} @@ -56,6 +59,11 @@ keyboard_arrow_down {{post.downvotes}} +
+ + {{post.activity.points}} points earned through {{post.activity.name}} + +
diff --git a/src/app/components/feed/postlist/postlist.component.sass b/src/app/components/feed/postlist/postlist.component.sass index 12f3e95..431c00e 100644 --- a/src/app/components/feed/postlist/postlist.component.sass +++ b/src/app/components/feed/postlist/postlist.component.sass @@ -8,7 +8,7 @@ outline: none user-select: none ::ng-deep .mat-card-header-text - margin: 0px + margin-top: 10px .mat-card-subtitle display: contents a:hover @@ -20,5 +20,24 @@ max-width: 100% height: auto border-radius: 4px + .mat-button + min-width: 32px !important + padding: 0 + margin: 0 + margin-left: 8px - + .activity-info + display: contents + .span + margin-left: 32px + +$mat-card-header-size: 100px !default +.profile-picture + height: $mat-card-header-size + width: $mat-card-header-size + border-radius: 50% + flex-shrink: 0 + background-size: cover + transition-duration: 0.5s + z-index: 10 + object-fit: cover diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass index 34fa7d0..0de5d38 100644 --- a/src/app/components/group/group.component.sass +++ b/src/app/components/group/group.component.sass @@ -49,6 +49,8 @@ $mat-card-header-size: 100px !default border-radius: 50% flex-shrink: 0 background-size: cover + &:hover + height: 200 // Makes `` tags behave like `background-size: cover`. Not supported // in IE, but we're using it as a progressive enhancement. object-fit: cover diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 9149fc1..22abaab 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -17,7 +17,6 @@ export class HomeComponent implements OnInit { this.data.currentUserInfo.subscribe(user => { this.loggedIn = user.loggedIn; }); - this.feedService.getAllPosts(); } } diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html index 1936530..586c6d4 100644 --- a/src/app/components/main-navigation/main-navigation.component.html +++ b/src/app/components/main-navigation/main-navigation.component.html @@ -41,18 +41,18 @@ Greenvironment diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 12bad54..81d38a8 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,7 +3,15 @@ -
+
+ + camera_alt + +
+
+ +
+ {{userProfile.username}}
-
-

What does the level mean?

-

There are different levels you can reach through green behaviour. - Collect 100 points to level up! The levels are called: -

- - - - - - - - - - - -
level {{level.level}} level name {{level.name}}
-
-

How to level up?

-

There is an always growing list of things you can do, - to support your environment - and earn points to level up at the same time. - You can get a different amount of points - for differnet actions you can see in the list below: -

- - - - - - - - - - - - - - - - - -
points {{action.points}} action {{action.name}}
+