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

README.md

@@ -1,27 +1,3 @@
-# SocketApp
+# Greenvironment Frontend
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+This is the greenvironment frontend repository

src/app/components/chat/chat.component.html

@@ -4,13 +4,13 @@
         <span class='title'>{{childChat.memberName}}</span>
     </div>
     <div id='messagecontainer'>
-        <div class="chatmessage" *ngFor="let message of childChat.messages">
+        <div class="chatmessage" *ngFor="let message of messages">
             <div *ngIf="message.myself == true" id='ownmessage'><span>{{message.content}}</span></div>
             <div *ngIf="message.myself == false" id='foreignmessage'><span>{{message.content}}</span></div>
         </div>
     </div>
     <div id="newmessage">
-            <textarea id='input' placeholder="Write message here ..." rows='3' wrap="soft"></textarea>
-            <button id="send" type='submit'><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
+            <textarea #content id='input' placeholder="Write message here ..." rows='3' wrap="soft"></textarea>
+            <button id="send" type='submit' (click)="sendMessage(content)"><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
     </div>
 </div>

src/app/components/chat/chat.component.sass

@@ -80,4 +80,12 @@
     padding: 0.125em
     resize: none
   #send
-    @include gridPosition(1, 2, 2, 3)
+    @include gridPosition(1, 2, 2, 3)
+  button
+    background-color: $cFeedChooserBackground
+    color: $cFontWhite
+    border: none
+    border-radius: 0.5em
+  button:hover
+    background-color: lighten($cFeedChooserBackground, 10%)
+    cursor: pointer

src/app/components/chat/chat.component.ts

