configure_eventhandlers.html

{% extends 'configure_server.html' %}
{% block rightSidebarContents %}
{% set config = serverConfig.rssFeedConfig %}
<style>
    .command-editor {
        position: relative !important;
        border: 1px solid lightgray;
        margin: auto;
        height: 300px;
        width: 100%;
    }
</style>
<script src="{{ websiteUrl }}assets/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<div class="category-name">
{{ DASHBOARD_JavaScriptCommands }}
</div>
{# <div class="category-name">
Comandos em JavaScript
</div> #}
<div class="pure-g">
<div class="pure-u-1 pure-u-md-3-4">
<div id="communityTitle" class="toggleSubText">
Alguma coisa super topperson aqui
</div>
</div>
<div class="pure-u-1 pure-u-md-1-4">
<button onclick="addEntryWithModal()" style="float: right;" class="button-discord button-discord-info pure-button">{{ DASHBOARD_AddCommand }}</button>
</div>
</div>
<hr>
<div id="custom-config-entries">
</div>
<hr>
<button onclick="transformEntriesToJson()" style="float: right;" class="button-discord button-discord-success pure-button">{{ DASHBOARD_SAVE }}</button>
<br style="clear: both" /> <!-- So dirty! -->
<div class="totallyHidden">		
<div id="custom-config-entry-template" class="config-entry">
<div class="discord-generic-entry">
<img class="entry-icon" src="{{ websiteUrl }}assets/img/file_code.png" style="width: 6%; height: auto; float: left;">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-18-24">
<div style="margin-left: 10px; margin-right: 10px;">
<div class="entry-title">...</div>
<div class="entry-channel toggleSubText">...</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-6-24 vertically-centered-content">
<button class="entry-delete button-discord button-discord-edit pure-button" style="margin-right: 8px; min-width: 0px;"><i class="fas fa-trash" aria-hidden="true"></i></button>
<button class="entry-edit button-discord button-discord-edit pure-button">{{ DASHBOARD_EditButton }}</button>
</div>
</div>
</div>
</div>
<div class="tingle-demo add-new-entry-modal">
<div class="test">
<div class="category-name">{{ DASHBOARD_AddCommand }}</div>
	<div class="flavourText">{{ DASHBOARD_Command }}</div>
	<input style="width: 100%;" class="entry-command-label" data-internal-id="inviteUrl" placeholder="loritta" type="text">
	<div class="entry-info">
	<div class="flavourText">{{ DASHBOARD_Code }}</div>
	<pre class="command-editor">
if (getArgument(0) == "fofa") { // Se o argumento 0 (ou seja, o primeiro argumento) for "fofa"...
	reply("ownt~ 😊");
	return;
}
reply("Olá, eu me chamo Loritta! 😘");
	</pre>
	</div>
</div>
</div>
<div class="tingle-demo delete-entry-modal">
<div class="test">
<div class="category-name">{{ DASHBOARD_DeleteCommand }}</div>
	{{ DASHBOARD_DeleteAreYouSure }}
</div>
</div>
<script id="entry-hidden-data" type="text/template">
{{ eventHandlers|raw }}
</script>
</div>
<script>
var typingTimer;
var currentEditor;

function transformEntriesToJson() {
	var configAttr = {"type":"{{ saveType }}"}
	
	/* $("body").find("[data-internal-name]").each(function( index ) {
		var value = $(this).val();
		if ($(this).attr("type") == "checkbox") {
			value = $(this).is(':checked')
		}
		configAttr[$(this).data("internal-name")] = value
	}); */

	var entries = [];
	$(".config-entry").each(function( index ) {
		var entry = {};
		
		if ($(this).attr("id") !== "custom-config-entry-template") {
			entry["jsLabel"] = $(this).attr("data-command-label");
			entry["javaScript"] = $(this).attr("data-command-code");
			entries.push(entry);
		}
	});
	
	configAttr["entries"] = entries;
	
	console.log(configAttr);
	
	var json = JSON.stringify(configAttr);
	
	sendJsonToServer(json);
}

function getContentAsJson(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
	
	xhr.send();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == XMLHttpRequest.DONE) {
			console.log(xhr.responseText);
			var json = JSON.parse(xhr.responseText)
			callback(json);
		}
	}
}

