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

1
.gitignore vendored
View file

@ -6,3 +6,4 @@ static/
src/app/database/data.db-journal src/app/database/data.db-journal
src/app/database/old_migrations/ src/app/database/old_migrations/
src/lib src/lib
src/app/scripts/

14
src/app/views/artists/get.zmpl
View file

@ -1,20 +1,32 @@
<html> <html>
<head> <head>
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
@partial partials/header @partial partials/header
<h1>{{.artist}}</h1> <h1>{{.artist}}</h1>
<table> <table id="myTable">
<thead>
<tr> <tr>
<th>Name</th><th>Scrobbles</th> <th>Name</th><th>Scrobbles</th>
</tr>
</thead>
<tbody>
@for (.albums) |album| { @for (.albums) |album| {
<tr> <tr>
<td class=cell><a href="/albums/{{album.url}}">{{album.name}}</a></td> <td class=cell><a href="/albums/{{album.url}}">{{album.name}}</a></td>
<td class=cell>{{album.scrobbles}}</td> <td class=cell>{{album.scrobbles}}</td>
</tr> </tr>
} }
</tbody>
</table> </table>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
<script>
const dataTable = new simpleDatatables.DataTable("#myTable", {
searchable: false,
});
</script>
</body> </body>
</html> </html>

20
src/app/views/artists/index.zmpl
View file

@ -1,20 +1,34 @@
<html> <html>
<head> <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"> <meta charset="UTF-8">
</head> </head>
<body> <body>
@partial partials/header @partial partials/header
<h1> Artists</h1> <h1>Artists</h1>
<table> <table id="myTable" class='table'>
<thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Scrobbles</th>
</tr>
</thead>
<tbody>
@for (.artists) |artist| { @for (.artists) |artist| {
<tr> <tr>
<td class=cell><a href="/artists/{{artist.url}}">{{artist.name}}</a></td> <td class=cell><a href="/artists/{{artist.url}}">{{artist.name}}</a></td>
<td class=cell>{{artist.scrobbles}}</td> <td class=cell>{{artist.scrobbles}}</td>
</tr> </tr>
} }
</tbody>
</table> </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> </body>
</html> </html>

32
src/app/views/scrobbles.zig
View file

@ -1,8 +1,36 @@
const std = @import("std"); const std = @import("std");
const jetzig = @import("jetzig"); const jetzig = @import("jetzig");
pub fn index(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View { pub fn index(request: *jetzig.Request) !jetzig.View {
_ = data; var root = try request.data(.object);
var scrobbles_view = try root.put("scrobbles", .array);
const query = jetzig.database.Query(.Scrobble).select(.{})
.include(.song, .{ .select = .{ .id, .name } })
.include(.album, .{ .select = .{ .id, .name } })
.include(.scrobbleartists, .{ .select = .{.artist_id} })
.orderBy(.{ .date = .desc });
const scrobbles = try request.repo.all(query);
for (scrobbles) |scrobble| {
var scrobble_view = try scrobbles_view.append(.object);
var artist_infos = try scrobble_view.put("artist_info", .array);
for (scrobble.scrobbleartists) |artist| {
var artist_info = try artist_infos.append(.object);
const artist_data = try jetzig.database.Query(.Artist).where(.{ .id = artist.artist_id }).all(request.repo);
for (artist_data) |ad| {
try artist_info.put("name", ad.name);
try artist_info.put("id", ad.id);
}
}
try scrobble_view.put("song_name", scrobble.song.name);
try scrobble_view.put("song_id", scrobble.song.id);
try scrobble_view.put("artist_name", "placeholder");
try scrobble_view.put("artist_id", "placeholder");
try scrobble_view.put("album_name", scrobble.album.name);
try scrobble_view.put("album_id", scrobble.album.id);
try scrobble_view.put("date", scrobble.date);
}
return request.render(.ok); return request.render(.ok);
} }

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

@ -1,16 +1,42 @@
<html> <html>
<head> <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> </head>
<body> <body>
@partial partials/header @partial partials/header
<div> <h1>Scrobbles</h1>
<span>Look for an artist</span> <table id="myTable">
</div> <thead>
<form action="/scrobbles" method"GET"> <tr>
<label>Filename</label> <th>Song</th>
<input type="text" name="ar" /> <th>Artist(s)</th>
<input type="submit" value="Submit" /> <th>Album</th>
</form> <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> </body>
</html> </html>

2
src/app/views/songs.zig
View file

@ -7,9 +7,11 @@ pub fn index(request: *jetzig.Request) !jetzig.View {
const query = jetzig.database.Query(.Song).select(.{}).orderBy(.{ .name = .asc }); const query = jetzig.database.Query(.Song).select(.{}).orderBy(.{ .name = .asc });
const songs = try request.repo.all(query); const songs = try request.repo.all(query);
for (songs) |song| { for (songs) |song| {
const scrobbles = try jetzig.database.Query(.Scrobble).where(.{ .song_id = song.id }).count().execute(request.repo);
var song_view = try songs_view.append(.object); var song_view = try songs_view.append(.object);
try song_view.put("name", song.name); try song_view.put("name", song.name);
try song_view.put("url", song.id); try song_view.put("url", song.id);
try song_view.put("scrobbles", scrobbles);
} }
return request.render(.ok); return request.render(.ok);
} }

19
src/app/views/songs/index.zmpl
View file

@ -1,19 +1,34 @@
<html> <html>
<head> <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"> <meta charset="UTF-8">
</head> </head>
<body> <body>
@partial partials/header @partial partials/header
<h1>Songs</h1> <h1>Songs</h1>
<table> <table id="myTable">
<thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Scrobbles</th>
</tr>
</thead>
<tbody>
@for (.songs) |song| { @for (.songs) |song| {
<tr> <tr>
<td class=cell><a href="/songs/{{song.url}}">{{song.name}}</a></td> <td class=cell><a href="/songs/{{song.url}}">{{song.name}}</a></td>
<td>{{song.scrobbles}}</td>
</tr> </tr>
} }
</tbody>
</table> </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> </body>
</html> </html>