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