player filters! favourites! stats!

also, small fixes/improvements, new ryuji feature: "if in array", "if not in array"
This commit is contained in:
Jon Dough
2024-01-16 14:52:28 +05:30
parent 28aed59070
commit b2283a33f9
10 changed files with 149 additions and 22 deletions

View File

@@ -1 +1 @@
<li><a href="/[[ listing.type ]]/[[ listing.name ]]/[[ chapter ]]">[[ chapter ]]</a></li>
<li><a href="/[[ listing.type ]]/[[ listing.name ]]/[[ chapter ]]">[[ if:chapter:*listing.favourites.chapters ]]★[[ endif ]][[ chapter ]]</a></li>

View File

@@ -1 +1 @@
<li class="listing [[ listing.type ]]-listing"><a href="/[[ listing.type ]]/[[ listing.name ]]">[[ listing.name ]] ([[ listing.type ]])</a></li>
<li class="listing [[ listing.type ]]-listing"><a href="/[[ listing.type ]]/[[ listing.name ]]">[[ if:listing.favourites ]][[ if:listing.favourites.listing ]]★[[ endif ]][[ endif ]][[ listing.name ]] ([[ listing.type ]])</a></li>

View File

@@ -4,11 +4,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>these r not the droids you u looking 4</title>
<style>
/* */
</style>
</head>
<body>
<div style="position: absolute; float: right; right: 10px;">
<a href="/player">Player</a>
-
<a href="/stats">Stats</a>
</div>
<div id="main">
<label for="show">Show:</label>
<select id="show" onchange="show_change()">

View File

@@ -19,6 +19,10 @@
.manga img {
width: 100%;
}
#scroll-to-bottom:hover {
cursor: pointer;
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
.manga {
margin: 10px 5vw;
@@ -32,7 +36,7 @@
<div id="main">
<div class="manga">
<h2 style="display: inline-block;">[[ listing.name ]] [[ chapter ]]</h2>
<span style="cursor: pointer;" onclick="document.getElementById('nav').scrollIntoView({ behavior: 'smooth' })">Scroll to Bottom</span>
<span id="scroll-to-bottom" onclick="document.getElementById('nav').scrollIntoView({ behavior: 'smooth' })">Scroll to Bottom</span>
<br>
[[ for:images:image ]]
[[ component:page ]]

View File

@@ -11,8 +11,11 @@
margin: 0;
padding: 0;
}
#main {
margin: 10px;
}
.player {
margin: 25px;
margin: 15px;
}
#filters-container {
padding-left: 15px;
@@ -24,6 +27,7 @@
</head>
<body>
<div id="main">
<a href="/">Front page</a>
<div class="player">
<h2 style="display: inline-block;">shuffling</h2>
<b>Current Song <span id="current-song"></span></b>
@@ -40,12 +44,12 @@
<input type="button" value="Deselect All" onclick="filter_deselect_all()"/>
[[ for:artists:artist ]]
<div class="artist-filter">
<input type="checkbox" id="[[ artist.name ]]-checkbox" onchange="artist_filter_toggle('[[ artist.name ]]')"/>
<label for="[[ artist.name ]]-checkbox">[[ artist.name ]]</label>
<div id="[[ artist.name ]]-song-filter" class="artist-song-filter">
<input type="checkbox" id="[[ artist.sanitized_name ]]-checkbox" onchange="artist_filter_toggle('[[ artist.sanitized_name ]]')"/>
<label for="[[ artist.sanitized_name ]]-checkbox">[[ if:artist.favourite ]]★[[ endif ]][[ artist.name ]]</label>
<div id="[[ artist.sanitized_name ]]-song-filter" class="artist-song-filter">
[[ for:artist.songs:song ]]
<input type="checkbox" id="[[ artist.name ]]-[[ song ]]-checkbox" onchange="artist_song_filter_toggle('[[ artist.name ]]', '[[ song ]]')"/>
<label for="[[ artist.name ]]-[[ song ]]-checkbox">[[ song ]]</label>
<input type="checkbox" id="[[ artist.sanitized_name ]]-[[ song.sanitized_name ]]-checkbox" onchange="update_playable_songs()"/>
<label for="[[ artist.sanitized_name ]]-[[ song.sanitized_name ]]-checkbox">[[ if:song.favourite ]]★[[ endif ]][[ song.name ]]</label>
[[ endfor ]]
</div>
</div>
@@ -81,15 +85,15 @@
});
//show filters toggle
const show_filters = document.getElementById("show-filters");
function filter_toggle() {
function filter_check() {
if (show_filters.checked) {
document.getElementById("filters-container").style.display = "block";
} else {
document.getElementById("filters-container").style.display = "none";
}
}
show_filters.onchange = filter_toggle;
filter_toggle();
show_filters.onchange = filter_check;
filter_check();
//artist and artist song filter toggle
function artist_filter_toggle(artist) {
document.querySelectorAll(`#${artist}-song-filter > input[type=\"checkbox\"]`).forEach((c) => {
@@ -97,8 +101,8 @@
c.onchange();
});
}
function artist_song_filter_toggle(artist, song) {
playable_songs = songs.filter((song) => document.getElementById(`${song.replace("/", "-")}-checkbox`).checked);
function update_playable_songs() {
playable_songs = songs.filter((song) => document.getElementById(`${song.replace("/", "-").replaceAll("\"", "\\\"")}-checkbox`).checked);
}
function filter_select_all() {
document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {

22
templates/stats.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>stats</title>
</head>
<body>
<div id="main">
<a href="/">Front page</a>
<div>
<h3>Manga series: [[ manga_series_count ]]</h3>
<h3>Manga chapters: [[ manga_chapters_count ]]</h3>
<h3>Manga pages: [[ manga_pages_count ]]</h3>
<h3>Anime series: [[ anime_series_count ]]</h3>
<h3>Anime episodes: [[ anime_episodes_count ]]</h3>
<h3>Music Artists: [[ artists_count ]]</h3>
<h3>Songs: [[ songs_count ]]</h3>
</div>
</div>
</body>
</html>