epic_explorer/src/app/view/block-view/block-detail/block-detail.component.html

<div class="view_content py-4">
  <div *ngIf="hasdata" class="container">
	  <div *ngIf="TimeArr" class="box_shadow_large detail_div p-3 mb-4">
            <h1 class="test_msg align-middle mb-0 d-inline-block mr-3 pl-3">{{'home.HEADER_TEXT' | translate}}</h1>
            <h1 class="test_msg align-middle mb-0 float-right d-inline-block pl-3">{{'home.COUNTDOWN' | translate}}
                <ul class="list-unstyled d-inline-block  mb-0 txt_primary timer">
                  <li class="d-inline-block"><span id="days">{{TimeArr.d}}d:</span></li>
                  <li class="d-inline-block"><span id="hours">{{TimeArr.h}}h:</span></li>
                  <li class="d-inline-block"><span id="minutes">{{TimeArr.m}}m:</span></li>
                  <li class="d-inline-block"><span id="seconds">{{TimeArr.s}}s</span></li>
                  </ul>
            </h1>
        </div>
    <div *ngIf="hashdata?.BlockchainBlockFetchQuery" class="box_shadow_large bg-white p-3 mb-4">
      <h3 class="mb-0">
        <img src="assets/img/block.png" height="30" class="block_rotate float-left mr-2" />
        Block {{ hashdata.BlockchainBlockFetchQuery.Height }}
      </h3>
      <ul class="pagination justify-content-end m-0 d-inline-flex float-right">

        <li
          class="page-item" *ngIf="hashdata.BlockchainBlockFetchQuery.PreviousId"
        >
          <a class="page-link" routerLink="/blockdetail/{{ hashdata.BlockchainBlockFetchQuery.Height - 1 }}" ><i class="fa fa-angle-left"></i></a>
        </li>
        <li class="page-item d-none d-md-inline-flex">
          <a class="page-link"
            >{{ hashdata.BlockchainBlockFetchQuery.Height }}</a
          >
        </li>
        <li
          class="page-item"  *ngIf="latestblockHeight!=hashdata.BlockchainBlockFetchQuery.Height"
        >
          <a class="page-link" routerLink="/blockdetail/{{ hashdata.BlockchainBlockFetchQuery.Height + 1 }}" ><i class="fa fa-angle-right"></i></a>
        </li>

      </ul>
      <div class="row mb-3">
        <div class="col-sm-6 col-md-4 mt-4">
          <div class="d-inline-block align-middle">
            <img src="assets/img/fee.png" height="60" />
          </div>
          <div class="d-inline-block align-middle ml-2">
            <span class="">Fee</span>
            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.Fee }} {{'home.EPIC' | translate}}</h6>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 mt-4">
          <div class="d-inline-block align-middle">
            <img src="assets/img/hash.png" height="60" />
          </div>
          <div [title]="hashdata.BlockchainBlockFetchQuery.Hash" class="d-inline-block align-middle ml-2">
            <span class="">Hash</span>
            <h6 *ngIf="hashdata?.BlockchainBlockFetchQuery" class="view_txt">
              <!-- {{ hashdata.BlockchainBlockFetchQuery.Hash }} -->
              <span class="blck_value">{{ hashdata.BlockchainBlockFetchQuery.hashstart
              }}<span
                *ngFor="let color of hashdata.BlockchainBlockFetchQuery.hasharray"
                class="hash"
                [ngStyle]="{ 'background-color': color }"
              ></span
              >{{ hashdata.BlockchainBlockFetchQuery.hashend }}</span>
            </h6>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 mt-4">
          <div class="d-inline-block align-middle">
            <img src="assets/img/difficulty.png" height="60" />
          </div>
          <div class="d-inline-block align-middle ml-2">
            <span class="">{{'home.DIFFICULTY' | translate}}</span>
          </div>
          <h6 class="view_txt">Cuckaroo : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckaroo }} | Cuckatoo : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckatoo }} <br/> Progpow : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyProgpow }} | Randomx : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyRandomx }}</h6>
        </div>
        <div class="col-sm-6 col-md-4 mt-4 pt-2">
          <div class="d-inline-block align-middle">
            <img src="assets/img/block_reward.png" height="60" />
          </div>
          <div class="d-inline-block align-middle ml-2">
            <span class="">{{'home.BLOCK_REWARD' | translate}}</span>
            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.BlockReward }} Epic</h6>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 mt-4 pt-2">
          <div class="d-inline-block align-middle">
            <img src="assets/img/age.png" height="60" />
          </div>
          <div class="d-inline-block align-middle ml-2">
            <span class="">{{'home.AGE' | translate}}</span>
            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.Timestamp }}</h6>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 mt-4 pt-2">
          <div class="d-inline-block align-middle">
            <img src="assets/img/algorithm.png" height="60" />
          </div>
          <div class="d-inline-block align-middle ml-2">
            <span class="">{{'home.ALGORITHM' | translate}}</span>
            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.PoWAlgorithm }}</h6>
          </div>
        </div>
      </div>
    </div>

    <div class="box_shadow_large bg-white p-3 mb-4">
      <div id="accordion">
        <div class="card mb-3">
          <div class="card-header" id="heading-1">
            <a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
              <h5 class="mb-0 tab_hdng">
                Input ({{hashdata?.BlockchainBlockInputFetchQuery.length ? hashdata.BlockchainBlockInputFetchQuery.length : 0}})

              </h5>
            </a>
          </div>
          <!-- *ngIf="hashdata?.BlockchainBlockInputFetchQuery.length" -->
          <div *ngIf="hashdata?.BlockchainBlockInputFetchQuery" id="collapse-1" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
            <div class="card-body">
                <div class="view_moble_tble web_hdng">
                    <div class="row">
                        <div class="col-lg-2">
                         <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
                        </div>



                      </div>
                </div>
                  <div class="view_moble_tble" *ngFor="let hashinput of hashdata.BlockchainBlockInputFetchQuery">
                      <div class="row">
                        <div class="col-12">
                         <div class="block_div"><h6>{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashinput.Data }}</span></div>
                        </div>



                      </div>
                    </div>
              <!-- <div class="table-responsive">
                <table class="table table-striped">
                  <tbody>
                    <tr>
                      <td>Commit</td>
                    </tr>
                    <tr>
                      <td class="word_break">
                        <p *ngFor="let hashinput of hashdata.BlockchainBlockInputFetchQuery">{{ hashinput.Data }}</p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div> -->
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header" id="heading-2">

            <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false"
              aria-controls="collapse-2">
              <h5 class="mb-0 tab_hdng">{{'home.OUTPUT' | translate}} ({{hashdata?.BlockchainBlockOutputFetchQuery.length ? hashdata.BlockchainBlockOutputFetchQuery.length : 0}}) </h5>
            </a>

          </div>

          <div *ngIf="hashdata?.BlockchainBlockOutputFetchQuery" id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2">
            <div class="card-body">
              <div class="view_moble_tble web_hdng">
                  <div class="row">
                      <div class="col-lg-2">
                       <div class="block_div"><h5 class="mb-0">{{'home.OUTPUT' | translate}} {{'home.TYPE' | translate}}</h5></div>
                      </div>
                      <div class="col-lg-2 order-3">
                          <div class="block_div"><h5 class="mb-0">{{'home.SPENT' | translate}}</h5></div>
                        </div>
                      <div class="col-lg-8 order-2">
                        <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
                      </div>


                    </div>
              </div>
                <div class="view_moble_tble"  *ngFor="let hashoutput of hashdata.BlockchainBlockOutputFetchQuery">
                    <div class="row">
                      <div class="col-12 col-sm-4 col-md-4 col-lg-2">
                       <div class="block_div"><h6>{{'home.OUTPUT' | translate}} {{'home.TYPE' | translate}}</h6><span class="blck_value">{{ hashoutput.OutputType }}</span></div>
                      </div>
                      <div class="col-12 col-sm-4 col-md-4 col-lg-2 order-lg-3">
                          <div class="block_div"><h6>{{'home.SPENT' | translate}}</h6><span class="blck_value">{{ hashoutput.Spent }}</span></div>
                        </div>
                      <div class="col-12 col-sm-4 col-md-4 col-lg-8 order-lg-2">
                        <div class="block_div"><h6>{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashoutput.Commit }}</span></div>
                      </div>


                    </div>
                  </div>
              <!-- <div class="table-responsive">
                <table class="table table-striped">
                  <tbody>
                    <tr>
                      <td>Output Type</td>
                      <td>Commit</td>
                      <td>Spent</td>
                    </tr>
                    <tr *ngFor="let hashoutput of hashdata.BlockchainBlockOutputFetchQuery">
                      <td>{{ hashoutput.OutputType }}</td>
                      <td>
                        {{ hashoutput.Commit }}
                      </td>
                      <td>{{ hashoutput.Spent }}</td>
                    </tr>
                  </tbody>
                </table>
              </div> -->
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="heading-3">

            <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false"
              aria-controls="collapse-3">
              <h5 class="mb-0 tab_hdng">{{'home.KERNELS' | translate}} ({{hashdata?.BlockchainBlockKernalFetchQuery.length ? hashdata.BlockchainBlockKernalFetchQuery.length : 0}})</h5>
            </a>

          </div>
          <div *ngIf="hashdata?.BlockchainBlockKernalFetchQuery" id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3">
            <div class="card-body">
                <div class="view_moble_tble web_hdng">
                    <div class="row">
                        <div class="col-lg-4">
                         <div class="block_div"><h5 class="mb-0">{{'home.FEATURES' | translate}}</h5></div>
                        </div>
                        <div class="col-lg-4 ">
                          <div class="block_div"><h5 class="mb-0">{{'home.LOCK' | translate}} {{'home.HEIGHT' | translate}}</h5></div>
                        </div>
                        <div class="col-lg-4 ">
                            <div class="block_div"><h5 class="mb-0">{{'home.FEE' | translate}}</h5></div>
                          </div>

                      </div>
                </div>
                  <div class="view_moble_tble"  *ngFor="let hashkernel of hashdata.BlockchainBlockKernalFetchQuery">
                      <div class="row">
                        <div class="col-12 col-sm-4 col-md-4 col-lg-4">
                         <div class="block_div"><h6>{{'home.FEATURES' | translate}}</h6><span class="blck_value">{{ hashkernel.Features }}</span></div>
                        </div>

                        <div class="col-12 col-sm-4 col-md-4 col-lg-4">
                          <div class="block_div"><h6>{{'home.LOCK' | translate}} {{'home.HEIGHT' | translate}}</h6><span class="blck_value">{{ hashkernel.LockHeight }}</span></div>
                        </div>
                        <div class="col-12 col-sm-4 col-md-4 col-lg-4">
                            <div class="block_div"><h6>{{'home.FEE' | translate}}</h6><span class="blck_value">{{ hashkernel.Fee }} Epic</span></div>
                          </div>


                      </div>
                    </div>
              <!-- <div class="table-responsive">
                <table class="table table-striped">
                  <tbody>
                    <tr>
                      <td>Features</td>
                      <td>Fee</td>
                      <td>Lock Height</td>
                    </tr>
                    <tr *ngFor="let hashkernel of hashdata.BlockchainBlockKernalFetchQuery">
                      <td>{{ hashkernel.Features }}</td>
                      <td>
                        {{ hashkernel.Fee }}
                      </td>
                      <td>{{ hashkernel.LockHeight }}</td>
                    </tr>
                  </tbody>
                </table>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>




  </div>
  <div *ngIf="!hasdata" class="container">

    <div class="box_shadow_large bg-white p-3 mb-4 text-center">
      <h4>{{'home.SEARCH_RESULT' | translate}} <span class="txt_primary">"{{params}}"</span></h4>
      <p>{{'home.SEARCH_RESULT1' | translate}} {{params}} {{'home.SEARCH_RESULT2' | translate}}, {{'home.SEARCH_RESULT3' | translate}}.</p>
    </div>
  </div>
</div>