Implemented YouTube layer, as well as synchronization on schedule. TODO: fix issue where ready() is called twice. The synchronization should only run on one thread/process.

YtManagerApp/templates/YtManagerApp/controls/folder_edit_dialog.html

@@ -1,36 +1,37 @@
-<div id="folder_edit_dialog" class="modal" tabindex="-1" role="dialog">
+<div id="folderEditDialog" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 id="folder_edit_dialog_title" class="modal-title">Edit folder</h5>
+                <h5 id="folderEditDialog_Title" class="modal-title">Edit folder</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div id="folder_edit_dialog_loading" class="modal-body">
+            <div id="folderEditDialog_Loading" class="modal-body">
                 <div class="loading-dual-ring"></div>
-                <div id="folder_edit_dialog_error"></div>
             </div>
-            <form id="folder_edit_dialog_form" action="{% url 'ajax_edit_folder' %}" method="post">
+            <div id="folderEditDialog_Error">
+            </div>
+            <form id="folderEditDialog_Form" action="{% url 'ajax_edit_folder' %}" method="post">
                 <div class="modal-body">
                     {% csrf_token %}
-                    <input type="hidden" id="folder_edit_dialog_id" name="id" value="#">
+                    <input type="hidden" id="folderEditDialog_Id" name="id" value="#">
                     <div class="form-group row">
-                        <label class="col-sm-3" for="folder_edit_dialog_name">Name</label>
+                        <label class="col-sm-3" for="folderEditDialog_Name">Name</label>
                         <div class="col-sm-9">
-                            <input type="text" class="form-control" id="folder_edit_dialog_name" name="name" placeholder="Folder name">
+                            <input type="text" class="form-control" id="folderEditDialog_Name" name="name" placeholder="Folder name">
                         </div>
                     </div>
                     <div class="form-group row">
-                        <label class="col-sm-3" for="folder_edit_dialog_parent">Parent folder</label>
+                        <label class="col-sm-3" for="folderEditDialog_Parent">Parent folder</label>
                         <div class="col-sm-9">
-                            <select class="form-control" id="folder_edit_dialog_parent" name="parent">
+                            <select class="form-control" id="folderEditDialog_Parent" name="parent">
                             </select>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button id="folder_edit_dialog_submit" type="submit" class="btn btn-primary">Submit</button>
+                    <button id="folderEditDialog_Submit" type="submit" class="btn btn-primary">Submit</button>
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                 </div>
             </form>

YtManagerApp/templates/YtManagerApp/controls/subscription_edit_dialog.html

@@ -1,36 +1,42 @@
-<div id="subscription_edit_dialog" class="modal" tabindex="-1" role="dialog">
+<div id="subscriptionEditDialog" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 id="subscription_edit_dialog_title" class="modal-title">Edit subscription</h5>
+                <h5 id="subscriptionEditDialog_Title" class="modal-title">Edit subscription</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div id="subscription_edit_dialog_loading" class="modal-body">
+            <div id="subscriptionEditDialog_Loading" class="modal-body">
                 <div class="loading-dual-ring"></div>
-                <div id="subscription_edit_dialog_error"></div>
             </div>
-            <form id="subscription_edit_dialog_form" action="{% url 'ajax_edit_subscription' %}" method="post">
+            <div id="subscriptionEditDialog_Error"></div>
+            <form id="subscriptionEditDialog_Form" action="{% url 'ajax_edit_subscription' %}" method="post">
                 <div class="modal-body">
                     {% csrf_token %}
-                    <input type="hidden" id="subscription_edit_dialog_id" name="id" value="#">
+                    <input type="hidden" id="subscriptionEditDialog_Id" name="id" value="#">
                     <div class="form-group row">
-                        <label class="col-sm-3" for="subscription_edit_dialog_url">Link:</label>
+                        <label class="col-sm-3" for="subscriptionEditDialog_Url">Link:</label>
                         <div class="col-sm-9">
