mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-22 14:23:57 +00:00
wip: profile
This commit is contained in:
parent
fe2c064e30
commit
f28b301a28
|
|
@ -81,14 +81,14 @@ export class HotDealsWidgetComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
getVendors(): void {
|
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(
|
this.apiService.getVendorById(currentDeal.vendor_id).subscribe(
|
||||||
vendor => {
|
vendor => {
|
||||||
this.productsPricesMap[key].vendor = vendor
|
this.productsPricesMap[productId].vendor = vendor;
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
<header class="masthead bg-transparent text-white text-center" id="w1">
|
||||||
|
|
||||||
|
</header>
|
||||||
<div class="productItem">
|
<div class="productItem">
|
||||||
<div class="productImageContainer">
|
<div class="productImageContainer">
|
||||||
<img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
|
<img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,30 @@
|
||||||
<div *ngIf="products.length==0">
|
<div *ngIf="products.length==0">
|
||||||
No Products found!
|
No Products found!
|
||||||
</div>
|
</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="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
|
||||||
<div class="productImageContainer" *ngIf="showProductPicture===true">
|
<div class="productImageContainer" *ngIf="showProductPicture===true">
|
||||||
<img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
|
<img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
|
||||||
|
|
@ -20,3 +44,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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">
|
<div class="container" *ngIf="currentUser; else loggedOut">
|
||||||
<p>
|
<p>
|
||||||
<strong>e-mail</strong>
|
<strong>e-mail</strong>
|
||||||
|
|
@ -33,4 +130,4 @@
|
||||||
<ng-template #loggedOut>
|
<ng-template #loggedOut>
|
||||||
Please login.
|
Please login.
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -49,4 +49,8 @@ export class ProfileComponent implements OnInit {
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
delete() {
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
<div id="mainComponents">
|
||||||
<app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
|
<app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
|
||||||
type="search"></app-product-list>
|
type="search"></app-product-list>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<header class="masthead bg-transparent text-white text-center">
|
||||||
|
|
||||||
|
</header>
|
||||||
<app-bottom-bar></app-bottom-bar>
|
<app-bottom-bar></app-bottom-bar>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
.header-in-page {
|
||||||
|
padding-top: calc(2rem + 20px);
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,10 @@
|
||||||
|
<app-top-bar></app-top-bar>
|
||||||
|
<header class="header-in-page">
|
||||||
|
|
||||||
|
</header>
|
||||||
<app-profile></app-profile>
|
<app-profile></app-profile>
|
||||||
|
<header class="header-in-page">
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<app-bottom-bar></app-bottom-bar>
|
||||||
|
<app-copyright></app-copyright>
|
||||||
|
|
|
||||||
BIN
Frontend/src/assets/images/Delete_icon-icons.com_55931.png
Normal file
BIN
Frontend/src/assets/images/Delete_icon-icons.com_55931.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 B |
Loading…
Reference in New Issue
Block a user