This commit is contained in:
Park Byung Eun 2022-08-14 07:22:47 +00:00
parent 7172b4b9bf
commit ffda32c5e8
2 changed files with 302 additions and 164 deletions

View File

@ -1,105 +1,227 @@
<!-- <div>
<div
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
>
<div class="text-lg font-medium tracking-tight leading-6 truncate">
현재 접속자 & 전체회원 쪽지보내기
</div>
<div class="flex flex-col flex-auto">
<form
[formGroup]="targetForm"
autocomplete="off"
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
>
<mat-card>
<mat-card-content>
<div>
<span class="font-semibold mb-2">구분</span>
<mat-radio-group
class="flex flex-col w-1/3 pr-2"
[color]="'primary'"
[value]="'b'"
>
<mat-radio-button class="mb-2" [value]="'a'">
전체
</mat-radio-button>
<mat-radio-button class="mb-2" [value]="'b'">
현재접속자
</mat-radio-button>
<mat-radio-button [value]="'c'"> 본사 </mat-radio-button>
<mat-radio-button [value]="'d'"> 대본 </mat-radio-button>
<mat-radio-button [value]="'e'"> 부본 </mat-radio-button>
<mat-radio-button [value]="'f'"> 총판 </mat-radio-button>
<mat-radio-button [value]="'g'"> 매장 </mat-radio-button>
<mat-radio-button [value]="'h'"> 회원 </mat-radio-button>
</mat-radio-group>
</div>
<div>
<span class="font-semibold mb-2">대본아이디</span>
<mat-radio-group
class="flex flex-col w-1/3 pr-2"
[color]="'primary'"
[value]="'i'"
>
<mat-radio-button class="mb-2" [value]="'i'">
대본하부회원
</mat-radio-button>
</mat-radio-group>
<mat-form-field
fxFlex
class="bet-mat-form-field-wrapper-mb-0 mr-2"
>
<mat-select placeholder="선택">
<mat-option value="">선택</mat-option>
<mat-option value="">kgon2</mat-option>
<mat-option value="">bbc100</mat-option>
<mat-option value="">test00</mat-option>
<mat-option value="">qwer11</mat-option>
<mat-option value="">zxcv123</mat-option>
<mat-option value="">on01</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<span class="font-semibold mb-2">부본아이디</span>
<mat-radio-group
class="flex flex-col w-1/3 pr-2"
[color]="'primary'"
[value]="'j'"
>
<mat-radio-button class="mb-2" [value]="'j'">
부본하부회원
</mat-radio-button>
</mat-radio-group>
<mat-form-field
fxFlex
class="bet-mat-form-field-wrapper-mb-0 mr-2"
>
<mat-select placeholder="선택">
<mat-option value="">선택</mat-option>
<mat-option value="">kgon3</mat-option>
<mat-option value="">test33</mat-option>
<mat-option value="">aa2315</mat-option>
<mat-option value="">test770</mat-option>
<mat-option value="">zxcv12</mat-option>
<mat-option value="">on02</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="flex">
<mat-form-field class="w-1/3 pr-2">
<mat-label>제목</mat-label>
<input matInput />
</mat-form-field>
</div>
<div class="mt-8">
<mat-form-field
class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
>
<mat-label>글쓴이</mat-label>
<input matInput [formControlName]="'writer'" />
</mat-form-field>
</div>
<mat-form-field
class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
>
<textarea
matInput
[required]="true"
[rows]="5"
matTextareaAutosize
[formControlName]="'content'"
></textarea>
<mat-label>내용</mat-label>
</mat-form-field>
</mat-card-content>
<div>
<button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
쪽지보내기
</button>
</div>
<div>
<button mat-flat-button class="bet-mat-small-8" [color]="'warn'">
취소
</button>
</div>
</mat-card>
</form>
</div>
</div>
</div> -->
<div class="flex flex-col flex-auto min-w-0"> <div class="flex flex-col flex-auto min-w-0">
<div class="flex-auto border-t -mt-px pt-4 sm:pt-6"> <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
<div class="w-full max-w-screen-xl mx-auto"> <div class="w-full max-w-screen-xl mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0"> <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
<!-- Budget distribution -->
<div <div
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden" class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
> >
<!-- Header --> <div class="text-lg font-medium tracking-tight leading-6 truncate">
<div
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
>
<!-- Loader -->
<div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
</div>
<!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">
현재접속자&쪽지전송 현재접속자&쪽지전송
</div> </div>
</div> <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
<!-- Main --> <table
<div class="flex flex-auto overflow-hidden"> class="min-w-240 overflow-y-visible"
<!-- Products list --> mat-table
<div [dataSource]="currentUserDataSource"
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
> >
<ng-container *ngIf="currentUsers$ | async as currentUsers"> <!-- Total -->
<ng-container <ng-container matColumnDef="idx">
*ngIf="currentUsers.length > 0; else noCurrentUser" <th mat-header-cell *matHeaderCellDef>번호</th>
> <td mat-cell *matCellDef="let info">
<div class="grid"> <span class="font-medium text-right"> {{ info.idx }} </span>
<!-- Header --> </td>
<div </ng-container>
class="current-user-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
> <!-- Expenses amount -->
<div>번호</div> <ng-container matColumnDef="highRank">
<div>상부</div> <th mat-header-cell *matHeaderCellDef>상위</th>
<div>
<td mat-cell *matCellDef="let info">{{ info.highRank }}</td>
</ng-container>
<ng-container matColumnDef="signinId">
<th mat-header-cell *matHeaderCellDef>
아이디 아이디
<hr style="margin: 7px 0px" /> <hr style="margin: 7px 0px" />
닉네임 닉네임
</div> </th>
<div> <td mat-cell *matCellDef="let info">
{{ info.signinId }}
<hr style="margin: 7px 0px" />
{{ info.nickname }}
</td>
</ng-container>
<!-- Expenses amount -->
<ng-container matColumnDef="level">
<th mat-header-cell *matHeaderCellDef>
등급 등급
<hr style="margin: 7px 0px" /> <hr style="margin: 7px 0px" />
레벨 레벨
</div> <hr style="margin: 7px 0px" />
<div>현재위치</div> 현재위치
<div class="hidden md:block">보유금</div> </th>
<div class="hidden md:block"> <td mat-cell *matCellDef="let info">
{{ info.rank }}
<hr style="margin: 7px 0px" />
{{ info.level }}
<hr style="margin: 7px 0px" />
{{ info.currentLocation }}
</td>
</ng-container>
<!-- Expenses amount -->
<ng-container matColumnDef="ownCash">
<th mat-header-cell *matHeaderCellDef>캐쉬</th>
<td mat-cell *matCellDef="let info">{{ info.ownCash }}</td>
</ng-container>
<!-- Expenses amount -->
<ng-container matColumnDef="comp">
<th mat-header-cell *matHeaderCellDef>
게임중머니 게임중머니
<hr style="margin: 7px 0px" /> <hr style="margin: 7px 0px" />
콤프 콤프
</div> </th>
<div class="hidden md:block">사이트</div> <td mat-cell *matCellDef="let info">
<div class="hidden md:block">카지노->캐쉬</div> {{ info.gameMoney }}
<div class="hidden lg:block">쪽지보내기</div>
<div class="hidden lg:block">배팅내역</div>
<div class="hidden lg:block">로그아웃</div>
</div>
<!-- Rows -->
<ng-container *ngIf="currentUsers$ | async as currentUsers">
<ng-container
*ngFor="
let currentUser of currentUsers;
trackBy: __trackByFn
"
>
<div
class="current-user-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
>
<div>{{ currentUser.idx }}</div>
<div>{{ currentUser.highRank }}</div>
<div>
<div>
{{ currentUser.signinId }}
</div>
<hr style="margin: 7px 0px" /> <hr style="margin: 7px 0px" />
{{ currentUser.nickname }} {{ info.ownComp }}
<hr style="margin: 7px 0px" /> </td>
{{ currentUser.currentLocation }} </ng-container>
</div>
<div> <!-- Expenses amount -->
{{ currentUser.rank }} <ng-container matColumnDef="site">
<hr style="margin: 7px 0px" /> <th mat-header-cell *matHeaderCellDef>사이트</th>
{{ currentUser.level }} <td mat-cell *matCellDef="let info">{{ info.siteAddress }}</td>
</div> </ng-container>
<div>{{ currentUser.currentLocation }}</div>
<div class="hidden md:block"> <!-- Expenses amount -->
{{ currentUser.ownCash }} <ng-container matColumnDef="casino">
<hr style="margin: 7px 0px" /> <th mat-header-cell *matHeaderCellDef>카지노->캐쉬</th>
{{ currentUser.ownComp }} <td mat-cell *matCellDef="let info">
</div>
<div class="hidden md:block">
{{ currentUser.gameMoney }}
<hr style="margin: 7px 0px" />
{{ currentUser.ownComp }}
</div>
<div class="hidden md:block">
{{ currentUser.siteAddress }}
</div>
<div class="hidden md:block">
<button <button
mat-flat-button mat-flat-button
class="bet-mat-small-8" class="bet-mat-small-8"
@ -115,17 +237,27 @@
> >
게임머니회수 게임머니회수
</button> </button>
</div> </td>
<div class="hidden lg:block"> </ng-container>
<!-- Expenses amount -->
<ng-container matColumnDef="etcBtn">
<th mat-header-cell *matHeaderCellDef>
쪽지보내기
<hr style="margin: 7px 0px" />
배팅내역
<hr style="margin: 7px 0px" />
로그아웃
</th>
<td mat-cell *matCellDef="let basicSetting">
<button <button
mat-flat-button mat-flat-button
class="bet-mat-small-8" class="bet-mat-small-8"
[color]="'primary'" [color]="'primary'"
> >
<mat-icon svgIcon="email-outline"></mat-icon> <mat-icon svgIcon="email-outline"> </mat-icon>
</button> </button>
</div> <hr style="margin: 7px 0px" />
<div class="hidden lg:block">
<button <button
mat-flat-button mat-flat-button
class="bet-mat-small-8" class="bet-mat-small-8"
@ -133,8 +265,7 @@
> >
배팅내역 배팅내역
</button> </button>
</div> <hr style="margin: 7px 0px" />
<div class="hidden lg:block">
<button <button
mat-flat-button mat-flat-button
class="bet-mat-small-8" class="bet-mat-small-8"
@ -142,33 +273,24 @@
> >
로그아웃 로그아웃
</button> </button>
</div> </td>
</div>
</ng-container>
</ng-container>
</div>
<mat-paginator
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
[ngClass]="{ 'pointer-events-none': isLoading }"
[length]="pagination?.length"
[pageIndex]="pagination?.page"
[pageSize]="pagination?.size"
[pageSizeOptions]="[5, 10, 25, 100]"
[showFirstLastButtons]="true"
></mat-paginator>
</ng-container>
</ng-container> </ng-container>
<ng-template #noCurrentUser> <tr
mat-header-row
*matHeaderRowDef="currentUserTableColumns"
></tr>
<tr
mat-row
*matRowDef="let row; columns: currentUserTableColumns"
></tr>
</table>
</div>
</div>
<!-- Budget details -->
<div <div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center" class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
> >
There are no data!
</div>
</ng-template>
</div>
</div>
<div> <div>
<div <div
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden" class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"

