84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
HTML
|
{% extends "coreprotect/base.html" %}
|
||
|
|
{% load static %}
|
||
|
|
{% block head %}
|
||
|
|
<link rel="shortcut icon" type="image/png" href="{% static 'coreprotect/img/ymca.png' %}"/>
|
||
|
|
{% endblock %}
|
||
|
|
{% block body %}
|
||
|
|
<div class="block"></div>
|
||
|
|
<div class="has-text-centered">
|
||
|
|
<h1 class="title">CoreProtect Activity Monitor</h1>
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
<div class="columns">
|
||
|
|
<form id="coreprotect_form" name="coreprotect_form" class="has-text-left column is-one-fifth">
|
||
|
|
<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">
|
||
|
|
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>
|
||
|
|
</form>
|
||
|
|
<div class="column is-three-fifths" id="results">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
{% block script %}
|
||
|
|
<script>
|
||
|
|
|
||
|
|
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_activity_query" %}?" + formURI(formData), function(status, data) {
|
||
|
|
elementHTML("results", data);
|
||
|
|
});
|
||
|
|
window.history.pushState("", "", "{% url "coreprotect_activity" %}?" + formURI(formData));
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("clear").addEventListener("click", function() {
|
||
|
|
|
||
|
|
// Players
|
||
|
|
document.getElementById("players").value = "";
|
||
|
|
|
||
|
|
// Date and Time
|
||
|
|
document.getElementById("date_from")._flatpickr.setDate();
|
||
|
|
document.getElementById("date_to")._flatpickr.setDate();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("export").addEventListener("click", function() {
|
||
|
|
exportTableToCSV("activity.csv", "results");
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|