From f1e80dac9445109a85d98baeb66aae95f2cde118 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Wed, 17 Jun 2020 14:15:50 -0700
Subject: [PATCH] Add spinners to channel refresh buttons.

---
 frontends/ycdl_flask/templates/channel.html  | 22 ++++++++++++++--
 frontends/ycdl_flask/templates/channels.html | 27 +++++++++++++++++---
 2 files changed, 44 insertions(+), 5 deletions(-)
diff --git a/frontends/ycdl_flask/templates/channel.html b/frontends/ycdl_flask/templates/channel.html
index 755db61..fb3d00a 100644
--- a/frontends/ycdl_flask/templates/channel.html
+++ b/frontends/ycdl_flask/templates/channel.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/spinner.js"></script>
 
 <style>
 #content_body
@@ -155,8 +156,8 @@ https://stackoverflow.com/a/35153397
 {{header.make_header()}}
 <div id="content_body">
     {% if channel is not none %}
-    <span><button class="refresh_button" onclick="api.channels.refresh_channel(CHANNEL_ID, false, common.refresh)">Refresh new videos</button></span>
-    <span><button class="refresh_button" onclick="api.channels.refresh_channel(CHANNEL_ID, true, common.refresh)">Refresh everything</button></span>
+    <span><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(false)">Refresh new videos</button></span>
+    <span><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(true)">Refresh everything</button></span>
     {% endif %}
 
     <p><!-- spacer --></p>
@@ -267,6 +268,23 @@ var DOWNLOAD_FILTER = "{{download_filter if download_filter else ""}}";
 var video_card_first_selected = null;
 var video_card_selections = [];
 
+function refresh_channel_form(force)
+{
+    console.log(`Refreshing channel ${CHANNEL_ID}, force=${force}.`);
+    api.channels.refresh_channel(CHANNEL_ID, force, refresh_channel_callback)
+}
+function refresh_channel_callback(response)
+{
+    if (response["meta"]["status"] == 200)
+    {
+        common.refresh();
+    }
+    else
+    {
+        alert(JSON.stringify(response));
+    }
+}
+
 var search_filter_box = document.getElementById("search_filter");
 var search_filter_hook = function(event)
 {
diff --git a/frontends/ycdl_flask/templates/channels.html b/frontends/ycdl_flask/templates/channels.html
index 6b4021d..1cee918 100644
--- a/frontends/ycdl_flask/templates/channels.html
+++ b/frontends/ycdl_flask/templates/channels.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/spinner.js"></script>
 
 <style>
 #content_body
@@ -49,8 +50,8 @@
 <body>
 {{header.make_header()}}
 <div id="content_body">
-    <span><button class="refresh_button" onclick="api.channels.refresh_all_channels(false, common.refresh)">Refresh new videos</button></span>
-    <span><button class="refresh_button" onclick="api.channels.refresh_all_channels(true, common.refresh)">Refresh everything</button></span>
+    <span><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(false)">Refresh new videos</button></span>
+    <span><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(true)">Refresh everything</button></span>
     <div>
         <input type="text" id="new_channel_textbox">
         <button id="new_channel_button" onclick="add_channel_form(event)">Add new channel</button>
@@ -83,13 +84,33 @@ function add_channel_form(event)
         api.channels.add_channel(box.value, add_channel_callback);
     }
 }
-
 function add_channel_callback(response)
 {
     if (response["meta"]["status"] == 200)
     {
         window.location.href = "/channel/" + response["data"]["id"];
     }
+    else
+    {
+        alert(JSON.stringify(response));
+    }
+}
+
+function refresh_all_channels_form(force)
+{
+    console.log(`Refreshing all channels, force=${force}.`);
+    api.channels.refresh_all_channels(force, refresh_all_channels_callback)
+}
+function refresh_all_channels_callback(response)
+{
+    if (response["meta"]["status"] == 200)
+    {
+        common.refresh();
+    }
+    else
+    {
+        alert(JSON.stringify(response));
+    }
 }
 </script>
 </html>
