mitteneer/zuletzt
1
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

Add DataTables to some views

Browse source 
This is awesome. Unfrotunately, it's all rather slow, but I'm mostly blaming db stuff for that. Still, very awesome to see where this is going. Need to add DataTables to more views, and see what I can do about sate sorting in the Scrobbles view
This commit is contained in:
mitteneer 2025-03-26 00:42:07 -04:00
parent 4adbd59e12
commit 11ddf40131
7 changed files with 116 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/app/views/scrobbles/index.zmpl
View file

@ -1,16 +1,42 @@
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<body>
@partial partials/header
<div>
<span>Look for an artist</span>
</div>
<form action="/scrobbles" method"GET">
<label>Filename</label>
<input type="text" name="ar" />
<input type="submit" value="Submit" />
</form>
<h1>Scrobbles</h1>
<table id="myTable">
<thead>
<tr>
<th>Song</th>
<th>Artist(s)</th>
<th>Album</th>
<th>Date</th>
</tr>
</thead>
<tbody>
@for (.scrobbles) |scrobble| {
<tr>
<td class=cell><a href="/songs/{{scrobble.song_id}}">{{scrobble.song_name}}</a></td>
<td class=cell>
@for (scrobble.get("artist_info").?) |ai| {
<a href="/artists/{{ai.id}}">{{ai.name}}</a>
}
</td>
<td class=cell><a href="/albums/{{scrobble.album_id}}">{{scrobble.album_name}}</a></td>
<td class=cell>{{scrobble.date}}</td>
</tr>
}
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
<script>
const dataTable = new simpleDatatables.DataTable("#myTable", {
searchable: true,
perPage: 50,
perPageSelect: [25,50,100],
});
</script>
</body>
</html>
</html>