django_coreprotect/templates/coreprotect/coreprotect.html

276 lines
12 KiB
HTML

{% load static %}
<!doctype html>
<html lang="en">
<head>
<title>CoreProtect Web Interface</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu" >
<link rel="stylesheet" type="text/css" href="{% static 'coreprotect/css/bulma.min.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'coreprotect/css/bulma.dark.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'coreprotect/css/bulma-extensions.min.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'coreprotect/css/flatpickr.min.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'coreprotect/css/flatpickr.dark.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'coreprotect/css/main.css' %}"/>
<script src="{% static 'coreprotect/js/flatpickr.js' %}"></script>
</head>
<body>
<div class="block"></div>
<div class="has-text-centered">
<h1 class="title">CoreProtect Web GUI</h1>
<hr/>
</div>
<div class="columns">
<form style="margin-left: 7rem;" 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 %}>
<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 %}>
<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>
<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>
</body>
<script src="{% static 'coreprotect/js/bulma-extensions.min.js' %}"></script>
<script src="{% static 'coreprotect/js/main.js' %}"></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 = 1;
if (pageParam !== "") {
page = parseInt(pageParam);
if (isNaN(page)) {
page = 1;
}
}
function attachPagination() {
document.getElementById("prev").addEventListener("click", function() {
document.getElementById("page").value = (page-1).toString();
document.getElementById("search").click();
});
document.getElementById("next").addEventListener("click", function() {
document.getElementById("page").value = (page+1).toString();
document.getElementById("search").click();
});
}
document.getElementById("search").addEventListener("click", function() {
elementHTML("results", 'Querying Database...<br/><progress class="progress is-primary"></progress>');
let form = document.getElementById("coreprotect_form");
let formData = new FormData(form);
ajax("GET", "{% url "coreprotect_query" %}?" + formURI(formData), function(status, data) {
elementHTML("results", data);
attachClickRows();
attachPagination();
});
window.history.pushState("", "", "{% url "coreprotect_index" %}?" + formURI(formData));
});
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;
// 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>
</html>