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