gofnnp/h-usersite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #12401

Browse Source 
правки страницы заполнить анкету и добавил кнопки уведомлений и pwa(состояние тестинг)
This commit is contained in:
Kataev Denis 2022-09-15 12:32:15 +04:00
parent 4afc8d0db3
commit 707b86b105
7 changed files with 78 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/footer-buttons/footer-buttons.component.scss
View File

@ -4,6 +4,7 @@
width: 100%;
display: flex;
justify-content: center;
z-index: 9999;
.footer-buttons-container {
max-width: 400px;
width: 90vw;
@ -11,6 +12,7 @@
width: 100%;
height: 34px;
background: #09467f;
border: solid #fff 1px !important;
color: #fff;
border-radius: 5px;
font-weight: 600;

126
src/app/pages/account/bonus-program/bonus-program.component.html
View File

@ -1,88 +1,50 @@
<div class="woocommerce-MyAccount-content">
<h2>{{currentPage.name}}</h2>
<!-- <p>{{currentPage.description}}</p> -->
<div style="display: flex;justify-content: center;">
<div class="card-container">
<div class="card-container__header">
<img src="./assets/logo.svg" alt="Логотип карта">
<span *ngIf="accountData">#{{accountData.CardNumber}}</span>
</div>
<div class="card-container__decorative-pattern">
<!-- <div class="imgs-row"></div>
<h2>{{ currentPage.name }}</h2>
<!-- <p>{{currentPage.description}}</p> -->
<div style="display: flex; justify-content: center">
<div class="card-container">
<div class="card-container__header">
<img src="./assets/logo.svg" alt="Логотип карта" />
<span *ngIf="accountData">#{{ accountData.CardNumber }}</span>
</div>
<div class="card-container__decorative-pattern">
<!-- <div class="imgs-row"></div>
<div class="imgs-row" style="background-position-x: -22px;"></div>
<div class="imgs-row"></div> -->
<img src="./assets/card-decorative-pattern.svg" alt="">
</div>
<div class="card-container__content">
<div class="info" *ngIf="accountData">
<div class="row">
<span class="key">Имя</span>
<span class="value" *ngIf="accountData.BonusProgramName">{{accountData.BonusProgramName}}</span>
<span class="value" *ngIf="!accountData.BonusProgramName">Не задано</span>
</div>
<div class="row">
<span class="key">Баланс карты</span>
<span class="value">{{accountData.Bonuses}}</span>
</div>
</div>
<div class="card-container__barcode-container">
<svg id="barcode"></svg>
</div>
</div>
<img src="./assets/card-decorative-pattern.svg" alt="" />
</div>
<div class="card-container__content">
<div class="info">
<div *ngIf="accountData" class="row">
<span class="key">Имя</span>
<span class="value" *ngIf="accountData.BonusProgramName">{{
accountData.BonusProgramName
}}</span>
<span class="value" *ngIf="!accountData.BonusProgramName"
>Не задано</span
>
</div>
<div *ngIf="accountData" class="row">
<span class="key">Баланс карты</span>
<span class="value">{{ accountData.Bonuses }}</span>
</div>
</div>
<div class="card-container__barcode-container">
<svg
id="barcode"
[ngClass]="{
hidden: loadingBonuses
}"
></svg>
<p-progressSpinner
*ngIf="loadingBonuses"
[style]="{ width: '100%' }"
[ngStyle]="{width: '90px'}"
strokeWidth="2"
styleClass="angular-spinner"
></p-progressSpinner>
</div>
</div>
</div>
<!-- <div [ngClass]="{
'card-content': true,
'active_back': isCardBack
}" (click)="rotateCard()">
<div class="card-content__front">
<p-progressSpinner
*ngIf="loadingBonuses"
[style]="{ width: '100%', height: '100%' }"
strokeWidth="2"
styleClass="angular-spinner"
></p-progressSpinner>
<div *ngIf="!loadingBonuses">
<div class="card-content__logo">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: fit-content;"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#03d1be" stroke="none">
<path d="M530 4151 c-55 -17 -110 -52 -144 -93 -70 -81 -66 5 -66 -1499 0
-1547 -7 -1422 86 -1516 90 -91 -109 -83 2154 -83 2211 0 2056 -5 2138 66 24
20 55 59 70 88 l27 51 0 1395 0 1395 -27 50 c-31 59 -67 94 -128 126 l-45 24
-2020 2 c-1111 1 -2031 -2 -2045 -6z m3876 -327 c57 -27 74 -74 74 -199 l0
-105 -1920 0 -1920 0 0 108 c0 124 15 166 71 194 32 17 141 18 1847 18 1660 0
1817 -1 1848 -16z m74 -1852 c0 -550 -1 -589 -18 -621 -10 -19 -34 -43 -53
-53 -32 -17 -110 -18 -1849 -18 -1708 0 -1817 1 -1850 18 -72 35 -70 17 -70
675 l0 587 1920 0 1920 0 0 -588z"/>
<path d="M960 2000 l0 -80 960 0 960 0 0 80 0 80 -960 0 -960 0 0 -80z"/>
<path d="M3520 1840 l0 -240 320 0 320 0 0 240 0 240 -320 0 -320 0 0 -240z"/>
<path d="M960 1680 l0 -80 480 0 480 0 0 80 0 80 -480 0 -480 0 0 -80z"/>
</g>
</svg>
<h3 class="title">Card Project</h3>
</div>
<div class="card-content__footer">
<div class="card-content__number">
<span>#{{accountData.CardNumber}}</span>
</div>
<div class="card-content__bonuses">
<span>Доступно:
<span class="count">
{{accountData.Bonuses}}
</span>
</span>
</div>
</div>
</div>
</div>
<div class="card-content__back">
<div class="card-content__barcode-container">
<svg id="barcode"></svg>
</div>
</div>
</div> -->
</div>
</div>

