cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Activity

add search db feature

Browse source
This commit is contained in:
XenGi 2024-04-29 00:14:39 +02:00
parent cdf12411a2
commit 62598c805e
Signed by: xengi
SSH key fingerprint: SHA256:FGp51kRvGOcWnTHiOI39ImwVO4A3fpvR30nPX3LpV7g
6 changed files with 94 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

13
static/index.html
View file

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8" />
<meta charset="UTF-8">
<title>Sanic</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="treeview.css">
<link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
<link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png">
</head>
<body>
@ -14,7 +14,7 @@
<button class="close">&times;</button>
<form method="dialog">
<label for="control-playlist-name">Name</label>
<input type="text" id="control-playlist-name" name="playlist-name" autofocus />
<input type="text" id="control-playlist-name" name="playlist-name" autofocus>
<button>Save</button>
</form>
</dialog>
@ -187,9 +187,8 @@
</div><!--/#file-browser-->
<div id="search" style="display: none">
<div>
<label for="control-search"></label>
<input type="text" id="control-search" name="search" />
<button>Search</button>
<input type="text" id="control-search-pattern" name="pattern">
<button id="control-search-submit">Search</button>
</div>
<div>
actions

54
static/index.js
View file

@ -38,6 +38,8 @@ const control_attach_playlist = document.getElementById("control-attach-playlist
const control_save_playlist = document.getElementById("control-save-playlist");
const control_delete_playlist = document.getElementById("control-delete-playlist");
const result_table = document.querySelector("#result tbody");
const control_search_pattern = document.getElementById("control-search-pattern");
const control_search_submit = document.getElementById("control-search-submit");
// Utility functions
@ -82,24 +84,7 @@ refreshPlaylists = () => {
option.addEventListener("click", () => {
fetch(`${API_URL}/playlists/${p["playlist"]}`).then(async r => {
if (r.status === 200) {
const songs = await r.json();
console.log(songs)
result_table.innerHTML = "";
songs.forEach(song => {
const tr = document.createElement("tr");
const artist = document.createElement("td");
artist.innerText = song["Artist"];
const title = document.createElement("td");
title.innerText = song["Title"];
const time = document.createElement("td");
time.innerText = secondsToTrackTime(parseInt(song["Time"]))
tr.appendChild(artist);
tr.appendChild(title);
tr.appendChild(document.createElement("td")); // album
tr.appendChild(document.createElement("td")); // genre
tr.appendChild(time);
result_table.appendChild(tr);
});
fillResultTable(await r.json());
}
})
});
@ -109,6 +94,25 @@ refreshPlaylists = () => {
});
}
fillResultTable = (songs) => {
result_table.innerHTML = "";
songs.forEach(song => {
const tr = document.createElement("tr");
const artist = document.createElement("td");
artist.innerText = song["Artist"];
const title = document.createElement("td");
title.innerText = song["Title"];
const time = document.createElement("td");
time.innerText = secondsToTrackTime(parseInt(song["Time"]))
tr.appendChild(artist);
tr.appendChild(title);
tr.appendChild(document.createElement("td")); // album
tr.appendChild(document.createElement("td")); // genre
tr.appendChild(time);
result_table.appendChild(tr);
});
}
// UI controls
tab_browser.addEventListener("click", () => {
@ -154,12 +158,20 @@ dialog_save_playlist_close.addEventListener("click", () => {
dialog_save_playlist.close()
});
// control_progress.addEventListener("change", event => {
// control_time.value = `${secondsToTrackTime(event.target.value)}/${secondsToTrackTime(event.target.max)}`;
// });
// Add API calls to controls
control_search_submit.addEventListener("click", event => {
event.preventDefault()
fetch(`${API_URL}/database/${control_search_pattern.value}`).then(async r => {
if (r.status === 200) {
fillResultTable([...new Set(await r.json())]);
} else {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
})
});
control_replace_playlist.addEventListener("click", () => {
fetch(`${API_URL}/queue/replace/${control_playlist_list.value}`).then(async r => {
if (r.status !== 200) {

9
static/style.css
View file

@ -426,3 +426,12 @@ dialog .close {
top: 1pt;
right: 1pt;
}
#control-search-pattern {
margin: 1em;
}
#search:first-child {
display: flex;
justify-content: space-between;
}