django_coreprotect/templates/coreprotect/coreprotect.html

282 lines
12 KiB
HTML

{% extends "coreprotect/base.html" %}
{% load static %}
{% block head %}
<link rel="shortcut icon" type="image/png" href="{% static 'coreprotect/img/intelli.png' %}"/>
{% endblock %}
{% block body %}
<div class="block"></div>
<div class="has-text-centered">
<h1 class="title">CoreProtect GUI</h1>
<hr/>
</div>
<div class="columns">
<form id="coreprotect_form" name="coreprotect_form" class="has-text-left column is-one-third">
<div class="columns">
<div class="column is-one-half">
<h4 class="title is-5 has-text-primary">
Actions
</h4>
<div class="field">
<input class="is-checkradio is-block is-info" id="block_break" name="block_break" type="checkbox" {% if form.block_break %}checked{% endif %}>
<label for="block_break">Block Break</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="block_place" name="block_place" type="checkbox" {% if form.block_place %}checked{% endif %}>
<label for="block_place">Block Place</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="chat" name="chat" type="checkbox" {% if form.chat %}checked{% endif %} {% if not perms.django_coreprotect.gui_extra %}disabled{% endif %}>
<label for="chat">Chat</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="chest_use" name="chest_use" type="checkbox" {% if form.chest_use %}checked{% endif %}>
<label for="chest_use">Chest Use</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="command" name="command" type="checkbox" {% if form.command %}checked{% endif %} {% if not perms.django_coreprotect.gui_extra %}disabled{% endif %}>
<label for="command">Command</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="interact" name="interact" type="checkbox" {% if form.interact %}checked{% endif %}>
<label for="interact">Interact</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="login_logout" name="login_logout" type="checkbox" {% if form.login_logout %}checked{% endif %}>
<label for="login_logout">Login/Logout</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="sign_place" name="sign_place" type="checkbox" {% if form.sign_place %}checked{% endif %}>
<label for="sign_place">Sign Place</label>
</div>
<br/>
<h4 class="title is-5 has-text-primary">
Worlds
</h4>
{% for world in form.worlds %}
<div class="field">
<input class="is-checkradio is-block is-info" id="{{world.world_id}}" name="world" value="{{world.id}}" type="checkbox" {% if world.checked %}checked{% endif %}>
<label for="{{world.world_id}}">{{world.name}}</label>
</div>
{% endfor %}
<br/>
<h4 class="title is-5 has-text-primary">
Options
</h4>
<div class="field">
<input class="is-checkradio is-block is-info" id="ignore_environment" name="ignore_environment" type="checkbox" {% if form.ignore_environment %}checked{% endif %}>
<label for="ignore_environment">Ignore Environment</label>
</div>
<div class="field">
<input class="is-checkradio is-block is-info" id="oldest_first" name="oldest_first" type="checkbox" {% if form.oldest_first %}checked{% endif %}>
<label for="oldest_first">Oldest Results First</label>
</div>
<br/>
<h4 class="title is-5 has-text-primary">
Page Size
</h4>
<div class="field">
<p class="control">
<span class="select">
<select id="page_size" name="page_size">
<option value="20" {% if form.page_size == "20" %}selected{% endif %}>20</option>
<option value="50" {% if form.page_size == "50" %}selected{% endif %}>50</option>
<option value="100" {% if form.page_size == "100" %}selected{% endif %}>100</option>
<option value="200" {% if form.page_size == "200" %}selected{% endif %}>200</option>
<option value="500" {% if form.page_size == "500" %}selected{% endif %}>500</option>
<option value="1000" {% if form.page_size == "1000" %}selected{% endif %}>1000</option>
</select>
</span>
</p>
</div>
<input type="hidden" id="page" name="page" value="{{form.page}}"/>
</div>
<div class="column is-one-half">
<h4 class="title is-5 has-text-primary">
Players
</h4>
<div class="field tooltip" data-tooltip="Accepts full or partial names. Separated by commas.">
<input class="input" id="players" name="players" type="text" placeholder="Player Names" value="{{form.players}}">
</div>
<br/>
<h4 class="title is-5 has-text-primary">
Coordinates
</h4>
<div class="field has-addons tooltip" data-tooltip="Whole numbers only.">
<p class="control">
<input class="input" id="x" name="x" type="text" placeholder="X" value="{{form.x}}">
</p>
<p class="control">
<input class="input" id="y" name="y" type="text" placeholder="Y" value="{{form.y}}">
</p>
<p class="control">
<input class="input" id="z" name="z" type="text" placeholder="Z" value="{{form.z}}">
</p>
</div>
<div class="field tooltip" data-tooltip="Whole numbers only.">
<p class="control">
<input class="input" id="radius" name="radius" type="text" placeholder="Radius" value="{{form.radius}}">
</p>
</div>
<br/>
<h4 class="title is-5 has-text-primary">
Blocks
</h4>
<div class="field tooltip is-tooltip-multiline" data-tooltip="Accepts full or partial names. Separated by commas.">
<input class="input is-4" id="blocks" name="blocks" type="text" placeholder="Block Names" value="{{form.blocks}}">
</div>
<br/>
<h4 class="title is-5 has-text-primary">
Date and Time
</h4>
<div class="field tooltip" data-tooltip="Click to open date/time picker.">
<p class="control">
<input type="date" id="date_from" name="date_from" placeholder="Date From" value="{{form.date_from}}">
</p>
</div>
<div class="field tooltip" data-tooltip="Click to open date/time picker.">
<p class="control">
<input type="date" id="date_to" name="date_to" placeholder="Date To" value="{{form.date_to}}">
</p>
</div>
<br/>
<div class="field is-grouped">
<p class="control">
<button class="button is-primary" id="search" type="button">Search</button>
</p>
<p class="control">
<button class="button is-dark" id="clear" type="button">Clear</button>
</p>
<p class="control">
<button class="button is-info" id="export" type="button">Export</button>
</p>
</div>
</div>
</div>
</form>
<div class="column is-three-fifths" id="results">
</div>
</div>
{% endblock %}
{% block script %}
<script>
let text = "Copy the below command to teleport";
function attachClickRows() {
Array.from(document.querySelectorAll(".click-row")).forEach(elem => {
elem.addEventListener("click", function() {
prompt(text, elem.getAttribute("data-prompt"));
});
});
}
let url = new URL(window.location);
let pageParam = url.searchParams.get("page");
let page = 0;
if (pageParam !== "") {
page = parseInt(pageParam);
if (isNaN(page)) {
page = 0;
}
}
function attachPagination() {
let prev = document.getElementById("prev");
if (prev.getAttribute("disabled") == null) {
prev.addEventListener("click", function () {
document.getElementById("page").value = (--page).toString();
search(false);
});
}
let next = document.getElementById("next");
if (next.getAttribute("disabled") == null) {
next.addEventListener("click", function () {
document.getElementById("page").value = (++page).toString();
search(false);
});
}
}
function search(resetPage) {
elementHTML("results", 'Querying Database...<br/><progress class="progress is-primary"></progress>');
if (resetPage) {
page = 0;
document.getElementById("page").value = "0";
}
let form = document.getElementById("coreprotect_form");
let formData = new FormData(form);
ajax("GET", "{% url "coreprotect_gui_query" %}?" + formURI(formData), function(status, data) {
elementHTML("results", data);
attachClickRows();
attachPagination();
});
window.history.pushState("", "", "{% url "coreprotect_gui" %}?" + formURI(formData));
}
document.getElementById("search").addEventListener("click", function() {
search(true);
});
document.getElementById("clear").addEventListener("click", function() {
// Actions
document.getElementById("block_break").checked = false;
document.getElementById("block_place").checked = false;
document.getElementById("chat").checked = false;
document.getElementById("chest_use").checked = false;
document.getElementById("command").checked = false;
document.getElementById("interact").checked = false;
document.getElementById("login_logout").checked = false;
document.getElementById("sign_place").checked = false;
// Worlds
{% for world in form.worlds %}
document.getElementById("{{world.world_id}}").checked = false;
{% endfor %}
// Options
document.getElementById("ignore_environment").checked = false;
document.getElementById("oldest_first").checked = false;
// Page Size
document.getElementById("page_size").selectedIndex = "0";
document.getElementById("page").value = "1";
// Players
document.getElementById("players").value = "";
// Coordinates
document.getElementById("x").value = "";
document.getElementById("y").value = "";
document.getElementById("z").value = "";
document.getElementById("radius").value = "";
// Blocks
document.getElementById("blocks").value = "";
// Date and Time
document.getElementById("date_from")._flatpickr.setDate();
document.getElementById("date_to")._flatpickr.setDate();
});
document.getElementById("export").addEventListener("click", function() {
exportTableToCSV("coreprotect.csv", "results");
});
</script>
{% endblock %}