aboutsummaryrefslogtreecommitdiff
path: root/app/templates
diff options
context:
space:
mode:
Diffstat (limited to 'app/templates')
-rw-r--r--app/templates/_partials/modals.html21
-rw-r--r--app/templates/admin/annotations_by_dataset.html2
-rw-r--r--app/templates/admin/manage_datasets.html20
-rw-r--r--app/templates/admin/manage_users.html116
-rw-r--r--app/templates/annotate/index.html64
-rw-r--r--app/templates/base.html35
-rw-r--r--app/templates/demo/evaluate.html49
-rw-r--r--app/templates/demo/learn.html23
-rw-r--r--app/templates/index.html153
9 files changed, 288 insertions, 195 deletions
diff --git a/app/templates/_partials/modals.html b/app/templates/_partials/modals.html
new file mode 100644
index 0000000..1ffd85f
--- /dev/null
+++ b/app/templates/_partials/modals.html
@@ -0,0 +1,21 @@
+{% macro modal(id, title, message) %}
+<!-- Modal -->
+<div class="modal fade" id="{{ id }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ id }}ModalTitle" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="{{ id }}LongTitle">{{ title }}</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ {{ message }}
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+</div>
+{% endmacro %}
diff --git a/app/templates/admin/annotations_by_dataset.html b/app/templates/admin/annotations_by_dataset.html
index 5ad98b6..eb7a7e8 100644
--- a/app/templates/admin/annotations_by_dataset.html
+++ b/app/templates/admin/annotations_by_dataset.html
@@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block styles %}
-{{super()}}
+{{ super() }}
<link rel="stylesheet" href="{{url_for('static', filename='view_annotation.css')}}">{% endblock %}
{% block app_content %}
diff --git a/app/templates/admin/manage_datasets.html b/app/templates/admin/manage_datasets.html
index f14fe81..f68259f 100644
--- a/app/templates/admin/manage_datasets.html
+++ b/app/templates/admin/manage_datasets.html
@@ -42,18 +42,20 @@
<thead class="thead-dark">
<th scope="col">ID</th>
<th scope="col">Name</th>
- <th scope="col">Assigned Tasks</th>
- <th scope="col">Completed Tasks</th>
- <th scope="col">Percentage</th>
+ <th scope="col">Demo</th>
+ <th scope="col">Assigned Tasks</th>
+ <th scope="col">Completed Tasks</th>
+ <th scope="col">Percentage</th>
</thead>
{% for entry in overview %}
<tr>
- <th scope="row">{{ entry['id'] }}</th>
- <td>{{ entry['name'] }}</td>
- <td>{{ entry['assigned'] }}</td>
- <td>{{ entry['completed'] }}</td>
- <td>{{ entry['percentage'] }}</td>
- </tr>
+ <th scope="row">{{ entry['id'] }}</th>
+ <td>{{ entry['name'] }}</td>
+ <td>{% if entry['demo'] %}Yes{% else %}No{% endif %}</td>
+ <td>{{ entry['assigned'] }}</td>
+ <td>{{ entry['completed'] }}</td>
+ <td>{{ entry['percentage'] }}</td>
+ </tr>
{% endfor %}
</tr>
</table>
diff --git a/app/templates/admin/manage_users.html b/app/templates/admin/manage_users.html
index 5c44a48..8788958 100644
--- a/app/templates/admin/manage_users.html
+++ b/app/templates/admin/manage_users.html
@@ -1,70 +1,72 @@
{% extends "base.html" %}
{% block app_content %}
-<h1>Manage Users</h1>
+ <h1>Manage Users</h1>
-<div class="col-lg-3">
+ <div class="col-lg-3">
<div class="row">
- <form class="form" action="" method="POST">
- {{ form.hidden_tag() }}
- {{ form.user }}
- {{ form.delete(hidden='true', id='form-submit') }}
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
- Delete
- </button>
- </form>
+ <form class="form" action="" method="POST">
+ {{ form.hidden_tag() }}
+ {{ form.user }}
+ {{ form.delete(hidden='true', id='form-submit') }}
+ <!-- Button trigger modal -->
+ <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
+ Delete
+ </button>
+ </form>
</div>
-</div>
+ </div>
-<!-- Modal -->
-<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="deleteModalLabel">Delete Dataset</h5>
- </div>
- <div class="modal-body">
- You are about to delete the user <span id="user-name"></span> <b>and</b> all associated tasks and annotations. Are you sure?
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
+ <!-- Modal -->
+ <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="deleteModalLabel">Delete Dataset</h5>
+ </div>
+ <div class="modal-body">
+ You are about to delete the user <span id="user-name"></span> <b>and</b> all associated tasks and annotations. Are you sure?
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
+ </div>
</div>
</div>
</div>
-</div>
-<br>
-<h1>User Overview</h1>
-<article class="overview">
- <table class="table table-striped">
- <thead class="thead-dark">
- <th scope="col">ID</th>
- <th scope="col">Username</th>
- <th scope="col">Email</th>
- <th scope="col">Confirmed</th>
- <th scope="col">Last Active</th>
- <th scope="col">Admin</th>
- </thead>
- {% for user in users %}
- <tr>
- <th scope="row">{{ user.id }}</th>
- <td>{{ user.username }}</td>
- <td>{{ user.email }}</td>
- <td>{% if user.is_confirmed %}Yes{% else %}No{% endif %}</td>
- <td>{{ user.last_active }}</td>
- <td>{% if user.is_admin %}Yes{% else %}{% endif %}</td>
- </tr>
- {% endfor %}
- </tr>
- </table>
-</article>
+ <br>
+ <h1>User Overview</h1>
+ <article class="overview">
+ <table class="table table-striped">
+ <thead class="thead-dark">
+ <th scope="col">ID</th>
+ <th scope="col">Username</th>
+ <th scope="col">Email</th>
+ <th scope="col">Confirmed?</th>
+ <th scope="col">Introduced?</th>
+ <th scope="col">Last Active (UTC)</th>
+ <th scope="col">Admin?</th>
+ </thead>
+ {% for user in users %}
+ <tr>
+ <th scope="row">{{ user.id }}</th>
+ <td>{{ user.username }}</td>
+ <td>{{ user.email }}</td>
+ <td>{% if user.is_confirmed %}Yes{% else %}No{% endif %}</td>
+ <td>{% if user.is_introduced %}Yes{% else %}No{% endif %}</td>
+ <td>{{ user.last_active }}</td>
+ <td>{% if user.is_admin %}Yes{% else %}{% endif %}</td>
+ </tr>
+ {% endfor %}
+ </tr>
+ </table>
+ </article>
-<script>
-var conf = document.getElementById("modal-confirm");
-conf.onclick = function() {
- document.getElementById("form-submit").click();
-};
-</script>
+ <script>
+ var conf = document.getElementById("modal-confirm");
+ conf.onclick = function() {
+ document.getElementById("form-submit").click();
+ };
+ </script>
{% endblock %}
diff --git a/app/templates/annotate/index.html b/app/templates/annotate/index.html
index 106ef2a..f4172b6 100644
--- a/app/templates/annotate/index.html
+++ b/app/templates/annotate/index.html
@@ -1,12 +1,13 @@
{% extends "base.html" %}
+{% import "_partials/modals.html" as modals %}
{% block styles %}
-{{super()}}
+{{ super() }}
<link rel="stylesheet" href="{{url_for('static', filename='annotate.css')}}">
{% endblock %}
{% block app_content %}
-<h1>{{ task.dataset.name }}</h1>
+<h1>{{ title }}</h1>
<div id="rubric" class="row">
<div class="col-md-12">
@@ -18,54 +19,25 @@
<div id="wrap-buttons" class="row">
<div class="col-md-6 text-left">
- <button class="btn btn-primary float-md-left" type="button" id="btn-reset">Reset</button>
+ <button class="btn btn-primary float-md-left" type="button"
+ id="btn-reset">Reset</button>
</div>
<div class="col-md-6 text-right">
- <button class="btn btn-warning float-md-right" type="button" id="btn-none">No Changepoints</button>
- <button class="btn btn-success float-md-right" id="btn-submit" type="button">Submit</button>
+ <button class="btn btn-warning float-md-right" type="button"
+ id="btn-none">No change points</button>
+ <button class="btn btn-success float-md-right" id="btn-submit"
+ type="button">Submit</button>
</div>
</div>
<br>
-<!-- Modal -->
-<div class="modal fade" id="submitNoCPModal" tabindex="-1" role="dialog" aria-labelledby="submitNoCPModalTitle" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="submitNoCPModalLongTitle">No Changepoints Selected</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="modal-body">
- Please use the "No Changepoints" button when you think there are no changepoints in the time series.
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
-</div>
+{{ modals.modal("submitNoCP", "No Change Points Selected", "Please use the
+\"No Change Points\" button when you think there are no change points in the
+time series.") }}
-<!-- Modal -->
-<div class="modal fade" id="NoCPYesCPModal" tabindex="-1" role="dialog" aria-labelledby="NoCPYesCPModalTitle" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="NoCPYesCPModalLongTitle">Changepoints Selected</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="modal-body">
- There are selected changepoints, please click the Reset button before clicking the "No Changepoints" button.
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
-</div>
+{{ modals.modal("NoCPYesCP", "Change Points Selected", "There are selected
+change points, please click the Reset button before clicking the \"No change
+points\" button.") }}
<h3>Selected Changepoints</h3>
<div id="changepoint-table">
@@ -79,7 +51,7 @@
<script src="{{ url_for('static', filename='js/makeChart.js') }}"></script>
<script src="{{ url_for('static', filename='js/updateTable.js') }}"></script>
<script src="{{ url_for('static', filename='js/buttons.js') }}"></script>
-<script>makeChart({{ data.chart_data | safe }});</script>
+<script>makeChart("#graph", {{ data.chart_data | safe }});</script>
<script>
// reset button
var reset = document.getElementById("btn-reset");
@@ -87,12 +59,12 @@ reset.onclick = resetOnClick;
// no changepoint button
var nocp = document.getElementById("btn-none");
nocp.onclick = function() {
- noCPOnClick({{ task.id }});
+ noCPOnClick({{ identifier }});
};
// submit button
var submit = document.getElementById("btn-submit");
submit.onclick = function() {
- submitOnClick({{ task.id }});
+ submitOnClick({{ identifier }});
};
</script>
{% endblock %}
diff --git a/app/templates/base.html b/app/templates/base.html
index 8bc31dc..f11760a 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -2,12 +2,13 @@
{% import "bootstrap/utils.html" as util %}
{% block styles %}
-{{ super() }}
+ {{ super() }}
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/global.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='sticky_footer.css') }}">
{% endblock %}
{% block title %}
- {% if title %}{{ title }} -- AnnotateChange{% else %}Welcome to AnnotateChange{% endif %}
+ {% if title %}{{ title }} &middot; AnnotateChange{% else %}Welcome to AnnotateChange{% endif %}
{% endblock %}
{% block navbar %}
@@ -28,13 +29,13 @@
</ul>
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_anonymous %}
- <li><a href="{{ url_for('auth.login') }}">Login</a></li>
- <li><a href="{{ url_for('auth.register') }}">Register</a></li>
+ <li><a href="{{ url_for('auth.login') }}">Login</a></li>
+ <li><a href="{{ url_for('auth.register') }}">Register</a></li>
{% else %}
- {% if current_user.is_admin %}
- <li><a href="/admin" style="color: red;">Admin Panel</a></li>
- {% endif %}
- <li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
+ {% if current_user.is_admin %}
+ <li><a href="{{ url_for('admin.index') }}" style="color: red;">Admin Panel</a></li>
+ {% endif %}
+ <li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
{% endif %}
</ul>
</div>
@@ -44,19 +45,13 @@
{% block content %}
<main class="container">
-
- {{ util.flashed_messages(dismissible=True) }}
-
- {% block app_content %}
- {% endblock %}
+ {{ util.flashed_messages(dismissible=True) }}
+ {% block app_content %}
+ {% endblock %}
</main>
<footer class="fixed-bottom">
- <div class="container">
- <span class="text-muted">This is AnnotateChange version {{
- config.APP_VERSION }}. For questions or comments,
- please contact <a
- href="mailto:gvandenburg@turing.ac.uk">Gertjan van den
- Burg</a>.</span>
- </div>
+ <div class="container">
+ <span class="text-muted">This is AnnotateChange version {{ config.APP_VERSION }}. For questions or comments, please <a href="mailto:annotatechange@gmail.com">send us an email</a>.</span>
+ </div>
</footer>
{% endblock %}
diff --git a/app/templates/demo/evaluate.html b/app/templates/demo/evaluate.html
new file mode 100644
index 0000000..b148f66
--- /dev/null
+++ b/app/templates/demo/evaluate.html
@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{url_for('static', filename='css/demo/evaluate.css')}}">
+{% endblock %}
+
+{% block app_content %}
+<h1>{{ title }}</h1>
+
+<div id="lesson" class="row">
+ <div class="col-md-8">
+ {{ text | safe }}
+ </div>
+</div>
+
+<div class="graph-wrapper">
+ <div class="row">
+ <p><b>Your annotation:</b></p>
+ </div>
+ <div id="graph_user"></div>
+ <div class="row">
+ <p><b>Ground truth:</b></p>
+ </div>
+ <div id="graph_true"></div>
+</div>
+
+<div class="row">
+ <div id="next-btn" class="col-md-10">
+ {{ wtf.quick_form(form, button_map={'submit': 'primary'}) }}
+ </div>
+</div>
+
+<script src="//d3js.org/d3.v5.min.js"></script>
+<script src="{{ url_for('static', filename='js/makeChart.js') }}"></script>
+<script>makeChartAnnotated(
+ "#graph_user",
+ {{ data.chart_data | safe }},
+ {{ annotations_user | safe }}
+);
+</script>
+<script>makeChartAnnotated(
+ "#graph_true",
+ {{ data.chart_data | safe }},
+ {{ annotations_true | safe }}
+);
+</script>
+{% endblock %}
diff --git a/app/templates/demo/learn.html b/app/templates/demo/learn.html
new file mode 100644
index 0000000..8d3d6c9
--- /dev/null
+++ b/app/templates/demo/learn.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{url_for('static', filename='css/demo/learn.css')}}">
+{% endblock %}
+
+{% block app_content %}
+<h1>{{ title }}</h1>
+
+<div id="lesson" class="row">
+ <div class="col-md-6">
+ {{ text | safe }}
+ </div>
+</div>
+
+<div class="row">
+ <div id="next-btn" class="col-md-6">
+ {{ wtf.quick_form(form, button_map={'submit': 'primary'}) }}
+ </div>
+</div>
+{% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
index 76edbcd..930bfd3 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,69 +1,98 @@
{% extends "base.html" %}
{% block styles %}
-{{ super() }}
-<link rel="stylesheet" href="{{url_for('static', filename='user_index.css')}}">
+ {{ super() }}
+ <link rel="stylesheet" href="{{url_for('static', filename='user_index.css')}}">
{% endblock %}
{% block app_content %}
-{% if current_user.is_authenticated %}
- <h1>Hi, {{ current_user.username }}!</h1>
- {% if tasks_todo %}
- <h2>Annotations to be done</h2>
- <br>
- <p>
- Below are the datasets that we've asked you to annotate, thank you
- very much for your help!
- </p>
- <br>
- <div class="tasks-todo">
- <table class="table table-striped">
- <thead class="thead-dark">
- <th scope="col">Name</th>
- </thead>
- {% for task in tasks_todo %}
- <tr>
- <td><a href="/annotate/{{ task.id }}">{{ task.dataset.name }}</a></td>
- </tr>
- {% endfor %}
- </table>
- </div>
- {% elif tasks_todo|length == 0 and tasks_done|length > 0 %}
- <div id="done">
- <img src="/static/done.png">
- <span>No more annotations to do! Thank you so much for your
- help, <b>you rock!</b></span>
- </div>
- {% else %}
- <span>There are no datasets for you to annotate at the moment, please
- check back again later. Thank you!</span>
- {% endif %}
- {% if tasks_done %}
- <h2>Completed Annotations</h2>
- <div class="tasks-done">
- <table class="table table-striped">
- <thead>
- <th scope="col">Name</th>
- <th scope="col">Completed On</th>
- </thead>
- {% for task in tasks_done %}
- <tr>
- <td>{{ task.dataset.name }}</td>
- <td>{{ task.annotated_on }}</td>
- </tr>
- {% endfor %}
- </table>
- </div>
- {% endif %}
-{% else %}
- <article>
- <div>
- Welcome to <i>AnnotateChange</i> a tool for annotating time
- series data for changepoint analysis.
- <br>
- <br>
- Please log in or register to get started.
- </div>
- </article>
-{% endif %}
+ {% if current_user.is_authenticated %}
+ <h1>Hi, {{ current_user.username }}!</h1>
+ {% endif %}
+ <p>
+ Welcome to <i>AnnotateChange</i> a tool for annotating time series data
+ for changepoint analysis.
+ </p>
+ {% if not current_user.is_authenticated %}
+ <br>
+ <p>
+ Please <a href="{{ url_for('auth.login') }}">log in</a> or
+ <a href="{{ url_for('auth.register') }}">register</a> to get started.
+ </p>
+ {% endif %}
+ {% if current_user.is_authenticated %}
+ <h3>Introduction</h3>
+ {% if not current_user.is_introduced %}
+ <a href="{{ url_for('main.demo') }}">Click here to start the introduction to AnnotateChange.</a>
+ {% if tasks_todo|length == 0 and tasks_done|length == 0 %}
+ <br>
+ <br>
+ <p>
+ When you have finished the introduction, the datasets to annotate
+ will appear here.
+ </p>
+ {% endif %}
+ {% else %}
+ <p>
+ Thank you for completing the introduction. If you want to revisit
+ it, you can do so by <a href="{{ url_for('main.demo') }}">clicking here</a>.
+ </p>
+ {% if tasks_todo|length == 0 and tasks_done|length == 0 %}
+ <br>
+ <br>
+ <p>
+ There are currently no datasets for you to annotate. Please check back
+ again later.
+ </p>
+ {% endif %}
+ {% endif %}
+ {% if tasks_todo %}
+ <h3>Datasets to Annotate</h3>
+ <p>
+ Below are the datasets that we would like you to annotate, thank you
+ very much for your help!
+ </p>
+ <div class="tasks-todo">
+ <table class="table table-striped">
+ <thead class="thead-dark">
+ <th scope="col">Name</th>
+ </thead>
+ {% for task in tasks_todo %}
+ <tr>
+ <td>
+ <a href="{{ url_for('main.annotate', task_id=task.id) }}">
+ {{ task.dataset.name | title }}
+ </a>
+ </td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+ {% elif tasks_todo|length == 0 and tasks_done|length > 0 %}
+ <div id="done">
+ <img src="{{ url_for('static', filename='done.png') }}">
+ <span>
+ No more annotations to do! Thank you so much for your help,
+ <b>you rock!</b>
+ </span>
+ </div>
+ {% endif %}
+ {% if tasks_done %}
+ <h3>Completed Annotations</h3>
+ <div class="tasks-done">
+ <table class="table table-striped">
+ <thead>
+ <th scope="col">Name</th>
+ <th scope="col">Completed On</th>
+ </thead>
+ {% for task in tasks_done %}
+ <tr>
+ <td>{{ task.dataset.name | title }}</td>
+ <td>{{ task.annotated_on }}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+ {% endif %}
+ {% endif %}
{% endblock %}
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-10 19:31:36 +0000