chibicitiberiu/youtube-channel-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Worked on folder modals.

Browse Source
This commit is contained in:
Tiberiu Chibici
2018-10-15 00:45:08 +03:00
parent 1d5c7ea24b
commit c3e3bfa33c
18 changed files with 756 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
YtManagerApp/templates/YtManagerApp/controls/folder_create_dialog.html
View File

@ -1,13 +0,0 @@
{% extends 'YtManagerApp/controls/modal.html' %}
{% load crispy_forms_tags %}
{% block modal_title %}
New folder
{% endblock modal_title %}
{% block modal_body %}
{% crispy form %}
{% endblock modal_body %}
{% block modal_footer_wrapper %}
{% endblock modal_footer_wrapper %}

21
YtManagerApp/templates/YtManagerApp/controls/folder_create_modal.html Normal file
View File

@ -0,0 +1,21 @@
{% extends 'YtManagerApp/controls/modal.html' %}
{% load crispy_forms_tags %}
{% block modal_title %}
New folder
{% endblock modal_title %}
{% block modal_content %}
<form action="{% url 'modal_create_folder' %}" method="post">
{{ block.super }}
</form>
{% endblock %}
{% block modal_body %}
{% crispy form %}
{% endblock modal_body %}
{% block modal_footer %}
<input class="btn btn-primary" type="submit" value="Create">
<input class="btn btn-secondary" type="button" value="Cancel" data-dismiss="modal" aria-label="Cancel">
{% endblock modal_footer %}

21
YtManagerApp/templates/YtManagerApp/controls/folder_delete_modal.html Normal file
View File

@ -0,0 +1,21 @@
{% extends 'YtManagerApp/controls/modal.html' %}
{% load crispy_forms_tags %}
{% block modal_title %}
Delete folder
{% endblock modal_title %}
{% block modal_content %}
<form action="{% url 'modal_delete_folder' form.instance.pk %}" method="post">
{{ block.super }}
</form>
{% endblock %}
{% block modal_body %}
{% crispy form %}
{% endblock modal_body %}
{% block modal_footer %}
<input class="btn btn-danger" type="submit" value="Save" aria-label="Delete">
<input class="btn btn-secondary" type="button" value="Cancel" data-dismiss="modal" aria-label="Cancel">
{% endblock modal_footer %}

40
YtManagerApp/templates/YtManagerApp/controls/folder_edit_dialog.html
View File

@ -1,40 +0,0 @@
<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="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="folderEditDialog_Loading" class="modal-body">
<div class="loading-dual-ring"></div>
</div>
<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="folderEditDialog_Id" name="id" value="#">
<div class="form-group row">
<label class="col-sm-3" for="folderEditDialog_Name">Name</label>
<div class="col-sm-9">
<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="folderEditDialog_Parent">Parent folder</label>
<div class="col-sm-9">
<select class="form-control" id="folderEditDialog_Parent" name="parent">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<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>
</div>
</div>
</div>

21
YtManagerApp/templates/YtManagerApp/controls/folder_update_modal.html Normal file
View File

@ -0,0 +1,21 @@
{% extends 'YtManagerApp/controls/modal.html' %}
{% load crispy_forms_tags %}
{% block modal_title %}
Edit folder
{% endblock modal_title %}
{% block modal_content %}
<form action="{% url 'modal_update_folder' form.instance.pk %}" method="post">
{{ block.super }}
</form>
{% endblock %}
{% block modal_body %}
{% crispy form %}
{% endblock modal_body %}
{% block modal_footer %}
<input class="btn btn-primary" type="submit" value="Save" aria-label="Save">
<input class="btn btn-secondary" type="button" value="Cancel" data-dismiss="modal" aria-label="Cancel">
{% endblock modal_footer %}

17
YtManagerApp/templates/YtManagerApp/index.html
View File

@ -11,14 +11,19 @@
<script>
{% include 'YtManagerApp/js/subscription_tree.js' %}
</script>
{% include 'YtManagerApp/controls/folder_edit_dialog.html' %}
{% include 'YtManagerApp/controls/subscription_edit_dialog.html' %}
{% endblock %}
{% block body %}
<div id="modal-wrapper">
<div id="modal-loading" class="black-overlay">
<div class="loading-dual-ring loading-dual-ring-center-screen"></div>
</div>
<div id="modal-wrapper">
</div>
</div>
<div class="row">
<div class="col-3">
@ -55,10 +60,10 @@
{% crispy filter_form %}
</div>
<div id="videos_wrapper">
<div id="videos-wrapper">
</div>
<div id="videos_loading" style="display: none">
<div id="videos-loading" style="display: none">
<div class="d-flex">
<div class="loading-dual-ring mx-auto my-5"></div>
</div>

133
YtManagerApp/templates/YtManagerApp/js/common.js
View File

