web/satellite: estimation table surge added

Change-Id: Ied7d737174d357076f0735091cc0a18c9e95b464
This commit is contained in:
NickolaiYurchenko 2020-08-04 13:57:24 +03:00 committed by Nikolay Yurchenko
parent 3fbbe1847e
commit 5ed0038ace
3 changed files with 57 additions and 22 deletions

View File

@ -84,22 +84,30 @@
<p class="estimation-table-container__held-area__text">Held back</p>
<p class="estimation-table-container__held-area__text">-{{ held | centsToDollars }}</p>
</div>
<div class="estimation-table-container__total-area">
<div class="estimation-table-container__held-area" v-if="!isCurrentPeriod && disposed > 0">
<p class="estimation-table-container__held-area__text">Held returned</p>
<p class="estimation-table-container__held-area__text">{{ disposed | centsToDollars }}</p>
</div>
<div class="estimation-table-container__net-total-area">
<div class="column justify-start column-1">
<p class="estimation-table-container__total-area__text">TOTAL</p>
<p class="estimation-table-container__net-total-area__text">NET TOTAL</p>
</div>
<div class="column justify-start column-2"></div>
<div class="column justify-start column-3"></div>
<div class="column justify-start column-4">
<p class="estimation-table-container__total-area__text">{{ totalDiskSpace + 'm' }}</p>
<p class="estimation-table-container__net-total-area__text">{{ totalDiskSpace + 'm' }}</p>
</div>
<div class="column justify-start column-5">
<p class="estimation-table-container__total-area__text">{{ totalBandwidth }}</p>
<p class="estimation-table-container__net-total-area__text">{{ totalBandwidth }}</p>
</div>
<div class="column justify-end column-6">
<p class="estimation-table-container__total-area__text">{{ totalPayout | centsToDollars }}</p>
<p class="estimation-table-container__net-total-area__text">{{ totalPayout | centsToDollars }}</p>
</div>
</div>
<div class="estimation-table-container__total-area" v-if="!isCurrentPeriod && heldInfo.surgePercent">
<p class="estimation-table-container__total-area__text">Total + Surge {{ surgePercent }}</p>
<p class="estimation-table-container__total-area__text">{{ heldInfo.paid | centsToDollars }}</p>
</div>
</div>
<div class="no-data-container" v-else>
<img class="no-data-container__image" src="@/../static/images/payments/NoData.png">
@ -201,6 +209,13 @@ export default class EstimationArea extends Vue {
return !!this.$store.state.node.selectedSatellite.id;
}
/**
* Returns surge percent if single month selected.
*/
public get surgePercent(): string {
return !this.$store.state.payoutModule.periodRange.start ? `(${this.heldInfo.surgePercent}%)` : '';
}
/**
* Indicates if payout data is unavailable.
*/
@ -233,6 +248,13 @@ export default class EstimationArea extends Vue {
return this.estimatedHeld();
}
/**
* Returns calculated or stored returned held amount.
*/
public get disposed(): number {
return this.heldInfo.disposed;
}
/**
* Returns calculated or stored total payout by selected period.
*/
@ -241,7 +263,7 @@ export default class EstimationArea extends Vue {
return this.heldInfo.paid;
}
return this.grossTotal - this.held;
return this.heldInfo.paidWithoutSurge;
}
/**
@ -517,6 +539,23 @@ export default class EstimationArea extends Vue {
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #a9b5c1;
&__text {
font-family: 'font_regular', sans-serif;
font-size: 14px;
color: var(--regular-text-color);
}
}
&__net-total-area,
&__total-area {
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
width: calc(100% - 32px);
height: 56px;
&__text {
font-family: 'font_bold', sans-serif;
@ -526,19 +565,9 @@ export default class EstimationArea extends Vue {
}
&__total-area {
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
width: calc(100% - 32px);
height: 56px;
justify-content: space-between;
background-color: var(--estimation-table-total-container-color);
&__text {
font-family: 'font_bold', sans-serif;
font-size: 14px;
color: var(--regular-text-color);
}
}
}

View File

@ -37,6 +37,7 @@ export class HeldInfo {
public owed: number = 0,
public disposed: number = 0,
public paid: number = 0,
public paidWithoutSurge: number = 0,
) {}
}

View File

@ -296,6 +296,8 @@ export class PayoutHttpApi implements PayoutApi {
let owed: number = 0;
let disposed: number = 0;
let paid: number = 0;
let surgePercent: number = 0;
let paidWithoutSurge: number = 0;
data.forEach((paystub: any) => {
const surge = paystub.surgePercent === 0 ? 1 : paystub.surgePercent / 100;
@ -306,16 +308,18 @@ export class PayoutHttpApi implements PayoutApi {
usageGetRepair += paystub.usageGetRepair;
usagePutRepair += paystub.usagePutRepair;
usageGetAudit += paystub.usageGetAudit;
compAtRest += paystub.compAtRest / this.PRICE_DIVIDER * surge;
compGet += paystub.compGet / this.PRICE_DIVIDER * surge;
compAtRest += paystub.compAtRest / this.PRICE_DIVIDER;
compGet += paystub.compGet / this.PRICE_DIVIDER;
compPut += paystub.compPut / this.PRICE_DIVIDER;
compGetRepair += paystub.compGetRepair / this.PRICE_DIVIDER * surge;
compGetRepair += paystub.compGetRepair / this.PRICE_DIVIDER;
compPutRepair += paystub.compPutRepair / this.PRICE_DIVIDER;
compGetAudit += paystub.compGetAudit / this.PRICE_DIVIDER * surge;
compGetAudit += paystub.compGetAudit / this.PRICE_DIVIDER;
held += paystub.held / this.PRICE_DIVIDER;
owed += paystub.owed / this.PRICE_DIVIDER;
disposed += paystub.disposed / this.PRICE_DIVIDER;
paid += paystub.paid / this.PRICE_DIVIDER;
surgePercent = paystub.surgePercent;
paidWithoutSurge += paystub.paid / this.PRICE_DIVIDER / surge;
});
return new HeldInfo(
@ -331,11 +335,12 @@ export class PayoutHttpApi implements PayoutApi {
compGetRepair,
compPutRepair,
compGetAudit,
0,
surgePercent,
held,
owed,
disposed,
paid,
paidWithoutSurge,
);
}
}