View File

@ -43,21 +43,21 @@ import { Router } from '@angular/router';
` `
.current-user-grid { .current-user-grid {
/* 번호 상부 아이디 등급 위치 */ /* 번호 상부 아이디 등급 위치 */
grid-template-columns: 20px 40px auto 40px 140px; grid-template-columns: 40px 40px auto 40px 140px;
@screen sm { @screen sm {
/* 번호 상부 아이디 등급 위치 보유금 */ /* 번호 상부 아이디 등급 위치 보유금 */
grid-template-columns: 20px 40px auto 40px 140px 140px; grid-template-columns: 40px 40px auto 40px 140px 140px;
} }
@screen md { @screen md {
/* 번호 상부 아이디 등급 위치 보유금 게임중 사이트 */ /* 번호 상부 아이디 등급 위치 보유금 게임중 사이트 */
grid-template-columns: 20px 40px auto 40px 140px 140px 140px 140px; grid-template-columns: 40px 40px auto 40px 140px 140px 140px 140px;
} }
@screen lg { @screen lg {
/* 번호 상부 아이디 등급 위치 보유금 게임중 사이트 카지노 배팅 로그아웃 */ /* 번호 상부 아이디 등급 캐시 게임중 사이트 카지노 배팅 */
grid-template-columns: 20px 100px auto 40px 140px 140px 140px 140px 140px 140px 140px; grid-template-columns: 40px 100px auto 100px 100px 100px 140px 120px 120px;
} }
} }
`, `,
@ -70,6 +70,9 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(MatPaginator) private _paginator!: MatPaginator; @ViewChild(MatPaginator) private _paginator!: MatPaginator;
@ViewChild(MatSort) private _sort!: MatSort; @ViewChild(MatSort) private _sort!: MatSort;
currentUserDataSource: MatTableDataSource<CurrentUser> =
new MatTableDataSource();
currentUsers$!: Observable<CurrentUser[] | undefined>; currentUsers$!: Observable<CurrentUser[] | undefined>;
users$!: Observable<User[] | undefined>; users$!: Observable<User[] | undefined>;
@ -79,6 +82,18 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
pagination?: CurrentUserPagination; pagination?: CurrentUserPagination;
targetForm!: FormGroup; targetForm!: FormGroup;
currentUserTableColumns: string[] = [
'idx',
'highRank',
'signinId',
'level',
'ownCash',
'comp',
'site',
'casino',
'etcBtn',
];
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
/** /**
@ -122,6 +137,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
if (!curUsers) { if (!curUsers) {
return; return;
} }
this.currentUserDataSource.data = curUsers;
this.targetForm.patchValue(curUsers[0]); this.targetForm.patchValue(curUsers[0]);
// Mark for check // Mark for check