Show file title in web frontend

This commit is contained in:
Kumi 2018-10-21 19:54:01 +02:00
parent c048395394
commit dc8bb46734
No known key found for this signature in database
GPG key ID: 8D4E139A5FF9082F
2 changed files with 16 additions and 14 deletions

View file

@ -25,7 +25,7 @@
<div class="col-md-12"> <div class="col-md-12">
<form class="" id="theform"> <form class="" id="theform">
<div class="form-group"> <label>URL</label> <input type="text" class="form-control" placeholder="https://example.com/0/0/0_0.jpg" name="url" required="required"> <small class="form-text text-muted">URL of an image contained in a krpano panorama or of a website containing a Matterport panorama</small> </div> <div class="form-group"> <label>URL</label> <input type="text" class="form-control" placeholder="https://example.com/0/0/0_0.jpg" name="url" required="required"> <small class="form-text text-muted">URL of an image contained in a krpano panorama or of a website containing a Matterport panorama</small> </div>
<div class="form-group"> <label>Title</label> <input type="" class="form-control" placeholder="1234 - Shiny Place" name="title"> </div> <div class="form-group"> <label>Title</label> <input type="" class="form-control" placeholder="1234 - Shiny Place" id="title" name="title"> </div>
<div class="form-group"> <label style="display: block;">Resolution</label> <input type="" class="form-control" placeholder="3840" name="width" style="width: 100px; display: inline;"> x <input type="" class="form-control" placeholder="1920" name="height" style="width: 100px; display: inline;"> </div> <div class="form-group"> <label style="display: block;">Resolution</label> <input type="" class="form-control" placeholder="3840" name="width" style="width: 100px; display: inline;"> x <input type="" class="form-control" placeholder="1920" name="height" style="width: 100px; display: inline;"> </div>
<div id="options"> <div id="options">
<div class="form-group"> <label style="display: block;">Rotation on X/Y/Z axes</label> <input type="" class="form-control" placeholder="0" name="rx" style="width: 100px; display: inline;"> / <input type="" class="form-control" placeholder="0" name="ry" style="width: 100px; display: inline;"> / <input type="" class="form-control" placeholder="0" name="rz" style="width: 100px; display: inline;"> </div> <div class="form-group"> <label style="display: block;">Rotation on X/Y/Z axes</label> <input type="" class="form-control" placeholder="0" name="rx" style="width: 100px; display: inline;"> / <input type="" class="form-control" placeholder="0" name="ry" style="width: 100px; display: inline;"> / <input type="" class="form-control" placeholder="0" name="rz" style="width: 100px; display: inline;"> </div>

View file

@ -23,24 +23,24 @@ function deletecard(jobid) {
} }
function addcard(jobid) { function addcard(jobid, title) {
var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <img class="card-img-top img-fluid" src="/spinner.gif" alt="Creating Image"> </div> </div>'; var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <img class="card-img-top img-fluid" src="/spinner.gif" alt="Creating Image"><div style="text-align: center; font-weight: bold;" class="card-block">' + title + '</div> </div> </div>';
$('#cards').append(text); $('#cards').append(text);
$('html,body').animate({scrollTop: $('#' + jobid).offset().top}); $('html,body').animate({scrollTop: $('#' + jobid).offset().top});
} }
function failcard(jobid) { function failcard(jobid, title) {
deletecard(jobid); deletecard(jobid, title);
var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <div style="text-align: center; color: red; font-weight: bold;" class="card-block">Export failed.</div><div style="text-align: center;" class="card-block"> <a style="color: white;" onclick="deletecard(\'' + jobid + '\');" class="btn btn-danger">Hide</a></div> </div> </div>'; var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <div style="text-align: center; color: red; font-weight: bold;" class="card-block">' + title + ': Export failed.</div><div style="text-align: center;" class="card-block"> <a style="color: white;" onclick="deletecard(\'' + jobid + '\');" class="btn btn-danger">Hide</a></div> </div> </div>';
$('#cards').append(text); $('#cards').append(text);
} }
function finishcard(jobid) { function finishcard(jobid, title) {
deletecard(jobid); deletecard(jobid);
var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <img class="card-img-top img-fluid" src="/getjob/' + jobid + '" alt="Final Image"> <div style="text-align: center; color: white;" class="card-block"> <a href="/getjob/' + jobid + '" class="btn btn-primary">Download</a> <a onclick="deletecard(\'' + jobid + '\');" class="btn btn-danger">Hide</a></div> </div> </div>'; var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <img class="card-img-top img-fluid" src="/getjob/' + jobid + '" alt="Final Image"><div style="text-align: center; font-weight: bold;" class="card-block">' + title + '</div> <div style="text-align: center; color: white;" class="card-block"> <a href="/getjob/' + jobid + '" class="btn btn-primary">Download</a> <a onclick="deletecard(\'' + jobid + '\');" class="btn btn-danger">Hide</a></div> </div> </div>';
$('#cards').append(text); $('#cards').append(text);
} }
@ -52,11 +52,13 @@ $('#theform').submit(function(event){
url: "/addjob", url: "/addjob",
data: $('#theform').serialize(), data: $('#theform').serialize(),
success: function(msg){ success: function(msg){
var interval = setInterval(checkServerForFile,3000,msg); var title = ($("#title").val() ? $("#title").val() : "No title");
var interval = setInterval(checkServerForFile,3000,msg, title);
window.panaxworking = false; window.panaxworking = false;
addcard(msg); addcard(msg, title);
function checkServerForFile(jobid, title) {
function checkServerForFile(jobid) {
if (!window.panaxworking) { if (!window.panaxworking) {
window.panaxworking = true; window.panaxworking = true;
$.ajax({ $.ajax({
@ -66,17 +68,17 @@ $('#theform').submit(function(event){
statusCode: { statusCode: {
404: function() { 404: function() {
clearInterval(interval); clearInterval(interval);
failcard(jobid); failcard(jobid, title);
return; return;
}, },
200: function() { 200: function() {
clearInterval(interval); clearInterval(interval);
finishcard(jobid); finishcard(jobid, title);
return; return;
}, },
500: function() { 500: function() {
clearInterval(interval); clearInterval(interval);
failcard(jobid); failcard(jobid, title);
return; return;
} }
} }