mirror of
https://github.com/blw1138/Zordon.git
synced 2025-12-17 16:58:12 +00:00
283 lines
10 KiB
HTML
283 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Zordon Dashboard</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<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 onload="rendererChanged(document.getElementById('renderer'))">
|
|
|
|
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<span class="navbar-item h1">
|
|
Zordon Render Server - {{hostname}}
|
|
</span>
|
|
|
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<div class="navbar-item">
|
|
<button class="button is-primary is-outlined js-modal-trigger" data-target="add-job-modal">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-plus"></i>
|
|
</span>
|
|
<span>Submit Job</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="table-container">
|
|
<table class="table is-bordered is-striped is-hoverable is-fullwidth is-narrow" style="text-align: center; vertical-align: middle;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: center;">Preview</th>
|
|
<th style="text-align: center;">Name</th>
|
|
<th style="text-align: center;">Renderer</th>
|
|
<th style="text-align: center;">Priority</th>
|
|
<th style="text-align: center;">Status</th>
|
|
<th style="text-align: center;">Time Elapsed</th>
|
|
<th style="text-align: center;">%</th>
|
|
<th style="text-align: center;">Frame Count</th>
|
|
<th style="text-align: center;">Client</th>
|
|
<th style="text-align: center;">Last Output</th>
|
|
<th style="text-align: center;">Commands</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- <tfoot>-->
|
|
<!-- <tr>-->
|
|
<!-- </tr>-->
|
|
<!-- </tfoot>-->
|
|
{% for job in all_jobs %}
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 0; margin: 0;"><img src="/ui/job/{{job.id}}/thumbnail"></td>
|
|
<td>{{job.name}}</td>
|
|
<td>{{job.renderer}}-{{job.worker.renderer_version}}</td>
|
|
<td>{{job.priority}}</td>
|
|
<td>{{job.render_status().value}}</td>
|
|
<td>{{job.time_elapsed()}}</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>
|
|
<td>
|
|
<div class="buttons are-small">
|
|
<button class="button is-info" onclick="window.location.href='/ui/job/{{job.id}}/full_details';">
|
|
<span class="icon"><i class="fa-solid fa-info"></i></span>
|
|
</button>
|
|
<button class="button is-link" onclick="window.location.href='/api/job/{{job.id}}/logs';">
|
|
<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&redirect=True';">
|
|
Cancel
|
|
</button>
|
|
{% elif job.render_status().value == 'completed': %}
|
|
<button class="button is-success" onclick="window.location.href='/api/job/{{job.id}}/download_all';">
|
|
<span class="icon"><i class="fa-solid fa-download"></i></span>
|
|
<span>{{job.file_list() | length}}</span>
|
|
</button>
|
|
{% endif %}
|
|
<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>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
{% endfor %}
|
|
</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 -->
|
|
|
|
<label class="label">Upload File</label>
|
|
<div id="file-uploader" class="file has-name is-fullwidth">
|
|
<label class="file-label">
|
|
<input class="file-input is-small" 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;
|
|
}
|
|
}
|
|
|
|
const presets = {
|
|
{% for preset in preset_list: %}
|
|
{{preset}}: {
|
|
name: '{{preset_list[preset]['name']}}',
|
|
renderer: '{{preset_list[preset]['renderer']}}',
|
|
args: '{{preset_list[preset]['args']}}',
|
|
},
|
|
{% endfor %}
|
|
};
|
|
|
|
function rendererChanged(ddl1) {
|
|
|
|
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 %}
|
|
};
|
|
|
|
var selectedRenderer = ddl1.value;
|
|
|
|
var ddl3 = document.getElementById('preset_list');
|
|
ddl3.options.length = 0;
|
|
createOption(ddl3, '-Presets-', '');
|
|
for (var preset_name in presets) {
|
|
if (presets[preset_name]['renderer'] == selectedRenderer) {
|
|
createOption(ddl3, presets[preset_name]['name'], preset_name);
|
|
};
|
|
};
|
|
document.getElementById('raw_args').value = "";
|
|
|
|
var ddl2 = document.getElementById('export_format');
|
|
ddl2.options.length = 0;
|
|
var options = renderers[selectedRenderer];
|
|
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);
|
|
}
|
|
|
|
function addPresetTextToInput(presetfield, textfield) {
|
|
var p = presets[presetfield.value];
|
|
textfield.value = p['args'];
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- Renderer & Priority -->
|
|
<div class="field is-grouped">
|
|
<p class="control">
|
|
<label class="label">Renderer</label>
|
|
<span class="select">
|
|
<select id="renderer" name="renderer" onchange="rendererChanged(this)">
|
|
{% for renderer in renderer_info: %}
|
|
<option name="renderer" value="{{renderer}}">{{renderer}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</span>
|
|
</p>
|
|
<p class="control">
|
|
<label class="label">Client</label>
|
|
<span class="select">
|
|
<select name="client">
|
|
<option name="client" value="">First Available</option>
|
|
{% for client in render_clients: %}
|
|
<option name="client" value="{{client}}">{{client}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</span>
|
|
</p>
|
|
<p class="control">
|
|
<label class="label">Priority</label>
|
|
<span class="select">
|
|
<select name="priority">
|
|
<option name="priority" value="1">1</option>
|
|
<option name="priority" value="2" selected="selected">2</option>
|
|
<option name="priority" value="3">3</option>
|
|
</select>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Output Path -->
|
|
<label class="label">Output</label>
|
|
<div class="field has-addons">
|
|
<div class="control is-expanded">
|
|
<input class="input is-small" type="text" placeholder="Output Name" name="output_path">
|
|
</div>
|
|
<p class="control">
|
|
<span class="select is-small">
|
|
<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>-->
|
|
|
|
<label class="label">Command Line Arguments</label>
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<span class="select is-small">
|
|
<select id="preset_list" onchange="addPresetTextToInput(this, document.getElementById('raw_args'))">
|
|
<option value="preset-placeholder">presets</option>
|
|
</select>
|
|
</span>
|
|
</p>
|
|
<p class="control is-expanded">
|
|
<input class="input is-small" type="text" placeholder="Args" id="raw_args" name="raw_args">
|
|
</p>
|
|
</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> |