{% 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 %}}