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

dev #13538

Browse Source 
перенес кнопку, вынес функционал в директиву
This commit is contained in:
gofnnp 2023-01-12 01:57:32 +04:00
parent a0de9cbb61
commit 5e69d6e5c5
17 changed files with 272 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
angular/package.json
View File

@ -3,7 +3,7 @@
"version": "0.0.3",
"scripts": {
"ng": "ng",
"start": "ng serve --host 192.168.0.12",
"start": "ng serve --host 192.168.0.14",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"

2
angular/src/app/app.constants.ts
View File

@ -49,7 +49,7 @@ export const PageListWithBonus: Page[] = [
description: '',
resName: 'ref-system',
onSideBar: true,
},
}
];
export const orderStatuses: OrderStatus = {

4
angular/src/app/app.module.ts
View File

@ -33,6 +33,7 @@ import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';
import { MessagingService } from './services/messaging.service';
import { NotFoundComponent } from './pages/not-found/not-found.component';
import { DownloadAppDirective } from './directives/download-app.directive';
@NgModule({
declarations: [
@ -49,7 +50,8 @@ import { NotFoundComponent } from './pages/not-found/not-found.component';
FooterButtonsComponent,
UserDataComponent,
RefSystemComponent,
NotFoundComponent
NotFoundComponent,
DownloadAppDirective
],
imports: [
BrowserModule,

5
angular/src/app/components/footer-buttons/footer-buttons.component.html
View File

@ -1,12 +1,11 @@
<div class="footer-buttons-container">
<!-- *ngIf="deferredPrompt && token?.length" -->
<button
<!-- <button
*ngIf="((deviceType == 'android' && deferredPrompt) || deviceType == 'ios') && token?.length"
class="footer-buttons-container__button download"
(click)="downloadPWA()"
>
<img src="./assets/download.svg" alt="download" />
</button>
</button> -->
<button
*ngIf="!isPermissionNotifications && token?.length"
class="footer-buttons-container__button"

22
angular/src/app/components/footer-buttons/footer-buttons.component.ts
View File

@ -7,37 +7,15 @@ import { MessageService } from 'primeng/api';
styleUrls: ['./footer-buttons.component.scss']
})
export class FooterButtonsComponent implements OnInit {
@Input() deferredPrompt: any;
@Input() token!: string;
@Input() isPermissionNotifications!: boolean;
@Output() downloadingPWA = new EventEmitter<null>();
@Output() requestingPermission = new EventEmitter<null>();
public deviceType: 'ios' | 'android' | null = null;
constructor(
private messageService: MessageService,
) { }
ngOnInit(): void {
this.getTypeDevice()
}
getTypeDevice() {
const userAgent = window.navigator.userAgent.toLowerCase()
const ios = /iphone|ipod|ipad/.test( userAgent );
this.deviceType = ios ? 'ios' : 'android'
}
downloadPWA() {
if (this.deviceType === 'ios') {
this.messageService.add({
severity: 'custom',
summary: `Для установки нажмите на кнопку поделиться в Вашем браузере и выберите пункт 'На экран «Домой»'`,
sticky: true
});
return
}
this.downloadingPWA.emit(null)
}
requestPermission() {

8
angular/src/app/directives/download-app.directive.spec.ts Normal file
View File

@ -0,0 +1,8 @@
import { DownloadAppDirective } from './download-app.directive';
describe('DownloadAppDirective', () => {
it('should create an instance', () => {
const directive = new DownloadAppDirective();
expect(directive).toBeTruthy();
});
});

60
angular/src/app/directives/download-app.directive.ts Normal file
View File

@ -0,0 +1,60 @@
import { Directive, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';
import { MessageService } from 'primeng/api';
@Directive({
selector: '[appDownloadApp]',
})
export class DownloadAppDirective implements OnInit {
public deviceType: 'ios' | 'android' | null = null;
public deferredPrompt: any;
constructor(
private messageService: MessageService,
public renderer: Renderer2,
private el: ElementRef
) {}
ngOnInit(): void {
this.getTypeDevice();
this.renderer.listen('window', 'beforeinstallprompt', (e) => {
e.preventDefault();
this.deferredPrompt = e;
});
this.renderer.listen('window', 'appinstalled', (evt) => {
console.log('INSTALLED!!!');
});
if ((this.deviceType == 'android' && this.deferredPrompt) || this.deviceType == 'ios') {
this.el.nativeElement.style.display = 'none'
}
}
getTypeDevice() {
const userAgent = window.navigator.userAgent.toLowerCase();
const ios = /iphone|ipod|ipad/.test(userAgent);
this.deviceType = ios ? 'ios' : 'android';
}
@HostListener('click', ['$event'])
downloadApp(event: MouseEvent) {
if (event) {
event.preventDefault();
}
if (!this.deferredPrompt) {
this.messageService.add({
severity: 'error',
summary: 'Не поддерживается в Вашем браузере!',
});
return;
}
this.deferredPrompt.prompt();
this.deferredPrompt.userChoice.then((res: any) => {
if (res.outcome === 'accepted') {
this.messageService.add({
severity: 'custom',
summary: 'Спасибо за установку!',
});
console.log('User Accepted!!!');
}
this.deferredPrompt = null;
});
}
}

70
angular/src/app/pages/account/account.component.html
View File

@ -1,11 +1,19 @@
<div [ngClass]="{
woocommerce: true,
'auth-page': currentPage.code === PageCode.Auth
}">
<div *ngIf="currentPage.code !== PageCode.Auth" class="top-left-attribute"></div>
<div
[ngClass]="{
woocommerce: true,
'auth-page': currentPage.code === PageCode.Auth
}"
>
<div
*ngIf="currentPage.code !== PageCode.Auth"
class="top-left-attribute"
></div>
<div [ngSwitch]="currentPage.code" class="">
<ng-container *ngSwitchCase="PageCode.Auth">
<app-auth [handleHttpError]="handleHttpErrorFunc" (phoneConfirmed)="phoneConfirmed()"></app-auth>
<app-auth
[handleHttpError]="handleHttpErrorFunc"
(phoneConfirmed)="phoneConfirmed()"
></app-auth>
</ng-container>
<ng-container *ngSwitchCase="PageCode.Orders">
<app-orders></app-orders>
@ -20,15 +28,27 @@
<app-ref-system></app-ref-system>
</ng-container>
</div>
<nav *ngIf="currentPage.code !== PageCode.Auth" class="woocommerce-MyAccount-navigation">
<nav
*ngIf="currentPage.code !== PageCode.Auth"
class="woocommerce-MyAccount-navigation"
>
<ul>
<ng-container *ngFor="let page of pageList; let index = index">
<li *ngIf="page.onSideBar" class="woocommerce-MyAccount-navigation-link" [ngClass]="{
<li
*ngIf="page.onSideBar"
class="woocommerce-MyAccount-navigation-link"
[ngClass]="{
'is-active': page === currentPage,
first: index === 1
}" (click)="changePage($event, page)">
}"
(click)="changePage($event, page)"
>
<div class="container">
<img src="{{ './assets/menu-icons/' + page.resName + '.png' }}" alt="Иконка меню" />
<img
style="width: 36px"
src="{{ './assets/menu-icons/' + page.resName + '.png' }}"
alt="Иконка меню"
/>
<div class="menu-item-info">
<a href="#">{{ page.name }}</a>
<p>{{ page.description }}</p>
@ -36,7 +56,26 @@
</div>
</li>
</ng-container>
<li class="woocommerce-MyAccount-navigation-link" (click)="logout($event)">
<li
class="woocommerce-MyAccount-navigation-link"
*appDownloadApp
>
<div class="container">
<img
style="width: 36px"
src="./assets/menu-icons/download-app.png"
alt="Иконка меню"
/>
<div class="menu-item-info">
<a href="#">Установить приложение</a>
<!-- <p>{{ page.description }}</p> -->
</div>
</div>
</li>
<li
class="woocommerce-MyAccount-navigation-link"
(click)="logout($event)"
>
<div class="container">
<img src="./assets/menu-icons/exit.png" alt="Иконка меню" />
<div class="menu-item-info">
@ -46,9 +85,12 @@
</li>
</ul>
</nav>
<span class="version" [ngClass]="{
<span
class="version"
[ngClass]="{
version: true
}">
}"
>
v{{ version }}
</span>
</div>
</div>

