NexusDashboard/app/templates/admin/dashboard.html.j2

188 lines
5.1 KiB
Plaintext
Raw Normal View History

2022-01-16 18:22:00 +00:00
{% extends "bootstrap/base.html" %}
{% block title %}Key Creation{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{{ url_for('dashboard') }}">Dashboard</a>
</div>
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav" style="float: right">
<li class="active"><a href="#">Welcome {{ current_user.username }}!</a></li>
<li><a href="{{ url_for('logout') }}">Logout</a></li>
</ul>
</div>
</nav>
{% endblock navbar %}}
{% block content %}
{# LOGO #}
<div class="container" style="margin-top: 50px">
{# Display logo #}
<div style="margin-bottom: 50px">
<img
src="{{ url_for('static', filename=resources.LOGO) }}"
class="center-block img-responsive mx-auto d-block"
alt="Logo"
width="100"
height="100"
>
</div>
</div>
{# Key creation #}
<div class="container">
<div class="text-center">
<h3>Key Creation</h3>
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-6">
{# If the error value is set, display the error in red text #}
{% if error %}
<div class="alert alert-danger">
{{ error }}
</div>
{% endif %}
{# If the message value is set, display the message in green text #}
{% if message %}
<div class="alert alert-success">
{{ message }}
</div>
{% endif %}
{# Form which takes in Admin Username, Admin Password, and the amount of keys to create. #}
<form action="{{ url_for('dashboard') }}" method="post">
{# Key count input #}
<div class="form-group">
<label for="key_count">Generate keys</label>
<input type="number" class="form-control" name="key_count" placeholder="Enter number of keys...">
<small class="form-text text-muted">Number of keys to create.</small>
</div>
{# Submit button #}
<div class="form-group">
<button type="submit" class="btn btn-primary">Generate Keys</button>
</div>
</form>
{# If the keys value is set, create a list for each key in keys #}
{% if keys %}
<div class="alert alert-success">
<ul>
{% for key in keys %}
<li>{{ key }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div class="col-lg-3">
</div>
</div>
</div>
{# Activity graphs #}
<div class="container">
<div class="text-center">
<h3>Activity</h3>
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<canvas id="sessions_graph" width="400" height="400"></canvas>
<canvas id="play_time_graph" width="400" height="400"></canvas>
<canvas id="zone_play_time_graph" width="400" height="400"></canvas>
</div>
<div class="col-lg-3">
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Make a get request to the server to load the activity data
$.get("{{ url_for('load_activities') }}", function(data) {
});
// Make a get request to the server to get the activity data for "sessions"
$.get("{{ url_for('activity_data', name='sessions') }}", function(data) {
// Load data as a json object
data = JSON.parse(data);
var ctx = document.getElementById('sessions_graph').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: data.datasets
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
// Make a get request to the server to get the activity data for "play_time"
$.get("{{ url_for('activity_data', name='play_time') }}", function(data) {
// Load data as a json object
data = JSON.parse(data);
var ctx = document.getElementById('play_time_graph').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: data.datasets
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
// Make a get request to the server to get the activity data for "zone_play_time"
$.get("{{ url_for('activity_data', name='zone_play_time') }}", function(data) {
// Load data as a json object
data = JSON.parse(data);
var ctx = document.getElementById('zone_play_time_graph').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: data.datasets
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
{% endblock scripts %}}