mirror of
https://github.com/chibicitiberiu/ytsm.git
synced 2024-02-24 05:43:31 +00:00
Began refactoring javascript code
This commit is contained in:
@ -33,15 +33,21 @@
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Subscriptions toolbar">
|
||||
<div class="btn-group mr-2" role="group">
|
||||
<button id="btn_create_sub" type="button" class="btn btn-light"
|
||||
data-toggle="tooltip" title="Add subscription...">
|
||||
data-toggle="tooltip" title="Add subscription..."
|
||||
data-modal="modal" data-modal-url="{% url 'modal_create_subscription' %}"
|
||||
data-modal-callback="tree_Refresh">
|
||||
<span class="typcn typcn-plus" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button id="btn_create_folder" type="button" class="btn btn-light"
|
||||
data-toggle="tooltip" title="Add folder...">
|
||||
data-toggle="tooltip" title="Add folder..."
|
||||
data-modal="modal" data-modal-url="{% url 'modal_create_folder' %}"
|
||||
data-modal-callback="tree_Refresh">
|
||||
<span class="typcn typcn-folder-add" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button id="btn_import" type="button" class="btn btn-light"
|
||||
data-toggle="tooltip" title="Import from file...">
|
||||
data-toggle="tooltip" title="Import from file..."
|
||||
data-modal="modal" data-modal-url="{% url 'modal_import_subscriptions' %}"
|
||||
data-modal-callback="tree_Refresh">
|
||||
<span class="typcn typcn-document-add" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -6,175 +6,6 @@ function zeroFill(number, width) {
|
||||
return number + ""; // always return a string
|
||||
}
|
||||
|
||||
class AjaxModal
|
||||
{
|
||||
constructor(url)
|
||||
{
|
||||
this.wrapper = $("#modal-wrapper");
|
||||
this.loading = $("#modal-loading");
|
||||
this.url = url;
|
||||
this.modal = null;
|
||||
this.form = null;
|
||||
this.submitCallback = null;
|
||||
this.modalLoadingRing = 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');
|
||||
this.modalLoadingRing = this.wrapper.find('#modal-loading-ring');
|
||||
|
||||
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');
|
||||
let ajax_settings = {
|
||||
url: url,
|
||||
};
|
||||
|
||||
if (this.form.attr('enctype') === 'multipart/form-data') {
|
||||
ajax_settings.data = new FormData(this.form[0]);
|
||||
ajax_settings.contentType = false;
|
||||
ajax_settings.processData = false;
|
||||
ajax_settings.cache = false;
|
||||
}
|
||||
else {
|
||||
ajax_settings.data = this.form.serialize();
|
||||
}
|
||||
|
||||
$.post(ajax_settings)
|
||||
.done(function(result) {
|
||||
pThis._submitDone(result);
|
||||
})
|
||||
.fail(function() {
|
||||
pThis._submitFailed();
|
||||
})
|
||||
.always(function() {
|
||||
pThis.modalLoadingRing.fadeOut(100);
|
||||
pThis.wrapper.find(":input").prop("disabled", false);
|
||||
});
|
||||
|
||||
this.modalLoadingRing.fadeIn(200);
|
||||
this.wrapper.find(":input").prop("disabled", true);
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
_submitDone(result) {
|
||||
// Clear old errors first
|
||||
this.form.find('.modal-field-error').remove();
|
||||
|
||||
if (!result.hasOwnProperty('success')) {
|
||||
this._submitInvalidResponse();
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
this._hideModal();
|
||||
if (this.submitCallback != null)
|
||||
this.submitCallback();
|
||||
}
|
||||
else {
|
||||
if (!result.hasOwnProperty('errors')) {
|
||||
this._submitInvalidResponse();
|
||||
return;
|
||||
}
|
||||
|
||||
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>`);
|
||||
}
|
||||
|
||||
_submitInvalidResponse() {
|
||||
// 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">Invalid server response!</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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function syncNow() {
|
||||
$.post("{% url 'ajax_action_sync_now' %}", {
|
||||
csrfmiddlewaretoken: '{{ csrf_token }}'
|
||||
|
||||
@ -175,84 +175,6 @@ function videos_Submit(e)
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
///
|
||||
/// Notifications
|
||||
///
|
||||
const JOB_QUERY_INTERVAL = 1500;
|
||||
|
||||
|
||||
function get_and_process_running_jobs()
|
||||
{
|
||||
$.get("{% url 'ajax_get_running_jobs' %}")
|
||||
.done(function(data) {
|
||||
|
||||
let progress = $('#status-progress');
|
||||
let jobPanel = $('#job_panel');
|
||||
let jobTitle = jobPanel.find('#job_panel_title');
|
||||
let jobTitleNoJobs = jobPanel.find('#job_panel_no_jobs_title');
|
||||
let jobTemplate = jobPanel.find('#job_panel_item_template');
|
||||
|
||||
if (data.length > 0) {
|
||||
|
||||
// Update status bar
|
||||
if (data.length > 1) {
|
||||
$('#status-message').text(`Running ${data.length} jobs...`);
|
||||
}
|
||||
else {
|
||||
$('#status-message').text(`${data[0].description} | ${data[0].message}`);
|
||||
}
|
||||
|
||||
// Update global progress bar
|
||||
let combinedProgress = 0;
|
||||
for (let entry of data) {
|
||||
combinedProgress += entry.progress;
|
||||
}
|
||||
|
||||
let percent = 100 * combinedProgress / data.length;
|
||||
|
||||
progress.removeClass('invisible');
|
||||
let bar = progress.find('.progress-bar');
|
||||
bar.width(percent + '%');
|
||||
bar.text(`${percent.toFixed(0)}%`);
|
||||
|
||||
// Update entries in job list
|
||||
jobTitle.removeClass('collapse');
|
||||
jobTitleNoJobs.addClass('collapse');
|
||||
|
||||
data.sort(function (a, b) { return a.id - b.id });
|
||||
jobPanel.find('.job_entry').remove();
|
||||
|
||||
for (let entry of data) {
|
||||
let jobEntry = jobTemplate.clone();
|
||||
jobEntry.attr('id', `job_${entry.id}`);
|
||||
jobEntry.addClass('job_entry');
|
||||
jobEntry.removeClass('collapse');
|
||||
jobEntry.find('#job_panel_item_title').text(entry.description);
|
||||
jobEntry.find('#job_panel_item_subtitle').text(entry.message);
|
||||
|
||||
let entryPercent = 100 * entry.progress;
|
||||
let jobEntryProgress = jobEntry.find('#job_panel_item_progress');
|
||||
jobEntryProgress.width(entryPercent + '%');
|
||||
jobEntryProgress.text(`${entryPercent.toFixed(0)}%`);
|
||||
|
||||
jobEntry.appendTo(jobPanel);
|
||||
}
|
||||
|
||||
$('#btn_toggle_job_panel').dropdown('update');
|
||||
}
|
||||
else {
|
||||
progress.addClass('invisible');
|
||||
$('#status-message').text("");
|
||||
|
||||
jobTitle.addClass('collapse');
|
||||
jobTitleNoJobs.removeClass('collapse');
|
||||
jobPanel.find('.job_entry').remove();
|
||||
|
||||
$('#btn_toggle_job_panel').dropdown('update');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
///
|
||||
/// Initialization
|
||||
///
|
||||
@ -263,22 +185,22 @@ $(document).ready(function ()
|
||||
|
||||
tree_Initialize();
|
||||
|
||||
// Subscription toolbar
|
||||
$("#btn_create_sub").on("click", function () {
|
||||
let modal = new AjaxModal("{% url 'modal_create_subscription' %}");
|
||||
modal.setSubmitCallback(tree_Refresh);
|
||||
modal.loadAndShow();
|
||||
});
|
||||
$("#btn_create_folder").on("click", function () {
|
||||
let modal = new AjaxModal("{% url 'modal_create_folder' %}");
|
||||
modal.setSubmitCallback(tree_Refresh);
|
||||
modal.loadAndShow();
|
||||
});
|
||||
$("#btn_import").on("click", function () {
|
||||
let modal = new AjaxModal("{% url 'modal_import_subscriptions' %}");
|
||||
modal.setSubmitCallback(tree_Refresh);
|
||||
modal.loadAndShow();
|
||||
});
|
||||
// // Subscription toolbar
|
||||
// $("#btn_create_sub").on("click", function () {
|
||||
// let modal = new AjaxModal("{% url 'modal_create_subscription' %}");
|
||||
// modal.setSubmitCallback(tree_Refresh);
|
||||
// modal.loadAndShow();
|
||||
// });
|
||||
// $("#btn_create_folder").on("click", function () {
|
||||
// let modal = new AjaxModal("{% url 'modal_create_folder' %}");
|
||||
// modal.setSubmitCallback(tree_Refresh);
|
||||
// modal.loadAndShow();
|
||||
// });
|
||||
// $("#btn_import").on("click", function () {
|
||||
// let modal = new AjaxModal("{% url 'modal_import_subscriptions' %}");
|
||||
// modal.setSubmitCallback(tree_Refresh);
|
||||
// modal.loadAndShow();
|
||||
// });
|
||||
$("#btn_edit_node").on("click", treeNode_Edit);
|
||||
$("#btn_delete_node").on("click", treeNode_Delete);
|
||||
|
||||
@ -292,8 +214,4 @@ $(document).ready(function ()
|
||||
filters_form.find('select[name=results_per_page]').on('change', videos_ResetPageAndReloadWithTimer);
|
||||
|
||||
videos_Reload();
|
||||
|
||||
// Notifications
|
||||
get_and_process_running_jobs();
|
||||
setInterval(get_and_process_running_jobs, JOB_QUERY_INTERVAL);
|
||||
});
|
||||
|
||||
@ -11,55 +11,67 @@
|
||||
<link rel="stylesheet" href="{% static 'YtManagerApp/import/bootstrap/css/bootstrap.min.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'YtManagerApp/import/typicons/typicons.min.css' %}" />
|
||||
<link rel="stylesheet" href="{% static 'YtManagerApp/css/style.css' %}">
|
||||
|
||||
{% block stylesheets %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="{% url 'home' %}">YouTube Manager</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<nav id="main_navbar" class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
{% if request.user.is_authenticated %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Welcome,
|
||||
{% if request.user.first_name %}
|
||||
{{ request.user.first_name }}
|
||||
{% else %}
|
||||
{{ request.user.username }}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="{% url 'settings' %}">Settings</a>
|
||||
{% if request.user.is_superuser %}
|
||||
<a class="dropdown-item" href="{% url 'admin_settings' %}">Admin settings</a>
|
||||
{% endif %}
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
|
||||
</div>
|
||||
</li>
|
||||
{% else %}
|
||||
{% if request.user.is_authenticated %}
|
||||
<button id="hamburger-button"
|
||||
type="button"
|
||||
class="btn btn-light">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<a class="navbar-brand" href="{% url 'home' %}">YouTube Manager</a>
|
||||
|
||||
{% block navbar-content %}
|
||||
{% endblock %}
|
||||
|
||||
<ul class="navbar-nav ml-auto">
|
||||
{% if not request.user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'login' %}">Login</a>
|
||||
</li>
|
||||
{% if global_preferences.general__allow_registrations %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'login' %}">Login</a>
|
||||
<a class="nav-link" href="{% url 'register' %}">Register</a>
|
||||
</li>
|
||||
{% if global_preferences.general__allow_registrations %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'register' %}">Register</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<div id="hamburger">
|
||||
<div id="hamburger-content">
|
||||
{% block hamburger-menu %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div id="hamburger-footer">
|
||||
<div class="btn-toolbar row">
|
||||
<a class="btn btn-light col"
|
||||
href="{% url 'settings' %}"
|
||||
data-toggle="tooltip" title="Settings">
|
||||
<span class="typcn typcn-cog"></span>Settings
|
||||
</a>
|
||||
<a class="btn btn-light col"
|
||||
href="{% url 'logout' %}"
|
||||
data-toggle="tooltip" title="Log out">
|
||||
<span class="typcn typcn-eject"></span>Log out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="main_body" class="container-fluid">
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
@ -77,7 +89,7 @@
|
||||
<div class="btn-group">
|
||||
<button id="btn_toggle_job_panel"
|
||||
class="btn btn-sm btn-light dropdown-toggle"
|
||||
title="Show/hide details"
|
||||
title="Show/hide job details"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="typcn typcn-th-list" aria-hidden="true"></span>
|
||||
@ -110,6 +122,18 @@
|
||||
<script src="{% static 'YtManagerApp/import/jquery/jquery-3.3.1.min.js' %}"></script>
|
||||
<script src="{% static 'YtManagerApp/import/popper/popper.min.js' %}"></script>
|
||||
<script src="{% static 'YtManagerApp/import/bootstrap/js/bootstrap.min.js' %}"></script>
|
||||
|
||||
<script>
|
||||
window.ytsmContext = {
|
||||
csrf_token: "{{ csrf_token }}",
|
||||
url_ajax_get_running_jobs: "{% url 'ajax_get_running_jobs' %}",
|
||||
{% block context %}
|
||||
{% endblock %}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<script type="module" src="{% static 'YtManagerApp/js/common.js' %}"></script>
|
||||
<script>
|
||||
{% include 'YtManagerApp/js/common.js' %}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
{% extends "YtManagerApp/master_default.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<div class="row">
|
||||
|
||||
{% for provider in providers %}
|
||||
{% if provider.is_configured %}
|
||||
<div class="provider-wrapper col-2">
|
||||
<button class="btn btn-light ">
|
||||
<img class="provider-logo"
|
||||
src="{% static provider.image_src %}"
|
||||
title="{{ provider.name }}">
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if have_unconfigured %}
|
||||
<div class="provider-wrapper col-2 dropdown">
|
||||
<button id="btnAddProvider"
|
||||
class="btn btn-light"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="provider-logo typcn typcn-plus"
|
||||
title="Add provider">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user