mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-14 10:00:40 +00:00
UI enhancements
This commit is contained in:
11
app/templates/admin/admin.html.j2
Normal file
11
app/templates/admin/admin.html.j2
Normal file
@ -0,0 +1,11 @@
|
||||
{% extends "base.html.j2" %}
|
||||
|
||||
{% block page_content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h1 id="title">{{ title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock page_content %}
|
23
app/templates/admin/corpora.html.j2
Normal file
23
app/templates/admin/corpora.html.j2
Normal file
@ -0,0 +1,23 @@
|
||||
{% extends "base.html.j2" %}
|
||||
|
||||
{% block page_content %}
|
||||
<div class="container">
|
||||
<h1 id="title">{{ title }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="corpus-list no-autoinit" id="corpus-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock page_content %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
let corpusListElement = document.querySelector('#corpus-list');
|
||||
let corpusList = new CorpusList(corpusListElement);
|
||||
corpusList.add({{ corpora|tojson }});
|
||||
</script>
|
||||
{% endblock scripts %}
|
@ -3,52 +3,49 @@
|
||||
{% block page_content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="col s12 l2">
|
||||
<p> </p>
|
||||
<img src="{{ url_for('users.profile_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img">
|
||||
</div>
|
||||
<div class="col s12 l10">
|
||||
<h1 id="title">{{ title }}</h1>
|
||||
<span class="chip hoverable tooltipped no-autoinit" id="user-role-chip">{{ user.role.name }}</span>
|
||||
<span class="chip white-text" id="user-confirmed-chip" style="background-color: {{ '#4caf50' if user.confirmed else '#f44336' }};">{{ 'confirmed' if user.confirmed else 'unconfirmed' }}</span>
|
||||
<p id="description">{{ user.about_me }}</p>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<p id="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
|
||||
<a class="waves-effect waves-light btn" href="{{ url_for('.users') }}"><i class="material-icons left">arrow_back</i>Back to Users</a>
|
||||
<div class="col s12"> </div>
|
||||
|
||||
<div class="col s12">
|
||||
<ul class="tabs tabs-fixed-width z-depth-1">
|
||||
<li class="tab"><a href="#user-info">User info</a></li>
|
||||
<li class="tab"><a href="#user-corpora">Corpora</a></li>
|
||||
<li class="tab"><a href="#user-jobs">Jobs</a></li>
|
||||
<li class="tab"><a href="#user-tesseract-ocr-pipeline-models">Tesseract OCR Pipeline Models</a></li>
|
||||
<li class="tab"><a href="#user-spacy-nlp-pipeline-models">SpaCy NLP Pipeline Models</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m8">
|
||||
<div class="col s12" id="user-info">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">User information</span>
|
||||
<ul>
|
||||
<li>Username: {{ user.username }}</li>
|
||||
<li>Email: {{ user.email }}</li>
|
||||
<li>Id: {{ user.id }}</li>
|
||||
<li>Hashid: {{ user.hashid }}</li>
|
||||
<li>Member since: {{ user.member_since }}</li>
|
||||
<li>Confirmed status: {{ user.confirmed }}</li>
|
||||
<li>Last seen: {{ user.last_seen }}</li>
|
||||
<li>Permissions as Int: {{ user.role.permissions }}</li>
|
||||
<li>Role: {{ user.role.name }}</li>
|
||||
<li>Permissions:
|
||||
<ul style="margin-left: 25px;">
|
||||
{% for permission in ['ADMINISTRATE', 'CONTRIBUTE', 'USE_API'] %}
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" {{ 'checked' if user.can(permission) }}>
|
||||
<span>{{ permission|capitalize }}</span>
|
||||
</label>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-action right-align">
|
||||
<a href="{{ url_for('.edit_user', user_id=user.id) }}" class="waves-effect waves-light btn"><i class="material-icons left">edit</i>Edit</a>
|
||||
<a data-target="delete-user-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete</a>
|
||||
<a class="btn waves-effect waves-light" href="{{ url_for('.edit_user', user_id=user.id) }}"><i class="material-icons left">edit</i>Edit</a>
|
||||
<a class="btn red modal-trigger waves-effect waves-light" data-target="delete-user-modal"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 l6">
|
||||
<h3>Corpora</h3>
|
||||
<div class="col s12" id="user-corpora">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="corpus-list" data-user-id="{{ user.hashid }}"></div>
|
||||
@ -56,8 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 l6">
|
||||
<h3>Jobs</h3>
|
||||
<div class="col s12" id="user-jobs">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="job-list" data-user-id="{{ user.hashid }}"></div>
|
||||
@ -65,12 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<h2>Contributions</h2>
|
||||
</div>
|
||||
|
||||
<div class="col s12 l6">
|
||||
<h3>SpaCy NLP Pipeline Models</h3>
|
||||
<div class="col s12" id="user-spacy-nlp-pipeline-models">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="spacy-nlp-pipeline-model-list" data-user-id="{{ user.hashid }}"></div>
|
||||
@ -78,8 +69,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 l6">
|
||||
<h3>Tesseract OCR Pipeline Models</h3>
|
||||
<div class="col s12" id="user-tesseract-ocr-pipeline-models">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="tesseract-ocr-pipeline-model-list" data-user-id="{{ user.hashid }}"></div>
|
||||
@ -99,8 +89,35 @@
|
||||
<p>Do you really want to delete the user {{ user.username }}? All associated data will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-close waves-effect waves-light btn">Cancel</a>
|
||||
<a href="{{ url_for('.delete_user', user_id=user.id) }}" class="modal-close waves-effect waves-light btn red"><i class="material-icons left">delete</i>Delete</a>
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a href="{{ url_for('.delete_user', user_id=user.id) }}" class="btn red modal-close waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock modals %}
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
let userRoleChip = document.querySelector('#user-role-chip');
|
||||
let userRoleChipTooltip = M.Tooltip.init(
|
||||
userRoleChip,
|
||||
{
|
||||
html: `
|
||||
<p>Permissions</p>
|
||||
<p class="left-align">
|
||||
{% for permission in ['ADMINISTRATE', 'CONTRIBUTE', 'USE_API'] %}
|
||||
<label>
|
||||
<input class="filled-in" type="checkbox" {{ 'checked' if user.can(permission) }}>
|
||||
<span>{{ permission|capitalize }}</span>
|
||||
</label>
|
||||
{% if not loop.last %}
|
||||
<br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
`.trim()
|
||||
}
|
||||
);
|
||||
</script>
|
||||
{% endblock scripts %}
|
||||
|
Reference in New Issue
Block a user