4
angular/src/app/pages/account/account.component.ts
View File

@ -133,6 +133,10 @@ export class AccountComponent implements OnInit {
changePage(event: MouseEvent, page: Page): void {
event.preventDefault();
if (page.resName === 'download-app') {
return
}
this.currentPage = page;
// let params = new HttpParams();
// params = params.append('activePage', this.currentPage.code);

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

@ -1,7 +1,16 @@
import { Component, Inject, OnInit } from '@angular/core';
import { lastValueFrom } from 'rxjs';
import { orderStatuses, PageList, PageListWithBonus } from 'src/app/app.constants';
import { BonusProgramAccount, Page, Purchase, Transaction } from 'src/app/interface/data';
import {
orderStatuses,
PageList,
PageListWithBonus,
} from 'src/app/app.constants';
import {
BonusProgramAccount,
Page,
Purchase,
Transaction,
} from 'src/app/interface/data';
import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
import * as moment from 'moment-timezone';
import * as barcode from 'jsbarcode';
@ -10,20 +19,22 @@ import { AppleWalletService } from 'src/app/services/apple-wallet.service';
import { CookiesService } from 'src/app/services/cookies.service';
import { DOCUMENT } from '@angular/common';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-bonus-program',
templateUrl: './bonus-program.component.html',
styleUrls: ['./bonus-program.component.scss']
styleUrls: ['./bonus-program.component.scss'],
})
export class BonusProgramComponent implements OnInit {
public accountData!: BonusProgramAccount;
public purchases: Purchase[] = [];
public loadingBonuses: boolean = false;
readonly orderStatuses = orderStatuses;
readonly moment = moment;
readonly pageList = environment.hasBonusProgram ? PageListWithBonus : PageList;
readonly pageList = environment.hasBonusProgram
? PageListWithBonus
: PageList;
public currentPage: Page = this.pageList[1];
public userName: string = '';
public deviceType: 'ios' | 'android' | null = null;
@ -34,67 +45,98 @@ export class BonusProgramComponent implements OnInit {
private cookiesService: CookiesService,
@Inject(DOCUMENT) private document: Document,
private http: HttpClient,
) { }
private messageService: MessageService,
) {}
ngOnInit(): void {
this.getAccountData();
this.getTypeDevice()
this.getTypeDevice();
}
getTypeDevice() {
const userAgent = window.navigator.userAgent.toLowerCase()
const ios = /iphone|ipod|ipad/.test( userAgent );
this.deviceType = ios ? 'ios' : 'android'
const userAgent = window.navigator.userAgent.toLowerCase();
const ios = /iphone|ipod|ipad/.test(userAgent);
this.deviceType = ios ? 'ios' : 'android';
}
async getAccountData(): Promise<void>{
async getAccountData(): Promise<void> {
this.loadingBonuses = true;
this.jsonrpc.rpc({
method: 'getAdditionalInfo',
params: []
}, RpcService.authService, true).subscribe({
next: (res) => {
this.userName = res.data.first_name
},
error: (err) => {
console.error('Error: ', err)
}
});
this.jsonrpc
.rpc(
{
method: 'getAdditionalInfo',
params: [],
},
RpcService.authService,
true
)
.subscribe({
next: (res) => {
this.userName = res?.data?.first_name;
},
error: (err) => {
console.error('Error: ', err);
},
});
this.accountData = (await lastValueFrom(
this.jsonrpc.rpc({
method: 'GetAccounts',
params: []
},
RpcService.bonusService
)))['Cards'][0];
const getAccount = await lastValueFrom(
this.jsonrpc.rpc(
{
method: 'GetAccounts',
params: [],
},
RpcService.bonusService
)
);
this.accountData = getAccount && getAccount['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();
const transactions: Transaction[] = (await lastValueFrom(
this.jsonrpc.rpc(
{
method: 'GetAccountTransactions',
params: []
},
RpcService.bonusService
)))['Transactions'];
if (this.accountData) {
barcode('#barcode')
.options({ font: 'OCR-B' }) // Will affect all barcodes
.EAN13(`${this.accountData.CardNumber}`.padStart(12, '0'), {
fontSize: 18,
textMargin: 0,
})
.render();
}
const getTransactions = (
await lastValueFrom(
this.jsonrpc.rpc(
{
method: 'GetAccountTransactions',
params: [],
},
RpcService.bonusService
)
)
)
if (!getTransactions) {
this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
return
}
const transactions: Transaction[] = getTransactions && getTransactions['Transactions'];
const purchases: Purchase[] = (await lastValueFrom(
this.jsonrpc.rpc(
{
method: 'GetAccountPurchase',
params: []
},
RpcService.bonusService
)))['Purchases'];
const getPurchases = (
await lastValueFrom(
this.jsonrpc.rpc(
{
method: 'GetAccountPurchase',
params: [],
},
RpcService.bonusService
)
)
)
if (!getPurchases) {
this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
return
}
const purchases: Purchase[] = getPurchases && getPurchases['Purchases'];
this.purchases = purchases.map<Purchase>((purchase) => {
const id = purchase.ID.slice(0,36).toLowerCase();
this.purchases = purchases && purchases.map<Purchase>((purchase) => {
const id = purchase.ID.slice(0, 36).toLowerCase();
purchase.Transactions = transactions.filter((transaction) => {
const same = transaction.Purchase === id;
transaction.HasPurchase = same;
@ -102,28 +144,27 @@ export class BonusProgramComponent implements OnInit {
});
return purchase;
});
transactions.forEach((transaction) => {
if(!transaction.HasPurchase){
this.purchases.push({
ID: transaction.ID,
transactions && transactions.forEach((transaction) => {
if (!transaction.HasPurchase) {
this.purchases.push({
ID: transaction.ID,
PurchaseDate: transaction.Date,
Transactions: [transaction],
IsSingleTransaction: true,
})
});
}
});
this.purchases = this.purchases.sort((a,b) => {
this.purchases = this.purchases && this.purchases.sort((a, b) => {
return moment(a.PurchaseDate).date() - moment(b.PurchaseDate).date();
});
}
async addCardToWallet(e: any) {
e.preventDefault()
const token = this.cookiesService.getItem('token')
const accountData = (await lastValueFrom(
this.jsonrpc
.rpc(
e.preventDefault();
const token = this.cookiesService.getItem('token');
const accountData = (
await lastValueFrom(
this.jsonrpc.rpc(
{
method: 'getTokenData',
params: [],
@ -131,19 +172,17 @@ export class BonusProgramComponent implements OnInit {
RpcService.authService,
true
)
)).data
)
).data;
if (token && accountData.user_id) {
this.appleWallet.generateCard(token, accountData.user_id).subscribe({
next: (res: any) => {
this.document.location.href = res.url
this.document.location.href = res.url;
},
error: (err) => {
console.log('Error: ', err);
}
})
},
});
}
}
}

6
angular/src/app/pages/account/orders/orders.component.html
View File

@ -67,7 +67,7 @@
</tbody>
</table>
<p
*ngIf="purchases.length !== purchasesShortArray.length"
*ngIf="purchases?.length !== purchasesShortArray?.length"
class="show-more-orders"
(click)="getMoreOrders()"
>
@ -75,12 +75,12 @@
</p>
<p-progressSpinner
*ngIf="ordersLoadingStatus"
[style]="{ width: '100%' }"
[style]="{ display: 'block' }"
strokeWidth="2"
styleClass="angular-spinner"
></p-progressSpinner>
<p
*ngIf="purchases.length === 0 && !ordersLoadingStatus"
*ngIf="purchases?.length === 0 && !ordersLoadingStatus"
style="width: 100%; text-align: center"
>
Нет заказов

28
angular/src/app/pages/account/orders/orders.component.ts
View File

@ -5,11 +5,12 @@ import { Purchase } from 'src/app/interface/data';
import * as moment from 'moment-timezone';
import { lastValueFrom } from 'rxjs';
import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss']
styleUrls: ['./orders.component.scss'],
})
export class OrdersComponent implements OnInit {
@Input() handleHttpError!: (error: HttpErrorResponse) => void;
@ -23,24 +24,31 @@ export class OrdersComponent implements OnInit {
private route: ActivatedRoute,
private router: Router,
private jsonrpc: JsonrpcService,
) { }
private messageService: MessageService,
) {}
ngOnInit(): void {
this.getOrders()
this.getOrders();
}
async getOrders(){
const purchases: Purchase[] = (await lastValueFrom(
async getOrders() {
const getPurchases = await lastValueFrom(
this.jsonrpc.rpc(
{
method: 'GetAccountPurchase',
params: []
params: [],
},
RpcService.bonusService
)))['Purchases'];
)
);
if (!getPurchases) {
this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
return
}
const purchases: Purchase[] = getPurchases && getPurchases['Purchases'];
this.purchases = purchases.map<Purchase>((purchase) => {
const id = purchase.ID.slice(0,36).toLowerCase();
this.purchases = purchases && purchases.map<Purchase>((purchase) => {
const id = purchase.ID.slice(0, 36).toLowerCase();
// purchase.Transactions = transactions.filter((transaction) => {
// const same = transaction.Purchase === id;
// transaction.HasPurchase = same;
@ -48,7 +56,7 @@ export class OrdersComponent implements OnInit {
// });
return purchase;
});
this.purchasesShortArray = this.purchases.slice(0, this.lastViewOrder)
this.purchasesShortArray = this.purchases && this.purchases.slice(0, this.lastViewOrder);
this.ordersLoadingStatus = false;
}

1
angular/src/app/pages/account/ref-system/ref-system.component.ts
View File

@ -31,7 +31,6 @@ export class RefSystemComponent implements OnInit {
true
)
)).data
console.log(accountData);
this.refUrl += accountData.user_id
this.loading = false

4
angular/src/app/pages/account/user-data/user-data.component.ts
View File

@ -34,6 +34,10 @@ export class UserDataComponent implements OnInit {
params: []
}, RpcService.authService, true).subscribe({
next: (res) => {
if (!res.data) {
this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
return
}
const { first_name, birthdate, gender } = res.data
this.userData = { first_name, birthdate, gender }
this.createUserDataForm({...this.userData})

4
angular/src/app/pages/main/main.component.html
View File

@ -1,7 +1,7 @@
<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()"
<app-footer-buttons [token]="token"
[isPermissionNotifications]="isPermissionNotifications"
(requestingPermission)="requestPermission()"></app-footer-buttons>
</div>

45
angular/src/app/pages/main/main.component.ts
View File

@ -24,7 +24,6 @@ export class MainComponent implements OnInit {
private cardComponent!: ComponentRef<CardComponent>;
private accountComponent!: ComponentRef<AccountComponent>;
public messagingToken!: string | null;
public deferredPrompt: any;
public isPermissionNotifications: boolean = false;
public token = '';
public message: any;
@ -32,20 +31,11 @@ export class MainComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private viewContainerRef: ViewContainerRef,
private afMessaging: AngularFireMessaging,
public el: ElementRef,
public renderer: Renderer2,
private messageService: MessageService,
private messagingService: MessagingService,
private cookiesService: CookiesService,
) {
renderer.listen('window', 'appinstalled', (evt) => {
console.log('INSTALLED!!!');
});
renderer.listen('window', 'beforeinstallprompt', (e) => {
e.preventDefault();
this.deferredPrompt = e;
});
route.queryParams.subscribe((params) => {
if (params['token']) {
this.token = params['token']
@ -61,27 +51,6 @@ export class MainComponent implements OnInit {
// this.checkRequestPermission()
}
downloadPWA() {
if (!this.deferredPrompt) {
this.messageService.add({
severity: 'error',
summary: 'Не поддерживается в Вашем браузере!',
});
return;
}
this.deferredPrompt.prompt();
this.deferredPrompt.userChoice.then((res: any) => {
if (res.outcome === 'accepted') {
this.messageService.add({
severity: 'custom',
summary: 'Спасибо за установку!',
});
console.log('User Accepted!!!');
}
this.deferredPrompt = null;
});
}
checkRequestPermission() {
this.isPermissionNotifications =
Notification.permission !== 'granted' ? false : true;
@ -100,20 +69,6 @@ export class MainComponent implements OnInit {
this.message = this.messagingService.currentMessage;
}
}
// test function
copyMessage(val: string | null) {
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
if (val) selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}
appendCard(): void {
const route = this.route.snapshot.url[0]?.path;

BIN
angular/src/assets/menu-icons/download-app.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB