wip: profile

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts

@@ -81,14 +81,14 @@ export class HotDealsWidgetComponent implements OnInit {
     }
 
     getVendors(): void {
-        this.productsPricesMap.keys().forEach(
+        this.bestDealsProductIds.forEach(
-            key => {
+            productId => {
-                const currentDeal = this.productsPricesMap[key].lowestPrice;
+                const currentDeal = this.productsPricesMap[productId].lowestPrice;
                 this.apiService.getVendorById(currentDeal.vendor_id).subscribe(
                     vendor => {
-                        this.productsPricesMap[key].vendor = vendor
+                        this.productsPricesMap[productId].vendor = vendor;
-                    })
+                    });
-            })
+            });
     }
 
 

Frontend/src/app/components/product-details/product-details.component.html

@@ -1,3 +1,6 @@
+<header class="masthead bg-transparent text-white text-center" id="w1">
+
+</header>
 <div class="productItem">
     <div class="productImageContainer">
         <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>

Frontend/src/app/components/product-list/product-list.component.html

@@ -1,6 +1,30 @@
 <div *ngIf="products.length==0">
     No Products found!
 </div>
+<div class="container mt-5 mb-5">
+    <div class="d-flex justify-content-center row">
+        <div class="col-md-10">
+            <div class="row p-2 bg-white border rounded" *ngFor="let product of products">
+                <div class="col-md-3 mt-1"><img width="50%" class="img-fluid img-responsive rounded product-image" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"></div>
+                <div class="col-md-6 mt-1">
+                    <h5>{{product.name}}</h5>
+                    <div class="d-flex flex-row">
+                        <p class="text-justify text-truncate para mb-0">{{product.short_description}}</p>
+                    </div>
+                    <div class="mt-1 mb-1 spec-1"><span></span><span class="dot"></span><span></span><span class="dot"></span><span><br></span></div>
+                    <div class="mt-1 mb-1 spec-1"><span></span><span class="dot"></span><span></span><span class="dot"></span><span><br></span></div>
+                </div>
+                <div class="align-items-center align-content-center col-md-3 border-left mt-1">
+                    <div class="d-flex flex-row align-items-center">
+                        <h4 class="mr-1">${{product.price}}</h4>
+                    </div>
+                    <div class="d-flex flex-column mt-4"><button class="btn btn-primary btn-sm" type="button" (click)="clickedProduct(product)">Details</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--
 <div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
     <div class="productImageContainer" *ngIf="showProductPicture===true">
         <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
@@ -20,3 +44,4 @@
         </div>
     </div>
 </div>
+-->

Frontend/src/app/components/profile/profile.component.css

@@ -0,0 +1,21 @@
+.inf-content{
+    border:1px solid #DDDDDD;
+    -webkit-border-radius:10px;
+    -moz-border-radius:10px;
+    border-radius:10px;
+    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
+}
+
+.header-in-page {
+    padding-top: calc(1rem + 20px);
+    padding-bottom: 1rem;
+}
+
+table, th, td {
+    border: 1px solid black;
+}
+
+.delete:hover {
+    cursor: pointer;
+    color: #0d5a4b;
+}

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

@@ -1,3 +1,100 @@
+<div class="container bootstrap snippets bootdey">
+    <div class="panel-body inf-content">
+        <div class="row">
+            <div class="col-md-4">
+                <img alt="" style="width:600px;" title="" class="img-circle img-thumbnail isTooltip" src="https://bootdey.com/img/Content/avatar/avatar7.png" data-original-title="Usuario">
+                <ul title="Ratings" class="list-inline ratings text-center">
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                </ul>
+            </div>
+            <div class="col-md-6">
+                <strong>Information</strong><br>
+                <div class="table-responsive">
+                    <table class="table table-user-information">
+                        <tbody>
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-bookmark text-primary"></span>
+                                    Username
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                bootnipets
+                            </td>
+                        </tr>
+
+
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-eye-open text-primary"></span>
+                                    Role
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                User
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-envelope text-primary"></span>
+                                    Email
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                noreply@email.com
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-calendar text-primary"></span>
+                                    created
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                20 jul 20014
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<header class="header-in-page">
+
+</header>
+<div class="container bootstrap snippets bootdey">
+    <div class="col-auto">
+        <table class="table table-hover">
+            <tr>
+                <th>Produkt</th>
+                <th>Preis</th>
+                <th>Löschen</th>
+            </tr>
+            <tr *ngFor="let alarm of alarms">
+                <td>
+                    {{productsMap[alarm.product_id]?.name}}
+                </td>
+                <td>
+                    {{alarm.defined_price/100}}
+                </td>
+                <td>
+                    <img class="delete" src="../assets/images/Delete_icon-icons.com_55931.png" (click)="delete()">
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<!--
 <div class="container" *ngIf="currentUser; else loggedOut">
     <p>
         <strong>e-mail</strong>