function addEntryWithModal() {
	var guid = uuidv4();
	
    var modal = new tingle.modal({
        closeMethods: [],
        footer: true
		});
		
    modal.addFooterBtn('Salvar', "button-discord button-discord-info pure-button button-discord-modal", function(){	
		var element = $("#editing-" + guid);
		var newCode = currentEditor.getSession().getValue()
		var commandLabel = element.find(".entry-command-label").val();
		addNewConfigEntryData(commandLabel, newCode, guid)
		modal.close();
    });

	modal.addFooterBtn('Cancelar', "button-discord pure-button button-discord-modal button-discord-modal-secondary-action", function(){
		modal.close();
	});
	
	var cloned = $(".add-new-entry-modal").clone()
	cloned.children().attr("id", "editing-" + guid);
	cloned.children().attr("data-guid", guid);
	
    modal.setContent(cloned.html());
	modal.open();
	
	$("#editing-" + guid).find(".command-editor").attr("id", "command-" + guid)
    var editor = ace.edit("command-" + guid);
    editor.setTheme("ace/theme/twilight");
    editor.session.setMode("ace/mode/javascript");
	// editor.setValue($("#editing-" + guid).attr("data-command-code"))
    var input = $("#editing-" + guid).find(".command-editor");
	currentEditor = editor;
	
	addInputEvent($("#editing-" + guid));
}

function editEntry(guid) {
	if ($("#" + guid).attr("data-is-ready") == "false") {
		return;
	}
    var modal = new tingle.modal({
        closeMethods: [],
        footer: true
	});
		
    modal.addFooterBtn('Salvar', "button-discord button-discord-info pure-button button-discord-modal", function(){	
		var element = $("#editing-" + guid);
		var newCode = editor.getSession().getValue()
		var commandLabel = element.find(".entry-command-label").val();
		setChannelData($("#" + guid), commandLabel, newCode, guid)
		modal.close();
    });

	modal.addFooterBtn('Cancelar', "button-discord pure-button button-discord-modal button-discord-modal-secondary-action", function(){
		modal.close();
	});
	
	var entry = $("#" + guid)
	var cloned = $(".add-new-entry-modal").clone()
	cloned.children().attr("id", "editing-" + guid);
	cloned.children().attr("data-guid", guid);
	var code = entry.attr("data-command-code");
    modal.setContent(cloned.html());
	modal.open();

	var modalElement = $("#editing-" + guid)
	modalElement.find(".entry-command-label").val(entry.attr("data-command-label"))
	$("#editing-" + guid).find(".command-editor").attr("id", "command-" + guid)
    var editor = ace.edit("command-" + guid);
    editor.setTheme("ace/theme/twilight");
    editor.session.setMode("ace/mode/javascript");
	editor.setValue(entry.attr("data-command-code"))
    var input = $("#editing-" + guid).find(".command-editor");
	currentEditor = editor;
	
	addInputEvent($("#editing-" + guid));
}

function deleteEntry(guid) {	
    var modal = new tingle.modal({
        closeMethods: [],
        footer: true
	});
		
    modal.addFooterBtn('Deletar', "button-discord button-discord-info pure-button button-discord-modal", function(){	
		var element = $("#" + guid);
		element.remove();
		modal.close();
    });

	modal.addFooterBtn('Cancelar', "button-discord pure-button button-discord-modal button-discord-modal-secondary-action", function(){
		modal.close();
	});
	var cloned = $(".delete-entry-modal").clone()
    modal.setContent(cloned.html());
	modal.open();
}

function addInputEvent(element) {
	element.find(".entry-url").on('input', function() {
		element.find(".entry-info").addClass("blurSection");
		clearTimeout(typingTimer);
		typingTimer = setTimeout(function() { doneTyping(element) }, 1500);
	});
}

function doneTyping(element) {
	element.attr("data-is-ready", false)
	element.find(".entry-error").addClass("totallyHidden");
	var json = getContentAsJson("{{ websiteUrl }}api/v1/get_feed_title?feedLink=" + encodeURI(element.find(".entry-url").val()), function(json) {
		if (json["raw"] != null || json["error"] != null) {
			element.find(".entry-info").removeClass("noBlur")
			element.find(".entry-info").addClass("blurSection")
			element.find(".entry-error").removeClass("totallyHidden");
			element.attr("data-is-ready", false)
			return;
		}
		element.find(".entry-info").removeClass("blurSection")
		element.find(".entry-info").addClass("noBlur")
		element.find(".entry-title").text(json["title"])
		// element.find(".entry-icon").attr("src", json["avatarUrl"])
		element.attr("data-entry-title", json["title"])
		// element.attr("data-entry-icon", json["avatarUrl"])
		// element.attr("data-entry-channel-id", json["channelId"])
		element.attr("data-entry-url", element.find(".entry-url").val())
		element.attr("data-is-ready", true)
	});
}

