data/templates/allgames.tpl.php

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   3  <head>
   4   <meta charset="utf-8"/>
   5   <title>List of all OUYA games</title>
   6   <meta name="generator" content="stouyapi"/>
   7   <link rel="stylesheet" type="text/css" href="../datatables/datatables.min.css"/>
   8   <link rel="stylesheet" type="text/css" href="../datatables/jquery.dataTables.yadcf.css"/>
   9   <link rel="stylesheet" type="text/css" href="../ouya-allgames.css"/>
  10   <link rel="icon" href="../favicon.ico"/>
  11  </head>
  12  <body class="allgames">
  13   <header>
  14    <h1>List of all OUYA games</h1>
  15    <img class="ouyalogo" src="../ouya-logo.grey.svg" alt="OUYA logo" width="50"/>
  16   </header>
  17
  18   <table id="allouyagames" class="display">
  19    <thead>
  20     <tr>
  21      <th>Game title</th>
  22      <th>Developer</th>
  23      <th>Age</th>
  24      <th>Players</th>
  25      <th>Genres</th>
  26      <th>Release</th>
  27     </tr>
  28    </thead>
  29    <tbody>
  30     <?php foreach ($games as $game): ?>
  31      <tr>
  32       <td>
  33        <a href="<?= htmlspecialchars($game->detailUrl) ?>">
  34         <?= htmlspecialchars($game->title) ?>
  35        </a>
  36       </td>
  37       <td>
  38        <?php if ($game->developerUrl): ?>
  39         <a href="<?= htmlspecialchars($game->developerUrl) ?>"><?= htmlspecialchars($game->developer) ?></a>
  40        <?php else: ?>
  41         <?= htmlspecialchars($game->developer) ?>
  42        <?php endif ?>
  43       </td>
  44       <td><?= htmlspecialchars($game->suggestedAge) ?></td>
  45       <td><?= htmlspecialchars(implode(', ', $game->players)) ?></td>
  46       <td><?= htmlspecialchars(implode(', ', $game->genres)) ?></td>
  47       <td><?= htmlspecialchars(gmdate('Y-m-d', $game->apkTimestamp)) ?></td>
  48      </tr>
  49     <?php endforeach; ?>
  50    </tbody>
  51   </table>
  52
  53   <nav>
  54    <?php foreach ($navLinks as $url => $title): ?>
  55     <a rel="up" href="<?= htmlspecialchars($url) ?>"><?= htmlspecialchars($title) ?></a>
  56    <?php endforeach ?>
  57   </nav>
  58
  59   <script type="text/javascript" src="../datatables/jquery-3.5.1.min.js"></script>
  60   <script type="text/javascript" src="../datatables/datatables.min.js"></script>
  61   <script type="text/javascript" src="../datatables/jquery.dataTables.yadcf.js"></script>
  62   <script type="text/javascript">
  63    $(document).ready(
  64        function() {
  65            var allOuyaGamesTable = $('#allouyagames').DataTable(
  66                {
  67                    paging: false,
  68                    fixedHeader: true
  69                }
  70            );
  71            yadcf.init(
  72                allOuyaGamesTable,
  73                [
  74                    {
  75                        column_number: 0,
  76                        filter_type: "text",
  77                        filter_default_label: "Filter game title",
  78                    },
  79                    {
  80                        column_number: 1,
  81                        filter_type: "text",
  82                        filter_default_label: "Filter developer",
  83                    },
  84                    {
  85                        column_number: 2,
  86                        column_data_type: "text",
  87                        data: ["Everyone", "9+", "12+", "17+"],
  88                        filter_default_label: "Filter age"
  89                    },
  90                    {
  91                        column_number: 3,
  92                        column_data_type: "text",
  93                        text_data_delimiter: ", ",
  94                        filter_default_label: "Filter player number"
  95                    },
  96                    {
  97                        column_number: 4,
  98                        column_data_type: "text",
  99                        text_data_delimiter: ", ",
 100                        filter_default_label: "Filter genre"
 101                    }
 102                ]
 103            );
 104        }
 105    );
 106   </script>
 107  </body>
 108 </html>