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

Replace template includes with htmx hx-gets

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)] #[derive(Template)]
#[template(path = "index.html")] #[template(path = "index.html")]
struct IndexTemplate { struct IndexTemplate {
path: Vec<String>, path: String,
entries: Vec<mpd::Entry>,
song: Option<mpdrs::Song>,
name: Option<String>,
queue: Vec<mpd::QueueItem>,
} }
#[derive(Deserialize, Default)] #[derive(Deserialize, Default)]
@ -31,30 +25,7 @@ struct IndexQuery {
async fn get_index(req: tide::Request<()>) -> tide::Result { async fn get_index(req: tide::Request<()>) -> tide::Result {
let query: IndexQuery = req.query()?; let query: IndexQuery = req.query()?;
let entries = mpd::ls(&query.path)?; let template = IndexTemplate { path: 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,
};
Ok(askama_tide::into_response(&template)) Ok(askama_tide::into_response(&template))
} }

27
templates/browser.html
View File

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

15
templates/index.html
View File

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