copy API keys; CSS refinements

This commit is contained in:
Reid 'arrdem' McKenzie 2023-05-28 23:54:13 -06:00
parent dcce448bc9
commit de978486f5
11 changed files with 127 additions and 90 deletions

View file

@ -29,6 +29,10 @@
div {
margin-right: 10px;
}
.controls {
margin-left: auto;
display: flex;
}
}
// Hide the header name if we're on a mobile device
@ -41,3 +45,23 @@
label {
margin-right: 10px;
}
.mb-1 {
margin-bottom: 10px;
}
.mb-2 {
margin-bottom: 20px;
}
@media (max-width: 760px) {
.file, .printer, .key, .job {
flex-direction: column;
margin-bottom: 10px;
.controls {
margin-right: auto;
margin-left: unset;
}
}
}

View file

@ -156,6 +156,7 @@ $stripe_padding: ($stripe_thickness / 4);
}
*/
#menu-toggle:checked ~ .menu > li:last-child {
padding-bottom: 1em;
border-bottom: 1px solid #444;
}
//}

View file

@ -29,6 +29,7 @@
<li><a class="twelve columns button slide" href="/user/login">Log in</a></li>
<li><a class="twelve columns button slide" href="/user/register">Register</a></li>
{% else %}
<li><a class="twelve columns button slide" href="/">Overview</a></li>
<li><a class="twelve columns button slide" href="/jobs">Jobs</a></li>
<li><a class="twelve columns button slide" href="/files">Files</a></li>
{% if ctx.is_admin %}

View file

@ -1,10 +1,10 @@
{% extends "base.html.j2" %}
{% block content %}
<div class="row twelve columns">
<div class="row twelve columns mb-2">
{% include "files_list.html.j2" %}
</div>
<div class="row twelve columns">
<div class="row twelve columns mb-2">
<h2>Upload a file</h2>
<form method="post" action="/files" enctype="multipart/form-data">
<input type="hidden" name="action" value="upload" />

View file

@ -1,21 +1,19 @@
{% import "macros.html.j2" as macros %}
<div class="files">
<h2>Files</h2>
{% with files = ctx.db.list_files(uid=ctx.uid) %}
{% if files %}
{% for file in files %}
<div class="file row u-flex">
<div class="details six columns">
<span class="file-name">{{ file.filename }}</span>
</div>
<div class="controls u-flex u-ml-auto">
{{ macros.start_job(file.id) }}
{{ macros.delete_file(file.id) }}
</div>
</div>
{% endfor %}
{% else %}
You don't have any files. Upload something!
{% endif %}
{% endwith %}
<h2>Files</h2>
{% with files = ctx.db.list_files(uid=ctx.uid) %}
{% if files %}
{% for file in files %}
<div class="file row u-flex">
<div class="details six columns">
<span class="file-name">{{ file.filename }}</span>
</div>
<div class="controls u-flex u-ml-auto">
{{ macros.start_job(file.id) }}
{{ macros.delete_file(file.id) }}
</div>
</div>
{% endfor %}
{% else %}
You don't have any files. Upload something!
{% endif %}
{% endwith %}

View file

@ -1,11 +1,11 @@
{% extends "base.html.j2" %}
{% block content %}
<div class="row twelve columns">
<div class="row twelve columns mb-2">
{% include "jobs_list.html.j2" %}
</div>
{% if ctx.uid %}
<div class="row twelve columns">
<div class="row twelve columns mb-2">
{% include "files_list.html.j2" %}
</div>
{% endif %}

View file

@ -1,5 +1,9 @@
{% extends "base.html.j2" %}
{% block content %}
{% include "jobs_list.html.j2" %}
{% include "jobs_history.html.j2" %}
<div class="row twelve columns mb-2">
{% include "jobs_list.html.j2" %}
</div>
<div class="row twelve columns mb-2">
{% include "jobs_history.html.j2" %}
</div>
{% endblock %}

View file