11
src/app/pages/account/bonus-program/bonus-program.component.scss
View File

@ -103,6 +103,10 @@
#barcode {
border-radius: 16px;
&.hidden {
display: none;
width: 0;
}
}
}
}
@ -186,13 +190,6 @@
font-size: 22px;
}
}
&__barcode-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
}
.explanation {

7
src/app/pages/account/bonus-program/bonus-program.component.ts
View File

@ -17,7 +17,6 @@ export class BonusProgramComponent implements OnInit {
public accountData!: BonusProgramAccount;
public purchases: Purchase[] = [];
public loadingBonuses: boolean = false;
public isCardBack: boolean = false;
readonly orderStatuses = orderStatuses;
readonly moment = moment;
readonly pageList = environment.hasBonusProgram ? PageListWithBonus : PageList;
@ -31,10 +30,6 @@ export class BonusProgramComponent implements OnInit {
this.getAccountData();
}
rotateCard() {
this.isCardBack = !this.isCardBack
}
async getAccountData(): Promise<void>{
this.loadingBonuses = true;
this.accountData = (await lastValueFrom(
@ -44,12 +39,12 @@ export class BonusProgramComponent implements OnInit {
},
RpcService.bonusService
)))['Cards'][0];
this.loadingBonuses = false;
barcode("#barcode")
.options({font: "OCR-B"}) // Will affect all barcodes
.EAN13(`${this.accountData.CardNumber}`.padStart(12, "0"), {fontSize: 18, textMargin: 0})
.render();
this.loadingBonuses = false;
const transactions: Transaction[] = (await lastValueFrom(
this.jsonrpc.rpc(
{

19
src/app/pages/account/user-data/user-data.component.scss
View File

@ -81,9 +81,9 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-size: 1rem;
color: #495057;
padding: 0.5rem 0.75rem;
padding-left: 13px;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
@ -93,6 +93,8 @@
background: #FFFFFF;
border: 1px solid #B8DEFF;
border-radius: 15px;
font-size: 14px;
text-align: left;
&.ng-dirty.ng-invalid {
border-color: red;
}
@ -102,13 +104,18 @@
}
select {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
background: #FFFFFF;
border: 1px solid #B8DEFF;
border-radius: 15px;
width: 100%;
height: 45px;
padding: 0 10px;
font-size: 14px;
text-align: left;
color: #495057;
// option[value=""][disabled] {
// display: none;
// }
@ -158,12 +165,16 @@
position: relative;
&::before {
content: 'Выберите пол';
top: 3px;
position: absolute;
top: 3px;
left: 13px;
height: 100%;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
font-family: inherit;
color: #6c757d;
font-size: 14px;
}
&.hidden::before {
display: none;

2
src/app/pages/main/main.component.html
View File

@ -1,5 +1,5 @@
<div class="main-container">
<app-navbar></app-navbar>
<p-toast position="top-center"></p-toast>
<!-- <app-footer-buttons [token]="token" [deferredPrompt]="deferredPrompt" [isPermissionNotifications]="isPermissionNotifications" (downloadingPWA)="downloadPWA()" (requestingPermission)="requestPermission()"></app-footer-buttons> -->
<app-footer-buttons [token]="token" [deferredPrompt]="deferredPrompt" [isPermissionNotifications]="isPermissionNotifications" (downloadingPWA)="downloadPWA()" (requestingPermission)="requestPermission()"></app-footer-buttons>
</div>

22
src/app/pages/main/main.component.ts
View File

@ -27,17 +27,17 @@ export class MainComponent implements OnInit {
public renderer: Renderer2,
private messageService: MessageService
) {
// renderer.listen('window', 'appinstalled', (evt) => {
// console.log('INSTALLED!!!')
// })
// renderer.listen('window', 'beforeinstallprompt', (e) => {
// e.preventDefault()
// this.deferredPrompt = e
// })
// route.queryParams.subscribe( (params) => {
// console.log('####: ', params)
// if (params['token']) this.token = params['token']
// });
renderer.listen('window', 'appinstalled', (evt) => {
console.log('INSTALLED!!!')
})
renderer.listen('window', 'beforeinstallprompt', (e) => {
e.preventDefault()
this.deferredPrompt = e
})
route.queryParams.subscribe( (params) => {
console.log('####: ', params)
if (params['token']) this.token = params['token']
});
}
ngOnInit(): void {