현재접속자 수정

This commit is contained in:
이담 정 2022-07-26 08:21:18 +00:00
parent 5ad7b6ed80
commit c6c8e5d792
4 changed files with 318 additions and 168 deletions

View File

@ -14,5 +14,8 @@ export const currentUsers = [
ownComp: 3111, ownComp: 3111,
rank: '회원', rank: '회원',
siteAddress: 'web4nova114.com', siteAddress: 'web4nova114.com',
writer: '관리자',
content:
'--선택--\n5008\n**입금계좌문의시(가상계좌1)**\n**출금비밀번호문의시**\n----탈퇴,졸업관련----\n**졸업안내\n----입금관련문의----\n>>타인명의입금시\n----환전관련문의----\n**환전지연안내(환전량 증가)\n**은행점검(뱅킹장애)등으로 충환전지연안내\n서버점검안내\n서버점검완료안내',
}, },
]; ];

View File

@ -1,176 +1,304 @@
<div <div class="flex flex-col flex-auto min-w-0">
class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent" <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
> <div class="w-full max-w-screen-xl mx-auto">
<!-- Header --> <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
<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>
<!-- Main -->
<div class="flex flex-auto overflow-hidden">
<!-- Products list -->
<div
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
>
<ng-container *ngIf="currentUsers$ | async as currentUsers">
<ng-container *ngIf="currentUsers.length > 0; else noCurrentUser">
<div class="grid">
<!-- Header -->
<div
class="inventory-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"
>
<div>번호</div>
<div>상부</div>
<div>
아이디
<hr style="margin: 7px 0px" />
닉네임
</div>
<div>
등급
<hr style="margin: 7px 0px" />
레벨
</div>
<div>현재위치</div>
<div class="hidden md:block">보유금</div>
<div class="hidden md:block">게임중머니</div>
<div class="hidden md:block">사이트</div>
<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="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
>
<div>{{ currentUser.index }}</div>
<div>{{ currentUser.highRank }}</div>
<div>
<div>
{{ currentUser.signinId }}
</div>
<hr style="margin: 7px 0px" />
{{ currentUser.nickname }}
<hr style="margin: 7px 0px" />
{{ currentUser.currentLocation }}
</div>
<div>
{{ currentUser.rank }}
<hr style="margin: 7px 0px" />
{{ currentUser.level }}
</div>
<div>{{ currentUser.currentLocation }}</div>
<div class="hidden md:block">
{{ currentUser.ownCash }}
<hr style="margin: 7px 0px" />
{{ currentUser.ownComp }}
</div>
<div class="hidden md:block">
{{ currentUser.gameMoney }}
</div>
<div class="hidden md:block">
{{ currentUser.siteAddress }}
</div>
<div class="hidden lg:block">
<button
mat-flat-button
class="bet-mat-small-8"
[color]="'primary'"
>
<mat-icon svgIcon="email-outline"></mat-icon>
</button>
</div>
<div class="hidden lg:block">
<button
mat-flat-button
class="bet-mat-small-8"
[color]="'primary'"
>
배팅내역
</button>
</div>
<div class="hidden lg:block">
<button
mat-flat-button
class="bet-mat-small-8"
[color]="'primary'"
>
로그아웃
</button>
</div>
</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-template #noCurrentUser>
<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! <!-- Header -->
</div> <div
</ng-template> 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"
</div> >
<!-- Budget details --> <!-- Loader -->
<div> <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
<div <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden" </div>
> <!-- Title -->
<div class="text-lg font-medium tracking-tight leading-6 truncate"> <div class="text-4xl font-extrabold tracking-tight">
현재 접속자 & 전체회원 쪽지보내기 현재접속자&쪽지전송
</div> </div>
<div class="flex flex-col flex-auto"> <!-- Main -->
<mat-card> <div class="flex flex-auto overflow-hidden">
<mat-card-content> <!-- Products list -->
<div class="flex"> <div
<mat-form-field class="w-1/3 pr-2"> class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
<mat-label>제목</mat-label> >
<input matInput /> <ng-container *ngIf="currentUsers$ | async as currentUsers">
</mat-form-field> <ng-container
*ngIf="currentUsers.length > 0; else noCurrentUser"
>
<div class="grid">
<!-- Header -->
<div
class="inventory-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"
>
<div>번호</div>
<div>상부</div>
<div>
아이디
<hr style="margin: 7px 0px" />
닉네임
</div>
<div>
등급
<hr style="margin: 7px 0px" />
레벨
</div>
<div>현재위치</div>
<div class="hidden md:block">보유금</div>
<div class="hidden md:block">게임중머니</div>
<div class="hidden md:block">사이트</div>
<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="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
>
<div>{{ currentUser.index }}</div>
<div>{{ currentUser.highRank }}</div>
<div>
<div>
{{ currentUser.signinId }}
</div>
<hr style="margin: 7px 0px" />
{{ currentUser.nickname }}
<hr style="margin: 7px 0px" />
{{ currentUser.currentLocation }}
</div>
<div>
{{ currentUser.rank }}
<hr style="margin: 7px 0px" />
{{ currentUser.level }}
</div>
<div>{{ currentUser.currentLocation }}</div>
<div class="hidden md:block">
{{ currentUser.ownCash }}
<hr style="margin: 7px 0px" />
{{ currentUser.ownComp }}
</div>
<div class="hidden md:block">
{{ currentUser.gameMoney }}
</div>
<div class="hidden md:block">
{{ currentUser.siteAddress }}
</div>
<div class="hidden lg:block">
<button
mat-flat-button
class="bet-mat-small-8"
[color]="'primary'"
>
<mat-icon svgIcon="email-outline"></mat-icon>
</button>
</div>
<div class="hidden lg:block">
<button
mat-flat-button
class="bet-mat-small-8"
[color]="'primary'"
>
배팅내역
</button>
</div>
<div class="hidden lg:block">
<button
mat-flat-button
class="bet-mat-small-8"
[color]="'primary'"
>
로그아웃
</button>
</div>
</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-template #noCurrentUser>
<div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
>
There are no data!
</div>
</ng-template>
</div> </div>
<div class="flex"> </div>
<mat-form-field class="w-1/3 pr-2"> </div>
<mat-label>글쓴이</mat-label> <div>
<input matInput placeholder="관리자" /> <div
</mat-form-field> 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>
<div class="flex"> <div class="flex flex-col flex-auto">
<mat-form-field class="w-1/3 pr-2"> <form
<mat-label>내용</mat-label> [formGroup]="targetForm"
<input matInput /> autocomplete="off"
</mat-form-field> 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 class="flex"> </div>
<mat-form-field class="w-1/3 pr-2"> </div>
<input matInput />
</mat-form-field>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div> </div>
</div> </div>