function addNewConfigEntry(commandName, json, guid) {
	console.log(commandName + " ~ " + guid);
	var cloned = $("#custom-config-entry-template").clone();
	// cloned.find(".entry-channel").text(channelName);
	cloned.attr("id", guid);
	// cloned.attr("data-entry-description", description);
	// cloned.attr("data-entry-url", commandName);
	// cloned.attr("data-entry-repost-id", textChannelId);
	cloned.attr("data-command-code", json["javaScript"])
	cloned.attr("data-command-label", json["jsLabel"])
	cloned.attr("data-is-ready", true)
	cloned.find(".entry-edit").attr("onclick", "editEntry('" + guid + "');")
	cloned.find(".entry-delete").attr("onclick", "deleteEntry('" + guid + "');")
	cloned.find(".entry-title").html(commandName)
	$("#custom-config-entries").append(cloned);
}

function addNewConfigEntryData(commandLabel, commandCode, guid) {
	var cloned = $("#custom-config-entry-template").clone();
	cloned.attr("id", guid);
	setChannelData(cloned, commandLabel, commandCode, guid);
	
	$("#custom-config-entries").append(cloned);
}

function setChannelData(cloned, commandLabel, commandCode, guid) {
	console.log(commandLabel);
	cloned.attr("id", guid);
	cloned.attr("data-command-code", commandCode)
	cloned.attr("data-command-label", commandLabel)
	cloned.find(".entry-title").html("{{ serverConfig.commandPrefix }}" + commandLabel)
	cloned.find(".entry-edit").attr("onclick", "editEntry('" + guid + "');")
	cloned.find(".entry-delete").attr("onclick", "deleteEntry('" + guid + "');")
	cloned.attr("data-is-ready", true)
}

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  )
}

var jsonFeed = JSON.parse($('#entry-hidden-data').html())
console.log(jsonFeed);
jQuery.each(jsonFeed, function() {
var guid = uuidv4();
console.log(this);
addNewConfigEntry("{{ serverConfig.commandPrefix }}" + this["jsLabel"], this, guid);
});


$("#cmn-toggle-1").click(function(e) {
	applyBlur()
});

$("#cmn-toggle-3").click(function(e) {
	applyBlur2()
});

function applyBlur() {
  var e = $("#hiddenIfDisabled");
  if ($('#cmn-toggle-1').is(':checked')) {
	e.removeClass();
	e.addClass("noBlur");
  } else {
    e.removeClass();
	e.addClass("blurSection");
  }
}

function applyBlur2() {
  var e = $("#hiddenIfDisabled2");
  if ($('#cmn-toggle-3').is(':checked')) {
	e.removeClass();
	e.addClass("noBlur");
  } else {
    e.removeClass();
	e.addClass("blurSection");
  }
}

applyBlur();
applyBlur2();

