cyclescaler/master/templates/jobStatus.html
2020-04-03 18:58:46 -06:00

123 lines
5.4 KiB
HTML

<html>
<head>
<title>CYCLESCALER | Status</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/public/css/semantic.min.css">
<style>body{border-top: 30px solid rgb(0, 181, 173);}</style>
<noscript>
<style>
.dropdown:hover > .menu { display: block; }
.ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
</style>
</noscript>
<script src="/public/js/jquery-3.4.1.min.js"></script>
<script src="/public/js/semantic.min.js"></script>
<script>
function copyWget(){
var copyText = document.getElementById("wget");
copyText.select();
document.execCommand("copy");
}
$( document ).ready(function() {
$('#progressbarJob').progress();
{{range .Job.Wips}}
$('#progressbar{{.FrameNumber}}').progress();
{{end}}
});
</script>
</head>
<body>
<div class="ui container">
<br >
<div class="ui teal segment">
<h1 class="ui header">
<i class="cube icon"></i>
<div class="content">CYCLESCALER</div>
<div class="sub header">Containerized Distributed Redering System</div>
</h1>
</div>
<div class="ui teal segment">
<div class="ui two column very relaxed grid">
<div class="column">
<h3 class="ui header">
<i class="globe icon"></i>
<div class="content">
Job Status
<div class="sub header">{{.Job.BlendFileName}}</div>
</div>
</h3>
<p>Job Token: {{.Job.Token}}</p>
<div class="ui action input">
<input id="wget" type="text" value="wget -r -nc --cut-dirs=3 -nH &quot;https://deadbeef.codes:8098/public/renderedframes/{{.Job.Token}}&quot; &#59; rm -f renderedframes">
<button class="ui teal right labeled icon button" onclick="copyWget()">
<i class="copy icon"></i>
wget Images
</button>
</div>
<p><a href="/public/renderedframes">Individual rendered frames</a></p>
{{if .Job.Completed}}
<div class="ui large positive icon message">
<i class="checkered flag icon"></i>
<div class="content">Rendering Completed!</div>
</div>
{{end}}
{{if not .Job.Completed}}
<br />
<div class="ui big indicating progress" data-percent="{{.Job.CompletePercentage}}" id="progressbarJob">
<div class="bar">
<div class="progress">{{.Job.CompletePercentage}}&percnt;</div>
</div>
</div>
{{end}}
</div>
<div class="column">
<a href="{{.LatestImage}}"><img class="ui fluid rounded image" src="{{.LatestImage}}"></a>
</div>
</div>
<div class="ui vertical divider"></div>
</div>
<div class="ui teal segment">
<h3 class="ui header">
<i class="cubes icon"></i>
<div class="content">In Progress</div>
</h3>
{{if .InProgress}}
{{range .Job.Wips}}
<div class="ui attached segment">
<h3 class="ui header">
<i class="cube icon"></i>
<div class="content">Frame {{.FrameNumber}} - {{.CompletePercentage}}&percnt;</div>
<div class="ui right floated button" tabindex="0">{{.SlaveName}}</div>
</h3>
{{.Output}}
{{if .BadHealth}}<div class="ui inverted progress warning" data-percent="{{.CompletePercentage}}" id="progressbar{{.FrameNumber}}"><div class="ui red message">Render slave has lost contact with master. </div>{{end}}
{{if not .BadHealth}}<div class="ui bottom attached indicating progress" data-percent="{{.CompletePercentage}}" id="progressbar{{.FrameNumber}}">{{end}}
<div class="bar">
</div>
</div>
</div>
{{end}}
{{end}}
{{if not .InProgress}}
<p>Rendering is not currently in progress</p>
{{end}}
</div>
<div class="ui teal segment">
<h3 class="ui header">
<i class="images icon"></i>
<div class="content">Completed Frames</div>
</h3>
{{ if .UseTinyImages }}<div class="ui tiny images"> {{ else }}<div class="ui small images">{{ end }}
{{ range .Images }}
<a href="/{{.RenderedFramePath}}"><img class="ui rounded image" src="/{{.ThumbnailPath}}"/></a>
{{ end }}
</div>
</div>
</div>
</body>
</html>