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

src/app/components/app-scaffold/app-scaffold.component.html

@@ -6,7 +6,7 @@
   <button id="tab-login" routerLink="/login" *ngIf="loggedIn != true">Login</button>
   <div id="dropdown" *ngIf="loggedIn">
     <div>
-      <span (click)="showDropdown()"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+      <span id="symbol" (click)="showDropdown()"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
       <span>{{username}}</span>
     </div>
     <div id="dropdown-content" *ngIf="dropdownShown">

src/app/components/app-scaffold/app-scaffold.component.sass

@@ -46,6 +46,10 @@ h1
   margin-left: 2em
   span
     margin-left: 1em
+  #symbol
+    span:hover
+      background-color: lighten($cHeadPrimaryBackground, 10%)
+      cursor: pointer
   #dropdown-content
     position: absolute
     background-color: $cHeadPrimaryBackground
@@ -54,11 +58,6 @@ h1
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
     padding: 12px 16px
     z-index: 1
-  div:hover
-    background-color: lighten($cHeadPrimaryBackground, 10%)
-    cursor: pointer
-    #dropdown-content
-      //display: block
 
 #logoutbutton
   @include gridPosition(1, 2, 8, 9)

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

@@ -4,7 +4,7 @@
     <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 chatService.chats" 
+    <div class="chatitem" *ngFor="let chat of chats" 
     [class.selected]="chat === selectedChat" (click)="showChat(chat)">
       <div class="picture">Pic</div>
       <div class="name"><span>{{chat.id}}</span></div>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { Chatinfo } from 'src/app/models/chatinfo';
-import { ChatService } from 'src/app/services/chat/chat.service';
 import { Chat } from 'src/app/models/chat';
