Recent recipes index done.

CodeURJC-DAW-2019-20 · Mar 30, 2020 · 27797bf · 27797bf
1 parent 43b59d2
commit 27797bf
Show file tree

Hide file tree

Showing 14 changed files with 229 additions and 71 deletions.
diff --git a/backend/src/main/java/com/proyect/instarecipes/api/RecipeRestController.java b/backend/src/main/java/com/proyect/instarecipes/api/RecipeRestController.java
@@ -1,5 +1,8 @@
 package com.proyect.instarecipes.api;
 
+import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
@@ -19,10 +22,12 @@
 import com.proyect.instarecipes.service.RecipeService;
 import com.proyect.instarecipes.views.DTO.CommentDTO;
 
+
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
@@ -73,6 +78,19 @@ public List<Recipe> getRecipes(@RequestParam int page, @RequestParam int size){
         return recipeList;
     }
 
+    //SHOW THE IMAGE OF ANOTHER USER
+    @GetMapping(value = "/{id}/avatar",produces = MediaType.IMAGE_JPEG_VALUE)
+    public ResponseEntity<byte[]> getProfileImage(@PathVariable Long id) throws IOException {
+        User user = usersRepository.findById(id).get();
+        if(user.getImage().length > 0){
+            byte[] image = user.getImage();
+            return new ResponseEntity<>(image, HttpStatus.OK);
+        }else{
+            File file = new File("temp/avatars/image-"+user.getId()+".jpg");
+            return new ResponseEntity<>(Files.readAllBytes(file.toPath()), HttpStatus.OK);
+        }
+    }
+
     //SHOW ONE RECIPE
     @JsonView(RecipeRestController.SimpleRecipe.class)
     @GetMapping("/{id_recipe}")

diff --git a/frontend/instarecipes/src/app/Interfaces/recipe.model.ts b/frontend/instarecipes/src/app/Interfaces/recipe.model.ts
@@ -8,7 +8,7 @@ import { Category } from './category.model';
 
 export interface Recipe{
     id?: number;
-    user: User;
+    username: User;
     title: string;
     description: string;
     likes?: number;

diff --git a/frontend/instarecipes/src/app/app.module.ts b/frontend/instarecipes/src/app/app.module.ts
@@ -14,6 +14,7 @@ import { SignUpComponent } from './signUp/signUp.component';
 import { RecipeSearchComponent } from './search/recipe-search/recipe-search.component';
 import { AuthenticationService } from './services/authentication.service';
 import { UserService } from './services/user.service';
+import { RecipesService } from './services/recipes.service';
 
 @NgModule({
 
@@ -36,7 +37,7 @@ import { UserService } from './services/user.service';
     NgbModule,
 
   ],
-  providers: [AuthenticationService, UserService], //Aqui se deberia poner los interceptors, como el del login y register, y tambien los services
+  providers: [AuthenticationService, UserService, RecipesService], //Aqui se deberia poner los interceptors, como el del login y register, y tambien los services
   bootstrap: [AppComponent]
 })
 //@ts-ignore

diff --git a/frontend/instarecipes/src/app/index/index.component.html b/frontend/instarecipes/src/app/index/index.component.html
@@ -6,15 +6,6 @@
     <recent-recipes></recent-recipes>
     <!-- Buttons Add, Search and Ajax -->
 
-    <hr width="80%">
-    <!-- Ajax load more button -->
-    <div class="loadmore-container">
-        <div>
-            <img id="loadmore1" class="loadmore-button" src="../../assets/images/icons/loadmore_unpressed.png" alt="" />
-            <img id="loadmore2" class="loadmore-button" src="../../assets/images/icons/spinner.gif" alt="" hidden />
-        </div>
-    </div>
-
     <!-- search button-->
     <div id="open-add-button" class='flotating-button'>
         <div class="publications-item mx-auto" data-toggle="modal" data-target="#opened-add-button" id="load-recipe-btn" style="cursor: pointer;">

diff --git a/frontend/instarecipes/src/app/index/recent/recent.component.html b/frontend/instarecipes/src/app/index/recent/recent.component.html
@@ -1,17 +1,104 @@
 <div>