@ -42,4 +42,135 @@ class Dialog {
hideModal() {
this.modal.modal('hide');
}
}
}
class AjaxModal
{
constructor(url)
{
this.wrapper = $("#modal-wrapper");
this.loading = $("#modal-loading");
this.url = url;
this.modal = null;
this.form = null;
this.submitCallback = null;
}
setSubmitCallback(callback) {
this.submitCallback = callback;
}
_showLoading() {
this.loading.fadeIn(500);
}
_hideLoading() {
this.loading.fadeOut(100);
}
_showModal() {
if (this.modal != null)
this.modal.modal();
}
_hideModal() {
if (this.modal != null)
this.modal.modal('hide');
}
_load(result) {
this.wrapper.html(result);
this.modal = this.wrapper.find('.modal');
this.form = this.wrapper.find('form');
let pThis = this;
this.form.submit(function(e) {
pThis._submit(e);
})
}
_loadFailed() {
this.wrapper.html('<div class="alert alert-danger">An error occurred while displaying the dialog!</div>');
}
_submit(e) {
let pThis = this;
let url = this.form.attr('action');
$.post(this.url, this.form.serialize())
.done(function(result) {
pThis._submitDone(result);
})
.fail(function() {
pThis._submitFailed();
});
e.preventDefault();
}
_submitDone(result) {
// Clear old errors first
this.form.find('.modal-field-error').remove();
if (result.success) {
this._hideModal();
if (this.submitCallback != null)
this.submitCallback();
}
else {
for (let field in result.errors)
if (result.errors.hasOwnProperty(field))
{
let errorsArray = result.errors[field];
let errorsConcat = "<div class=\"alert alert-danger modal-field-error\"><ul>";
for(let error of errorsArray) {
errorsConcat += `<li>${error.message}</li>`;
}
errorsConcat += '</ul></div>';
if (field === '__all__')
this.form.find('.modal-body').append(errorsConcat);
else
this.form.find(`[name='${field}']`).after(errorsConcat);
}
let errorsHtml = '';
let err = this.modal.find('#__modal_error');
if (err.length) {
err.html('An error occurred');
}
else {
this.modal.find('.modal-body').append(errorsHtml)
}
}
}
_submitFailed() {
// Clear old errors first
this.form.find('.modal-field-error').remove();
this.form.find('.modal-body')
.append(`<div class="alert alert-danger modal-field-error">An error occurred while processing request!</div>`);
}
loadAndShow()
{
let pThis = this;
this._showLoading();
$.get(this.url)
.done(function (result) {
pThis._load(result);
pThis._showModal();
})
.fail(function () {
pThis._loadFailed();
})
.always(function() {
pThis._hideLoading();
});
}
}

59
YtManagerApp/templates/YtManagerApp/js/subscription_tree.js
View File

@ -228,11 +228,19 @@ function treeNode_Edit()
if (selectedNodes.length === 1)
{
let node = selectedNodes[0];
if (node.type === 'folder') {
folderEditDialog.showEdit(node);
let id = node.id.replace('folder', '');
let modal = new AjaxModal("{% url 'modal_update_folder' 98765 %}".replace('98765', id));
modal.setSubmitCallback(tree_Refresh);
modal.loadAndShow();
}
else {
subscriptionEditDialog.showEdit(node);
//TODO:
//let id = node.id.replace('sub', '');
//let modal = new AjaxModal("{ url 'modal_update_subscription' 98765 }".replace('98765', id));
//modal.setSubmitCallback(tree_Refresh);
//modal.loadAndShow();
}
}
}
@ -245,22 +253,17 @@ function treeNode_Delete()
let node = selectedNodes[0];
if (node.type === 'folder') {
let folderId = node.id.toString().replace('folder', '');
if (confirm('Are you sure you want to delete folder "' + node.text + '" and all its descendants?\nNote: the subscriptions won\'t be deleted, they will only be moved outside.'))
{
$.post("{% url 'ajax_delete_folder' 99999 %}".replace('99999', folderId), {
csrfmiddlewaretoken: '{{ csrf_token }}'
}).done(tree_Refresh);
}
let id = node.id.replace('folder', '');
let modal = new AjaxModal("{% url 'modal_delete_folder' 98765 %}".replace('98765', id));
modal.setSubmitCallback(tree_Refresh);
modal.loadAndShow();
}
else {
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);
}
//TODO:
//let id = node.id.replace('sub', '');
//let modal = new AjaxModal("{ url 'modal_delete_subscription' 98765 }".replace('98765', id));
//modal.setSubmitCallback(tree_Refresh);
//modal.loadAndShow();
}
}
}
@ -318,11 +321,14 @@ function tree_OnSelectionChanged(e, data)
let filterForm_folderId = filterForm.find('#form_video_filter_folder_id');
let filterForm_subId = filterForm.find('#form_video_filter_subscription_id');
let node = data.instance.get_selected(true)[0];
// Fill folder/sub fields
if (node.type === 'folder') {
if (node == null) {
filterForm_folderId.val('');
filterForm_subId.val('');
}
else if (node.type === 'folder') {
let id = node.id.replace('folder', '');
filterForm_folderId.val(id);
filterForm_subId.val('');
@ -340,16 +346,16 @@ function tree_OnSelectionChanged(e, data)
function videos_Reload()
{
let filterForm = $('#form_video_filter');
let loadingDiv = $('#videos_loading');
let loadingDiv = $('#videos-loading');
loadingDiv.fadeIn(300);
// Perform query
$.post("{% url 'ajax_index_get_videos' %}", filterForm.serialize())
.done(function (result) {
$("#videos_wrapper").html(result);
$("#videos-wrapper").html(result);
})
.fail(function () {
$("#videos_wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
$("#videos-wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
})
.always(function() {
loadingDiv.fadeOut(100);
@ -387,8 +393,13 @@ $(document).ready(function ()
// folderEditDialog = new FolderEditDialog('#folderEditDialog');
// subscriptionEditDialog = new SubscriptionEditDialog('#subscriptionEditDialog');
//
// $("#btn_create_sub").on("click", function () { subscriptionEditDialog.showNew(); });
$("#btn_create_folder").on("click", function () {
let modal = new AjaxModal("{% url 'modal_create_folder' %}");
modal.setSubmitCallback(tree_Refresh);
modal.loadAndShow();
});
// $("#btn_create_folder").on("click", function () { folderEditDialog.showNew(); });
// $("#btn_edit_node").on("click", treeNode_Edit);
// $("#btn_delete_node").on("click", treeNode_Delete);
$("#btn_edit_node").on("click", treeNode_Edit);
$("#btn_delete_node").on("click", treeNode_Delete);
});