Added function for rules, and moved thumbnail/data somewhat around for better readability

This commit is contained in:
Kasper Rynning-Tønnesen
2018-09-27 22:03:23 +02:00
parent 5a84a4bc70
commit 0b3e7177b1
12 changed files with 599 additions and 208 deletions

View File

@@ -12,7 +12,14 @@ function toast(text, length, classes) {
}
window.addEventListener("DOMContentLoaded", function() {
M.Tabs.init(document.querySelector("ul.tabs"));
M.Tabs.init(document.querySelector(".tabs_admin"), {
onShow: function() {
if(this.index == 2) {
M.Tabs.getInstance(document.querySelector(".tabs_admin_info")).updateTabIndicator();
}
}
});
M.Tabs.init(document.querySelector(".tabs_admin_info"));
api_token_list = document.querySelector("#api_token_list").cloneNode(true);
document.querySelector("#api_token_list").remove();
loaded();
@@ -207,6 +214,7 @@ addListener("click", ".approve_thumbnails", function(event) {
that.parentElement.remove();
var length = parseInt(document.querySelector(".thumbnails-badge").innerText);
length = length - 1;
increaseInfo(-1);
document.querySelector(".thumbnails-badge").innerText = length;
if(length <= 0){
addClass(".thumbnails-badge", "hide");
@@ -244,6 +252,7 @@ addListener("click", ".deny_thumbnails", function(event) {
that.parentElement.remove();
var length = parseInt(document.querySelector(".thumbnails-badge").innerText);
length = length - 1;
increaseInfo(-1);
document.querySelector(".thumbnails-badge").innerText = length;
if(length <= 0){
addClass(".thumbnails-badge", "hide");
@@ -279,6 +288,7 @@ addListener("click", ".approve_descriptions", function(event) {
that.parentElement.remove();
var length = parseInt(document.querySelector(".descriptions-badge").innerText);
length = length - 1;
increaseInfo(-1);
document.querySelector(".descriptions-badge").innerText = length;
if(length <= 0){
addClass(".descriptions-badge", "hide");
@@ -314,6 +324,7 @@ addListener("click", ".deny_descriptions", function(event) {
that.parentElement.remove();
var length = parseInt(document.querySelector(".descriptions-badge").innerText);
length = length - 1;
increaseInfo(-1);
document.querySelector(".descriptions-badge").innerText = length;
if(length <= 0){
addClass(".descriptions-badge", "hide");
@@ -326,6 +337,78 @@ addListener("click", ".deny_descriptions", function(event) {
});
});
addListener("click", ".approve_rules", 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_rules",
data: {
channel: channel
},
headers: {
"Content-Type": "application/json"
},
success: function(response){
if(response){
that.parentElement.remove();
var length = parseInt(document.querySelector(".rules-badge").innerText);
length = length - 1;
increaseInfo(-1);
document.querySelector(".rules-badge").innerText = length;
if(length <= 0){
addClass(".rules-badge", "hide");
}
toast("Approved rules!", 2000, "green lighten");
} else {
toast("Something went wrong...", 2000, "red lighten");
}
}
});
});
addListener("click", ".deny_rules", 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_rules",
data: {
channel: channel
},
headers: {
"Content-Type": "application/json"
},
success: function(response){
if(response){
that.parentElement.remove();
var length = parseInt(document.querySelector(".rules-badge").innerText);
length = length - 1;
increaseInfo(-1);
document.querySelector(".rules-badge").innerText = length;
if(length <= 0){
addClass(".rules-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;
@@ -353,6 +436,34 @@ addListener("click", "#remove_description_button", function(event) {
});
});
addListener("click", "#remove_rules_button", function(event) {
this.preventDefault();
var that = event;
var channel = document.querySelector("#remove_rules").value;
if(!channel) {
toast("Something went wrong...", 2000, "red lighten");
return;
}
ajax({
type: "POST",
url: "/api/remove_rules",
data: {
channel: channel
},
headers: {
"Content-Type": "application/json"
},
success: function(response){
if(response){
toast("Removed rules!", 2000, "green lighten");
} else {
toast("Something went wrong...", 2000, "red lighten");
}
}
});
});
addListener("click", "#remove_thumbnail_button", function(event) {
this.preventDefault();
var that = event;
@@ -558,12 +669,30 @@ function add_to_tab(dest, resp){
for(var x = 0; x < resp.length; x++){
if(dest == "thumbnails"){
document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "<div><div class='col s4 m3'>" + decodeChannelName(resp[x].channel) + "</div><input type='text' readonly class='col s4 m6 thumbnail_link' value='" + resp[x].thumbnail + "'><a class='btn green waves-effect col s2 m1 approve_" + dest + "' href='#' data-channel='" + resp[x].channel + "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" + dest + "' href='#' data-channel='" + resp[x].channel + "'>X</a></div>");
} else {
} else if(dest == "descriptions"){
document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "<div><div class='col s4 m3'>" + decodeChannelName(resp[x].channel) + "</div><input type='text' readonly class='col s4 m6' value='" + resp[x].description + "'><a class='btn green waves-effect col s2 m1 approve_" + dest + "' href='#' data-channel='" + resp[x].channel + "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" + dest + "' href='#' data-channel='" + resp[x].channel + "'>X</a></div>");
} else {
resp[x].rules = resp[x].rules.replace(/\n/g, " /n\\ ");
document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "<div><div class='col s4 m3'>" + decodeChannelName(resp[x].channel) + "</div><input type='text' readonly class='col s4 m6' value='" + resp[x].rules + "'><a class='btn green waves-effect col s2 m1 approve_" + dest + "' href='#' data-channel='" + resp[x].channel + "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" + dest + "' href='#' data-channel='" + resp[x].channel + "'>X</a></div>");
}
}
}
function increaseInfo(num) {
removeClass(".info-badge", "hide");
try {
var currentNumber = parseInt(document.querySelector(".info-badge").innerText);
if(isNaN(currentNumber)) currentNumber = 0;
document.querySelector(".info-badge").innerText = currentNumber + num;
currentNumber += num;
if(currentNumber <= 0) {
addClass(".info-badge", "hide");
}
} catch(e) {
document.querySelector(".info-badge").innerText = 1;
}
}
function loaded() {
ajax({
type: "GET",
@@ -625,6 +754,7 @@ function loaded() {
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("#remove_rules").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;
@@ -665,6 +795,7 @@ function loaded() {
if(response.length > 0){
removeClass(".thumbnails-badge", "hide");
document.querySelector(".thumbnails-badge").innerText = response.length;
increaseInfo(response.length);
}
add_to_tab("thumbnails", response);
}
@@ -680,10 +811,27 @@ function loaded() {
if(response.length > 0){
removeClass(".descriptions-badge", "hide");
document.querySelector(".descriptions-badge").innerText = response.length;
increaseInfo(response.length);
}
add_to_tab("descriptions", response);
}
});
ajax({
type: "GET",
url: "/api/rules",
headers: {
"Content-Type": "application/json"
},
success: function(response){
if(response.length > 0){
removeClass(".rules-badge", "hide");
document.querySelector(".rules-badge").innerText = response.length;
increaseInfo(response.length);
}
add_to_tab("rules", response);
}
});
}
function predicate() {

View File

@@ -25,6 +25,10 @@ a {
outline: 0 !important;
}
.initial-line-height {
line-height: initial;
}
.error-code-container {
background: lightgrey;
border: 1px solid darkgrey;
@@ -1362,8 +1366,11 @@ margin:-1px;
.suggest-songs:nth-child(odd) {background: rgba(204,204,204,0.40)}
.suggest-songs:nth-child(even) {background: #FFF}
.suggest-songs {
.info_change_button_container, .suggest-songs {
padding-top:20px;
}
.suggest-songs {
border-bottom:1px solid black;
}

View File

@@ -8,7 +8,7 @@ var Admin = {
Admin.logged_in = msg;
if(!msg) return;
w_p = false;
M.Modal.init(document.getElementById("channel_info"));
if(Admin.logged_in) {
Helper.css("#thumbnail_form", "display", "inline-block");
Helper.css("#description_form", "display", "inline-block");
@@ -179,15 +179,34 @@ var Admin = {
Helper.addClass(".change_user_pass", "hide");
//Crypt.remove_userpass(chan.toLowerCase());
}
var updated = false;
if(conf_array.thumbnail != undefined && conf_array.thumbnail != "") {
document.getElementById("thumbnail_image").innerHTML = "<img id='thumbnail_image_channel' src='" + conf_array.thumbnail + "' alt='thumbnail' />";
document.getElementById("thumbnail_input").value = conf_array.thumbnail;
updated = true;
}
if(conf_array.description != undefined && conf_array.description != "") {
document.getElementById("description_area").innerHTML = conf_array.description;
document.getElementById("description_input").value = conf_array.description;
updated = true;
}
if(conf_array.rules != undefined && conf_array.rules != "") {
var existingRules = document.querySelector(".rules-container");
if(existingRules) existingRules.remove();
var rules = conf_array.rules.split("\n");
var elementToAdd = "<li class='rules-container'><div class='row'><div class='col s10 offset-s1'><h4 class='center-align'>Rules</h4>";
for(var i = 0; i < rules.length; i++) {
elementToAdd += "<p class='initial-line-height'>" + rules[i] + "</p>";
}
elementToAdd += "</div></div>";
document.querySelector(".channel_info_container").insertAdjacentHTML("afterend", elementToAdd);
document.getElementById("rules_input").value = conf_array.rules;
updated = true;
}
if(updated) M.updateTextFields();
},
submitAdmin: function(form, userpass_changed) {

View File

@@ -21,6 +21,21 @@ function removeAllListeners() {
socket.removeEventListener(id);
}
function sendDescription() {
emit("suggest_description", {channel: chan, description: document.getElementById("description_input").value});
document.getElementById("description_input").value = "";
}
function sendThumbnail() {
emit("suggest_thumbnail", {channel: chan, thumbnail: document.getElementById("thumbnail_input").value});
document.getElementById("thumbnail_input").value = "";
}
function sendRules() {
emit("suggest_rules", {channel: chan, rules: document.getElementById("rules_input").value});
document.getElementById("rules_input").value = "";
}
function resizeFunction() {
if(chan && !Helper.mobilecheck()){
if(document.querySelector("#wrapper") == null) return;
@@ -1072,6 +1087,12 @@ function toast(msg, _class) {
case "other_list_pass":
msg = "The other list has a pass, can't import the songs..";
break;
case "suggested_rules":
msg = "Your rules have been suggested";
break;
case "rules_denied":
msg = "Your rules will be denied";
break;
case "nolist":
msg = "There is no list with that name";
break;

View File

@@ -433,6 +433,11 @@ function addDynamicListeners() {
}
});
addListener("click", ".info_change_button", function(event) {
this.preventDefault();
M.Modal.getInstance(document.querySelector("#channel_info")).open();
});
addListener("click", "#hide-playlist", function(event) {
this.preventDefault();
fullVideo(!hiddenPlaylist);
@@ -506,16 +511,34 @@ function addDynamicListeners() {
}
});
addListener("submit", "#thumbnail_form", function(event){
addListener("click", ".description_input_send", function(event) {
this.preventDefault();
emit("suggest_thumbnail", {channel: chan, thumbnail: document.getElementById("chan_thumbnail").value});
document.getElementById("chan_thumbnail").value = "";
sendDescription();
});
addListener("submit", "#description_form", function(event){
addListener("click", ".rules_input_send", function(event) {
this.preventDefault();
emit("suggest_description", {channel: chan, description: document.getElementById("chan_description").value});
document.getElementById("chan_description").value = "";
sendRules();
});
addListener("click", ".thumbnail_input_send", function(event) {
this.preventDefault();
sendThumbnail();
});
addListener("submit", "#thumbnail_input_form", function(event){
this.preventDefault();
sendThumbnail();
});
addListener("submit", "#description_input_form", function(event){
this.preventDefault();
sendDescription();
});
addListener("submit", "#rules_input_form", function(event){
this.preventDefault();
sendRules();
});
addListener("click", "#playpause-overlay", function(){
@@ -1639,8 +1662,9 @@ function addDynamicListeners() {
document.querySelector("#text-chat-input") != document.activeElement &&
document.querySelector("#password") != document.activeElement &&
document.querySelector("#user-pass-input") != document.activeElement &&
document.querySelector("#chan_thumbnail") != document.activeElement &&
document.querySelector("#chan_description") != document.activeElement &&
document.querySelector("#thumbnail_input") != document.activeElement &&
document.querySelector("#rules_input") != document.activeElement &&
document.querySelector("#description_input") != document.activeElement &&
document.querySelector("#contact-form-from") != document.activeElement &&
document.querySelector("#contact-form-message") != document.activeElement &&
document.querySelector("#remote_channel") != document.activeElement &&