@@ -11,9 +11,7 @@ import { Chat } from 'src/app/models/chat';
 })
 export class ChatComponent implements OnInit {
 
-  messages:Array<Chatmessage> = [new Chatmessage("Hallo", "01.01.",true), new Chatmessage("Hallo", "01.01.",true), 
-  new Chatmessage("Hallo", "01.01.",true), new Chatmessage("Hallo", "01.01.",true), new Chatmessage("Hallo", "01.01.",true), 
-  new Chatmessage("Hallo", "01.01.",true)]
+  messages:Array<Chatmessage>
 
   @Output() goBackEvent = new EventEmitter<boolean>();
   @Input() childChat: Chat;
@@ -21,16 +19,29 @@ export class ChatComponent implements OnInit {
   constructor(private chatService: ChatService) { }
 
   ngOnInit() {
+    this.refresh()
   }
 
   goBack() {
     this.goBackEvent.emit(true)
-    this.chatService.getAllChats()
   }
 
-  sendMessage(pContent: string) {
-    this.chatService.sendMessage(this.childChat.id, pContent)
-    this.chatService.getMessages(this.childChat.id)
+  sendMessage(pElement) {
+    this.chatService.sendMessage(this.childChat.id, pElement.value)
+    .subscribe(response => {
+      console.log("Message sent")
+      pElement.value = ""
+      this.refresh()
+    })
+  }
+
+  refresh() {
+    this.chatService.getMessagesRaw(this.childChat.id)
+    .subscribe(response => 
+      {
+        console.log("Downloading messages ...")
+        this.messages = this.chatService.renderMessages(response.json())
+      })
   }
 
 }

src/app/components/chatlist/chatlist.component.html

@@ -4,10 +4,10 @@
     <button id="newchat" (click)="newChat()"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
   </div>
   <div id="chats">
-    <div class="chatitem" *ngFor="let chat of chats" 
+    <div class="chatitem" *ngFor="let chat of childChats" 
     [class.selected]="chat === selectedChat" (click)="showChat(chat)">
       <div class="picture">Pic</div>
-      <div class="name"><span>{{chat.id}}</span></div>
+      <div class="name"><span>{{chat.memberName}}</span></div>
       <div class="date"> <a>Date of last message</a></div>
     </div>
   </div>

src/app/components/chatlist/chatlist.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { Chatinfo } from 'src/app/models/chatinfo';
 import { Chat } from 'src/app/models/chat';
 import { ChatService } from 'src/app/services/chat/chat.service';
@@ -10,15 +10,15 @@ import { ChatService } from 'src/app/services/chat/chat.service';
 })
 export class ChatlistComponent implements OnInit {
 
+  @Input() childChats: Array<Chat>
   @Output() showChatEvent = new EventEmitter<Chat>();
   @Output() showCreateChatEvent = new EventEmitter<boolean>();
   selectedChat: Chat;
-  chats: Array<Chat>
 
   constructor(private chatService: ChatService) { }
 
   ngOnInit() {
-    this.chats = this.chatService.chats
+    
   }
 
   showNewChat() {

src/app/components/chatmanager/chatmanager.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="showChatlist">
-  <chatmanager-chatlist (showChatEvent)="showSpecialChat($event)" (showCreateChatEvent)="showNewChat($event)"></chatmanager-chatlist>
+  <chatmanager-chatlist (showChatEvent)="showSpecialChat($event)" (showCreateChatEvent)="showNewChat($event)" [childChats]="parentChats"></chatmanager-chatlist>
 </div>
 <div *ngIf="showChat">
     <chatmanager-chat (goBackEvent)="goBackToChatlist($event)" [childChat]="parentSelectedChat"></chatmanager-chat>

src/app/components/chatmanager/chatmanager.component.ts

@@ -15,23 +15,25 @@ export class ChatmanagerComponent implements OnInit {
   showChatlist: boolean = true
   showChat: boolean = false
   showCreateNewChat: boolean = false
-  parentSelectedChat: Chat
 
-  chatIds: number[] = []
+  parentSelectedChat: Chat
+  parentChats: Array<Chat>
 
   constructor(private data: DatasharingService, private chatService: ChatService) { }
 
   ngOnInit() {
-    this.data.currentChatIDs.subscribe(chatIDs => {
-      this.chatIds = chatIDs
-    })
-    this.chatService.getChatsByID(this.chatIds)
+    /*this.data.currentChatIDs.subscribe(chatIDs => {
+      this.parentChatIds = chatIDs
+    })*/
+    this.refresh()
   }
 
   goBackToChatlist($event) {
     this.showChatlist = $event
     this.showChat = false
     this.showCreateNewChat = false
+
+    this.refresh()
   }
 
   showSpecialChat($event) {
@@ -47,4 +49,12 @@ export class ChatmanagerComponent implements OnInit {
     this.showCreateNewChat = $event
   }
 
+  refresh() {
+    this.chatService.getAllChatsRaw()
+    .subscribe(response => {
+        console.log(response)
+        this.parentChats = this.chatService.renderAllChats(response.json())
+      })
+  }
+
 }

src/app/components/feed/postlist/postlist.component.html

@@ -2,7 +2,7 @@
   <div class="itemhead">
     <div class="usertag">
       <span class="title">{{post.author.name}}</span>
-      <span class="handle"><a href="#">@{{post.author.handle}}</a></span>
+      <span class="handle"><a href="profile/{{post.author.id}}">@{{post.author.handle}}</a></span>
     </div>
     <span class="date">{{post.date}}</span>
   </div>
@@ -11,10 +11,10 @@
         <p [innerHTML]="post.htmlContent" id="content"></p>
     </div>
     <div class="vote">
-        <button id="down" type='submit'><span><i class="fa fa-thumbs-o-down fa-2x" aria-hidden="true" (click)="voteDown(post)"></i></span></button>
-        <button id="up" type='submit'><span><i class="fa fa-thumbs-o-up fa-2x" aria-hidden="true" (click)="voteUp(post)"></i></span></button>
-        <span id="downvotes">{{post.downvotes}}</span>
-        <span id="upvotes">{{post.upvotes}}</span>
+      <button id="down" type='submit'><span><i class="fa fa-thumbs-o-down fa-2x" aria-hidden="true" (click)="voteDown(post)"></i></span></button>
+      <span id="downvotes">{{post.downvotes}}</span>
+      <button id="up" type='submit'><span><i class="fa fa-thumbs-o-up fa-2x" aria-hidden="true" (click)="voteUp(post)"></i></span></button>
+      <span id="upvotes">{{post.upvotes}}</span>
     </div>
   </div>
 </div>

src/app/components/feed/postlist/postlist.component.sass

@@ -43,6 +43,7 @@
         @include gridPosition(1, 2, 2, 3)
         display: grid
         grid-template: 70% 30% /50% 50%
+        height: 3em
         button
             background-color: $cFeedItemBackground
             border: none

src/app/components/feed/postlist/postlist.component.ts

@@ -18,14 +18,14 @@ export class PostlistComponent implements OnInit {
   ngOnInit() {
   }
 
-  voteUp(pPost: Post){
-    this.feedService.upvote(pPost.id)
-    this.voteEvent.emit(true)
+  voteUp(pPost: Post) {
+    this.feedService.upvote(pPost.id).subscribe(response => {
+        this.voteEvent.emit(true)})
   }
 
-  voteDown(pPost: Post){
-    this.feedService.downvote(pPost.id)
-    this.voteEvent.emit(true)
+  voteDown(pPost: Post) {
+    this.feedService.downvote(pPost.id).subscribe(response => {
+        this.voteEvent.emit(true)})
   }
 
 }

src/app/components/profile/profile.component.html

@@ -27,7 +27,7 @@
             <p>There are different levels you can reach through green behaviour.
                 Collect 100 points to level up! The levels are called: 
             </p>
-            <ol>
+            <ol start="0">
                 <li *ngFor= "let level of levellist.levels">
                     {{level.name}}
                 </li>

src/app/components/social/friends/friends.component.ts

@@ -12,7 +12,7 @@ import { environment } from 'src/environments/environment';
 })
 export class FriendsComponent implements OnInit {
 
-  friendIDs: number[] = [1,2,3,4,5,6]
+  friendIDs: number[] = [29, 27, 30, 31]
   friends = new Array<FriendInfo>() //= ["Friend 1", "Friend 2", "Friend 3", "Friend 4", "Friend 5", "Friend 6"]
 
   constructor(private data: DatasharingService, private http: Http, private router: Router) { }

src/app/services/chat/chat.service.ts

@@ -30,11 +30,21 @@ export class ChatService {
  
     this.http.post(url, this.getBodyForGetAllChats())
     .subscribe(response => {
-        this.chats = this.updateAllChats(response.json())
+        this.chats = this.renderAllChats(response.json())
       });
     return this.chats
   }
 
+  public getAllChatsRaw(): any {
+    console.log("Getting all chats ..")
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+ 
+    return this.http.post(url, this.getBodyForGetAllChats())
+  }
+
   public getChatsByID(pChatIDs: number[]): Array<Chat> {
     this.chats = []
     console.log("Getting chats by ID..")
@@ -53,6 +63,23 @@ export class ChatService {
     return this.chats
   }
 
+  public getChatsByIDRaw(pChatIDs: number[]): any {
+    console.log("Getting chats by ID..")
+
+    for(let chatId of pChatIDs) {
+      let url = 'https://greenvironment.net/graphql'
+  
+      let headers = new Headers()
+      headers.set('Content-Type', 'application/json')
+
+      this.http.post(url, this.getBodyForGetChatsByID(chatId))
+      .subscribe(response => {
+        this.updateChat(response.json())
+      })
+    }
+    return this.chats
+  }
+
   public createNewChat(pUserID: number) {
     let url = environment.graphQLUrl
  
@@ -90,13 +117,13 @@ export class ChatService {
     return chatPartners
   }
 
-  public sendMessage(pChatID: number, pContent: string) {
+  public sendMessage(pChatID: number, pContent: string): any {
     let url = environment.graphQLUrl
  
     let headers = new Headers()
     headers.set('Content-Type', 'application/json')
  
-    this.http.post(url, this.getBodyForSendMessage(pChatID, pContent)).subscribe(response => console.log("Message sent"))
+    return this.http.post(url, this.getBodyForSendMessage(pChatID, pContent))
   }
 
   public getMessages(pChatID): Array<Chatmessage> {
@@ -109,12 +136,21 @@ export class ChatService {
     this.http.post(url, this.getBodyForGetMessagesInChat(pChatID)).subscribe(response => 
       {
         console.log("Downloading messages ...")
-        messages = this.updateMessages(response.json())
+        messages = this.renderMessages(response.json())
       })
     return messages
   }
 
-  updateMessages(pResponse: any): Array<Chatmessage> {
+  public getMessagesRaw(pChatID): any {
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+ 
+    return this.http.post(url, this.getBodyForGetMessagesInChat(pChatID))
+  }
+
+  public renderMessages(pResponse: any): Array<Chatmessage> {
     let messages = new Array<Chatmessage>()
       for(let message of pResponse.data.getChat.messages) {
         if(message.author.id == this.ownID) {
@@ -126,7 +162,7 @@ export class ChatService {
     return messages
   }
 
-  updateAllChats(pResponse: any): Array<Chat> {
+  public renderAllChats(pResponse: any): Array<Chat> {
     let chats = Array<Chat>()
     for(let chat of pResponse.data.getSelf.chats) {
       let memberID: number
@@ -193,8 +229,8 @@ export class ChatService {
   }
 
   getBodyForSendMessage(pchatID: number, pContent: string) {
-    const body =  {query: `mutation($chatID: number, $content: string) {
-        sendMessage(chatId: $chatID, content: $content) {id} 
+    const body =  {query: `mutation($chatId: ID!, $content: String!) {
+        sendMessage(chatId: $chatId, content: $content) {id} 
       }`, variables: {
           chatId: pchatID,
           content: pContent
@@ -205,9 +241,13 @@ export class ChatService {
 
   getBodyForGetAllChats() {
     const body =  {query: `query {
-        getUser {
-          chats(first: 1000, offset: 0) {id, members{name, id}, 
-          messages(first: 1000, offset: 0) {author {id}, createdAt, content}}
+        getSelf {
+          chats(first: 1000, offset: 0) {
+            id, members{name, id}, 
+            messages(first: 1000, offset: 0) {
+              author {id}, createdAt, content
+            }
+          }
         }
       }`
       }
@@ -226,8 +266,8 @@ export class ChatService {
   }
 
   getBodyForGetMessagesInChat(pChatID: number) {
-    const body =  {query: `query($chatID: ID!) {
-        getChat(chatId: $chatID) {
+    const body =  {query: `query($chatId: ID!) {
+        getChat(chatId: $chatId) {
           messages(first: 1000, offset: 0) {author {id}, createdAt, content}
         }
       }`, variables: {

src/app/services/feed/feed.service.ts

@@ -42,7 +42,7 @@ export class FeedService {
         console.log(response.text())})
   }
 
-  public upvote(pPostID: number): void {
+  public upvote(pPostID: number): any {
     let url = environment.graphQLUrl
  
     let headers = new Headers()
@@ -54,11 +54,10 @@ export class FeedService {
           postId: pPostID
       }}
  
-    this.http.post(url, body).subscribe(response => {
-        console.log(response.text())})
+    return this.http.post(url, body)
   }
 
-  public downvote(pPostID: number): void {
+  public downvote(pPostID: number): any {
     let url = environment.graphQLUrl
  
     let headers = new Headers()
@@ -70,8 +69,7 @@ export class FeedService {
           postId: pPostID
       }}
  
-    this.http.post(url, body).subscribe(response => {
-        console.log(response.text())})
+    return this.http.post(url, body)
   }
 
   public getAllPosts(): Array<Post> {
@@ -80,7 +78,7 @@ export class FeedService {
     let headers = new Headers()
     headers.set('Content-Type', 'application/json')
  
-    this.http.post(url, this.getBodyForGetAllChats())
+    this.http.post(url, this.getBodyForGetAllPosts())
     .subscribe(response => {
         this.posts = this.renderAllPosts(response.json())
         console.log(response)
@@ -94,10 +92,10 @@ export class FeedService {
     let headers = new Headers()
     headers.set('Content-Type', 'application/json')
  
-    return this.http.post(url, this.getBodyForGetAllChats())
+    return this.http.post(url, this.getBodyForGetAllPosts())
   }
 
-  getBodyForGetAllChats() {
+  getBodyForGetAllPosts() {
     const body =  {query: `query {
         getPosts (first: 1000, offset: 0) {id, content, htmlContent, upvotes, downvotes, author{name, handle, id}, createdAt}
       }`
@@ -108,6 +106,7 @@ export class FeedService {
 
   public renderAllPosts(pResponse: any): Array<Post> {
     let posts = new Array<Post>()
+    //let options = {year: 'numeric', month: 'short', day: 'numeric', hour: '' }
     for(let post of pResponse.data.getPosts) {
       let id: number = post.id
       let content: string = post.content
@@ -115,7 +114,8 @@ export class FeedService {
       let upvotes: number = post.upvotes
       let downvotes: number = post.downvotes
       let author = new Author(post.author.id, post.author.name, post.author.handle)
-      let date = post.createdAt
+      let temp = new Date(Number(post.createdAt))
+      let date = temp.toLocaleString("en-GB")
 
       posts.push(new Post(id, content, htmlContent, upvotes, downvotes, date, author))
     }