+import { ChatService } from 'src/app/services/chat/chat.service';
 
 @Component({
   selector: 'chatmanager-chatlist',
@@ -13,11 +13,12 @@ export class ChatlistComponent implements OnInit {
   @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/feed/feed.component.html

@@ -1,7 +1,7 @@
 <div id="postinput">
   <textarea #content id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
   <button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button>
-  <button id="submit" type='submit' (click)=createPost(content.value)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
+  <button id="submit" type='submit' (click)=createPost(content)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
 </div>
 <div id='completeFeed'>
   <div id='feedchooser'>
@@ -10,31 +10,10 @@
   </div>
   <div id="feedlist">
     <div *ngIf = "viewNew">
-      <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
+      <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
     </div>
     <div *ngIf = "viewMostLiked">
-      <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
+      <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
     </div>
-<!--
-    <div class="feeditem">
-      <div class="itemhead">
-        <div class="usertag">
-          <span class="title">post.username</span>
-          <span class="handle"><a href="#">post.handle</a></span>
-        </div>
-        <span class="date">post.date</span>
-      </div>
-      <div class="itembody">
-        <div class='text'>
-            <p>post.message</p>
-        </div>
-        <div class="vote">
-            <button id="down" type='submit'><span><i class="fa fa-thumbs-o-down fa-2x" aria-hidden="true"></i></span></button>
-            <button id="up" type='submit'><span><i class="fa fa-thumbs-o-up fa-2x" aria-hidden="true"></i></span></button>
-            <span id="votecounter">post.votes</span>
-        </div>
-      </div>
-    </div>
-  -->
   </div>
 </div>

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

@@ -22,29 +22,42 @@ export class FeedComponent implements OnInit {
   ngOnInit() {
     this.feedService.getAllPostsRaw().subscribe(response => {
       this.feedNew = this.feedService.renderAllPosts(response.json())
-      console.log(response)
       this.parentSelectedPostList = this.feedNew
       this.feedMostLiked = this.feedNew
     })
   }
 
-  createPost(pContent: string){
+  createPost(pElement){
-    this.feedService.createPost(pContent)
+    this.feedService.createPost(pElement.value)
-    console.log(pContent)
+    pElement.value = ""
+    this.feedService.getAllPostsRaw().subscribe(response => {
+      this.feedNew = this.feedService.renderAllPosts(response.json())
+      this.parentSelectedPostList = this.feedNew
+      this.feedMostLiked = this.feedNew})
   }
 
   showNew() {
-    this.feedNew = this.feedService.getAllPosts()
+    this.feedService.getAllPostsRaw().subscribe(response => {
+      this.feedNew = this.feedService.renderAllPosts(response.json())
+      this.parentSelectedPostList = this.feedNew})
     this.viewNew = true
     this.viewMostLiked = false
-    this.parentSelectedPostList = this.feedNew
   }
 
   showMostLiked() {
-    this.feedMostLiked = this.feedService.getAllPosts()
+    this.feedService.getAllPostsRaw().subscribe(response => {
+      this.feedMostLiked = this.feedService.renderAllPosts(response.json())
+      this.parentSelectedPostList = this.feedMostLiked})
     this.viewNew = false
     this.viewMostLiked = true
-    this.parentSelectedPostList = this.feedMostLiked
+  }
+
+  
+  refresh($event) {
+    this.feedService.getAllPostsRaw().subscribe(response => {
+      this.parentSelectedPostList = this.feedService.renderAllPosts(response.json())
+      console.log("Refresh")
+    })
   }
 
 }

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

@@ -8,7 +8,7 @@
   </div>
   <div class="itembody">
     <div class='text'>
-        <p>{{post.content}}</p>
+        <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>

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

@@ -34,6 +34,11 @@
     grid-template: 100% /85% 15%
     .text
         @include gridPosition(1, 2, 1, 2)
+        overflow-x: hidden
+        ::ng-deep img
+            max-width: 100%
+            height: auto
+
     .vote
         @include gridPosition(1, 2, 2, 3)
         display: grid

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Post } from 'src/app/models/post';
 import { FeedService } from 'src/app/services/feed/feed.service';
 
@@ -10,6 +10,7 @@ import { FeedService } from 'src/app/services/feed/feed.service';
 export class PostlistComponent implements OnInit {
 
   @Input() childPostList: Array<Post>
+  @Output() voteEvent = new EventEmitter<boolean>()
   selectedPost: Post
 
   constructor(private feedService: FeedService) { }
@@ -19,11 +20,12 @@ export class PostlistComponent implements OnInit {
 
   voteUp(pPost: Post){
     this.feedService.upvote(pPost.id)
-    console.log("UPVOTE", pPost.id)
+    this.voteEvent.emit(true)
   }
 
   voteDown(pPost: Post){
     this.feedService.downvote(pPost.id)
+    this.voteEvent.emit(true)
   }
 
 }

src/app/models/post.ts

@@ -3,14 +3,16 @@ import { Author } from "./author"
 export class Post {
     id: number
     content: string
+    htmlContent: string
     date: string
     upvotes: number
     downvotes: number
     author: Author
 
-    constructor(pId: number, pContent: string, pUpvotes: number, pDownvotes: number, pDate: string, pAuthor: Author) {
+    constructor(pId: number, pContent: string, pHtmlContent: string, pUpvotes: number, pDownvotes: number, pDate: string, pAuthor: Author) {
         this.id = pId
         this.content = pContent
+        this.htmlContent = pHtmlContent
         this.upvotes = pUpvotes
         this.downvotes = pDownvotes
         this.date = pDate

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

@@ -99,7 +99,7 @@ export class FeedService {
 
   getBodyForGetAllChats() {
     const body =  {query: `query {
-        getPosts (first: 1000, offset: 0) {id, content, upvotes, downvotes, author{name, handle, id}, createdAt}
+        getPosts (first: 1000, offset: 0) {id, content, htmlContent, upvotes, downvotes, author{name, handle, id}, createdAt}
       }`
       }
 
@@ -111,12 +111,13 @@ export class FeedService {
     for(let post of pResponse.data.getPosts) {
       let id: number = post.id
       let content: string = post.content
+      let htmlContent: string = post.htmlContent
       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
 
-      posts.push(new Post(id, content, upvotes, downvotes, date, author))
+      posts.push(new Post(id, content, htmlContent, upvotes, downvotes, date, author))
     }
     return posts
   }