implement toggle view ignored only in downloads page

This commit is contained in:
simon 2021-10-03 18:17:07 +07:00
parent 26a0f8930a
commit ed73bff8fa
4 changed files with 128 additions and 30 deletions

View File

@ -27,19 +27,26 @@
</div> </div>
</div> </div>
</div> </div>
<div class="padding-box"> <div class="view-controls">
<span>Change show / hide ignored only </span><span class="settings-current">{{ filter_view }}</span> <div class="toggle">
<select name="showIgnoredOnly" id="showIgnoredOnly" onchange="showIgnoredOnly(this.value)"> <span>Show only ignored videos:</span>
<option value="" disabled selected> -- change -- </option> <div class="toggleBox">
<option value="ignore">show ignored only</option> <input
<option value="pending">show download queue</option> id="show_ignored_only" onclick="toggleCheckbox(this)" type="checkbox"
</select> {% if show_ignored_only %}
</div> checked
<div class="view-icons"> {% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
</div>
</div> </div>
{% if filter_view == "ignore" %} {% if show_ignored_only %}
<h2>Ignored from download</h2> <h2>Ignored from download</h2>
{% else %} {% else %}
<h2>Download queue</h2> <h2>Download queue</h2>
@ -53,7 +60,7 @@
<img src="{{ video.vid_thumb_url }}" alt="video_thumb"> <img src="{{ video.vid_thumb_url }}" alt="video_thumb">
</div> </div>
<div class="dl-desc {{ view_style }}"> <div class="dl-desc {{ view_style }}">
{% if filter_view == "ignore" %} {% if show_ignored_only %}
<h3>Ignore: {{ video.title }}</h3> <h3>Ignore: {{ video.title }}</h3>
{% else %} {% else %}
<h3>Download: {{ video.title }}</h3> <h3>Download: {{ video.title }}</h3>
@ -64,7 +71,7 @@
<span>{{ video.channel_name }}</span> <span>{{ video.channel_name }}</span>
{% endif %} {% endif %}
<p>Published: {{ video.published }} | Duration: {{ video.duration }} | {{ video.youtube_id }}</p> <p>Published: {{ video.published }} | Duration: {{ video.duration }} | {{ video.youtube_id }}</p>
{% if filter_view == "ignore" %} {% if show_ignored_only %}
<button data-id="{{ video.youtube_id }}" onclick="forgetIgnore(this)">Forget</button> <button data-id="{{ video.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
<button data-id="{{ video.youtube_id }}" onclick="addSingle(this)">Add to queue</button> <button data-id="{{ video.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
{% else %} {% else %}

View File

@ -147,13 +147,13 @@ class DownloadView(View):
config = AppConfig().config config = AppConfig().config
colors = config["application"]["colors"] colors = config["application"]["colors"]
view_style = config["default_view"]["downloads"] view_style = config["default_view"]["downloads"]
filter_view = RedisArchivist().get_message("filter_view") show_ignored_only = RedisArchivist().get_message("show_ignored_only")["status"]
page_get = int(request.GET.get("page", 0)) page_get = int(request.GET.get("page", 0))
pagination_handler = Pagination(page_get) pagination_handler = Pagination(page_get)
url = config["application"]["es_url"] + "/ta_download/_search" url = config["application"]["es_url"] + "/ta_download/_search"
data = self.build_data(pagination_handler, filter_view) data = self.build_data(pagination_handler, show_ignored_only)
search = SearchHandler(url, data, cache=False) search = SearchHandler(url, data, cache=False)
videos_hits = search.get_data() videos_hits = search.get_data()
@ -173,16 +173,21 @@ class DownloadView(View):
"pagination": pagination, "pagination": pagination,
"title": "Downloads", "title": "Downloads",
"colors": colors, "colors": colors,
"filter_view": filter_view, "show_ignored_only": show_ignored_only,
"view_style": view_style, "view_style": view_style,
} }
return render(request, "home/downloads.html", context) return render(request, "home/downloads.html", context)
@staticmethod @staticmethod
def build_data(pagination_handler, filter_view): def build_data(pagination_handler, show_ignored_only):
"""build data dict for search""" """build data dict for search"""
page_size = pagination_handler.pagination["page_size"] page_size = pagination_handler.pagination["page_size"]
page_from = pagination_handler.pagination["page_from"] page_from = pagination_handler.pagination["page_from"]
if show_ignored_only:
filter_view = "ignore"
else:
filter_view = "pending"
data = { data = {
"size": page_size, "size": page_size,
"from": page_from, "from": page_from,
@ -601,8 +606,10 @@ class PostData:
def show_ignored_only(self): def show_ignored_only(self):
"""switch view on /downloads/ to show ignored only""" """switch view on /downloads/ to show ignored only"""
show_value = self.exec_val show_value = self.exec_val
print("Download view: " + show_value) print(f"Filter download view ignored only: {show_value}")
RedisArchivist().set_message("filter_view", show_value, expire=False) RedisArchivist().set_message(
"show_ignored_only", {"status": show_value}, expire=False
)
return {"success": True} return {"success": True}
def forget_ignore(self): def forget_ignore(self):

View File

@ -138,6 +138,73 @@ button:hover {
text-decoration: underline; text-decoration: underline;
} }
/* toggle on-off */
.toggle {
display: flex;
align-items: center;
}
.toggleBox > input[type="checkbox"] {
position: relative;
width: 70px;
height: 30px;
background-color: var(--accent-font-dark);
border-color: var(--accent-font-dark);
appearance: none;
border-radius: 15px;
transition: 0.4s;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.toggleBox > input:checked[type="checkbox"] {
background-color: var(--accent-font-light);
border-color: var(--accent-font-light);
}
.toggleBox > input[type="checkbox"]::before {
z-index: 2;
position: absolute;
content: "";
left: 0;
top: 0;
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
transform: scale(1.1);
transition: 0.4s;
}
.toggleBox > input:checked[type="checkbox"]::before {
left: 40px;
}
.toggleBox {
margin-left: 10px;
position: relative;
display: inline;
}
.toggleBox > label {
position: absolute;
color: var(--main-font);
pointer-events: none;
}
.toggleBox > .onbtn {
bottom: 15px;
left: 15px;
font-family: Sen-Regular, sans-serif;
}
.toggleBox > .ofbtn {
bottom: 15px;
right: 15px;
font-family: Sen-Regular, sans-serif;
color: var(--main-font);
}
/* navigation */ /* navigation */
.top-nav { .top-nav {
display: block; display: block;
@ -211,6 +278,14 @@ button:hover {
filter: var(--img-filter); filter: var(--img-filter);
} }
.view-controls {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 2px solid;
border-color: var(--accent-font-dark);
margin-bottom: 20px;
}
.view-icons { .view-icons {
display: flex; display: flex;
justify-content: end; justify-content: end;
@ -713,6 +788,9 @@ button:hover {
.footer { .footer {
text-align: center; text-align: center;
} }
.toggle {
flex-wrap: wrap;
}
.top-nav { .top-nav {
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
display: flex; display: flex;

View File

@ -54,6 +54,22 @@ function changeView(image) {
}, 500); }, 500);
} }
function toggleCheckbox(checkbox) {
// pass checkbox id as key and checkbox.checked as value
var toggleId = checkbox.id;
var toggleVal = checkbox.checked;
var payloadDict = {};
payloadDict[toggleId] = toggleVal;
var payload = JSON.stringify(payloadDict);
console.log(payload);
sendPost(payload);
setTimeout(function(){
var currPage = window.location.pathname;
window.location.replace(currPage);
return false;
}, 500);
}
// download page buttons // download page buttons
function rescanPending() { function rescanPending() {
var payload = JSON.stringify({'rescan_pending': true}); var payload = JSON.stringify({'rescan_pending': true});
@ -90,16 +106,6 @@ function downloadNow(button) {
}, 500); }, 500);
} }
function showIgnoredOnly(showValue) {
var payload = JSON.stringify({'show_ignored_only': showValue});
console.log(payload);
sendPost(payload);
setTimeout(function(){
window.location.replace("/downloads/");
return false;
}, 500);
}
function forgetIgnore(button) { function forgetIgnore(button) {
var youtube_id = button.getAttribute('data-id'); var youtube_id = button.getAttribute('data-id');
var payload = JSON.stringify({'forgetIgnore': youtube_id}); var payload = JSON.stringify({'forgetIgnore': youtube_id});