_/empede
1
0
Fork 0
Code Issues Releases 18 Activity

Replace template includes with htmx hx-gets

Browse source
This commit is contained in:
Sijmen 2023-04-27 04:35:48 +02:00
parent ebe4cf0d01
commit 21387e0834
Signed by: vijfhoek
GPG key ID: DAF7821E067D9C48
3 changed files with 28 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/main.rs
View file

@ -14,13 +14,7 @@ mod mpd;
#[derive(Template)]
#[template(path = "index.html")]
struct IndexTemplate {
path: Vec<String>,
entries: Vec<mpd::Entry>,
song: Option<mpdrs::Song>,
name: Option<String>,
queue: Vec<mpd::QueueItem>,
path: String,
}
#[derive(Deserialize, Default)]
@ -31,30 +25,7 @@ struct IndexQuery {
async fn get_index(req: tide::Request<()>) -> tide::Result {
let query: IndexQuery = req.query()?;
let entries = mpd::ls(&query.path)?;
let queue = mpd::playlist()?;
// TODO dry
let mut mpd = mpd::connect()?;
let song = mpd.currentsong()?;
let name = if let Some(song) = &song {
let name = song.title.as_ref().unwrap_or(&song.file).to_string();
Some(name)
} else {
None
};
let template = IndexTemplate {
path: Path::new(&query.path)
.iter()
.map(|s| s.to_string_lossy().to_string())
.collect(),
entries,
name,
song,
queue,
};
let template = IndexTemplate { path: query.path };
Ok(askama_tide::into_response(&template))
}

27
templates/browser.html
View file

@ -1,14 +1,23 @@
{# #}
<ul class="breadcrumb">
<li><a href="?path=">Root</a></li>
<li>
<a
href="/?path="
hx-replace-url="/?path="
hx-get="/browser?path="
hx-target=".browser"
>Root</a>
</li>
{% for (i, component) in path.iter().enumerate() %}
<li>
{% if i == path.len() - 1 %}
{{ component }}
{% else %}
<a href="?path={{ path[..i + 1].join("/") }}">
{{ component }}
</a>
<a
href="/?path={{ path[..i + 1].join("/") }}"
hx-replace-url="/?path={{ path[..i + 1].join("/") }}"
hx-get="/browser?path={{ path[..i + 1].join("/") }}" hx-target=".browser"
>{{ component }}</a>
{% endif %}
</li>
{% endfor %}
@ -26,10 +35,14 @@
<div class="song__artist">{{ artist }}</div>
</a>
</li>
{% when mpd::Entry::Directory with { name, path }%}
<li onclick="window.location = '?path={{path}}'">
{% when mpd::Entry::Directory with { name, path } %}
<li
hx-get="/browser?path={{ path }}"
hx-replace-url="/?path={{ path }}"
hx-target=".browser"
>
<span class="material-symbols-outlined">folder</span>
<a href="?path={{path}}">{{ name }}</a>
<div class="song__name">{{ name }}</div>
</li>
{% when mpd::Entry::Playlist with { name, path } %}
<li hx-post="/queue?path={{path}}" hx-swap="none" role="button" >

15
templates/index.html
View file

@ -184,17 +184,14 @@
</head>
<body hx-ext="sse" sse-connect="/sse">
<div class="browser" hx-trigger="sse:database" hx-get="/browser">
{% include "browser.html" %}
</div>
<div
class="browser"
hx-trigger="load,sse:database" hx-get="/browser?path={{ path }}"
></div>
<div class="player">
<div hx-trigger="sse:player" hx-get="/player">
{% include "player.html" %}
</div>
<div hx-trigger="sse:playlist,sse:player" hx-get="/queue">
{% include "queue.html" %}
</div>
<div hx-trigger="load,sse:player" hx-get="/player"></div>
<div hx-trigger="load,sse:playlist,sse:player" hx-get="/queue"></div>
</div>
</body>
</html>