brett/Zordon
1
0
Fork 0
mirror of https://github.com/blw1138/Zordon.git synced 2025-12-17 16:58:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add submit job to HTML page

Browse Source
This commit is contained in:
Brett Williams
2022-12-10 16:16:37 -08:00
parent d0b14fc001
commit 10dd5b4295
6 changed files with 276 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
templates/index.html
View File

@@ -9,7 +9,7 @@
<script src="https://kit.fontawesome.com/698705d14d.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'modals.js') }}"></script>
</head>
<body>
<body onload="configureDropDownLists(document.getElementById('renderer'), document.getElementById('export_format'))">
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
@@ -24,52 +24,11 @@
</a>
</div>
<!-- <div id="navbarBasicExample" class="navbar-menu">-->
<!-- <div class="navbar-start">-->
<!-- <a class="navbar-item">-->
<!-- Home-->
<!-- </a>-->
<!-- <a class="navbar-item">-->
<!-- Documentation-->
<!-- </a>-->
<!-- <div class="navbar-item has-dropdown is-hoverable">-->
<!-- <a class="navbar-link">-->
<!-- More-->
<!-- </a>-->
<!-- <div class="navbar-dropdown">-->
<!-- <a class="navbar-item">-->
<!-- About-->
<!-- </a>-->
<!-- <a class="navbar-item">-->
<!-- Jobs-->
<!-- </a>-->
<!-- <a class="navbar-item">-->
<!-- Contact-->
<!-- </a>-->
<!-- <hr class="navbar-divider">-->
<!-- <a class="navbar-item">-->
<!-- Report an issue-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="navbar-end">-->
<!-- <div class="navbar-item">-->
<!-- <div class="buttons">-->
<!-- <a class="button is-primary">-->
<!-- <strong>Sign up</strong>-->
<!-- </a>-->
<!-- <a class="button is-light">-->
<!-- Log in-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="navbar-end">
<div class="navbar-item">
<button class="button is-primary is-outlined js-modal-trigger" data-target="add-job-modal">Submit Job</button>
</div>
</div>
</nav>
<div class="table-container">
@@ -103,7 +62,7 @@
<td>{{job.priority}}</td>
<td>{{job.render_status().value}}</td>
<td>{{job.time_elapsed()}}</td>
<td>{{job.percent_complete()}}</td>
<td>{{ '{0:0.0f}'.format(job.percent_complete() * 100) }}%</td>
<td>{{job.frame_count()}}</td>
<td>{{job.client}}</td>
<td>{{job.worker.last_output}}</td>
@@ -116,7 +75,7 @@
<span class="icon"><i class="fa-regular fa-file-lines"></i></span>
</button>
{% if job.render_status().value in ['running', 'scheduled', 'not_started']: %}
<button class="button is-warning is-active" onclick="window.location.href='/api/job/{{job.id}}/cancel?confirm=True';">
<button class="button is-warning is-active" onclick="window.location.href='/api/job/{{job.id}}/cancel?confirm=True&redirect=True';">
Cancel
</button>
{% elif job.render_status().value == 'completed': %}
@@ -125,7 +84,7 @@
<span>{{job.file_list() | length}}</span>
</button>
{% endif %}
<button class="button is-danger" onclick="window.location.href='/api/job/{{job.id}}/delete?confirm=True'">
<button class="button is-danger" onclick="window.location.href='/api/job/{{job.id}}/delete?confirm=True&redirect=True'">
<span class="icon"><i class="fa-regular fa-trash-can"></i></span>
</button>
</div>
@@ -136,5 +95,130 @@
</table>
</div>
<div id="add-job-modal" class="modal">
<!-- Start Add Form -->
<form id="submit_job" action="/api/add_job?redirect=True" method="POST" enctype="multipart/form-data">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Submit New Job</p>
<button class="delete" aria-label="close" type="button"></button>
</header>
<section class="modal-card-body">
<!-- File Uploader -->
<div id="file-uploader" class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="file">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
No File Uploaded
</span>
</label>
</div>
<br>
<script>
const fileInput = document.querySelector('#file-uploader input[type=file]');
fileInput.onchange = () => {
if (fileInput.files.length > 0) {
const fileName = document.querySelector('#file-uploader .file-name');
fileName.textContent = fileInput.files[0].name;
}
}
function configureDropDownLists(ddl1, ddl2) {
var renderers = {
{% for renderer in renderer_info: %}
{% if renderer_info[renderer]['supported_export_formats']: %}
{{renderer}}: [
{% for format in renderer_info[renderer]['supported_export_formats']: %}
'{{format}}',
{% endfor %}
],
{% endif %}
{% endfor %}
}
ddl2.options.length = 0;
var options = renderers[ddl1.value]
for (i = 0; i < options.length; i++) {
createOption(ddl2, options[i], options[i]);
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
<!-- Renderer -->
<div class="field">
<label class="label">Renderer</label>
<div class="control">
<div class="select">
<select id="renderer" name="renderer" onchange="configureDropDownLists(this, document.getElementById('export_format'))">
{% for renderer in renderer_info: %}
<option name="renderer" value="{{renderer}}">{{renderer}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<!-- Priority -->
<div class="control">
<label class="label">Priority</label>
<label class="radio"><input type="radio" name="priority" value="1">1</label>
<label class="radio"><input type="radio" name="priority" value="2" checked>2</label>
<label class="radio"><input type="radio" name="priority" value="3">3</label>
</div>
<br>
<!-- Output Path -->
<label class="label">Output</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-success" type="text" placeholder="Output Name" name="output_path">
</div>
<p class="control">
<span class="select">
<select id="export_format" name="export_format">
<option value="ar">option</option>
</select>
</span>
</p>
</div>
<!-- Checkboxes -->
<!-- <div class="field">-->
<!-- <div class="control">-->
<!-- <label class="checkbox"><input type="checkbox" name="blender-arg_render_all_frames"> Render All Frames</label>-->
<!-- <label class="checkbox"><input type="checkbox" name="blender-arg_multiple_cameras"> Multiple Cameras</label>-->
<!-- </div>-->
<!-- </div>-->
<div class="control">
<input class="input" type="text" placeholder="Custom Args" name="raw_args">
</div>
<!-- End Add Form -->
</section>
<footer class="modal-card-foot">
<input class="button is-link" type="submit"/>
<button class="button" type="button">Cancel</button>
</footer>
</div>
</form>
</div>
</body>
</html>