-    <video autoplay muted loop id="myVideo"
-      style="position: fixed;z-index: -1; top: 10%; opacity:0.6; width: 100%; object-fit: cover;">
-      <source src="../../assets/images/backgrounds/index.mp4" type="video/mp4">
-    </video>
-    <div class="container">
-      <!-- Recent recipes -->
-      <h4>{{title}}</h4>
-      <div id="recipes-container">
-        <div *ngFor="let recipe of recipes">
-          {{recipe?.title}}
-        <br>
-          {{recipe?.description}}
+  <video autoplay muted loop id="myVideo"
+    style="position: fixed;z-index: -1; top: 10%; opacity:0.6; width: 100%; object-fit: cover;">
+    <source src="../../assets/images/backgrounds/index.mp4" type="video/mp4">
+  </video>
+  <div class="container">
+    <!-- Recent recipes -->
+    <h3 class="my-4">Recent user's recipes</h3>
+    <div #recipesContainer id="recipes-container">
+      <div *ngFor="let recipe of recipes; index as i">
+        <div *ngIf="isOdd(i); then elseBlock else thenBlock"></div>
+        <ng-template #thenBlock>
+          <div class="row">
+          <div class="col-md-7">
+            <a href="#">
+              <img class="img-fluid rounded mb-3 mb-md-0" [src]="image[i]">
+            </a>
+            <div class="likes-comments-top-left">
+              <div class="row" style="margin-right: 0;margin-left: 0;">
+                <div class="col-3">
+                  <img class="icon-fluid" src="../../assets/images/icons/like_pressed.png">
+                </div>
+                <div class="col-3">
+                  <p class="icon-fluid pub-date-text">{{recipe?.likes}}</p>
+                </div>
+                <div class="col-3">
+                  <img class="icon-fluid" src="../../assets/images/icons/dialogue.png">
+                </div>
+                <div class="col-3">
+                  <p class="icon-fluid pub-date-text">{{recipe?.n_comments}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="bottom-text-image rounded mb-3 mb-md-0">
+              <h3 style="word-break: break-all;">{{recipe?.title}}</h3>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <h3>Introduction</h3>
+            <p style="word-break: break-all;">{{recipe?.description}}</p>
+            <a class="btn btn-primary" href="/recipes/{{recipe?.id}}">Read
+              <span class="glyphicon glyphicon-chevron-right"></span>
+            </a>
+          </div>
+          <div class="col-lg-1" style="width:50%;align-self: center;border-left:3px solid rgba(0, 0, 0, 0.2);">
+            <img class="d-flex mr-3 rounded-circle profile-border" style="width:100%;height:60px;" [src]="avatar[i]">
+            <p>@{{recipe?.username.username}}</p>
+          </div>
         </div>
+        </ng-template>
+        <ng-template #elseBlock>
+          <div #elseBlock class="row">
+            <div class="col-lg-1" style="width:50%;align-self: center;border-right:3px solid rgba(0, 0, 0, 0.2);">
+              <img class="d-flex mr-3 rounded-circle profile-border" style="width:100%;height:60px;" [src]="avatar[i]">
+              <p>@{{recipe?.username.username}}</p>
+            </div>
+            <div class="col-md-4">
+              <h3>Introduction</h3>
+              <p style="word-break: break-all;">{{recipe?.description}}</p>
+              <a class="btn btn-primary" href="/recipes/{{recipe?.id}}">Read
+                <span class="glyphicon glyphicon-chevron-right\"></span>
+              </a>
+            </div>
+            <div class="col-md-7">
+              <a href="#">
+                <img class="img-fluid rounded mb-3 mb-md-0" [src]="image[i]">
+              </a>
+              <div class="likes-comments-top-right">
+                <div class="row" style="margin-right: 0;margin-left: 0;">
+                  <div class="col-3">
+                    <img class="icon-fluid" src="../../assets/images/icons/like_pressed.png">
+                  </div>
+                  <div class="col-3">
+                    <p class="icon-fluid pub-date-text">{{recipe?.likes}}</p>
+                  </div>
+                  <div class="col-3">
+                    <img class="icon-fluid" src="../../assets/images/icons/dialogue.png">
+                  </div>
+                  <div class="col-3">
+                    <p class="icon-fluid pub-date-text">{{recipe?.n_comments}}</p>
+                  </div>
+                </div>
+              </div>
+              <div class="bottom-text-image rounded mb-3 mb-md-0">
+                <h3 style="word-break: break-all">{{recipe?.title}}</h3>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+        <hr>
       </div>
     </div>
-</div>
+    <hr width="100%">
+  </div>
+
+  <!-- Ajax load more button -->
+  <div class="loadmore-container">
+    <div>
+      <img #loadmore1 id="loadmore1" (click)="loadMore()" class="loadmore-button" src="../../assets/images/icons/loadmore_unpressed.png" alt="" />
+      <img #loadmore2 id="loadmore2" class="loadmore-button" src="../../assets/images/icons/spinner.gif" alt="" hidden />
+    </div>
+  </div>
+
+</div>
diff --git a/frontend/instarecipes/src/app/index/recent/recent.component.ts b/frontend/instarecipes/src/app/index/recent/recent.component.ts
@@ -1,7 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
 
 import { RecipesService } from '../../services/recipes.service';
 import { Recipe } from '../../Interfaces/recipe.model';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'recent-recipes',
@@ -10,17 +11,67 @@ import { Recipe } from '../../Interfaces/recipe.model';
 })
 
 export class RecentComponent implements OnInit{
-    title = " Recent user's publications";
     recipes: Recipe[] = [];
-    constructor (private recipesService: RecipesService){ }
-
+    page_size: number = 2;
+    recipe_counter: number = 0;
+    recipe: Recipe;
+    avatar: any[] = [];
+    image: any[] = [];
+
+    @ViewChild('loadmore1') button1: ElementRef;
+    @ViewChild('loadmore2') button2: ElementRef;
+
+    constructor (private recipesService: RecipesService, 
+      private domSanitizer: DomSanitizer){ }
+
     ngOnInit(){
-      this.refresh();
+      this.refresh(this.page_size);
+    }
+
+    refresh(pS: number) {
+      this.recipesService.refreshRecipes(pS).subscribe(
+        recipes => {
+          this.recipes = recipes as Recipe[];
+          if(recipes.length <= 2) {
+            this.userRecipeAvatar(recipes[recipes.length-2]);
+            this.recipeStepImage(recipes[recipes.length-2], 1)
+          };
+          this.userRecipeAvatar(recipes[recipes.length-1]);
+          this.recipeStepImage(recipes[recipes.length-1], 1);
+          this.button1.nativeElement.removeAttribute("hidden");
+          this.button2.nativeElement.setAttribute("hidden", "");
+        }
+      );
+    }
+
+    loadMore(){
+      this.page_size++;
+      this.refresh(this.page_size);
+      this.button1.nativeElement.setAttribute("hidden", "");
+      this.button2.nativeElement.removeAttribute("hidden");
+    }
+
+    isOdd(i: number){
+      let m = ( i % 2 === 0);
+      return m;
+    }
+
+    userRecipeAvatar(r: Recipe) {
+      let id_user = r.username.id;
+      this.recipesService.getRecipeAvatar(id_user).subscribe(
+        data => {
+          var urlCreator = window.URL;
+          this.avatar.push(this.domSanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(data)));
+        }
+      );
     }
 
