Fix banner size in internal classifier (publisher) (#722) (#723)

* Fix banner size in internal classifier (publisher) (#722)

* Fix banner size in internal classifier (publisher)

* Fix banner size for popup

* Fix banner size for html upload

* update CHANGELOG

* Update CHANGELOG.md

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.4.2] - 2019-11-26
+### Fixed
+- Banner size in internal classifier
+- Banner size for html ad upload
+
 ## [1.4.1] - 2019-11-22
 ### Improved
 - Fill site name with domain
@@ -148,7 +153,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Advertiser features (Campaigns & Ads)
 - Publisher features (Sites & AdUnits)
 
-[Unreleased]: https://github.com/adshares/adpanel/compare/v1.4.1...develop
+[Unreleased]: https://github.com/adshares/adpanel/compare/v1.4.2...develop
+[1.4.2]: https://github.com/adshares/adpanel/compare/v1.4.1...v1.4.2
 [1.4.1]: https://github.com/adshares/adpanel/compare/v1.4.0...v1.4.1
 [1.4.0]: https://github.com/adshares/adpanel/compare/v1.2.5...v1.4.0
 [1.2.5]: https://github.com/adshares/adpanel/compare/v1.2.4...v1.2.5

src/app/advertiser/edit-campaign/edit-campaign-create-ads/edit-campaign-create-ads.component.html

@@ -124,8 +124,8 @@
                   data-test="advertiser-edit-campaign-create-ads-form-ad-type-select"
                 >
                   <mat-option
-                    *ngFor="let adType of adTypes; let i = index"
-                    [value]="i"
+                    *ngFor="let adType of adTypes; let adTypeIndex = index"
+                    [value]="adTypeIndex"
                     data-test="advertiser-edit-campaign-create-ads-form-ad-type-option"
                   >
                     {{ adType }}
@@ -141,32 +141,32 @@
                 col-xxxl-1
                 col"
             >
-              <div *ngIf="adForm.get('image') && adForm.get('size').value"
+              <div *ngIf="adForm.get('image') && adForm.get('creativeSize').value"
                    class="dwmth-form-input__box">
                 <span class="dwmth-form-input__box
                              dwmth-form-label
                              campaign-edit-create-bnr__size-label">
                   Size
                 </span>
                 <span class="dwmth-copy">
-                  {{ adForm.get('size').value }}
+                  {{ adForm.get('creativeSize').value }}
                 </span>
               </div>
 
-              <div *ngIf="adForm.get('html') && adForm.get('size').value !== null"
+              <div *ngIf="adForm.get('html') && adForm.get('creativeSize').value !== null"
                    class="dwmth-form-input__box">
                 <label class="dwmth-form-label">
                   Size
                 </label>
                 <mat-select
                   class="dwmth-select"
-                  formControlName="size"
+                  formControlName="creativeSize"
                   (change)="setAdSize(i)"
                   data-test="advertiser-edit-campaign-create-ads-form-size-select"
                 >
                   <mat-option
-                    *ngFor="let adSize of adSizes; let i = index"
-                    [value]="i"
+                    *ngFor="let adSize of adSizes"
+                    [value]="adSize"
                     data-test="advertiser-edit-campaign-create-ads-form-size-option">
                     {{ adSize }}
                   </mat-option>
@@ -342,7 +342,7 @@
                 <br>
                 <span class="file-box__file-sub-info"
                       data-test="advertiser-edit-campaign-create-ads-form-image-size">
-                  {{ adForm.get('size').value }}
+                  {{ adForm.get('creativeSize').value }}
                 </span>
 
                 <img
@@ -364,9 +364,9 @@
 
                 <span class="file-box__file-sub-info">
                 <span data-test="advertiser-edit-campaign-create-ads-form-image-size">
-                  {{ adForm.get('size').value }}
+                  {{ adForm.get('creativeSize').value }}
                 </span>
-                <span *ngIf="isImageTypeChosen(adForm) && (adForm.get('size').value !== ads[i].imageSize)"
+                <span *ngIf="isImageTypeChosen(adForm) && (adForm.get('creativeSize').value !== ads[i].imageSize)"
                       class="file-box__file-sub-info--secondary"
                       data-test="advertiser-edit-campaign-create-ads-form-image-dimensions"
                 >
@@ -405,22 +405,22 @@
                 dwmth-box--no-padding">
               Preview
             </div>
-            <div *ngIf="isImageTypeChosen(adForm) && adForm.get('image').value.src && adForm.get('size').value"
+            <div *ngIf="isImageTypeChosen(adForm) && adForm.get('image').value.src && adForm.get('creativeSize').value"
                  class="banner image-poster"
                  [ngStyle]="{
-                'width': adForm.get('size').value.split('x')[0] + 'px',
-                'height': adForm.get('size').value.split('x')[1] + 'px'
+                'width': adForm.get('creativeSize').value.split('x')[0] + 'px',
+                'height': adForm.get('creativeSize').value.split('x')[1] + 'px'
               }">
               <img [src]="adForm.get('image').value.src | trustUrl"
                    [ngStyle]="{'transform': 'scale('+ scaleImageToMatchBanner(i)+ ')'}"/>
             </div>
 
             <div *ngIf="!isImageTypeChosen(adForm) && adForm.get('html').value.src"
                  class="banner">
