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

Work on big refactor

Browse Source
This commit is contained in:
Tiberiu Chibici
2018-10-13 23:01:45 +03:00
parent ae77251883
commit 1d5c7ea24b
447 changed files with 67198 additions and 1226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,13 @@
{% 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 %}

42
YtManagerApp/templates/YtManagerApp/controls/modal.html Normal file
View File

@ -0,0 +1,42 @@
{% block modal_stylesheets %}
{% endblock %}
<div id="{{ modal_id }}" class="modal {{ modal_classes }}" tabindex="-1" role="dialog">
<div class="modal-dialog {{ modal_dialog_classes }}" role="document">
<div class="modal-content">
{% block modal_content %}
{% block modal_header_wrapper %}
<div class="modal-header">
{% block modal_header %}
<h5 id="{{ modal_id }}_Title" class="modal-title">
{% block modal_title %}{{ modal_title }}{% endblock modal_title %}
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{% endblock modal_header %}
</div>
{% endblock modal_header_wrapper %}
{% block modal_body_wrapper %}
<div class="modal-body">
{% block modal_body %}
{% endblock %}
</div>
{% endblock modal_body_wrapper %}
{% block modal_footer_wrapper %}
<div class="modal-footer">
{% block modal_footer %}
{% endblock modal_footer %}
</div>
{% endblock modal_footer_wrapper %}
{% endblock modal_content %}
</div>
</div>
</div>
{% block modal_scripts %}
{% endblock %}

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

@ -1,5 +1,6 @@
{% extends "YtManagerApp/main_master_detail.html" %}
{% extends "YtManagerApp/master_default.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'YtManagerApp/import/jstree/themes/default/style.min.css' %}" />
@ -16,35 +17,53 @@
{% endblock %}
{% block master %}
{% block body %}
<div class="btn-toolbar" role="toolbar" aria-label="Subscriptions toolbar">
<div class="btn-group btn-group-sm mr-2" role="group">
<button id="btn_create_sub" type="button" class="btn btn-secondary" >
<span class="typcn typcn-plus" aria-hidden="true"></span>
</button>
<button id="btn_create_folder" type="button" class="btn btn-secondary">
<span class="typcn typcn-folder-add" aria-hidden="true"></span>
</button>
</div>
<div class="btn-group btn-group-sm mr-2" role="group">
<button id="btn_edit_node" type="button" class="btn btn-secondary" >
<span class="typcn typcn-edit" aria-hidden="true"></span>
</button>
<button id="btn_delete_node" type="button" class="btn btn-secondary" >
<span class="typcn typcn-trash" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="row">
<div id="tree-wrapper">
<p>Loading...</p>
<div class="col-3">
{# Tree toolbar #}
<div class="btn-toolbar" role="toolbar" aria-label="Subscriptions toolbar">
<div class="btn-group btn-group-sm mr-2" role="group">
<button id="btn_create_sub" type="button" class="btn btn-secondary" >
<span class="typcn typcn-plus" aria-hidden="true"></span>
</button>
<button id="btn_create_folder" type="button" class="btn btn-secondary">
<span class="typcn typcn-folder-add" aria-hidden="true"></span>
</button>
</div>
<div class="btn-group btn-group-sm mr-2" role="group">
<button id="btn_edit_node" type="button" class="btn btn-secondary" >
<span class="typcn typcn-edit" aria-hidden="true"></span>
</button>
<button id="btn_delete_node" type="button" class="btn btn-secondary" >
<span class="typcn typcn-trash" aria-hidden="true"></span>
</button>
</div>
</div>
<div id="tree-wrapper">
<div class="d-flex">
<div class="loading-dual-ring mx-auto my-5"></div>
</div>
</div>
</div>
<div class="col-9">
{# Video toolbar #}
<div class="btn-toolbar" role="toolbar" aria-label="Subscriptions toolbar">
{% crispy filter_form %}
</div>
<div id="videos_wrapper">
</div>
<div id="videos_loading" style="display: none">
<div class="d-flex">
<div class="loading-dual-ring mx-auto my-5"></div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block detail %}
<div id="main_detail">
</div>
{% endblock %}

9
YtManagerApp/templates/YtManagerApp/index_unauthenticated.html Normal file
View File

@ -0,0 +1,9 @@
{% extends "YtManagerApp/master_default.html" %}
{% load static %}
{% block body %}
<h1>Hello</h1>
<h2>Please log in to continue</h2>
{% endblock %}

0
YtManagerApp/templates/YtManagerApp/main_videos.html → YtManagerApp/templates/YtManagerApp/index_videos.html
View File

45
YtManagerApp/templates/YtManagerApp/js/common.js Normal file
View File

@ -0,0 +1,45 @@
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');
}
setTitle(value) {
this.title.text(value);
}
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();
}
}
setError(text) {
this.error.text(text);
}
showModal() {
this.modal.modal();
}
hideModal() {
this.modal.modal('hide');
}
}

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

