Implement result partial, and create new results ejs

views/pages/results.ejs

@@ -47,7 +47,7 @@
         <table class="table text-white table-bordered" id="results">
             <thead>
                 <tr>
-                    <th><%= __('results.table.name') %></th>
+                    <th class="dt-orderable"><span><%= __('results.table.name') %></span><span class="dt-column-order"></span></th>
                     <th><%= __('results.table.group') %></th>
                     <th><%= __('results.table.category') %></th>
                     <th><%= __('results.table.region') %></th>
@@ -152,7 +152,7 @@
     </div>
 </div>
 <script defer>
-    resultTable = new DataTable('#results', {
+    /*resultTable = new DataTable('#results', {
         "order": [[7, 'desc']],
         "columns": [
             { "data": "name" },      // Name
@@ -173,7 +173,7 @@
         "layout": {
             "bottomStart": ''
         }
-    });
+    });*/
 
     // Initialize tooltips
     $(function () {

views/pages/resultsnew.ejs

@@ -0,0 +1,102 @@
+<%
+    let pageCount = Math.ceil(results.items.length / 100)
+    pageCount = pageCount ? pageCount : 1 //always ensure 1 page
+    if(pageNum > pageCount){
+        pageNum = 1
+    }
+    let entryStart = Math.floor((pageNum - 1) * 100)
+    let entryEnd = entryStart + 100
+    entryEnd = entryEnd > results.items.length ? results.items.length : entryEnd
+%>
+<script src='https://code.jquery.com/jquery-3.7.1.js' crossorigin="anonymous"></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' crossorigin="anonymous"></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js' crossorigin="anonymous"></script>
+<script src='https://cdn.datatables.net/2.1.8/js/dataTables.js' crossorigin="anonymous"></script>
+<script src='https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap4.js' crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap4.css" crossorigin="anonymous">
+<div class="row w-100 m-0">
+    <form class="ml-2 form-inline w-100" action="/search">
+        <div class="w-100 align-items-center">
+            <div class="form-group">
+                <a href="/">
+                <pre class="mt-4 ml-2" style="font: 6px / 5px monospace; color: white; text-align: center; overflow: hidden; display: inline-flex;">
+<%= generateAsciiArt() %>
+                </pre>
+                </a>
+                <input type="hidden" name="s" id="searchSettings">
+                <input id="search" type="text" class="w-50 form-control bg-dark text-white ml-2" name="q" value="<%= query %>" autocomplete="off" placeholder="<%= __('search.placeholder') %>">
+                <button type="submit" class="btn btn-secondary ml-2"><%= __('search.button') %></button>
+
+            </div>
+            <ul class="SuggestionList col-sm-12" id="suggestionList" style="width: 50%;left: 195px;"></ul>
+        </div>
+        <p class="m-2">
+            <%= __('search.found_plural', { count: results.items.length }) %> <%= __('search.in_seconds', { seconds: results.elapsed }) %>.
+            <%= indexing ? __('search.indexing') : "" %>
+            <% if (settings.hideNonGame) { %>
+            <span class="badge badge-info" data-toggle="tooltip" data-placement="top" title="<%= __('settings.extras.hide_non_game.tooltip') %>">
+                <%= __('search.non_game_filter') %>
+                <a href="/settings" class="text-white ml-1"><i class="bi bi-gear-fill"></i></a>
+            </span>
+            <% } %>
+        </p>
+    </form>
+
+    <div class="col-sm-12 w-100 mt-3">
+        <p><%= __('search.displaying_results', { start: entryStart, end: entryEnd }) %></p>
+        <div>
+            <% for (let x = entryStart; x < entryEnd; x++) { %>
+            <%- include("../partials/result", {result: results.items[x]}) %>
+            <% } %>
+        </div>
+        <%
+        if(pageCount > 1) {
+        %>
+        <div class="row justify-content-between">
+            <div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ml-auto">
+                <div class="dt-paging">
+                    <nav aria-label="pagination">
+                        <ul class="pagination">
+                            <%
+                                let ellipsesElem = '<li class="dt-paging-button page-item disabled"><a class="page-link ellipsis" aria-controls="results" aria-disabled="true" data-dt-idx="ellipsis" tabindex="-1">…</a></li>          '
+                                let pageUrlPrefix = ''
+                                const getPageRange = (page) => {
+                                    let pageUpperLimit = pageCount - 4
+                                        if(page > 4 && page < pageUpperLimit){
+                                            return {
+                                                lower: page,
+                                                upper: page + 3
+                                            }
+                                        }
+                                        else if(page <= 4){
+                                            return {
+                                                lower: 2,
+                                                upper: pageCount >= 5 ? 5 : pageCount
+                                            }
+                                        }
+                                        else if(page >= pageUpperLimit){
+                                            return {
+                                                lower: pageCount - 4,
+                                                upper: pageCount - 1
+                                            }
+                                        }
+                                }
+                                let pageRange = getPageRange(pageNum)
+                            %>
+                            <li class="dt-paging-button page-item <%= pageNum == 1 ? 'disabled' : '' %>"><a <%= pageNum != 1 ? `href=${urlPrefix + (pageNum - 1)}` : '' %> class="page-link previous" aria-controls="results" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1">‹</a></li>
+                            <li class="dt-paging-button page-item <%= pageNum == 1 ? 'active' : '' %>"><a href="<%= urlPrefix + 1 %>" class="page-link" aria-controls="results" aria-current="page" data-dt-idx="0">1</a></li>
+                            <%-  pageNum >= 5 ? ellipsesElem : '' %>
+                            <% for(let x = pageRange.lower; x <= pageRange.upper; x++){ %>
+                            <li class="dt-paging-button page-item <%= pageNum == x ? 'active' : '' %>"><a href="<%= urlPrefix + x %>" class="page-link" aria-controls="results" aria-current="page" data-dt-idx="<%= x - 1 %>"><%= x %></a></li>
+                            <% } %>
+                            <%-  pageNum <= pageCount - 5 ? ellipsesElem : '' %>
+                            <li class="dt-paging-button page-item <%= pageNum == pageCount ? 'active' : '' %>"><a href="<%= urlPrefix + pageCount %>" class="page-link" aria-controls="results" data-dt-idx="<%= pageCount - 1 %>"><%= pageCount %></a></li>
+                            <li class="dt-paging-button page-item <%= pageNum == pageCount ? 'disabled' : '' %>"><a <%= pageNum != pageCount ? `href=${urlPrefix + (pageNum + 1)}` : '' %> class="page-link next" aria-controls="results" aria-label="Next" data-dt-idx="next">›</a></li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+        <% } %>
+    </div>
+</div>

views/partials/result.ejs

@@ -0,0 +1,14 @@
+<div class="col-md-auto row align-items-start searchresult">
+    <div class="">
+        <img class="coverart" src="<%= result.image || "/public/images/nocoverart.png"%>">
+    </div>
+    <div class="col-md">
+        <p class="title"><%= result.title || result.filename %></p>
+        <p class="info"<span class="infoitem">Released: <%= result.releaseDate || result.date %></span> <span class="infoitem">Region: <%= result.region %></span></p>
+        <p class="description"><%= result.description || "No description was found." %></p>
+        <% if(result.title) {%>
+        <p class="file">Filename: <%= result.filename %></p>
+        <% } %>
+        <p class="actions"><button class="btn btn-sm btn-secondary" href="">More Info</button> <button class="btn btn-sm btn-secondary" href="<%= result.path %>">Download</button> <button class="btn btn-sm btn-secondary" href="/play/<%= result.id %>">Play In Browser</a></button>
+    </div>
+</div>

views/public/css/style.css

@@ -144,3 +144,71 @@ td a {
   position: relative;
   z-index: 9999 !important;
 }
+.dt-orderable {
+  position: absolute;
+  
+
+}
+.dt-column-order {
+  position: absolute;
+  width: 12px;
+  opacity: 0.125;
+  line-height: 9px;
+  font-size: 0.8em;
+  right: 12px;
+  top: 0;
+  bottom: 0;
+}
+.table thead > tr > th {
+  position: relative;
+  padding-right: 30px;
+}
+thead > tr > th.dt-orderable span.dt-column-order::before {
+  position: absolute;
+  display: block;
+  bottom: 50%;
+  content: "▲";
+  content: "▲"/"";
+}
+thead > tr > th.dt-orderable span.dt-column-order::after {
+  position: absolute;
+  display: block;
+  top: 50%;
+  content: "▼";
+  content: "▼"/"";
+}
+
+thead > tr > th.dt-orderable span.dt-column-order.order-desc::before{
+  opacity: 1;
+}
+thead > tr > th.dt-orderable span.dt-column-order.order-asc::after{
+  opacity: 1;
+}
+.coverart{
+  object-fit: contain;
+  height: 200px;
+  width: 150px;
+}
+.description{
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.searchresult {
+  padding: 10px;
+}
+.title {
+  font-weight: bold;
+  color: #f0a400;
+}
+.info {
+  font-size: 0.8em;
+}
+.file {
+  font-size: 0.8em;
+}
+.infoitem{
+  margin-right: 1rem;
+}