templates/index.html (view raw)
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 <title>TNT Search</title>
7 <style>
8 .row {
9 margin-bottom: 40px;
10 }
11 a:hover, a:active, a:visited, a {
12 color: unset !important;
13 }
14 </style>
15 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
16 </head>
17 <body style="background-color: black; color: white;">
18 <div class="container mt-5">
19 <div class="row">
20 <div class="col-md-12">
21 <h1><a href="/">TNTVillage Search</a></h1>
22 </div>
23 </div>
24 <div class="row d-flex justify-content-center">
25 <div class="col-md-6">
26 <select class="form-select" id="form2" aria-label="Category" onchange="search_button()" data-bs-theme="dark">
27 <option selected value="0">Tutte</option>
28 {% for n_cat, cat in categories %}
29 <option value="{{ n_cat }}">{{ cat }}</option>
30 {% endfor %}
31 </select>
32 </div>
33 <div class="col-md-6">
34 <div class="input-group justify-content-center">
35 <div class="form-outline">
36 <input type="search" id="form1" class="form-control" />
37 </div>
38 <button type="button" class="btn btn-primary" onclick="search_button()">
39 Cerca
40 <!--
41 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="c="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
42 -->
43 </button>
44 </div>
45 </div>
46 </div>
47 <div class="row d-flex justify-content-center">
48 <div class="col-md-4">
49 <button class="btn btn-primary" onclick="change_page(-1)">
50 Pagina precedente
51 </button>
52 </div>
53 <div class="col-md-4" style="text-align: center;" id="page_indicator">
54 </div>
55 <div class="col-md-4" style="text-align: right;">
56 <button class="btn btn-primary" onclick="change_page()">
57 Pagina successiva
58 </button>
59 </div>
60 </div>
61
62 <div class="row">
63 <table class="table table-striped table-dark">
64 <thead>
65 <tr>
66 {% for header in headers %}
67 <th scope="col">{{ header }}</th>
68 {% endfor %}
69 </tr>
70 </thead>
71 <tbody>
72 {% for row in content %}
73 <tr>
74 {% for el in row %}
75 <td>{{ el|safe }}</td>
76 {% endfor %}
77 </tr>
78 {% endfor %}
79 </tbody>
80 </table>
81 </div>
82 </div>
83 <script>
84 const search_field = document.getElementById("form1");
85 const category_field = document.getElementById("form2");
86 const page_indicator = document.getElementById("page_indicator");
87
88 const param_keywords = "keywords";
89 const param_category = "category";
90 const param_page = "page";
91
92 function get_query_info() {
93 const queryString = window.location.search;
94 const urlParams = new URLSearchParams(queryString);
95
96 const query = urlParams.has(param_keywords) ? urlParams.get(param_keywords) : "";
97 const category = urlParams.has(param_category) ? urlParams.get(param_category) : 0;
98 const page = urlParams.has(param_page) ? urlParams.get(param_page) : 1;
99
100 return [ query, parseInt(category), parseInt(page) ];
101 }
102
103 function search(query="", category=0, page=1) {
104 const params_temp = new URLSearchParams({"keywords": query, "category": category, "page": page});
105 const url = window.location.origin + window.location.pathname + "?" + params_temp.toString();
106 window.location.assign(url);
107 }
108
109 function search_button() {
110 const query = search_field.value;
111 const category = parseInt(category_field.value);
112 search(query, category, 1);
113 }
114
115 function change_page(increase = 1) {
116 page = result[2] + increase;
117
118 search(result[0], result[1], page > 0 ? page : 1);
119 }
120
121 result = get_query_info();
122
123 search_field.value = result[0];
124 category_field.value = result[1];
125 page_indicator.innerHTML = "Pagina " + result[2];
126 search_field.addEventListener("keyup", ({key}) => {
127 if (key === "Enter") {
128 search_button()
129 }
130 })
131 </script>
132 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
133 </body>
134</html>