@ -1,4 +1,4 @@
class Dialog {
class Dialog_old {
constructor(modalId) {
this.modal = $(modalId);
this.title = $(modalId + "_Title");
@ -44,7 +44,7 @@ class Dialog {
}
}
class FolderEditDialog extends Dialog {
class FolderEditDialog extends Dialog_old {
constructor (modalId) {
super(modalId);
@ -129,7 +129,7 @@ class FolderEditDialog extends Dialog {
}
}
class SubscriptionEditDialog extends Dialog {
class SubscriptionEditDialog extends Dialog_old {
constructor (modalId) {
super(modalId);
@ -243,6 +243,7 @@ function treeNode_Delete()
if (selectedNodes.length === 1)
{
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.'))
@ -270,7 +271,7 @@ function tree_Initialize()
treeWrapper.jstree({
core : {
data : {
url : "{% url 'ajax_get_children' %}"
url : "{% url 'ajax_index_get_tree' %}"
},
check_callback : tree_ValidateChange,
themes : {
@ -313,16 +314,63 @@ function tree_ValidateChange(operation, node, parent, position, more)
function tree_OnSelectionChanged(e, data)
{
node = data.instance.get_selected(true)[0];
$.post("{% url 'ajax_list_videos' %}", {
type: node.type,
id: node.id.replace('folder', '').replace('sub', ''),
csrfmiddlewaretoken: '{{ csrf_token }}'
}).done(function (result) {
$("#main_detail").html(result);
});
let filterForm = $('#form_video_filter');
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') {
let id = node.id.replace('folder', '');
filterForm_folderId.val(id);
filterForm_subId.val('');
}
else {
let id = node.id.replace('sub', '');
filterForm_folderId.val();
filterForm_subId.val(id);
}
videos_Reload();
}
function videos_Reload()
{
let filterForm = $('#form_video_filter');
let loadingDiv = $('#videos_loading');
loadingDiv.fadeIn(300);
// Perform query
$.post("{% url 'ajax_index_get_videos' %}", filterForm.serialize())
.done(function (result) {
$("#videos_wrapper").html(result);
})
.fail(function () {
$("#videos_wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
})
.always(function() {
loadingDiv.fadeOut(100);
});
}
let videos_timeout = null;
function videos_ReloadWithTimer()
{
clearTimeout(videos_timeout);
videos_timeout = setTimeout(function()
{
videos_Reload();
videos_timeout = null;
}, 500);
}
///
/// Globals
///
@ -336,11 +384,11 @@ $(document).ready(function ()
{
tree_Initialize();
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);
// 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);
});

32
YtManagerApp/templates/YtManagerApp/main_default.html
View File

@ -1,32 +0,0 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}YouTube Subscription Manager{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
{% block scripts %}
{% endblock %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'home' %}">YouTube Manager</a>
</nav>
<div class="container-fluid">
{% block body %}
{% endblock %}
</div>
</body>
</html>

16
YtManagerApp/templates/YtManagerApp/main_master_detail.html
View File

@ -1,16 +0,0 @@
{% extends "YtManagerApp/main_default.html" %}
{% block body %}
<div class="row">
<div class="col-sm-3">
{% block master %}
{% endblock %}
</div>
<div class="col-sm-9">
{% block detail %}
{% endblock %}
</div>
</div>
{% endblock %}

69
YtManagerApp/templates/YtManagerApp/master_default.html Normal file
View File

@ -0,0 +1,69 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}YouTube Subscription Manager{% endblock %}</title>
<link rel="stylesheet" href="{% static 'YtManagerApp/import/bootstrap-4.1.3/scss/bootstrap.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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="{% static 'YtManagerApp/import/bootstrap-4.1.3/dist/js/bootstrap.min.js' %}"></script>
<script>
{% include 'YtManagerApp/js/common.js' %}
</script>
{% block scripts %}
{% endblock %}
<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>
<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="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="container-fluid">
{% block body %}
{% endblock %}
</div>
</body>
</html>