57 lines
2.5 KiB
HTML
57 lines
2.5 KiB
HTML
@use ::{Coord, Link};
|
|
@use nickel::Request;
|
|
@use nickel_jwt_session::SessionRequestExtensions;
|
|
@use models::{Photo, Person, Place, Tag, Camera};
|
|
@use templates::page_base;
|
|
|
|
@(req: &Request, lpath: &[Link], people: &[Person], places: &[Place], tags: &[Tag], position: Option<Coord>, attribution: Option<String>, camera: Option<Camera>, photo: Photo)
|
|
@:page_base(req, "Photo details", lpath, {
|
|
<div class="details" data-imgid="@photo.id">
|
|
<div class="item"><img src="/img/@photo.id-m.jpg"></div>
|
|
<div class="meta">
|
|
@if req.authorized_user().is_some() {
|
|
<p><a href="/img/@photo.id-l.jpg">@photo.path</a></p>
|
|
@if photo.is_public() {<p>This photo is public.</p>}
|
|
else {<p>This photo is not public.</p>}
|
|
}
|
|
@if let Some(g) = photo.grade {<p>Grade: @g</p>}
|
|
@if let Some(d) = photo.date {<p>Time: @d.format("%F %T")</p>}
|
|
@if !people.is_empty() {
|
|
<p>People: @for p in people{<a href="/person/@p.slug">@p.person_name</a>, }</p>}
|
|
@if !places.is_empty() {
|
|
<p>Places: @for p in places{<a href="/place/@p.slug">@p.place_name</a>, }</p>}
|
|
@if !tags.is_empty() {
|
|
<p>Tags: @for t in tags{<a href="/tag/@t.slug">@t.tag_name</a>, }</p>}
|
|
@if let Some(ref pos) = position {<p>Position: @pos.x @pos.y</p>}
|
|
@if let Some(ref a) = attribution {<p>Av: @a</p>}
|
|
@if let Some(ref c) = camera{<p>Camera: @c.model (@c.manufacturer)</p>}
|
|
|
|
@if let Some(ref pos) = position {
|
|
<div id="map"></div>
|
|
<script language="javascript" type="text/javascript">
|
|
function initmap() @{
|
|
var csslink = document.createElement('link');
|
|
csslink.rel = 'stylesheet';
|
|
csslink.href = 'https://rasmus.krats.se/static/leaflet077c/leaflet.css';
|
|
document.getElementsByTagName('head')[0].append(csslink);
|
|
var pos = [@pos.x, @pos.y];
|
|
var map = document.getElementById('map');
|
|
map.style.height = 3 * map.clientWidth / 4 + "px";
|
|
var map = L.map('map').setView(pos, 16);
|
|
L.tileLayer('//@{s@}.tile.openstreetmap.org/@{z@}/@{x@}/@{y@}.png', @{
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
@}).addTo(map);
|
|
L.marker(pos).addTo(map);
|
|
@}
|
|
</script>
|
|
<script language="javascript" src="https://rasmus.krats.se/static/leaflet077c/leaflet.js" type="text/javascript" async onload="initmap()">
|
|
</script>
|
|
}
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var e = document.querySelector('.details .item');
|
|
e.addEventListener('click', function()@{ e.classList.toggle('zoom');@});
|
|
</script>
|
|
})
|