-                            <input type="text" class="form-control" id="subscription_edit_dialog_name" name="name" placeholder="subscription name">
+                            <input type="text" class="form-control" id="subscriptionEditDialog_Url" name="url" placeholder="Subscription URL (playlist, channel)">
                         </div>
                     </div>
                     <div class="form-group row">
-                        <label class="col-sm-3" for="subscription_edit_dialog_parent">Parent subscription</label>
+                        <label class="col-sm-3" for="subscriptionEditDialog_Name">Name:</label>
                         <div class="col-sm-9">
-                            <select class="form-control" id="subscription_edit_dialog_parent" name="parent">
+                            <input type="text" class="form-control" id="subscriptionEditDialog_Name" name="name" placeholder="Subscription name">
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-sm-3" for="subscriptionEditDialog_Parent">Parent subscription</label>
+                        <div class="col-sm-9">
+                            <select class="form-control" id="subscriptionEditDialog_Parent" name="parent">
                             </select>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button id="subscription_edit_dialog_submit" type="submit" class="btn btn-primary">Submit</button>
+                    <button id="subscriptionEditDialog_Submit" type="submit" class="btn btn-primary">Submit</button>
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                 </div>
             </form>

YtManagerApp/templates/YtManagerApp/index.html

@@ -12,6 +12,7 @@
     </script>
 
     {% include 'YtManagerApp/controls/folder_edit_dialog.html' %}
+    {% include 'YtManagerApp/controls/subscription_edit_dialog.html' %}
 
 {% endblock %}
 
@@ -19,7 +20,7 @@
 
     <div class="btn-toolbar" role="toolbar" aria-label="Subscriptions toolbar">
         <div class="btn-group btn-group-sm mr-2" role="group">
-            <button type="button" class="btn btn-secondary" >
+            <button id="btn_create_sub" type="button" class="btn btn-secondary" >
                 <i class="material-icons" aria-hidden="true">add</i>
             </button>
             <button id="btn_create_folder" type="button" class="btn btn-secondary">

YtManagerApp/templates/YtManagerApp/js/subscription_tree.js

