Soshot/tpl/infos.php

<?php

use App\Utils\ConvertStatus;
use App\Utils\Domains;

//require_once 'nav.php';
?>
<div class="w3-row soshot-main w3-margin-bottom">
  <div class="w3-container">
    <h1 class="w3-text-teal">Infos</h1>

    <ul>
      <li>Total : <?= $total; ?></li>
      <li>Queue : <?= $inQueue; ?></li>
      <li>Error : <?= $inError; ?></li>
    </ul>

    <table class="w3-table-all w3-hoverable">
      <thead>
        <tr>
          <td>Domain</td>
          <td>Created</td>
          <td>Complete</td>
          <td>Full</td>
          <td>HD</td>
          <td>nHD</td>
          <td>Thumb</td>
          <td>Favicon</td>
          <td>Og</td>
          <td>PDF</td>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($genList as $value) : ?>
          <tr>
            <td><a href="#" class="linkDetail" data-hmac="<?= $value->id; ?>" data-href="<?= $value->url; ?>"><?= Domains::getDomain($value->url); ?></a></td>
            <td><?= $value->created; ?></td>
            <td><?= ConvertStatus::convertToIcon($value->complete); ?></td>
            <td><?= ConvertStatus::convertToIcon($value->full); ?></td>
            <td><?= ConvertStatus::convertToIcon($value->hd); ?></td>
            <td><?= ConvertStatus::convertToIcon($value->nhd); ?></td>
            <td><?= ConvertStatus::convertToIcon($value->thumb); ?></td>
            <td><?= ConvertStatus::convertToIcon($value->fav); ?></td>
            <td><?= ConvertStatus::convertToIcon($value->og); ?></td>
            <td><?= ConvertStatus::convertToIcon($value->pdf); ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>

    <div class="w3-center w3-margin-top">
      <div class="w3-bar">
        <a href="?page=infos&start=<?= $previous; ?>" class="w3-teal w3-button">&laquo; Previous</a>
        <a href="?page=infos&start=<?= $next; ?>" class="w3-teal w3-button">Next &raquo; </a>
      </div>
    </div>
  </div>

  <div id="detail" class="w3-modal">
    <div class="w3-modal-content w3-animate-opacity">
      <div class="w3-container">
        <span onclick="document.getElementById('detail').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>
          <img src="" id="fav" height="32px">
          <a href="" id="titlePreview" target="_blanck"></a>
        </p>
        <img class="w3-border w3c-margin" src="" id="complete" width="45%">
        <img class="w3-border w3c-margin" src="" id="full" width="35%">
        <img class="w3-border w3c-margin" src="" id="hd" width="30%">
        <img class="w3-border w3c-margin" src="" id="og" width="25%">
        <img class="w3-border w3c-margin" src="" id="nhd" width="20%">
        <img class="w3-border w3c-margin" src="" id="thumb" width="15%">
      </div>
    </div>
  </div>

</div>
<!-- END MAIN -->
<script>
  // Get the Sidebar
  var mySidebar = document.getElementById("mySidebar");

  // Get the DIV with overlay effect
  var overlayBg = document.getElementById("myOverlay");

  // Toggle between showing and hiding the sidebar, and add overlay effect
  function w3_open() {
    if (mySidebar.style.display === 'block') {
      mySidebar.style.display = 'none';
      overlayBg.style.display = "none";
    } else {
      mySidebar.style.display = 'block';
      overlayBg.style.display = "block";
    }
  }

  // Close the sidebar with the close button
  function w3_close() {
    mySidebar.style.display = "none";
    overlayBg.style.display = "none";
  }

  const el = document.querySelectorAll('.linkDetail');
  el.forEach(element => {
    element.addEventListener("click", (el) => {
      let $hmac = el.srcElement.dataset.hmac;
      let $href = el.srcElement.dataset.href;
      let $title = document.getElementById("titlePreview");
      let $complete = document.getElementById("complete");
      let $full = document.getElementById("full");
      let $hd = document.getElementById("hd");
      let $nhd = document.getElementById("nhd");
      let $thumb = document.getElementById("thumb");
      let $og = document.getElementById("og");
      let $fav = document.getElementById("fav");

      $title.href = $href;
      $title.textContent = $href;
      $complete.src = "?type=complete&showImg=" + $hmac;
      $full.src = "?type=full&showImg=" + $hmac;
      $hd.src = "?type=hd&showImg=" + $hmac;
      $nhd.src = "?type=nhd&showImg=" + $hmac;
      $thumb.src = "?type=thumb&showImg=" + $hmac;
      $og.src = "?type=og&showImg=" + $hmac;
      $fav.src = "?type=fav&showImg=" + $hmac;
      document.getElementById('detail').style.display = 'block';
    });
  });

  function showDetail(el) {

  }

  // Get the modal
  var modal = document.getElementById('detail');

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>