configure_commands.html

{% extends 'configure_server.html' %}
{% block rightSidebarContents %}
<div class="category-name">
{{ WEBSITE_COMMANDS }}
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-3-4">
<div id="communityTitle" class="toggleSubText">
{{ DASHBOARD_ManageCommands }}
</div>
</div>
<div class="pure-u-1 pure-u-md-1-4">

</div>
</div>
<hr>
<input type="text" id="filterBox" placeholder="{{ DASHBOARD_FilterByName }}">
<script>
$('#filterBox').on('input', function() {
	var text = $(this).val()

	console.log(text)

	filter(text)
});

function getFilterText() {
return $("#filterBox").val()
}

function filter(text) {
	$("#availableCommands").children().each(function() {
		$(this).css('display', '')
	});

	$("#availableCommands").children().each(function() {
	var commandName = $(this).text()

	if (commandName.indexOf(text) == -1) {
		$(this).css('display', 'none')
	}
	});
}

function moveSelectedAllRight() {
	$("#availableCommands").children().each(function() {
		$(this).prop("selected", false)
		$(this).prependTo("#disabledCommands");
	});
	
	filter(getFilterText());
}

function moveSelectedOneRight() {
	$("#availableCommands").children().each(function() {
		if ($(this).is(':selected')) {
			$(this).prop("selected", false)
			$(this).prependTo("#disabledCommands");
		}
	});
	
	filter(getFilterText());
}

function moveSelectedAllLeft() {
	$("#disabledCommands").children().each(function() {
		$(this).prop("selected", false)
		$(this).prependTo("#availableCommands");
	});
	
	filter(getFilterText());
}

function moveSelectedOneLeft() {
	$("#disabledCommands").children().each(function() {
		if ($(this).is(':selected')) {
			$(this).prop("selected", false)
			$(this).prependTo("#availableCommands");
		}
	});
	
	filter(getFilterText());
}

function transformBlockedCommandsToJson() {
var configAttr = {"type":"{{ saveType }}"}
var disabledCommands = []

$("#disabledCommands").children().each(function() {
	var value = $(this).val();
	disabledCommands.push(value)
});

configAttr["disabledCommands"] = disabledCommands

console.log(configAttr);

var json = JSON.stringify(configAttr);

sendJsonToServer(json);
}
</script>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="flavourText">{{ DASHBOARD_EnabledCommands }}</div>
<div style="margin: 5px">
<select id="availableCommands" multiple style="width: 100%; height: 35vh;">
  {% for command in enabledCommands %}
  <option value="{{ command.getClass.getSimpleName }}">{{ serverConfig.commandPrefix }}{{ command.getLabel }}</option>
  {% endfor %}
</select> 
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2">
<div style="margin: 5px">
<div class="flavourText">{{ DASHBOARD_DisabledCommands }}</div>
<select id="disabledCommands" multiple style="width: 100%; height: 35vh;">
  {% for command in disabledCommands %}
  <option value="{{ command.getClass.getSimpleName }}">{{ serverConfig.commandPrefix }}{{ command.getLabel }}</option>
  {% endfor %}
</select>
</div>
</div>
</div>
<div style="text-align: center;">
<button onclick="moveSelectedAllRight()" class="button-discord button-discord-info pure-button"><i class="fas fa-angle-double-right"></i></button>
<button onclick="moveSelectedOneRight()" class="button-discord button-discord-info pure-button"><i class="fas fa-angle-right"></i></button>
<button onclick="moveSelectedOneLeft()" class="button-discord button-discord-info pure-button"><i class="fas fa-angle-left"></i></button>
<button onclick="moveSelectedAllLeft()" class="button-discord button-discord-info pure-button"><i class="fas fa-angle-double-left"></i></button>
</div>
<hr>
<button onclick="transformBlockedCommandsToJson()" style="float: right;" class="button-discord button-discord-success pure-button">{{ DASHBOARD_SAVE }}</button>
<br style="clear: both" /> <!-- So dirty! -->
{% endblock %}