Mary stuff

RaftPackAngular/package.json

@@ -23,11 +23,16 @@
     "@angular/router": "^5.2.0",
     "angular-in-memory-web-api": "^0.5.3",
     "angular2-cookie": "^1.2.6",
+    "angular2-notifications": "^0.9.7",
     "angular4-datepicker": "^1.0.1",
     "aws-sdk": "^2.202.0",
     "core-js": "^2.4.1",
     "cors": "^2.8.4",
     "install": "^0.10.4",
+    "ng-file-upload": "^12.2.13",
+    "ng-socket-io": "^0.2.4",
+    "ng2-notifications": "^0.3.0",
+    "npm": "^5.7.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

RaftPackAngular/src/app/app-routing.module.ts

@@ -7,15 +7,26 @@ import { ModifyUserInfoComponent } from './modify-user-info/modify-user-info.com
 import { ProfileComponent } from './profile/profile.component';
 import { PostComponent } from './post/post.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { PostDetailsComponent } from './post-details/post-details.component';
+import { FriendProfileComponent } from './friend-profile/friend-profile.component';
+import { ProfilePostsComponent } from './profile-posts/profile-posts.component';
+
+
+
 
 export const routes: Routes = [
     { path: '', component: LoginComponent },
     { path: 'login', component: LoginComponent },
-    { path: 'register', component : RegisterComponent},
+    { path: 'login/register', component : RegisterComponent},
     { path: 'modify-user-info', component : ModifyUserInfoComponent},
+    {path:  'profilePosts', component: ProfilePostsComponent},
     { path: 'profile', component : ProfileComponent},
-    { path: 'post', component : PostComponent},
-    { path: 'dashboard', component : DashboardComponent}
+    { path: 'profile/:id', component : ProfileComponent},
+    { path: 'createPost', component : PostComponent},
+    { path: 'post', component: PostDetailsComponent },
+    { path: 'dashboard', component : DashboardComponent},
+    { path: 'register', component : RegisterComponent},
+    { path: 'friend-profile', component : FriendProfileComponent}
 ];
 
 @NgModule({

RaftPackAngular/src/app/app.component.css

@@ -1,12 +1,3 @@
-
-.badge.badge-default{
-    background-color : saddlebrown;
-    padding-left: 30px;
-    padding-right: 30px;
-
-}
-
-.headerColor{
-    background-color : rgb(24, 24, 136);
-    height : 55px;    
+jumbotron{
+    background: rgba(248, 248, 248, 0.438);
 }

RaftPackAngular/src/app/app.component.html

@@ -1,11 +1,6 @@
-<div style="text-align:left">
-  <div class="headerColor">
-    <h1>
-      <span class="badge badge-default">RaftPack</span>
-    </h1>
-  </div>
+
+
   <div style="text-align:center">
-   <app-navbar></app-navbar>
     <router-outlet></router-outlet>
-  </div>
-</div>
+    
+  </div>

RaftPackAngular/src/app/app.component.ts

@@ -7,5 +7,4 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'RaftPack';
-  isLoggedIn: boolean;
 }

RaftPackAngular/src/app/app.module.ts

@@ -8,7 +8,8 @@ import { LoginComponent } from './login/login.component';
 import { LoginService } from './services/login.service';
 import { HttpModule } from '@angular/http';
 import { NavbarComponent } from './navbar/navbar.component';
-
+import { FormdataUploadComponent } from './form-data-upload/form-data-upload.component';
+import { ReactiveFormsModule } from '@angular/forms';
 import { ModifyUserInfoComponent } from './modify-user-info/modify-user-info.component';
 import { AppRoutingModule } from './app-routing.module';
 
@@ -27,6 +28,16 @@ import { ModifyUserService } from './services/modify-user.service';
 import { PostService } from './services/post.service';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FeedComponent } from './feed/feed.component';
+import { FriendProfileComponent } from './friend-profile/friend-profile.component';
+import { SearchComponent } from './search/search.component';
+import { SearchService } from './services/search.service';
+import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SimpleNotificationsModule } from 'angular2-notifications';
+import { ProfilePostsComponent } from './profile-posts/profile-posts.component';
+const config: SocketIoConfig = {
+  url: 'http://localhost:8000', options: {}};
+
 
 @NgModule({
   declarations: [
@@ -40,16 +51,25 @@ import { FeedComponent } from './feed/feed.component';
     PostDetailsComponent,
     NavbarComponent,
     DashboardComponent,
-    FeedComponent
+    FeedComponent,
+    FriendProfileComponent,
+    SearchComponent,
+    FormdataUploadComponent,
+    ProfilePostsComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     AppRoutingModule,
     HttpModule,
-    HttpClientModule
+    HttpClientModule,
+    ReactiveFormsModule,
+    SocketIoModule.forRoot(config),
+    BrowserAnimationsModule,
+    SimpleNotificationsModule.forRoot()
   ],
-  providers: [ProfileService, MessageService, LoginService, RegisterService, UploadFileService, ModifyUserService, PostService],
+  providers: [ProfileService, MessageService, LoginService, RegisterService, UploadFileService, ModifyUserService, PostService,
+    SearchService, PostComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

RaftPackAngular/src/app/dashboard/dashboard.component.css

@@ -0,0 +1,32 @@
+.content:before {
+    content: "";
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: -1;
+
+    display: block;
+    background-image: url('https://www.imgbase.info/images/safe-wallpapers/video_games/minecraft/48219_minecraft.jpg'); 
+    background-color: gainsboro;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    height:100%;
+
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -o-filter: blur(5px);
+    -ms-filter: blur(5px);
+    filter: blur(5px);
+  }
+
+  .content {
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+
+

RaftPackAngular/src/app/dashboard/dashboard.component.html

@@ -1,12 +1,16 @@
+<div class="content">
+<app-navbar></app-navbar>
+<div class="panel panel-default col-xs-4" style="background: rgba(1, 2, 2, 0.4);">
+<app-profile [exists] = "true"></app-profile>
+</div>
+<simple-notifications [options]="notifyOptions"></simple-notifications>
+<div class="container-fluid" >
+    <app-post [exists] = "true"></app-post>
+    <br>
 
-<div class ="col-xs-1">
-
-<app-profile></app-profile></div>
-<div>
-<b>Post:</b>
-<app-post></app-post><br><br>
-<h6>Feed:</h6><br>
-<app-feed></app-feed>
-<br><br>
-Bottom Dashboard
+    <app-feed></app-feed>
 </div>
+
+
+
+</div>

RaftPackAngular/src/app/dashboard/dashboard.component.ts

@@ -1,13 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { Socket } from 'ng-socket-io';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/timeout';
 
+import { defer as _defer } from 'lodash';
+import { NotificationsService } from 'angular2-notifications';
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css']
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+  constructor(private socket: Socket,  private notificationsService: NotificationsService) {
+    socket.on('new notification', function (data) {
+        notificationsService.info('', data, {
+        timeOut: 3000,
+        pauseOnHover: true,
+        clickToClose: true
+      });
+      // alert(data);
+    });
+  }
 
   ngOnInit() {
   }

RaftPackAngular/src/app/feed/feed.component.html

@@ -1,7 +1,15 @@
-<div>
-    <div><li *ngFor="let post of posts"> <span>{{post.message}} {{post.user.first_name}} 
-        {{post.user.last_name}} {{post.date}}
-    </span></li>
-
-    </div>
-</div>
+<div class="jumbotron col-md-8" style="background: rgba(1, 2, 2, 0.4);">
+    <ul *ngFor="let post of posts">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">{{post.date}} {{post.user.first_name}} {{post.user.last_name}} <app-post-details [postId]="post.postId" [userId]="uId"></app-post-details></h3>
+        </div>
+        <div class="panel-body">
+          <img src={{post.image}}/> {{post.message}}
+          <br>{{post.numOfLikes}}
+        </div>
+
+      </div>
+    </ul>
+  </div>
+

RaftPackAngular/src/app/feed/feed.component.ts

@@ -10,6 +10,7 @@ import { Post } from '../models/post.model';
 })
 export class FeedComponent implements OnInit {
   public posts: Post[] = [];
+  public uId = parseInt(document.cookie, 10);
   constructor(private postService: PostService) { }
   viewFeed(): void {
     this.postService.getAllPosts().subscribe(posts => this.posts = posts);

RaftPackAngular/src/app/form-data-upload/form-data-upload.component.css

@@ -0,0 +1,3 @@
+div{
+    color: white;
+}

RaftPackAngular/src/app/form-data-upload/form-data-upload.component.html

@@ -0,0 +1,14 @@
+<div style="text-align:center">
+  <form [formGroup]="form">
+
+    <input type="text" id="message" placeholder="post" formControlName="message" />
+
+    <button type="button" class="btn btn-sm btn-default" (click)="clearFile()">clear file</button>
+    <button name="submit" type="submit" (click)="onSubmit()" class="btn btn-success">Submit
+
+      <i class="fa fa-spinner fa-spin fa-fw" *ngIf="loading"></i>
+    </button>
+    <input style="padding-left:30%;" type="file" id="image" (change)="onFileChange($event)" #fileInput/>
+  </form>
+</div>
+<!-- (ngSubmit)="onSubmit()" -->

RaftPackAngular/src/app/form-data-upload/form-data-upload.component.ts

@@ -0,0 +1,102 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UploadFileService } from './../services/upload.service';
+import { PostService } from '../services/post.service';
+import { Post } from '../models/post.model';
+import { ProfileService } from './../services/profile.service';
+import { User } from '../models/user.model';
+import { PostComponent } from './../post/post.component';
+import { Socket } from 'ng-socket-io';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-form-data-upload',
+  templateUrl: './form-data-upload.component.html'
+})
+export class FormdataUploadComponent {
+  form: FormGroup;
+  loading = false;
+  file: any;
+  uid: any;
+  post = new Post(0, '', '', 0, null, null);
+  user = new User(0, '', '', '', '', '', '', '', '');
+  @ViewChild('fileInput') fileInput: ElementRef;
+
+  constructor(private fb: FormBuilder, private uploadFileService: UploadFileService, private postService: PostService,
+    private profileService: ProfileService, private postComponent: PostComponent, private socket: Socket, private router: Router) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      message: ['', Validators.required],
+      image: null
+    });
+  }
+
+  onFileChange(event) {
+    if (event.target.files.length > 0) {
+      this.file = event.target.files[0];
+      this.form.get('image').setValue(this.file);
+    }
+  }
+
+  private prepareSave(): any {
+    const input = new FormData();
+    input.append('message', this.form.get('message').value);
+    if (this.form.get('image') != null) {
+      input.append('image', this.form.get('image').value);
+    } else { input.append('image', null); }
+
+    return input;
+  }
+
+  onSubmit() {
+    const formModel = this.prepareSave();
+    this.loading = true;
+    if (this.form.get('image').value != null) {
+      this.uploadFileService.uploadfile(this.file).subscribe(image => {
+        this.post.image = image;
+        this.profileService.getProfile(parseInt(document.cookie, 10)).subscribe(user => {
+          this.post.user = user;
+          console.log(this.post);
+          this.post.message = this.form.get('message').value;
+          console.log(this.post);
+          this.postComponent.createPost(this.post.message, this.post.image);
+          console.log(this.post);
+          setTimeout(() => {
+            alert('done!');
+            this.loading = false;
+          }, 1000);
+          this.sendNotification(user, this.post.message);
+          this.router.navigate(['/dashboard']);
+        });
+      });
+    } else {
+      this.profileService.getProfile(parseInt(document.cookie, 10)).subscribe(user => {
+        this.post.user = user;
+        console.log(this.post);
+        this.post.message = this.form.get('message').value;
+        console.log(this.post);
+        this.postComponent.createPost(this.post.message, null);
+        console.log(this.post);
+        setTimeout(() => {
+          alert('done!');
+          this.loading = false;
+        }, 1000);
+        this.sendNotification(user, this.post.message);
+        this.router.navigate(['/dashboard']);
+      });
+    }
+
+  }
+  sendNotification(user: User, message: string) {
+    this.socket.emit('create notification', user.first_name + user.last_name + ': ' + message );
+  }
+
+  clearFile() {
+    this.form.get('image').setValue(null);
+    this.fileInput.nativeElement.value = '';
+  }
+
+}