basic map results + improved fetching from piped

This commit is contained in:
partisan 2024-04-15 22:34:50 +02:00
parent 1efca320c8
commit 6c9ec56327
9 changed files with 239 additions and 20 deletions

View file

@ -31,6 +31,10 @@
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="reddit">forum</button>
<button name="t" value="forum" class="clickable">Forums</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
<button name="t" value="map" class="clickable">Map</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="torrent">share</button>
<button name="t" value="torrent" class="clickable">Torrents</button>

62
templates/map.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Query }} - Ocásek</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
height: 100%;
width: 100%;
}
.no-decoration {
padding: 1px;
border-radius: 5px;
left: 20px;
}
/* Reposition the Leaflet control container */
.leaflet-top.leaflet-left {
top: 70px; /* Adjust this value based on your logo's height */
left: 10px;
}
</style>
</head>
<body>
<form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
<h1 class="logomobile"><a class="no-decoration" href="./">Ocásek</a></h1>
<div class="wrapper-results">
<input type="text" name="q" value="{{ .Query }}" id="search-input" placeholder="Type to search..." />
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="map">search</button>
<input type="submit" class="hide" name="t" value="map" />
</div>
</form>
<div id="map"></div>
<script>
var map = L.map('map').setView([50.0755, 14.4378], 13); // Default to Prague, Czech Republic
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Use the passed coordinates to update the map
var latitude = {{ .Latitude }};
var longitude = {{ .Longitude }};
function updateMap(latitude, longitude) {
map.setView([latitude, longitude], 13); // Set view to new coordinates
}
updateMap(latitude, longitude); // Update the map view to the new location
</script>
</body>
</html>

View file

@ -8,14 +8,14 @@
</head>
<body>
<div class="settings-search-div settings-search-div-search">
<a id="openSettings" class="material-symbols-outlined" href="/settings">tune</a>
<a class="material-icons-round clickable" href="/settings">tune</a>
</div>
<form action="/search" class="search-container" method="post" autocomplete="off">
<h1>Ocásek</h1>
<div class="wrapper">
<input type="text" name="q" autofocus id="search-input" placeholder="Type to search..." />
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="text" type="submit">search</button>
<a id="clearSearch" class="material-symbols-outline">close</a>
<!-- <a id="clearSearch" class="material-icons-round">close</a> -->
</div>
<div class="search-button-wrapper">
<input type="hidden" name="p" value="1">

View file

@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings</title>
<title>Settings - Ocásek</title>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
<h1 class="logomobile"><a class="no-decoration" href="./">Ocásek</a></h1>
<div class="wrapper-results">
<input type="text" name="q" value="{{ .Query }}" id="search-input" placeholder="Type to search..." />
<input type="text" name="q" value="" id="search-input" placeholder="Type to search..." />
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="text">search</button>
<input type="submit" class="hide" name="t" value="text" />
</div>

View file

@ -31,6 +31,10 @@
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="reddit">forum</button>
<button name="t" value="forum" class="clickable">Forums</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
<button name="t" value="map" class="clickable">Map</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="torrent">share</button>
<button name="t" value="torrent" class="clickable">Torrents</button>
@ -49,7 +53,7 @@
<option value="{{.Code}}" {{if eq .Code $.CurrentLang}}selected{{end}}>{{.Name}}</option>
{{end}}
</select>
<button class="results-save" type="submit">Apply settings</button>
<button class="results-save" name="t" value="text">Apply settings</button>
</form>
<div class="results">
<!-- Results go here -->

View file

@ -31,6 +31,10 @@
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="reddit">forum</button>
<button name="t" value="forum" class="clickable">Forums</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
<button name="t" value="map" class="clickable">Map</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="torrent">share</button>
<button name="t" value="torrent" class="clickable">Torrents</button>