View File

@ -77,6 +77,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
searchInputControl = new FormControl(); searchInputControl = new FormControl();
selectedCurrentUser?: CurrentUser; selectedCurrentUser?: CurrentUser;
pagination?: CurrentUserPagination; pagination?: CurrentUserPagination;
targetForm!: FormGroup;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -99,6 +100,10 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
* On init * On init
*/ */
ngOnInit(): void { ngOnInit(): void {
this.targetForm = this._formBuilder.group({
writer: [''],
content: [''],
});
// Get the pagination // Get the pagination
this._currentUserService.pagination$ this._currentUserService.pagination$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
@ -111,6 +116,18 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
}); });
// Get the products // Get the products
this._currentUserService.currentUsers$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((curUsers: any[] | undefined) => {
if (!curUsers) {
return;
}
this.targetForm.patchValue(curUsers[0]);
// Mark for check
this._changeDetectorRef.markForCheck();
});
this.currentUsers$ = this._currentUserService.currentUsers$; this.currentUsers$ = this._currentUserService.currentUsers$;
} }

View File

@ -11,4 +11,6 @@ export interface CurrentUser {
ownComp?: number; ownComp?: number;
rank?: string; rank?: string;
siteAddress?: string; siteAddress?: string;
writer?: string;
content?: string;
} }