Replace template includes with htmx hx-gets
This commit is contained in:
parent
ebe4cf0d01
commit
21387e0834
33
src/main.rs
33
src/main.rs
|
@ -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))
|
||||
}
|
||||
|
||||
|
|
|
@ -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" >
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue