diff --git a/server/public/assets/admin/authenticated/js/main.js b/server/public/assets/admin/authenticated/js/main.js index 67fd40d9..f9f58b1b 100644 --- a/server/public/assets/admin/authenticated/js/main.js +++ b/server/public/assets/admin/authenticated/js/main.js @@ -5,146 +5,562 @@ var connection_options = { }; var socket = io.connect(window.location.protocol + '//' + window.location.hostname + ':8080', connection_options); var api_token_list; +var dynamicListeners = {}; -$(document).ready(function(){ - $('ul.tabs').tabs(); - api_token_list = $("#api_token_list").clone(); - $("#api_token_list").remove(); - loaded(); - }); - -$(document).on("click", "#refresh_all", function(e){ - e.preventDefault(); - $("#descriptions_cont").empty(); - $("#thumbnails_cont").empty(); - $(".api_token_container").remove(); - - if(!$(".channel_things").hasClass("hide")) { - $(".channel_things").addClass("hide") - } - $(".preloader-wrapper").removeClass("hide"); - loaded(); - $("#listeners").empty(); - socket.emit("get_spread"); -}); - -function decodeChannelName(str) { - var _fn = decodeURIComponent; - str = str.toUpperCase(); - try { - var toReturn = _fn(str.replace(/%5F/g, "_")); - return toReturn.toLowerCase(); - } catch(e) { - return str.toLowerCase(); - } +function toast(text, length, classes) { + M.toast({ html: text, displayLength: length, classes: classes}); } -socket.on("spread_listeners", function(obj){ - $("#listeners").append("
Private listeners: " + obj.offline + "
"); - $("#listeners").append("Total listeners: " + obj.total + "
"); - $("#listeners").append("" + decodeChannelName(obj.online_users[x]._id) + ": " + obj.online_users[x].users.length + "
"); - } - } +window.addEventListener("DOMContentLoaded", function() { + M.Tabs.init(document.querySelector("ul.tabs")); + api_token_list = document.querySelector("#api_token_list").cloneNode(true); + //document.querySelector("#api_token_list").remove(); + loaded(); + + addClass(".channel_things", "hide"); + removeClass(".preloader-wrapper", "hide"); + + document.addEventListener("click", function(event) { + handleEvent(event, event.target, false, "click"); + }, true); + + document.addEventListener("input", function(event) { + handleEvent(event, event.target, false, "input"); + }, true); + + document.addEventListener("change", function(event) { + handleEvent(event, event.target, false, "change"); + }, true); + + document.addEventListener("submit", function(event) { + handleEvent(event, event.target, false, "submit"); + }, true); + + document.getElementById("refresh_all").addEventListener("click", function(event) { + this.preventDefault(); + document.getElementById("descriptions_cont").empty(); + document.getElementById("thumbnails_cont").empty(); + document.querySelector(".api_token_container").remove(); + + addClass(".channel_things", "hide"); + + removeClass(".preloader-wrapper", "hide"); + loaded(); + document.querySelector("#listeners").innerHTML = ""; + socket.emit("get_spread"); + }); }); -if(!$(".channel_things").hasClass("hide")) { - $(".channel_things").addClass("hide") -} -$(".preloader-wrapper").removeClass("hide"); +addListener("click", ".update_api_token", function(event) { + this.preventDefault(); + var that = event; + var id = that.getAttribute("data-id"); + var limit = document.querySelector("#" + id + "-limit").value; -$(document).on("click", ".update_api_token", function(e) { - e.preventDefault(); + toggleClass(that, "disabled"); - var id = $(this).attr("data-id"); - var limit = $("#" + id + "-limit").val(); - var that = this; - $(that).toggleClass("disabled"); - $("#" + id + "-delete").toggleClass("disabled"); - $.ajax({ + toggleClass("#" + id + "-delete", "disabled"); + ajax({ type: "PUT", url: "api/api_token", + headers: { + "Content-Type": "application/json" + }, data: { id: id, limit: limit, }, success: function(response) { if(response == "OK") { - Materialize.toast("Updated limit!", 2000, "green lighten"); + toast("Updated limit!", 2000, "green lighten"); } else { - Materialize.toast("Something went wrong...", 2000, "red lighten"); + toast("Something went wrong...", 2000, "red lighten"); } - $(that).toggleClass("disabled"); - $("#" + id + "-delete").toggleClass("disabled"); + toggleClass(that, "disabled"); + toggleClass("#" + id + "-delete", "disabled"); } }); }); -$(document).on("click", ".delete_api_token", function(e) { - e.preventDefault(); - var id = $(this).attr("data-id"); - var that = this; - $(that).toggleClass("disabled"); - $("#" + id + "-limit").toggleClass("disabled"); - $.ajax({ +addListener("click", ".delete_api_token", function(event) { + this.preventDefault(); + var that = event; + var id = that.getAttribute("data-id"); + toggleClass(that, "disabled"); + toggleClass("#" + id + "-limit", "disabled"); + ajax({ type: "DELETE", url: "api/api_token", + headers: { + "Content-Type": "application/json" + }, data: { id: id }, success: function(response) { if(response == "success") { - Materialize.toast("Removed token!", 2000, "green lighten"); - $("#" + id).remove(); + toast("Removed token!", 2000, "green lighten"); + document.querySelector("#" + id).remove(); } else { - Materialize.toast("Something went wrong...", 2000, "red lighten"); - $(that).toggleClass("disabled"); - $("#" + id + "-limit").toggleClass("disabled"); + toast("Something went wrong...", 2000, "red lighten"); + toggleClass(that, "disabled"); + toggleClass("#" + id + "-limit", "disabled"); } }, }); }); -function loaded() { - $.ajax({ +addListener("click", ".approve_name", function(event) { + var that = event; + var name = that.getAttribute("data-name"); + var value = document.querySelector("." + name + "_input").value; + ajax({ + type: "POST", + url: "/api/names", + data: { + icon: value, + name: name, + }, + headers: { + "Content-Type": "application/json" + }, + success: function(resp) { + if(resp == true) { + toast("Approved image!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); +}); + +addListener("click", ".thumbnail_link", function(event) { + this.preventDefault(); + window.open("https:" + this.value,'_blank'); +}); + +addListener("click", "#get_token", function(event) { + this.preventDefault(); + ajax({ type: "GET", + url: "/api/token", + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response != false){ + document.querySelector("#new_token").value = response.token; + toggleClass("#get_token", "hide"); + toggleClass("#remove_token", "hide"); + } + } + }) +}); + +addListener("click", ".approve_thumbnails", function(event) { + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if(!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/approve_thumbnail", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response){ + that.parentElement.remove(); + var length = parseInt(document.querySelector(".thumbnails-badge").innerText); + length = length - 1; + document.querySelector(".thumbnails-badge").innerText = length; + if(length <= 0){ + addClass(".thumbnails-badge", "hide"); + } + toast("Approved Thumbnail!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); +}); + +addListener("click", ".deny_thumbnails", function(event) { + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if(!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + + ajax({ + type: "POST", + url: "/api/deny_thumbnail", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response){ + that.parentElement.remove(); + var length = parseInt(document.querySelector(".thumbnails-badge").innerText); + length = length - 1; + document.querySelector(".thumbnails-badge").innerText = length; + if(length <= 0){ + addClass(".thumbnails-badge", "hide"); + } + toast("Denied thumbnail!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); +}); + +addListener("click", ".approve_descriptions", function(event) { + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if(!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + + ajax({ + type: "POST", + url: "/api/approve_description", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response){ + that.parentElement.remove(); + var length = parseInt(document.querySelector(".descriptions-badge").innerText); + length = length - 1; + document.querySelector(".descriptions-badge").innerText = length; + if(length <= 0){ + addClass(".descriptions-badge", "hide"); + } + toast("Approved description!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); +}); + +addListener("click", ".deny_descriptions", function(event) { + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if(!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + + ajax({ + type: "POST", + url: "/api/deny_description", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response){ + that.parentElement.remove(); + var length = parseInt(document.querySelector(".descriptions-badge").innerText); + length = length - 1; + document.querySelector(".descriptions-badge").innerText = length; + if(length <= 0){ + addClass(".descriptions-badge", "hide"); + } + toast("Denied description!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); +}); + +addListener("click", "#remove_description_button", function(event) { + this.preventDefault(); + var that = event; + var channel = document.querySelector("#remove_description").value; + if(!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/remove_description", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response){ + toast("Removed description!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); +}); + +addListener("click", "#remove_thumbnail_button", function(event) { + this.preventDefault(); + var that = event; + var channel = document.querySelector("#remove_thumbnail").value; + if(!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + + ajax({ + type: "POST", + url: "/api/remove_thumbnail", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response){ + toast("Removed thumbnail!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); +}); + +addListener("submit", "#delete_channel", function(event) { + this.preventDefault(); + var to_delete = document.querySelector("#delete_channel_name").value; + if(!to_delete) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + var r = confirm("Delete list \""+ decodeChannelName(to_delete) + "\"?"); + if (r == true) { + ajax({ + type: "POST", + url: "/api/delete", + data: { + _id: to_delete + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response == true){ + loaded(); + toast("Deleted channel!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }) + } +}); + +addListener("click", "#delete_channel_button", function(event) { + this.preventDefault(); + document.querySelector("#delete_channel").submit(); +}); + +addListener("click", "#remove_token", function(event) { + this.preventDefault(); + ajax({ + type: "GET", + url: "/api/remove_token", + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response != false){ + document.querySelector("#new_token").value = ""; + toggleClass("#get_token", "hide"); + toggleClass("#remove_token", "hide"); + } + } + }) +}); + +addListener("submit", "#change_pinned", function(event) { + this.preventDefault(); + var to_pin = document.querySelector("#frontpage_pinned").value; + if(!to_pin) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/pinned", + data: { + _id: to_pin + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response == true){ + toast("Pinned channel!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }) +}); + +addListener("click", "#change_pinned_button", function(event) { + this.preventDefault(); + document.querySelector("#change_pinned").submit(); +}); + +addListener("click", "#delete_admin_button", function(event) { + this.preventDefault(); + document.querySelector("#delete_list").submit(); +}); + +addListener("click", "#delete_userpass_button", function(event) { + this.preventDefault(); + document.querySelector("#delete_userpass").submit(); +}); + +addListener("submit", "#delete_list", function(event) { + this.preventDefault(); + var to_remove_password = document.querySelector("#delete_list_name").value; + if(!to_remove_password) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/admin", + data: { + _id: to_remove_password + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response == true){ + toast("Removed admin password!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }) +}); + +addListener("submit", "#delete_userpass", function(event) { + this.preventDefault(); + var to_remove_password = document.querySelector("#delete_userpass_name").value; + if(!to_remove_password) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/userpass", + data: { + _id: to_remove_password + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response){ + if(response == true){ + toast("Removed userpass password!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }) +}); + +socket.on("spread_listeners", function(obj){ + document.querySelector("#listeners").insertAdjacentHTML("beforeend", "Private listeners: " + obj.offline + "
"); + document.querySelector("#listeners").insertAdjacentHTML("beforeend", "Total listeners: " + obj.total + "
"); + document.querySelector("#listeners").insertAdjacentHTML("beforeend", "" + decodeChannelName(obj.online_users[x]._id) + ": " + obj.online_users[x].users.length + "
"); + } + } +}); + +function add_to_tab(dest, resp){ + for(var x = 0; x < resp.length; x++){ + if(dest == "thumbnails"){ + document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", ""); + } else { + document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", ""); + } + } +} + +function loaded() { + ajax({ + type: "GET", + headers: { + "Content-Type": "application/json" + }, url: "/api/api_token", success: function(response) { if(response.length == 0) { - if(!$(".header-api-fields").hasClass("hide")) { - $(".header-api-fields").addClass("hide"); - } + addClass(".header-api-fields", "hide"); return; } - $(".header-api-fields").removeClass("hide"); + removeClass(".header-api-fields", "hide"); for(var i = 0; i < response.length; i++) { - var to_add = api_token_list.clone(); - to_add.find(".api_token_limit").val(response[i].limit); - to_add.attr("id", response[i]._id); - to_add.find(".api_token_name").text(response[i].name); - to_add.find(".api_token_usage").text(response[i].usage); - to_add.find(".api_token_origin").text(response[i].origin); - to_add.find(".update_api_token").attr("id", response[i]._id + "-update"); - to_add.find(".api_token_limit").attr("id", response[i]._id + "-limit"); - to_add.find(".delete_api_token").attr("id", response[i]._id + "-delete"); - to_add.find(".delete_api_token").attr("data-id", response[i]._id); - to_add.find(".update_api_token").attr("data-id", response[i]._id); + var to_add = api_token_list.cloneNode(true); + + to_add.querySelector(".api_token_limit").value = response[i].limit; + to_add.setAttribute("id", response[i]._id); + to_add.querySelector(".api_token_name").innerText = response[i].name; + to_add.querySelector(".api_token_usage").innerText = response[i].usage; + to_add.querySelector(".api_token_origin").innerText = response[i].origin; + to_add.querySelector(".update_api_token").setAttribute("id", response[i]._id + "-update"); + to_add.querySelector(".api_token_limit").setAttribute("id", response[i]._id + "-limit"); + to_add.querySelector(".delete_api_token").setAttribute("id", response[i]._id + "-delete"); + to_add.querySelector(".delete_api_token").setAttribute("data-id", response[i]._id); + to_add.querySelector(".update_api_token").setAttribute("data-id", response[i]._id); if(response[i].active) { - to_add.find(".check").removeClass("hide"); + removeClass(to_add.querySelector(".check"), "hide"); } else { - to_add.find(".uncheck").removeClass("hide"); + removeClass(to_add.querySelector(".uncheck"), "hide"); } - $("#api_keys").append(to_add); + document.querySelector("#api_keys").insertAdjacentHTML("beforeend", to_add.innerHTML); } }, error: function(err) { } }); - $.ajax({ + ajax({ type: "GET", + headers: { + "Content-Type": "application/json" + }, url: "/api/lists", success: function(response){ response = response.sort(predicate({ @@ -160,411 +576,71 @@ function loaded() { output_delete += ""; } - $("#frontpage_pinned").html(output_pinned); - $("#remove_thumbnail").html($("#frontpage_pinned").clone().html()); - $("#remove_description").html($("#frontpage_pinned").clone().html()); - $("#delete_list_name").html($("#frontpage_pinned").clone().html()); - $("#delete_userpass_name").html($("#frontpage_pinned").clone().html()); - $("#delete_channel_name").html($("#frontpage_pinned").clone().html()); - $("select").material_select(); - - if(!$(".preloader-wrapper").hasClass("hide")) { - $(".preloader-wrapper").addClass("hide") + document.querySelector("#frontpage_pinned").innerHTML = output_pinned; + document.querySelector("#remove_thumbnail").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML; + document.querySelector("#remove_description").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML; + document.querySelector("#delete_list_name").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML; + document.querySelector("#delete_userpass_name").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML; + document.querySelector("#delete_channel_name").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML; + var selects = document.querySelectorAll("select"); + for(var i = 0; i < selects.length; i++) { + M.FormSelect.init(selects[i]); } - $(".channel_things").removeClass("hide"); + + addClass(".preloader-wrapper", "hide"); + removeClass(".channel_things", "hide"); } }); - $.ajax({ + ajax({ type: "GET", url: "/api/names", + headers: { + "Content-Type": "application/json" + }, success: function(response) { for(var i = 0; i < response.length; i++) { var icon = ""; if(response[i].icon && response[i].icon != "") { icon = "