@@ -1,79 +1,226 @@
-function folderEditDialog_Show(isNew, editNode)
-{
-    let dialog = $("#folder_edit_dialog");
-    dialog.find('#folder_edit_dialog_title').text(isNew ? "New folder" : "Edit folder");
-    dialog.find("#folder_edit_dialog_loading").show();
-    dialog.find("#folder_edit_dialog_error").hide();
-    dialog.find("#folder_edit_dialog_form").hide();
-    dialog.modal();
+class Dialog {
+    constructor(modalId) {
+        this.modal = $(modalId);
+        this.title = $(modalId + "_Title");
+        this.form = $(modalId + "_Form");
+        this.error = $(modalId + "_Error");
+        this.loading = $(modalId + "_Loading");
+        this.btnSubmit = $(modalId + "_Submit");
+        this.setState('normal');
+    }
 
-    $.get("{% url 'ajax_get_folders' %}")
-        .done(function(folders)
-        {
-            // Populate list of folders
-            let selParent = dialog.find("#folder_edit_dialog_parent");
-            selParent.empty();
-            selParent.append(new Option('(None)', '#'));
+    setTitle(value) {
+        this.title.text(value);
+    }
 
-            let parentId = null;
-            if (!isNew) {
-                parentId = editNode.parent.replace('folder', '');
-            }
+    setState(state) {
+        if (state === 'loading') {
+            this.loading.show();
+            this.error.hide();
+            this.form.hide();
+        }
+        if (state === 'error') {
+            this.loading.hide();
+            this.error.show();
+            this.form.hide();
+        }
+        if (state === 'normal') {
+            this.loading.hide();
+            this.error.hide();
+            this.form.show();
+        }
+    }
 
-            for (let folder of folders)
-            {
-                let o = new Option(folder.text, folder.id);
-                if (!isNew && folder.id.toString() === parentId.toString())
-                    o.selected = true;
+    setError(text) {
+        this.error.text(text);
+    }
 
-                selParent.append(o);
-            }
+    showModal() {
+        this.modal.modal();
+    }
 
-            // Show form
-            dialog.find("#folder_edit_dialog_loading").hide();
-            dialog.find("#folder_edit_dialog_form").show();
-            dialog.find("#folder_edit_dialog_submit").text(isNew ? "Create" : "Save");
+    hideModal() {
+        this.modal.modal('hide');
+    }
+}
 
-            if (isNew)
-            {
-                dialog.find("#folder_edit_dialog_id").val('#');
-                dialog.find("#folder_edit_dialog_name").val('');
-            }
-            if (!isNew)
-            {
-                idTrimmed = editNode.id.replace('folder', '');
-                dialog.find("#folder_edit_dialog_id").val(idTrimmed);
-                dialog.find("#folder_edit_dialog_name").val(editNode.text);
-            }
+class FolderEditDialog extends Dialog {
+
+    constructor (modalId) {
+        super(modalId);
+        this.field_Id = $(modalId + "_Id");
+        this.field_Name = $(modalId + "_Name");
+        this.field_Parent = $(modalId + "_Parent");
+
+        let pThis = this;
+        this.form.submit(function(e) {
+            pThis.submit(e);
         })
-        .fail(function() {
-            let msgError = dialog.find("#folder_edit_dialog_error");
-            msgError.show();
-            msgError.text("An error occurred!");
-        });
+    }
+
+    setParentFolderOptions(folders, selectedId)
+    {
+        // Populate list of folders
+        this.field_Parent.empty();
+        this.field_Parent.append(new Option('(None)', '#'));
+
+        for (let folder of folders)
+        {
+            let o = new Option(folder.text, folder.id);
+            if (selectedId != null && folder.id.toString() === selectedId.toString())
+                o.selected = true;
+
+            this.field_Parent.append(o);
+        }
+    }
+
+    show (isNew, editNode) {
+        let pThis = this;
+        this.setTitle(isNew ? "New folder" : "Edit folder");
+        this.setState('loading');
+        this.showModal();
+
+        $.get("{% url 'ajax_get_folders' %}")
+            .done(function(folders)
+            {
+                let parentId = null;
+                if (!isNew) {
+                    parentId = editNode.parent.replace('folder', '');
+                }
+
+                pThis.setParentFolderOptions(folders, parentId);
+                pThis.setState('normal');
+                pThis.btnSubmit.text(isNew ? "Create" : "Save");
+
+                if (isNew)
+                {
+                    pThis.field_Id.val('#');
+                    pThis.field_Name.val('');
+                }
+                if (!isNew)
+                {
+                    let idTrimmed = editNode.id.replace('folder', '');
+                    pThis.field_Id.val(idTrimmed);
+                    pThis.field_Name.val(editNode.text);
+                }
+            })
+            .fail(function() {
+                pThis.setState('error');
+                pThis.setError('An error occurred!');
+            });
+    }
+
+    showNew() {
+        this.show(true, null);
+    }
+
+    showEdit(editNode) {
+        this.show(false, editNode);
+    }
+
+    submit(e) {
+        let url = this.form.attr('action');
+
+        $.post(url, this.form.serialize())
+            .done(tree_Refresh);
+
+        this.hideModal();
+        e.preventDefault();
+    }
 }
 
-function folderEditDialog_ShowNew()
-{
-    folderEditDialog_Show(true, null);
+class SubscriptionEditDialog extends Dialog {
+
+    constructor (modalId) {
+        super(modalId);
+        this.field_Id = $(modalId + "_Id");
+        this.field_Url = $(modalId + "_Url");
+        this.field_Name = $(modalId + "_Name");
+        this.field_Parent = $(modalId + "_Parent");
+
+        let pThis = this;
+        this.form.submit(function(e) {
+            pThis.submit(e);
+        })
+    }
+
+    setParentFolderOptions(folders, selectedId)
+    {
+        // Populate list of folders
+        this.field_Parent.empty();
+        this.field_Parent.append(new Option('(None)', '#'));
+
+        for (let folder of folders)
+        {
+            let o = new Option(folder.text, folder.id);
+            if (selectedId != null && folder.id.toString() === selectedId.toString())
+                o.selected = true;
+
+            this.field_Parent.append(o);
+        }
+    }
+
+    show (isNew, editNode) {
+        let pThis = this;
+        this.setTitle(isNew ? "New subscription" : "Edit subscription");
+        this.setState('loading');
+        this.showModal();
+
+        $.get("{% url 'ajax_get_folders' %}")
+            .done(function(folders)
+            {
+                let parentId = null;
+                if (!isNew) {
+                    parentId = editNode.parent.replace('folder', '');
+                }
+
+                pThis.setParentFolderOptions(folders, parentId);
+                pThis.setState('normal');
+                pThis.btnSubmit.text(isNew ? "Create" : "Save");
+
+                if (isNew)
+                {
+                    pThis.field_Id.val('#');
+                    pThis.field_Url.show();
+                    pThis.field_Url.val('');
+                    pThis.field_Name.hide();
+                    pThis.field_Name.val('');
+                }
+                if (!isNew)
+                {
+                    let idTrimmed = editNode.id.replace('sub', '');
+                    pThis.field_Id.val(idTrimmed);
+                    pThis.field_Url.hide();
+                    pThis.field_Url.val('');
+                    pThis.field_Name.show();
+                    pThis.field_Name.val(editNode.text);
+                }
+            })
+            .fail(function() {
+                pThis.setState('error');
+                pThis.setError('An error occurred!');
+            });
+    }
+
+    showNew() {
+        this.show(true, null);
+    }
+
+    showEdit(editNode) {
+        this.show(false, editNode);
+    }
+
+    submit(e) {
+        let url = this.form.attr('action');
+
+        $.post(url, this.form.serialize())
+            .done(tree_Refresh);
+
+        this.hideModal();
+        e.preventDefault();
+    }
 }
 
-function folderEditDialog_Close()
-{
-    $("#folder_edit_dialog").modal('hide');
-}
-
-function folderEditDialog_Submit(e)
-{
-    let form = $(this);
-    let url = form.attr('action');
-
-    $.post(url, form.serialize())
-        .done(tree_Refresh);
-
-    folderEditDialog_Close();
-    e.preventDefault();
-}
 
 function treeNode_Edit()
 {
@@ -82,10 +229,10 @@ function treeNode_Edit()
     {
         let node = selectedNodes[0];
         if (node.type === 'folder') {
-            folderEditDialog_Show(false, node);
+            folderEditDialog.showEdit(node);
         }
         else {
-            // TODO...
+            subscriptionEditDialog.showEdit(node);
         }
     }
 }
@@ -106,7 +253,13 @@ function treeNode_Delete()
             }
         }
         else {
-            // TODO...
+            let subId = node.id.toString().replace('sub', '');
+            if (confirm('Are you sure you want to delete subscription "' + node.text + '"?'))
+            {
+                $.post("{% url 'ajax_delete_subscription' 99999 %}".replace('99999', subId), {
+                    csrfmiddlewaretoken: '{{ csrf_token }}'
+                }).done(tree_Refresh);
+            }
         }
     }
 }
@@ -163,12 +316,24 @@ function tree_OnSelectionChanged(e, data)
     node = data.instance.get_selected(true)[0];
 }
 
-$(document).ready(function () 
+///
+/// Globals
+///
+let folderEditDialog = null;
+let subscriptionEditDialog = null;
+
+///
+/// Initialization
+///
+$(document).ready(function ()
 {
     tree_Initialize();
-    $("#btn_create_folder").on("click", folderEditDialog_ShowNew);
+
+    folderEditDialog = new FolderEditDialog('#folderEditDialog');
+    subscriptionEditDialog = new SubscriptionEditDialog('#subscriptionEditDialog');
+
+    $("#btn_create_sub").on("click", function () { subscriptionEditDialog.showNew(); });
+    $("#btn_create_folder").on("click", function () { folderEditDialog.showNew(); });
     $("#btn_edit_node").on("click", treeNode_Edit);
     $("#btn_delete_node").on("click", treeNode_Delete);
-
-    $("#folder_edit_dialog_form").submit(folderEditDialog_Submit);
 });