-    refresh() {
-      this.recipesService.refreshRecipes().subscribe(
-        recipes => this.recipes = recipes as Recipe[]
+    recipeStepImage(r: Recipe, n_step: number) {
+      this.recipesService.getRecipeStepImage(r.id, n_step).subscribe(
+        data => {
+          var urlCreator = window.URL;
+          this.image.push(this.domSanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(data)));
+        }
       );
     }
 

diff --git a/frontend/instarecipes/src/app/index/trending/trending.component.html b/frontend/instarecipes/src/app/index/trending/trending.component.html
@@ -35,7 +35,7 @@ <h3>Introduction</h3>
                 <div class="likes-comments-top-right">
                   <div class="row" style="margin-right: 0;margin-left: 0;">
                     <div class="col-3">
-                      <img class="icon-fluid" src="images/icons/like_pressed.png" alt="">
+                      <img class="icon-fluid" src="../../assets/images/icons/like_pressed.png" alt="">
                     </div>
                     <div class="col-3">
                       <p class="icon-fluid pub-date-text"></p>
@@ -81,13 +81,13 @@ <h3>Introduction</h3>
                 <div class="likes-comments-top-right">
                   <div class="row" style="margin-right: 0;margin-left: 0;">
                     <div class="col-3">
-                      <img class="icon-fluid" src="images/icons/like_pressed.png" alt="">
+                      <img class="icon-fluid" src="../../assets/images/icons/like_pressed.png" alt="">
                     </div>
                     <div class="col-3">
                       <p class="icon-fluid pub-date-text"><!--{{likes}}--></p>
                     </div>
                     <div class="col-3">
-                      <img class="icon-fluid" src="images/icons/dialogue.png" alt="">
+                      <img class="icon-fluid" src="../../assets/images/icons/dialogue.png" alt="">
                     </div>
                     <div class="col-3">
                       <p class="icon-fluid pub-date-text">n_comments</p>

diff --git a/frontend/instarecipes/src/app/services/recipes.service.ts b/frontend/instarecipes/src/app/services/recipes.service.ts
@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Recipe } from '../Interfaces/recipe.model';
 import { catchError } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 