@ -1,35 +1,33 @@
{% import "macros.html.j2" as macros %}
<div class="history">
<h2>Job history</h2>
{% with jobs = ctx.db.list_job_history(uid=ctx.uid) %}
{% if jobs %}
{% for job in jobs %}
<div class="job row u-flex">
<div class="details six columns u-flex">
<div class="job-status u-flex">
<label for="state">Job</label>
<div class="dot {{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div>
<span name="state">{{ macros.job_state(job) }}</span>
</div>
{% if job.printer_id %}
<div class="job-printer u-flex">
<label for="printer">Printer</label>
<span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
</div>
{% endif %}
<div class="job-filename u-flex">
<label for="filename">File</label>
<span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
</div>
</div>
<div class="controls u-flex u-ml-auto">
{{ macros.duplicate_job(job.id) }}
{{ macros.delete_job(job.id) }}
</div>
<h2>Job history</h2>
{% with jobs = ctx.db.list_job_history(uid=ctx.uid) %}
{% if jobs %}
{% for job in jobs %}
<div class="job row u-flex">
<div class="details six columns u-flex">
<div class="job-status u-flex">
<label for="state">Job</label>
<div class="dot {{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div>
<span name="state">{{ macros.job_state(job) }}</span>
</div>
{% endfor %}
{% else %}
<p>No job history to display.</p>
{% endif %}
{% endwith %}
{% if job.printer_id %}
<div class="job-printer u-flex">
<label for="printer">Printer</label>
<span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
</div>
{% endif %}
<div class="job-filename u-flex">
<label for="filename">File</label>
<span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
</div>
</div>
<div class="controls u-flex u-ml-auto">
{{ macros.duplicate_job(job.id) }}
{{ macros.delete_job(job.id) }}
</div>
</div>
{% endfor %}
{% else %}
<p>No job history to display.</p>
{% endif %}
{% endwith %}

View file

@ -1,35 +1,33 @@
{% import "macros.html.j2" as macros %}
<div class="queue">
<h2>Job queue</h2>
{% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %}
{% if jobs %}
{% for job in jobs %}
<div class="job row u-flex">
<div class="details six columns u-flex">
<div class="job-status u-flex">
<label for="state">Job</label>
<div class="dot {{ macros.job_state(job) }} {{ 'dot--basic' if not job.state else '' }}" style="--dot-size: 1em;"> </div>
<span name="state">{{ macros.job_state(job) }}</span>
</div>
{% if job.printer_id %}
<div class="job-printer u-flex">
<label for="printer">Printer</label>
<span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
</div>
{% endif %}
<div class="job-filename u-flex">
<label for="filename">File</label>
<span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
</div>
</div>
<div class="controls u-flex u-ml-auto">
{{ macros.duplicate_job(job.id) }}
{{ macros.cancel_job(job.id) }}
</div>
<h2>Job queue</h2>
{% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %}
{% if jobs %}
{% for job in jobs %}
<div class="job row u-flex">
<div class="details six columns u-flex">
<div class="job-status u-flex">
<label for="state">Job</label>
<div class="dot {{ macros.job_state(job) }} {{ 'dot--basic' if not job.state else '' }}" style="--dot-size: 1em;"> </div>
<span name="state">{{ macros.job_state(job) }}</span>
</div>
{% endfor %}
{% else %}
No pending tasks. {% if ctx.uid %}Start something!{% endif %}
{% endif %}
{% endwith %}
{% if job.printer_id %}
<div class="job-printer u-flex">
<label for="printer">Printer</label>
<span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
</div>
{% endif %}
<div class="job-filename u-flex">
<label for="filename">File</label>
<span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
</div>
</div>
<div class="controls u-flex u-ml-auto">
{{ macros.duplicate_job(job.id) }}
{{ macros.cancel_job(job.id) }}
</div>
</div>
{% endfor %}
{% else %}
No pending tasks. {% if ctx.uid %}Start something!{% endif %}
{% endif %}
{% endwith %}

View file

@ -1,6 +1,6 @@
{% extends "base.html.j2" %}
{% block content %}
<div class="twelve columns">
<div class="row twelve columns mb-1">
{% include "printers_list.html.j2" %}
</div>
{% endblock %}

View file

@ -13,6 +13,10 @@
<span class="key-expiration u-ml-auto">{{ 'Expires in ' if exp else ''}}{{ exp - datetime.now() if exp else 'Never expires' }}</span>
</div>
<div class="controls u-flex u-ml-auto">
<form class="inline" method="none" class="ml-auto">
<input type="hidden" name="key" value="{{ id }}" id="key{{ loop.index }}">
<input type="button" value="Copy" onclick="copyKey('#key{{loop.index}}');" />
</form>
<form class="inline" method="post" class="ml-auto">
<input type="hidden" name="action" value="revoke">
<input type="hidden" name="id" value="{{ id }}">
@ -50,4 +54,13 @@
</div>
</form>
</div>
<script type="text/javascript">
function copyKey(keySelector) {
console.log("Hook fired");
let copyEl = document.querySelector(keySelector);
console.log(copyEl);
let copyValue = copyEl.value;
navigator.clipboard.writeText(copyValue)
};
</script>
{% endblock %}