From 904a651c7161ec2ca86d3b98381151f00e2f35a2 Mon Sep 17 00:00:00 2001 From: Rafael Guasp Date: Fri, 1 Jun 2018 14:10:15 -0400 Subject: [PATCH] cart styling --- src/app/app.component.html | 9 ++++----- src/app/cart/cart.component.css | 23 +++++++++++++++++++++++ src/app/cart/cart.component.html | 21 +++++++++++++-------- src/app/cart/cart.component.ts | 22 +++++++++++----------- src/app/reviews/reviews.component.css | 2 +- src/app/services/auth.service.ts | 10 +++++----- src/app/services/cart.service.ts | 3 ++- src/app/services/service.service.ts | 8 ++++---- 8 files changed, 63 insertions(+), 35 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 32f29799..abc1d863 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -21,9 +21,9 @@
  • Services |
    • -
  • +
  • {{myService.currentUser.username}} | Login | @@ -47,10 +47,9 @@ - - + + Cart - 0 diff --git a/src/app/cart/cart.component.css b/src/app/cart/cart.component.css index e69de29b..ce137848 100644 --- a/src/app/cart/cart.component.css +++ b/src/app/cart/cart.component.css @@ -0,0 +1,23 @@ +.card { + width: 30%; + margin-top: 30px; + margin-bottom: 30px; + box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 0, 0.19); + background-color: whitesmoke; + border-radius: 15px; +} + +.flex-container { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.top-space { + margin-top: 56px; +} + +.flex-btn { + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/src/app/cart/cart.component.html b/src/app/cart/cart.component.html index 4ee904da..b0946443 100644 --- a/src/app/cart/cart.component.html +++ b/src/app/cart/cart.component.html @@ -1,18 +1,23 @@
    -

    - cart works! -

    -

    Cart:

    +
    -

    name: {{oneService.name}}

    -

    description: {{oneService.description}}

    -

    price: {{oneService.price}}

    +
    +
    + Card image +

    {{oneService.name}}

    +

    Description :
    {{oneService.description}}

    +

    Price :$ {{oneService.price}} .00

    - +
    +
    +
    + +
    +
    \ No newline at end of file diff --git a/src/app/cart/cart.component.ts b/src/app/cart/cart.component.ts index 491da8d4..d588085c 100644 --- a/src/app/cart/cart.component.ts +++ b/src/app/cart/cart.component.ts @@ -17,8 +17,8 @@ export class CartComponent implements OnInit { formInfo: any = {username: '', password: '', email: '', cart: []}; cartResponse: any; thePersonLoggedIn: any; - - + + constructor( private myService: AuthService, private myRouter: Router, @@ -27,33 +27,33 @@ export class CartComponent implements OnInit { ngOnInit() { - - this.myService.isLoggedIn() - + this.myService.isLoggedIn(); + + this.myService.getUserCart() .then((serviceResults: any) => { console.log('this is the service results {{{{{{{{{{{{{{{}}}}}}}}}}}}}}}}', serviceResults); - var reply = serviceResults._body + const reply = serviceResults._body; this.cartResponse = JSON.parse(reply); console.log('cartResponse after parse and stringify -----------______________------------', this.cartResponse) }) .catch((err) => { console.log(err); - }) + }); - //TESTING + // TESTING // console.log('============this CURRENT USER ==================') // console.log(this.myService.currentUser) // console.log('=====thid form info username=========================') // console.log(this.formInfo.username) // console.log('=====TYPE!=========================') // console.log(typeof this.formInfo) - //TESTING + // TESTING } } -} -} + + diff --git a/src/app/reviews/reviews.component.css b/src/app/reviews/reviews.component.css index 5016a89c..de805c17 100644 --- a/src/app/reviews/reviews.component.css +++ b/src/app/reviews/reviews.component.css @@ -423,7 +423,7 @@ template { .c-position { margin-left: 550px; - margin-top: 100px; + margin-top: 50px; } img { diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 6659f3d3..dd0a78c9 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -68,21 +68,21 @@ export class AuthService { - //Called from AddToCart button in service.html page. + // Called from AddToCart button in service.html page. addToCart(itemObject) { - console.log("=======================addToCart(itemObject) GET ID ========"); + console.log(`=======================addToCart(itemObject) GET ID ========`); console.log(`${itemObject._id}`); console.log(`============================================================`); - //TO GET ID// //BODY// - return this.http.put(`http://localhost:3000/api/cart/${itemObject._id}/add`, {}, {withCredentials: true}) + // TO GET ID// //BODY// + return this.http.put(`${environment.backendUrl}/api/cart/${itemObject._id}/add`, {}, {withCredentials: true}) .map((res) => res.json()); } getUserCart() { - return this.http.get(`http://localhost:3000/api/cart`, + return this.http.get(`${environment.backendUrl}/api/cart`, {withCredentials: true} ).toPromise() } diff --git a/src/app/services/cart.service.ts b/src/app/services/cart.service.ts index d1741eee..26769182 100644 --- a/src/app/services/cart.service.ts +++ b/src/app/services/cart.service.ts @@ -4,6 +4,7 @@ import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; import { Observable } from 'rxjs/Observable'; +import { environment } from '../../environments/environment'; @Injectable() export class cartService { @@ -11,7 +12,7 @@ export class cartService { constructor(private http: Http) { } getTheUserCart() { - return this.http.get('http://localhost:3000/cart', {withCredentials: true}) + return this.http.get(`${environment.backendUrl}/cart`, {withCredentials: true}) .map((responseFromApi) => responseFromApi.json()); } diff --git a/src/app/services/service.service.ts b/src/app/services/service.service.ts index 278d7597..3c98f77e 100644 --- a/src/app/services/service.service.ts +++ b/src/app/services/service.service.ts @@ -30,7 +30,7 @@ export class serviceService { } getOneService(id) { - return this.http.get(`http://localhost:3000/services/services/${id}`) + return this.http.get(`${environment.backendUrl}/services/services/${id}`) .map((responseFromApi) => responseFromApi.json()); } @@ -46,12 +46,12 @@ export class serviceService { updateService(theUpdates) { - console.log("update service in services.ts ===========>>> 😁😁😁😁😁😁") + console.log('update service in services.ts ===========>>> 😁😁😁😁😁😁') console.log(theUpdates) - console.log("This is THE ID =====>") + console.log('This is THE ID =====>'); console.log(theUpdates._id); - + return this.http.post(`${environment.backendUrl}/services/services/update/${theUpdates._id}`, theUpdates) .map((responseFromApi) => responseFromApi.json());