ファイル

src/app/component/detail/detail.dialog.ts

実装

OnInit

メタデータ

selector app-detail-dialog
styleUrls detail.dialog.css
templateUrl detail.dialog.html

インデックス

プロパティ
メソッド

コンストラクタ

constructor(dialogRef: MatDialogRef, dataService: DataService, data: any, stateService: StateService, changeDetectorRef: ChangeDetectorRef, router: Router)
パラメータ :
名前 Type オプション
dialogRef MatDialogRef<DetailDialogComponent> いいえ
dataService DataService いいえ
data any いいえ
stateService StateService いいえ
changeDetectorRef ChangeDetectorRef いいえ
router Router いいえ

メソッド

checkPos
checkPos()
デコレータ :
@Catch()
戻り値 : void
Async clickFavoriteButton
clickFavoriteButton(doc)
デコレータ :
@Catch()
パラメータ :
名前 オプション
doc いいえ
戻り値 : any
Async close
close()
デコレータ :
@Catch()
戻り値 : any
dialogSize
dialogSize()
デコレータ :
@Catch()
戻り値 : void
Async init
init()
デコレータ :
@Catch()
戻り値 : any
movePage
movePage(num: number)
デコレータ :
@Catch()
パラメータ :
名前 Type オプション
num number いいえ
戻り値 : void
ngOnInit
ngOnInit()
戻り値 : void
Async showPhoto
showPhoto()
デコレータ :
@Catch()
戻り値 : any

プロパティ

blob
Public data
Type : any
デコレータ :
@Inject(MAT_DIALOG_DATA)
Public dataService
Type : DataService
Public dialogRef
Type : MatDialogRef<DetailDialogComponent>
doc
Type : any
docs
imgStr
Type : string
既定値 : ''
isEnd
既定値 : false
isMAX
既定値 : false
isStart
既定値 : false
Public stateService
Type : StateService
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;
}
凡例
HTML 要素
コンポーネント
HTML と directed を組み合わせて利用

result-matching ""

    該当なし ""