function htmldecode(s){
    window.HTML_ESC_MAP = {
    "nbsp":" ","iexcl":"¡","cent":"¢","pound":"£","curren":"¤","yen":"¥","brvbar":"¦","sect":"§","uml":"¨","copy":"©","ordf":"ª","laquo":"«","not":"¬","reg":"®","macr":"¯","deg":"°","plusmn":"±","sup2":"²","sup3":"³","acute":"´","micro":"µ","para":"¶","middot":"·","cedil":"¸","sup1":"¹","ordm":"º","raquo":"»","frac14":"¼","frac12":"½","frac34":"¾","iquest":"¿","Agrave":"À","Aacute":"Á","Acirc":"Â","Atilde":"Ã","Auml":"Ä","Aring":"Å","AElig":"Æ","Ccedil":"Ç","Egrave":"È","Eacute":"É","Ecirc":"Ê","Euml":"Ë","Igrave":"Ì","Iacute":"Í","Icirc":"Î","Iuml":"Ï","ETH":"Ð","Ntilde":"Ñ","Ograve":"Ò","Oacute":"Ó","Ocirc":"Ô","Otilde":"Õ","Ouml":"Ö","times":"×","Oslash":"Ø","Ugrave":"Ù","Uacute":"Ú","Ucirc":"Û","Uuml":"Ü","Yacute":"Ý","THORN":"Þ","szlig":"ß","agrave":"à","aacute":"á","acirc":"â","atilde":"ã","auml":"ä","aring":"å","aelig":"æ","ccedil":"ç","egrave":"è","eacute":"é","ecirc":"ê","euml":"ë","igrave":"ì","iacute":"í","icirc":"î","iuml":"ï","eth":"ð","ntilde":"ñ","ograve":"ò","oacute":"ó","ocirc":"ô","otilde":"õ","ouml":"ö","divide":"÷","oslash":"ø","ugrave":"ù","uacute":"ú","ucirc":"û","uuml":"ü","yacute":"ý","thorn":"þ","yuml":"ÿ","fnof":"ƒ","Alpha":"Α","Beta":"Β","Gamma":"Γ","Delta":"Δ","Epsilon":"Ε","Zeta":"Ζ","Eta":"Η","Theta":"Θ","Iota":"Ι","Kappa":"Κ","Lambda":"Λ","Mu":"Μ","Nu":"Ν","Xi":"Ξ","Omicron":"Ο","Pi":"Π","Rho":"Ρ","Sigma":"Σ","Tau":"Τ","Upsilon":"Υ","Phi":"Φ","Chi":"Χ","Psi":"Ψ","Omega":"Ω","alpha":"α","beta":"β","gamma":"γ","delta":"δ","epsilon":"ε","zeta":"ζ","eta":"η","theta":"θ","iota":"ι","kappa":"κ","lambda":"λ","mu":"μ","nu":"ν","xi":"ξ","omicron":"ο","pi":"π","rho":"ρ","sigmaf":"ς","sigma":"σ","tau":"τ","upsilon":"υ","phi":"φ","chi":"χ","psi":"ψ","omega":"ω","thetasym":"ϑ","upsih":"ϒ","piv":"ϖ","bull":"•","hellip":"…","prime":"′","Prime":"″","oline":"‾","frasl":"⁄","weierp":"℘","image":"ℑ","real":"ℜ","trade":"™","alefsym":"ℵ","larr":"←","uarr":"↑","rarr":"→","darr":"↓","harr":"↔","crarr":"↵","lArr":"⇐","uArr":"⇑","rArr":"⇒","dArr":"⇓","hArr":"⇔","forall":"∀","part":"∂","exist":"∃","empty":"∅","nabla":"∇","isin":"∈","notin":"∉","ni":"∋","prod":"∏","sum":"∑","minus":"−","lowast":"∗","radic":"√","prop":"∝","infin":"∞","ang":"∠","and":"∧","or":"∨","cap":"∩","cup":"∪","int":"∫","there4":"∴","sim":"∼","cong":"≅","asymp":"≈","ne":"≠","equiv":"≡","le":"≤","ge":"≥","sub":"⊂","sup":"⊃","nsub":"⊄","sube":"⊆","supe":"⊇","oplus":"⊕","otimes":"⊗","perp":"⊥","sdot":"⋅","lceil":"⌈","rceil":"⌉","lfloor":"⌊","rfloor":"⌋","lang":"〈","rang":"〉","loz":"◊","spades":"♠","clubs":"♣","hearts":"♥","diams":"♦","\"":"quot","amp":"&","lt":"<","gt":">","OElig":"Œ","oelig":"œ","Scaron":"Š","scaron":"š","Yuml":"Ÿ","circ":"ˆ","tilde":"˜","ndash":"–","mdash":"—","lsquo":"‘","rsquo":"’","sbquo":"‚","ldquo":"“","rdquo":"”","bdquo":"„","dagger":"†","Dagger":"‡","permil":"‰","lsaquo":"‹","rsaquo":"›","euro":"€"};
    if(!window.HTML_ESC_MAP_EXP)
        window.HTML_ESC_MAP_EXP = new RegExp("&("+Object.keys(HTML_ESC_MAP).join("|")+");","g");
    return s?s.replace(window.HTML_ESC_MAP_EXP,function(x){
        return HTML_ESC_MAP[x.substring(1,x.length-1)]||x;
    }):s;
}
</script>
{% endblock %}