From 7c34ceb9f811c46d432cb8566cf82bc3a68b274e Mon Sep 17 00:00:00 2001 From: simon Date: Fri, 1 Oct 2021 14:42:17 +0700 Subject: [PATCH] framework to switch between grid and list view --- tubearchivist/home/config.json | 5 + tubearchivist/home/templates/home/home.html | 4 + tubearchivist/home/views.py | 15 ++- tubearchivist/static/css/style.css | 13 +++ tubearchivist/static/img/icon-gridview.svg | 122 ++++++++++++++++++++ tubearchivist/static/img/icon-listview.svg | 122 ++++++++++++++++++++ tubearchivist/static/script.js | 12 ++ 7 files changed, 291 insertions(+), 2 deletions(-) create mode 100644 tubearchivist/static/img/icon-gridview.svg create mode 100644 tubearchivist/static/img/icon-listview.svg diff --git a/tubearchivist/home/config.json b/tubearchivist/home/config.json index 4a02b2e..3aef457 100644 --- a/tubearchivist/home/config.json +++ b/tubearchivist/home/config.json @@ -6,6 +6,11 @@ "show_subed_only": false, "page_size": 12 }, + "default_view": { + "home": "grid", + "channel": "grid", + "downloads": "list" + }, "subscriptions": { "auto_search": false, "auto_download": false, diff --git a/tubearchivist/home/templates/home/home.html b/tubearchivist/home/templates/home/home.html index 9ddeb4a..714905b 100644 --- a/tubearchivist/home/templates/home/home.html +++ b/tubearchivist/home/templates/home/home.html @@ -31,6 +31,10 @@ +
+ grid view + list view +
{% if videos %} diff --git a/tubearchivist/home/views.py b/tubearchivist/home/views.py index 738df59..d8a1138 100644 --- a/tubearchivist/home/views.py +++ b/tubearchivist/home/views.py @@ -39,7 +39,7 @@ class HomeView(View): def get(self, request): """return home search results""" - colors, sort_order, hide_watched = self.read_config() + colors, view_style, sort_order, hide_watched = self.read_config() # handle search search_get = request.GET.get("search", False) if search_get: @@ -66,6 +66,7 @@ class HomeView(View): "sortorder": sort_order, "hide_watched": hide_watched, "colors": colors, + "view_style": view_style, } return render(request, "home/home.html", context) @@ -108,9 +109,10 @@ class HomeView(View): """read needed values from redis""" config_handler = AppConfig().config colors = config_handler["application"]["colors"] + view_style = config_handler["default_view"]["home"] sort_order = RedisArchivist().get_message("sort_order") hide_watched = RedisArchivist().get_message("hide_watched") - return colors, sort_order, hide_watched + return colors, view_style, sort_order, hide_watched @staticmethod def post(request): @@ -474,6 +476,7 @@ class PostData: """map dict key and return function to execute""" exec_map = { "watched": self.watched, + "change_view": self.change_view, "rescan_pending": self.rescan_pending, "ignore": self.ignore, "dl_pending": self.dl_pending, @@ -499,6 +502,14 @@ class PostData: WatchState(self.exec_val).mark_as_watched() return {"success": True} + def change_view(self): + """process view changes in home, channel, and downloads""" + origin, new_view = self.exec_val.split(":") + print(f"change view on page {origin} to {new_view}") + update_dict = {f"default_view.{origin}": [new_view]} + AppConfig().update_config(update_dict) + return {"success": True} + @staticmethod def rescan_pending(): """look for new items in subscribed channels""" diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css index b2c3572..cc51768 100644 --- a/tubearchivist/static/css/style.css +++ b/tubearchivist/static/css/style.css @@ -211,6 +211,19 @@ button:hover { filter: var(--img-filter); } +.view-icons { + display: flex; + justify-content: end; + margin-top: 15px; +} + +.view-icons img { + width: 30px; + margin: 5px 10px; + cursor: pointer; + filter: var(--img-filter); +} + #search-box { display: none; flex: auto; diff --git a/tubearchivist/static/img/icon-gridview.svg b/tubearchivist/static/img/icon-gridview.svg new file mode 100644 index 0000000..570696b --- /dev/null +++ b/tubearchivist/static/img/icon-gridview.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/tubearchivist/static/img/icon-listview.svg b/tubearchivist/static/img/icon-listview.svg new file mode 100644 index 0000000..d56b8df --- /dev/null +++ b/tubearchivist/static/img/icon-listview.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index 4075a12..32e64aa 100644 --- a/tubearchivist/static/script.js +++ b/tubearchivist/static/script.js @@ -43,6 +43,18 @@ function unsubscribe(channel_id) { document.getElementById(channel_id).remove(); } +function changeView(image) { + var sourcePage = image.getAttribute("data-origin"); + var newView = image.getAttribute("data-value"); + var payload = JSON.stringify({'change_view': sourcePage + ":" + newView}); + console.log(payload); + sendPost(payload); + setTimeout(function(){ + location.reload(); + return false; + }, 500); +} + // download page buttons function rescanPending() { var payload = JSON.stringify({'rescan_pending': true});