src/app/component/detail/detail.dialog.ts
selector | app-detail-dialog |
styleUrls | detail.dialog.css |
templateUrl | detail.dialog.html |
プロパティ |
メソッド |
|
constructor(dialogRef: MatDialogRef
|
|||||||||||||||||||||
Defined in src/app/component/detail/detail.dialog.ts:26
|
|||||||||||||||||||||
パラメータ :
|
checkPos |
checkPos()
|
デコレータ :
@Catch()
|
Defined in src/app/component/detail/detail.dialog.ts:73
|
戻り値 :
void
|
Async clickFavoriteButton | ||||
clickFavoriteButton(doc)
|
||||
デコレータ :
@Catch()
|
||||
Defined in src/app/component/detail/detail.dialog.ts:93
|
||||
パラメータ :
戻り値 :
any
|
Async close |
close()
|
デコレータ :
@Catch()
|
戻り値 :
any
|
dialogSize |
dialogSize()
|
デコレータ :
@Catch()
|
Defined in src/app/component/detail/detail.dialog.ts:54
|
戻り値 :
void
|
Async init |
init()
|
デコレータ :
@Catch()
|
Defined in src/app/component/detail/detail.dialog.ts:47
|
戻り値 :
any
|
movePage | ||||||
movePage(num: number)
|
||||||
デコレータ :
@Catch()
|
||||||
Defined in src/app/component/detail/detail.dialog.ts:82
|
||||||
パラメータ :
戻り値 :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/component/detail/detail.dialog.ts:41
|
戻り値 :
void
|
Async showPhoto |
showPhoto()
|
デコレータ :
@Catch()
|
Defined in src/app/component/detail/detail.dialog.ts:62
|
戻り値 :
any
|
blob |
Defined in src/app/component/detail/detail.dialog.ts:22
|
Public data |
Type : any
|
デコレータ :
@Inject(MAT_DIALOG_DATA)
|
Defined in src/app/component/detail/detail.dialog.ts:31
|
Public dataService |
Type : DataService
|
Defined in src/app/component/detail/detail.dialog.ts:30
|
Public dialogRef |
Type : MatDialogRef<DetailDialogComponent>
|
Defined in src/app/component/detail/detail.dialog.ts:29
|
doc |
Type : any
|
Defined in src/app/component/detail/detail.dialog.ts:20
|
docs |
Defined in src/app/component/detail/detail.dialog.ts:23
|
imgStr |
Type : string
|
既定値 : ''
|
Defined in src/app/component/detail/detail.dialog.ts:21
|
isEnd |
既定値 : false
|
Defined in src/app/component/detail/detail.dialog.ts:25
|
isMAX |
既定値 : false
|
Defined in src/app/component/detail/detail.dialog.ts:26
|
isStart |
既定値 : false
|
Defined in src/app/component/detail/detail.dialog.ts:24
|
Public stateService |
Type : StateService
|
Defined in src/app/component/detail/detail.dialog.ts:32
|
import {ChangeDetectorRef, Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
import {DataService} from '../../service/data.service';
import {MyEvent, StateService} from '../../service/state.service';
import {MAX_FAVORITE, REMOTEDB_URL} from '../../app.config';
import * as blobUtil from 'blob-util';
import {HttpClient} from '@angular/common/http';
import {DbService} from '../../service/db.service';
import {Router} from '@angular/router';
import {Catch} from '../../class/log.class';
@Component({
selector: 'app-detail-dialog',
templateUrl: 'detail.dialog.html',
styleUrls: ['detail.dialog.css']
})
export class DetailDialogComponent implements OnInit {
doc: any;
imgStr = '';
blob;
docs;
isStart = false;
isEnd = false;
isMAX = false;
constructor(
public dialogRef: MatDialogRef<DetailDialogComponent>,
public dataService: DataService,
@Inject(MAT_DIALOG_DATA) public data: any,
public stateService: StateService,
// public scrollService: ScrollService,
private changeDetectorRef: ChangeDetectorRef,
private router: Router,
) {
this.doc = data.doc;
this.docs = data.docs;
}
ngOnInit() {
this.init();
}
//初期化
@Catch()
async init() {
await this.dialogSize();
await this.checkPos();
await this.showPhoto();
}
@Catch()
dialogSize() {
let height = (innerHeight / innerWidth < 1.6) ? (innerHeight - 20) : (innerWidth - 20) * 1.6;
let width = height / 1.6;
this.dialogRef.updateSize(width + 'px', height + 'px');
}
//写真の表示
@Catch()
async showPhoto() {
try {
this.blob = await this.dataService.getPhoto(this.doc, !(this.doc.isFavorite));
this.imgStr = await blobUtil.blobToDataURL(this.blob);
} catch (error) {
this.stateService.openSnackBar('写真の表示失敗' + error.message);
}
}
//表示データの終端チェック
@Catch()
checkPos() {
let currentPage = this.doc.serial;
this.isStart = (currentPage === 1);
this.isEnd = (currentPage === this.docs.length);
}
//前または次ボタン選択時の処理
@Catch()
movePage(num: number) {
let nextPage = this.doc.serial + num;
if (nextPage < 1 || nextPage > this.docs.length) {
return;
}
this.doc = this.docs[nextPage - 1];
this.showPhoto();
}
//登録と解除ボタンの選択
@Catch()
async clickFavoriteButton(doc) {
doc.isFavorite = !doc.isFavorite;
let res;
// try {
if (doc.isFavorite) {
res = await this.dataService.saveFavorite(doc, this.blob);
} else {
res = await this.dataService.deleteFavorite(doc);
}
this.close();
console.dir(res);
// } catch (error) {
// this.stateService.openSnackBar("登録または解除の失敗" + error.message);
// }
}
//閉じるボタン選択時の処理
@Catch()
async close() {
this.dialogRef.close();
}
// ngOnDestroy() {
// this.stateService.state.listMode=/false;
// this.scrollService.clearDoc();
// }
}
<div class="myContainer" >
<!--<div mat-dialog-title class="myContainer" >-->
<div class="myContainer" style="justify-content:center">
<mat-icon [ngClass]="{noDisplay:doc.isStart}" (click)="movePage(-1)" class="myNavButton">
arrow_back
</mat-icon>
<mat-icon (click)="close()" class="myNavButton" style="margin: 0 2rem ">
cancel</mat-icon>
<mat-icon [ngClass]="{noDisplay:doc.isEnd}" (click)="movePage(1)" class="myNavButton">
arrow_forward</mat-icon>
</div>
<div class="myContainer" style="align-items: center;margin-top: 0.5rem;">
<mat-icon
(click)="clickFavoriteButton(doc)"
class="myFavoriteButton"
>
{{doc.isFavorite?"favorite":"favorite_border"}}
</mat-icon>
<span class="myTitle" style="word-break:break-all;">
{{doc.name}}({{doc.name_kana}})
</span>
</div>
</div>
<div class="myContainer">
<!--<div mat-dialog-content class="myContainer">-->
<div class="myContainer">
<img *ngIf="imgStr"
[src]="imgStr"
style="width:100%;"
>
</div>
<mat-divider></mat-divider>
<div class="myContainer">
<p class="mySubTitle">
{{doc.prefName}}>{{doc.genreName}}
</p>
<span class="myText"
style="text-align: left;">
{{doc.descript}}
</span>
</div>
</div>
detail.dialog.css
h1.mat-dialog-title{
font-size: 1.4em;
margin: 0.3em auto;
}