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