-              <iframe *ngIf="adForm.get('size').value"
+              <iframe *ngIf="adForm.get('creativeSize').value"
                       [ngStyle]="{
-                                  'width': adForm.get('size').value.split('x')[0] + 'px',
-                                  'height': adForm.get('size').value.split('x')[1] + 'px'
+                                  'width': adForm.get('creativeSize').value.split('x')[0] + 'px',
+                                  'height': adForm.get('creativeSize').value.split('x')[1] + 'px'
                                   }"
                       [src]="adForm.get('html').value.src | trustUrl"
               ></iframe>

src/app/advertiser/edit-campaign/edit-campaign-create-ads/edit-campaign-create-ads.component.ts

@@ -129,7 +129,7 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
     const formGroup = new FormGroup({
       name: new FormControl(ad.name, Validators.required),
       type: new FormControl({value: ad.type, disabled: disabledMode}),
-      size: new FormControl({value: ad.size, disabled: disabledMode}),
+      creativeSize: new FormControl({value: ad.creativeSize, disabled: disabledMode}),
       status: new FormControl(ad.status)
     });
 
@@ -199,8 +199,8 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
 
   adjustBannerName(form: FormGroup): void {
     if (form.get('name').dirty === false) {
-      let name = form.get('size').value ?
-        `${adTypesEnum[form.get('type').value]} ${form.get('size').value}` :
+      let name = form.get('creativeSize').value ?
+        `${adTypesEnum[form.get('type').value]} ${form.get('creativeSize').value}` :
         `${adTypesEnum[form.get('type').value]}`;
       const matchingNames = this.adForms.filter(form => form.get('name').value.includes(name));
       if (matchingNames.length > 0) {
@@ -216,8 +216,9 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
       return 1;
     }
     const image = banners[index].querySelector('img');
-    const bannerWidth = parseInt(this.adForms[index].get('size').value.split('x')[0]);
-    const bannerHeight = parseInt(this.adForms[index].get('size').value.split('x')[1]);
+    const sizes = this.adForms[index].get('creativeSize').value.split('x');
+    const bannerWidth = parseInt(sizes[0]);
+    const bannerHeight = parseInt(sizes[1]);
     const imageWidth = image.offsetWidth;
     const imageHeight = image.offsetHeight;
     const heightRatio = bannerHeight / imageHeight;
@@ -228,7 +229,7 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
 
   selectProperBannerSize(size: string, index: number) {
     if (this.adSizes.includes(size)) {
-      this.adForms[index].get('size').setValue(size);
+      this.adForms[index].get('creativeSize').setValue(size);
     } else {
       this.showImageSizeWarning();
     }
@@ -297,7 +298,7 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
     Object.assign(this.ads[adIndex], {
       type: this.adForms[adIndex].get('type').value,
       name: this.adForms[adIndex].get('name').value,
-      creativeSize: this.adForms[adIndex].get('size').value,
+      creativeSize: this.adForms[adIndex].get('creativeSize').value,
       status: this.adForms[adIndex].get('status').value
     });
   }
@@ -315,10 +316,10 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
     adForm.controls[adTypeName] = new FormControl({src: ''});
     adForm.updateValueAndValidity();
 
-    if (adForm.get('html') && adForm.get('size').value === null) {
-      adForm.get('size').setValue(this.adSizes[0]);
+    if (adForm.get('html') && adForm.get('creativeSize').value === null) {
+      adForm.get('creativeSize').setValue(this.adSizes[0]);
     } else {
-      adForm.get('size').setValue(null);
+      adForm.get('creativeSize').setValue(null);
     }
     this.adjustBannerName(adForm);
   }

src/app/common/components/banner-preview/banner-preview.component.html

@@ -14,8 +14,8 @@
       scrolling="no"
       class="banner-preview__banner"
       [ngStyle]="{
-                'width': bannerChosenSize.width + 'px',
-                'height': bannerChosenSize.height + 'px',
+                'width': bannerChosenSize.width,
+                'height': bannerChosenSize.height,
                 'overflow': 'hidden'
               }"
     ></iframe>

src/app/common/components/banner-preview/banner-preview.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { BannerClassification } from 'models/classifier.model';
 import { Ad } from 'models/campaign.model';
 import { adTypesEnum } from 'models/enum/ad.enum';
-import { HTTP_OK } from "common/utilities/codes";
+import { HTTP_OK } from 'common/utilities/codes';
 
 @Component({
   selector: 'app-banner-preview',
@@ -27,20 +27,30 @@ export class BannerPreviewComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    if ((<BannerClassification>this.banner).url) {
+    if ((<BannerClassification>this.banner).size) {
       this.isBannerInputTypeAd = false;
       this.url = (<BannerClassification>this.banner).url;
-      this.bannerChosenSize = {
-        width: `${(<BannerClassification>this.banner).width}`,
-        height: `${(<BannerClassification>this.banner).height}`
-      };
+
+      const size = (<BannerClassification>this.banner).size;
+      if (size.includes('x', 1)) {
+        const bannerSizeArray = size.split('x');
+        this.bannerChosenSize = {
+          width: bannerSizeArray[0] + 'px',
+          height: bannerSizeArray[1] + 'px',
+        };
+      } else {
+        this.bannerChosenSize = {
+          width: '100%',
+          height: '100%',
+        };
+      }
     } else {
       this.isBannerInputTypeAd = true;
       this.url = (<Ad>this.banner).url;
       const bannerSizeArray = (<Ad>this.banner).creativeSize.split('x');
       this.bannerChosenSize = {
-        width: bannerSizeArray[0],
-        height: bannerSizeArray[1]
+        width: bannerSizeArray[0] + 'px',
+        height: bannerSizeArray[1] + 'px',
       };
     }
 
@@ -60,11 +70,7 @@ export class BannerPreviewComponent implements OnInit {
     fetch(url)
       .then(res => {
         this.isLoading = false;
-        if (res.status === HTTP_OK) {
-          this.showIframe = true;
-        } else {
-          this.showIframe = false;
-        }
+        this.showIframe = res.status === HTTP_OK;
       })
       .catch(() => {
         this.showIframe = false;

src/app/models/classifier.model.ts

@@ -1,9 +1,8 @@
 interface BannerClassification {
   bannerId: number;
   url: string,
+  size: string,
   type: string,
-  width: number,
-  height: number,
   sourceHost: string;
   landingUrl: string;
   budget?: number;

src/app/publisher/classifier/classifier-list-item/classifier-list-item.component.html

@@ -5,7 +5,7 @@
   <td class="col-xs-1 col">
     <span
       class="text-left dwmth-copy dwmth-copy--blue dwmth-copy--small"> {{ adTypesEnum[bannerClassification.type] }} </span>
-    <span class="text-left dwmth-copy dwmth-copy--bold"> {{ bannerClassification.width }} x {{ bannerClassification.height }} </span>
+    <span class="text-left dwmth-copy dwmth-copy--bold"> {{ bannerClassification.size }} </span>
   </td>
   <td class="col-xs-2 col classifier-list-item__link">
     <a class="dwmth-copy dwmth-copy dwmth-copy--no-wrap"