@@ -33,4 +130,4 @@
 <ng-template #loggedOut>
     Please login.
 </ng-template>
-
+-->

Frontend/src/app/components/profile/profile.component.ts

@@ -49,4 +49,8 @@ export class ProfileComponent implements OnInit {
             }
         )
     }
+
+    delete() {
+
+    }
 }

Frontend/src/app/components/top-bar/top-bar.component.ts

@@ -4,9 +4,9 @@ import {Router} from "@angular/router";
 
 
 @Component({
-  selector: 'app-top-bar',
+    selector: 'app-top-bar',
-  templateUrl: './top-bar.component.html',
+    templateUrl: './top-bar.component.html',
-  styleUrls: ['./top-bar.component.css']
+    styleUrls: ['./top-bar.component.css']
 })
 export class TopBarComponent implements OnInit {
 

Frontend/src/app/pages/landingpage/landingpage.component.css

@@ -1,50 +0,0 @@
-#mainComponents {
-    margin: 5em;
-    margin-top: .5em;
-    margin-bottom: .5em;
-}
-
-#productListsContainer {
-    display: grid;
-    grid-template-areas:
-    'search search'
-    'popularSearches bestDeals';
-    grid-template-columns: 50% 50%;
-}
-
-#searchContainer {
-    position: relative;
-    grid-area: search;
-    height: 10em;
-}
-
-#searchContainer input {
-    position: relative;
-    font-size: 1.5em;
-    padding: .25em;
-    display: block;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-    margin: auto;
-    -ms-transform: translateY(50%);
-    transform: translateY(2.5em);
-}
-
-#popularSearchesList {
-    grid-area: popularSearches;
-    padding: .5em;
-}
-
-#popularSearchesList h2 {
-    text-align: center;
-}
-
-#bestDealsList {
-    grid-area: bestDeals;
-    padding: .5em;
-}
-
-#bestDealsList h2 {
-    text-align: center;
-}

Frontend/src/app/pages/product-search-page/product-search-page.component.css

@@ -1,5 +1,43 @@
-#mainComponents {
+body {
-    margin: 5em;
+    background: #eee
-    margin-top: .5em;
-    margin-bottom: .5em;
 }
+
+.ratings i {
+    font-size: 16px;
+    color: red
+}
+
+.strike-text {
+    color: red;
+    text-decoration: line-through
+}
+
+.product-image {
+    width: 20%;
+    height: 20%;
+}
+
+.dot {
+    height: 7px;
+    width: 7px;
+    margin-left: 6px;
+    margin-right: 6px;
+    margin-top: 3px;
+    background-color: blue;
+    border-radius: 50%;
+    display: inline-block
+}
+
+.spec-1 {
+    color: #938787;
+    font-size: 15px
+}
+
+h5 {
+    font-weight: 400
+}
+
+.para {
+    font-size: 16px
+}
+

Frontend/src/app/pages/product-search-page/product-search-page.component.html

@@ -1,7 +1,14 @@
+<app-top-bar></app-top-bar>
+<header class="masthead bg-transparent text-white text-center" id="w1">
+
+</header>
 
 <div id="mainComponents">
     <app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
                       type="search"></app-product-list>
 </div>
 
+<header class="masthead bg-transparent text-white text-center">
+
+</header>
 <app-bottom-bar></app-bottom-bar>

Frontend/src/app/pages/profile-page/profile-page.component.css

@@ -0,0 +1,4 @@
+.header-in-page {
+    padding-top: calc(2rem + 20px);
+    padding-bottom: 6rem;
+}

Frontend/src/app/pages/profile-page/profile-page.component.html

@@ -1,3 +1,10 @@
+<app-top-bar></app-top-bar>
+<header class="header-in-page">
 
+</header>
 <app-profile></app-profile>
+<header class="header-in-page">
 
+</header>
+<app-bottom-bar></app-bottom-bar>
+<app-copyright></app-copyright>