Implemented video management facilities.

YtManagerApp/templates/YtManagerApp/index_videos.html

@@ -21,13 +21,28 @@
                         <small class="text-muted">{{ video.publish_date }}</small>
                         <a class="card-more float-right text-muted"
                            href="#" role="button" id="dropdownMenuLink"
-                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="typcn typcn-cog"></span></a>
+                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="typcn typcn-cog"></span>
+                        </a>
                         <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                            <a class="dropdown-item" href="#">Mark {{ video.watched | yesno:"not watched,watched" }}</a>
-                            {% if video.downloaded_path %}
-                                <a class="dropdown-item" href="#">Delete downloaded</a>
+                            {% if video.watched %}
+                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_unwatched' video.id %}">
+                                    Mark not watched
+                                </a>
                             {% else %}
-                                <a class="dropdown-item" href="#">Download</a>
+                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_watched' video.id %}">
+                                    Mark watched
+                                </a>
+                            {% endif %}
+
+                            {% if video.downloaded_path %}
+                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_delete_video_files' video.id %}">
+                                    Delete downloaded
+                                </a>
+                            {% else %}
+                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_download_video_files' video.id %}" >
+                                    Download
+                                </a>
                             {% endif %}
                         </div>
                     </div>

YtManagerApp/templates/YtManagerApp/js/common.js

@@ -152,3 +152,34 @@ class AjaxModal
             });
     }
 }
+
+function syncNow() {
+    $.post("{% url 'ajax_action_sync_now' %}", {
+        csrfmiddlewaretoken: '{{ csrf_token }}'
+    });
+}
+
+function ajaxLink_Clicked() {
+    let url_post = $(this).data('post-url');
+    let url_get = $(this).data('get-url');
+
+    if (url_post != null) {
+        $.post(url_post, {
+            csrfmiddlewaretoken: '{{ csrf_token }}'
+        });
+    }
+    else if (url_get != null) {
+        $.get(url_get, {
+            csrfmiddlewaretoken: '{{ csrf_token }}'
+        });
+    }
+}
+
+///
+/// Initialization
+///
+$(document).ready(function ()
+{
+    $(".ajax-link").on("click", ajaxLink_Clicked);
+    $("#btn_sync_now").on("click", syncNow);
+});

YtManagerApp/templates/YtManagerApp/js/index.js

@@ -130,7 +130,7 @@ function videos_ReloadWithTimer()
     {
         videos_Submit.call($('#form_video_filter'));
         videos_timeout = null;
-    }, 300);
+    }, 200);
 }
 
 function videos_Submit(e)
@@ -144,6 +144,7 @@ function videos_Submit(e)
     $.post(url, form.serialize())
         .done(function(result) {
             $("#videos-wrapper").html(result);
+            $(".ajax-link").on("click", ajaxLink_Clicked);
         })
         .fail(function() {
             $("#videos-wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
@@ -184,4 +185,5 @@ $(document).ready(function ()
     filters_form.find('select[name=sort]').on('change', videos_ReloadWithTimer);
     filters_form.find('select[name=show_watched]').on('change', videos_ReloadWithTimer);
     filters_form.find('select[name=show_downloaded]').on('change', videos_ReloadWithTimer);
+    videos_Reload();
 });

YtManagerApp/templates/YtManagerApp/master_default.html

@@ -65,5 +65,12 @@
             {% block body %}
             {% endblock %}
         </div>
+
+        <footer class="footer bg-light">
+            <span class="ml-auto text-muted">Last synchronized: just now</span>
+            <button id="btn_sync_now" class="btn btn-sm btn-light" title="Synchronize now!">
+                <span class="typcn typcn-arrow-sync" aria-hidden="true"></span>
+            </button>
+        </footer>
     </body>
 </html>