@ -1,17 +0,0 @@ | |||
<esh-header url="/campaigns">Back to campaigns</esh-header> | |||
<div class="container"> | |||
<div class="esh-campaign_detail"> | |||
<div class="card esh-campaigns-items"> | |||
<img class="card-img-top" src="{{campaign.pictureUri}}" alt="{{campaign.name}}"> | |||
<div class="card-body"> | |||
<h4 class="card-title">{{campaign.name}}</h4> | |||
<p class="card-text">{{campaign.description}}</p> | |||
</div> | |||
<div class="card-footer"> | |||
<small class="text-muted"> | |||
From {{campaign.from | date}} Until {{campaign.to | date}} | |||
</small> | |||
</div> | |||
</div> | |||
</div> | |||
</div> |
@ -1,57 +0,0 @@ | |||
@import '../../variables'; | |||
.esh-campaign_detail { | |||
min-height: 80vh; | |||
margin-top: 1rem; | |||
&-section { | |||
padding: 1rem 0; | |||
&--right { | |||
text-align: right; | |||
} | |||
} | |||
&-titles { | |||
padding-bottom: 1rem; | |||
padding-top: 2rem; | |||
} | |||
&-title { | |||
text-transform: uppercase; | |||
} | |||
&-items { | |||
&--border { | |||
border-bottom: $border-light solid $color-foreground-bright; | |||
padding: .5rem 0; | |||
&:last-of-type { | |||
border-color: transparent; | |||
} | |||
} | |||
} | |||
$item-height: 8rem; | |||
&-item { | |||
font-size: $font-size-m; | |||
font-weight: $font-weight-semilight; | |||
&--middle { | |||
line-height: $item-height; | |||
@media screen and (max-width: $media-screen-s) { | |||
line-height: $font-size-m; | |||
} | |||
} | |||
&--mark { | |||
color: $color-secondary; | |||
} | |||
} | |||
&-image { | |||
height: $item-height; | |||
} | |||
} |
@ -1,30 +0,0 @@ | |||
import { Component, OnInit } from '@angular/core'; | |||
import { CampaignsService } from '../campaigns.service'; | |||
import { ICampaignItem } from '../../shared/models/campaignItem.model'; | |||
import { ActivatedRoute } from '@angular/router'; | |||
@Component({ | |||
selector: 'esh-campaigns_detail', | |||
styleUrls: ['./campaigns-detail.component.scss'], | |||
templateUrl: './campaigns-detail.component.html' | |||
}) | |||
export class CampaignsDetailComponent implements OnInit { | |||
public campaign: ICampaignItem = <ICampaignItem>{}; | |||
constructor(private service: CampaignsService, private route: ActivatedRoute) { } | |||
ngOnInit() { | |||
this.route.params.subscribe(params => { | |||
let id = +params['id']; // (+) converts string 'id' to a number | |||
this.getCampaign(id); | |||
}); | |||
} | |||
getCampaign(id: number) { | |||
this.service.getCampaign(id).subscribe(campaign => { | |||
this.campaign = campaign; | |||
console.log('campaign retrieved: ' + campaign.id); | |||
console.log(this.campaign); | |||
}); | |||
} | |||
} |
@ -1,43 +0,0 @@ | |||
<esh-header url="/catalog">Back to catalog</esh-header> | |||
<br /> | |||
<div class="container"> | |||
<div class="alert alert-warning esh-campaign-alert" role="alert" [hidden]="!errorReceived"> | |||
Error requesting campaigns list, please try later on | |||
</div> | |||
<div *ngIf="campaigns?.data?.length > 0"> | |||
<div class="card-group esh-campaign-items row"> | |||
<div class="esh-campaign-item col-md-4" | |||
*ngFor="let item of campaigns.data"> | |||
<div class="card"> | |||
<img class="card-img-top esh-campaign-thumbnail" src="{{item.pictureUri}}" alt="{{item.name}}"> | |||
<div class="card-body"> | |||
<h4 class="card-title esh-campaign-name">{{item.name}}</h4> | |||
<button *ngIf="isCampaignDetailFunctionEnabled == true; else showDefaultDetailsLink" [ngClass]="{'esh-campaigns-button': true}" (click)="onNavigateToDetails(item.detailsUri)">More details</button> | |||
<ng-template #showDefaultDetailsLink> | |||
<input [ngClass]="{'esh-campaign-button': true}" type="submit" value="More details" routerLink="/campaigns/{{item.id}}"> | |||
</ng-template> | |||
</div> | |||
<div class="card-footer esh-campaigns-card-footer-text"> | |||
<small class="text-muted"> | |||
From {{item.from | date }} To {{item.to | date }} | |||
</small> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<br /> | |||
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager> | |||
</div> | |||
<br /> | |||
<div *ngIf="campaigns?.data?.length == 0"> | |||
<span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span> | |||
</div> | |||
<br /> | |||
<br /> | |||
</div> | |||
@ -1,78 +0,0 @@ | |||
@import '../variables'; | |||
.esh-campaign { | |||
$banner-height: 260px; | |||
&-title { | |||
position: relative; | |||
top: $banner-height / 3.5; | |||
} | |||
&-items { | |||
margin-top: 1rem; | |||
} | |||
&-item { | |||
margin-bottom: 1.5rem; | |||
text-align: center; | |||
width: 33%; | |||
display: inline-block; | |||
float: none !important; | |||
@media screen and (max-width: $media-screen-m) { | |||
width: 50%; | |||
} | |||
@media screen and (max-width: $media-screen-s) { | |||
width: 100%; | |||
} | |||
} | |||
&-thumbnail { | |||
max-width: 370px; | |||
width: 100%; | |||
} | |||
&-button { | |||
background-color: $color-secondary; | |||
border: 0; | |||
color: $color-foreground-brighter; | |||
cursor: pointer; | |||
font-size: $font-size-m; | |||
height: 3rem; | |||
margin-top: 1rem; | |||
transition: all $animation-speed-default; | |||
width: 80%; | |||
&.is-disabled { | |||
opacity: .5; | |||
pointer-events: none; | |||
} | |||
&:hover { | |||
background-color: $color-secondary-darker; | |||
transition: all $animation-speed-default; | |||
} | |||
} | |||
&-name { | |||
font-size: $font-size-m; | |||
font-weight: $font-weight-semilight; | |||
margin-top: .5rem; | |||
text-align: center; | |||
text-transform: uppercase; | |||
} | |||
&-alert { | |||
margin-top: 10px; | |||
} | |||
} | |||
.esh-campaigns-card { | |||
&-footer-text { | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
} |
@ -1,67 +0,0 @@ | |||
import { Component, OnInit } from '@angular/core'; | |||
import { CampaignsService } from './campaigns.service'; | |||
import { ICampaign } from '../shared/models/campaign.model'; | |||
import { IPager } from '../shared/models/pager.model'; | |||
import { ConfigurationService } from '../shared/services/configuration.service'; | |||
import { Observable } from 'rxjs'; | |||
import { catchError } from 'rxjs/operators'; | |||
@Component({ | |||
selector: 'esh-campaigns', | |||
styleUrls: ['./campaigns.component.scss'], | |||
templateUrl: './campaigns.component.html' | |||
}) | |||
export class CampaignsComponent implements OnInit { | |||
private interval = null; | |||
paginationInfo: IPager; | |||
campaigns: ICampaign; | |||
isCampaignDetailFunctionEnabled: boolean = false; | |||
errorReceived: boolean; | |||
constructor(private service: CampaignsService, private configurationService: ConfigurationService) { } | |||
ngOnInit() { | |||
if (this.configurationService.isReady) { | |||
this.isCampaignDetailFunctionEnabled = this.configurationService.serverSettings.activateCampaignDetailFunction; | |||
this.getCampaigns(9, 0) | |||
} else { | |||
this.configurationService.settingsLoaded$.subscribe(x => { | |||
this.isCampaignDetailFunctionEnabled = this.configurationService.serverSettings.activateCampaignDetailFunction; | |||
this.getCampaigns(9, 0); | |||
}); | |||
} | |||
} | |||
onPageChanged(value: any) { | |||
console.log('campaigns pager event fired' + value); | |||
//event.preventDefault(); | |||
this.paginationInfo.actualPage = value; | |||
this.getCampaigns(this.paginationInfo.itemsPage, value); | |||
} | |||
getCampaigns(pageSize: number, pageIndex: number) { | |||
this.errorReceived = false; | |||
this.service.getCampaigns(pageIndex, pageSize) | |||
.pipe(catchError((err) => this.handleError(err))) | |||
.subscribe(campaigns => { | |||
this.campaigns = campaigns; | |||
this.paginationInfo = { | |||
actualPage : campaigns.pageIndex, | |||
itemsPage : campaigns.pageSize, | |||
totalItems : campaigns.count, | |||
totalPages: Math.ceil(campaigns.count / campaigns.pageSize), | |||
items: campaigns.pageSize | |||
}; | |||
}); | |||
} | |||
onNavigateToDetails(uri: string) { | |||
window.open(uri, "_blank"); | |||
} | |||
private handleError(error: any) { | |||
this.errorReceived = true; | |||
return Observable.throw(error); | |||
} | |||
} | |||
@ -1,15 +0,0 @@ | |||
import { NgModule } from '@angular/core'; | |||
import { BrowserModule } from '@angular/platform-browser'; | |||
import { SharedModule } from '../shared/shared.module'; | |||
import { CampaignsComponent } from './campaigns.component'; | |||
import { CampaignsDetailComponent } from './campaigns-detail/campaigns-detail.component'; | |||
import { CampaignsService } from './campaigns.service'; | |||
import { Header } from '../shared/components/header/header'; | |||
@NgModule({ | |||
imports: [BrowserModule, SharedModule], | |||
declarations: [CampaignsComponent, CampaignsDetailComponent], | |||
providers: [CampaignsService] | |||
}) | |||
export class CampaignsModule { } |
@ -1,47 +0,0 @@ | |||
import { Injectable } from '@angular/core'; | |||
import { DataService } from '../shared/services/data.service'; | |||
import { ICampaign } from '../shared/models/campaign.model'; | |||
import { ICampaignItem } from '../shared/models/campaignItem.model'; | |||
import { SecurityService } from '../shared/services/security.service'; | |||
import { ConfigurationService } from '../shared/services/configuration.service'; | |||
import { Observable } from 'rxjs'; | |||
import { tap } from 'rxjs/operators'; | |||
@Injectable() | |||
export class CampaignsService { | |||
private marketingUrl: string = ''; | |||
private buyerId: string = ''; | |||
constructor(private service: DataService, private identityService: SecurityService, private configurationService: ConfigurationService) { | |||
if (this.identityService.IsAuthorized) { | |||
if (this.identityService.UserData) { | |||
this.buyerId = this.identityService.UserData.sub; | |||
} | |||
} | |||
if (this.configurationService.isReady) | |||
this.marketingUrl = this.configurationService.serverSettings.marketingUrl; | |||
else | |||
this.configurationService.settingsLoaded$.subscribe(x => this.marketingUrl = this.configurationService.serverSettings.marketingUrl); | |||
} | |||
getCampaigns(pageIndex: number, pageSize: number): Observable<ICampaign> { | |||
let url = this.marketingUrl + '/m/api/v1/campaigns/user'; | |||
url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize; | |||
return this.service.get(url).pipe<ICampaign>(tap((response: any) => { | |||
return response; | |||
})); | |||
} | |||
getCampaign(id: number): Observable<ICampaignItem> { | |||
let url = this.marketingUrl + '/m/api/v1/campaigns/' + id; | |||
return this.service.get(url).pipe<ICampaignItem>(tap((response: any) => { | |||
return response; | |||
})); | |||
} | |||
} | |||