-const BASE_URL: string = "/api/recipes/?page=0&size=3";
+const BASE_URL: string = "/api/recipes/";
 
 @Injectable({
   providedIn: 'root'
@@ -16,10 +16,33 @@ export class RecipesService {
 
   constructor(private httpClient: HttpClient) { }
 
-  refreshRecipes(): Observable<Recipe[]> {
-    return this.httpClient.get(BASE_URL).pipe(
+  refreshRecipes(page_size: number): Observable<Recipe[]> {
+    return this.httpClient.get(BASE_URL + "?page=0&size=" + page_size).pipe(
       catchError(error => this.handleError(error))
-    ) as Observable<Recipe[]>
+    ) as Observable<Recipe[]>;
+  }
+
+  getRecipeAvatar(id_user: number): Observable<Blob> {
+    let head = new HttpHeaders();
+    head = head.set('Content-Type', 'image/jpeg');
+
+    return this.httpClient.get(BASE_URL + id_user + "/avatar", {
+      headers: head,
+      responseType: "blob"
+    }).pipe(
+      catchError(error => this.handleError(error))
+    ) as Observable<Blob>;
+  }
+
+  getRecipeStepImage(id_recipe: number, n_step: number): Observable<Blob> {
+    let head = new HttpHeaders();
+    head = head.set('Content-Type', 'image/jpeg');
+    return this.httpClient.get("/api/index/" + id_recipe + "/image/" + n_step, {
+      headers: head,
+      responseType: "blob"
+    }).pipe(
+      catchError(error => this.handleError(error))
+    ) as Observable<Blob>;
   }
 
   private handleError(error: any) {

diff --git a/frontend/instarecipes/src/app/services/user.service.ts b/frontend/instarecipes/src/app/services/user.service.ts
@@ -14,20 +14,21 @@ export class UserService {
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
-const BASE_URL = 'https://localhost:8443/api/loginRestController';
+const BASE_URL = '/api/user/';
 
 @Injectable({ providedIn: 'root' })
 export class UserService {
 
 	constructor(private httpClient: HttpClient) { }
 
-    login(username:string, password:string) {
-        return this.httpClient.post(BASE_URL, {
-          email: username,
-          password: password,
-        });
-      }
+  login(username:string, password:string) {
+    return this.httpClient.post('/api/loginRestController', {
+      email: username,
+      password: password,
+    });
+  }
 
 	private handleError(error: any) {
 		console.error(error);