techbloc/techrec
1
0
Fork 0
Code Issues 10 Pull requests Releases Activity

widget refactoring, old.html works (refs #13)

Browse source
This commit is contained in:
boyska 2014-03-02 00:27:40 +01:00
parent 037e651d2a
commit 1af5393441
5 changed files with 187 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
server/pages/old.html
View file

@ -14,7 +14,7 @@
<script src="/static/js/jquery.ui.datepicker-it.min.js"></script>
<script src="/static/js/jquery.form.min.js"></script>
<script src="/static/js/rec.js"></script>
<script src="/static/js/old.js"></script>
<script src="/static/js/ui.js"></script>
</head>
<body>
@ -60,9 +60,9 @@
</fieldset>
<div style="margin-top: 2em; text-align: center;">
<button type="submit" id="download" class="pure-button pure-button-primary" style="font-size: 150%;">
<a id="download" class="pure-button pure-button-primary" style="font-size: 150%;">
<i class="fa fa-download"></i>Scarica
</button>
</a>
</div> <!-- download -->
</form>
</div> <!-- 3/4 -->

103
server/static/js/new.js
View file

@ -1,4 +1,4 @@
/*global $, config, RecAPI*/
/*global $, config, RecAPI, poll_job*/
//TODO: move to a separate file(?)
$.widget("ror.countclock", {
@ -37,9 +37,9 @@ $.widget("ror.countclock", {
$.widget("ror.ongoingrec", {
options: {
rec: null,
state: 0,
filename: null,
/*0 = ongoing, 1 = encoding, 2 = ready to download, 9 = errors*/
state: 0,
filename: null,
/*0 = ongoing, 1 = encoding, 2 = ready to download, 9 = errors*/
},
_create: function() {
"use strict";
@ -49,11 +49,11 @@ $.widget("ror.ongoingrec", {
var view = this.element.data('rec', rec).addClass('ongoing-rec').append(
$('<td/>').append(
$('<input/>').attr('placeholder', 'Nome trasmissione')
)
).append( $('<td class="ongoingrec-time"/>').countclock()).append(
$('<td/>').append($('<a/>')
.addClass('pure-button pure-button-large'))
);
)
).append( $('<td class="ongoingrec-time"/>').countclock()).append(
$('<td/>').append($('<a/>')
.addClass('pure-button pure-button-large'))
);
this._update();
view.on("change", "input", function(evt) {
@ -62,8 +62,8 @@ $.widget("ror.ongoingrec", {
prevrec.name = $(evt.target).val();
$(evt.target).parents('tr.ongoing-rec').data('rec', prevrec);
widget._trigger("change", evt,
{rec: rec, widget: widget, changed: {name: rec.name}}
);
{rec: rec, widget: widget, changed: {name: rec.name}}
);
});
view.on("click", ".rec-stop", function(evt) {
widget._trigger("stop", evt, {rec: rec, widget: widget});
@ -71,16 +71,16 @@ $.widget("ror.ongoingrec", {
view.on("click", ".rec-failed", function(evt) {
$('<div/>').html($('<pre/>').text(widget.options.errormsg))
.dialog({modal: true, title: "Dettaglio errori",
buttons: {
Retry: function() {
console.log("retrying");
widget._setOption("state", 0);
widget._trigger("retry", evt, {rec: rec, widget: widget});
$(this).dialog("close");
}, Cancel: function() {
$(this).dialog("close");
}
}
buttons: {
Retry: function() {
console.log("retrying");
widget._setOption("state", 0);
widget._trigger("retry", evt, {rec: rec, widget: widget});
$(this).dialog("close");
}, Cancel: function() {
$(this).dialog("close");
}
}
});
});
@ -102,56 +102,43 @@ $.widget("ror.ongoingrec", {
var rec = this.options.rec;
this.element.find('input').val(rec.name);
this.element.find(':ror-countclock').countclock("option", "since",
rec.starttime !== null ? new Date(rec.starttime*1000) : null
);
rec.starttime !== null ? new Date(rec.starttime*1000) : null);
if(this.options.state > 0) {
this.element.find(':ror-countclock').countclock("option", "to",
rec.endtime !== null ? new Date(rec.endtime*1000) : null
);
rec.endtime !== null ? new Date(rec.endtime*1000) : null
);
} else {
this.element.find(':ror-countclock').countclock("option", "to", null);
}
this.element.find('a').removeClass(
'pure-button-disabled rec-encoding rec-download rec-failed rec-stop');
switch(this.options.state) {
case 0:
this.element.find('a').addClass("rec-stop").html(
$('<i/>').addClass('fa fa-stop')).append(' Stop');
'pure-button-disabled rec-encoding rec-download rec-failed rec-stop');
switch(this.options.state) {
case 0:
this.element.find('a').addClass("rec-stop").html(
$('<i/>').addClass('fa fa-stop')).append(' Stop');
break;
case 1:
this.element.find('a')
case 1:
this.element.find('a')
.addClass("pure-button-disabled rec-encoding").html(
$('<i/>').addClass('fa fa-clock-o')).append(' Aspetta');
$('<i/>').addClass('fa fa-clock-o')).append(' Aspetta');
break;
case 2:
this.element.find('a').addClass("rec-download")
case 2:
this.element.find('a').addClass("rec-download")
.prop('href', this.options.filename)
.html(
$('<i/>').addClass('fa fa-download').css('color',
'green')).append(' Scarica');
$('<i/>').addClass('fa fa-download').css('color', 'green'))
.append(' Scarica');
break;
case 9:
this.element.find('a').addClass("rec-failed").html(
$('<i/>').addClass('fa fa-warning')).append(' Errori');
case 9:
this.element.find('a').addClass("rec-failed")
.html(
$('<i/>').addClass('fa fa-warning')).append(' Errori');
break;
}
}
}
});
function poll_job(job_id, callback) {
$.getJSON('/api/jobs/' + job_id)
.done(function(data) {
if(data.job_status !== 'WIP') {
console.log("polling completed for job[" + job_id + "]", data);
callback(data);
} else {
setTimeout(function() { poll_job(job_id, callback); },
config.polling_interval);
}
});
}
function add_new_rec() {
//progress()
return RecAPI.create()
@ -200,9 +187,9 @@ function stop_rec(rec, widget) {
return gen_rec(rec, widget);
});
stop_xhr.fail(function(res_update) {
var error = JSON.parse(res_update.responseText).message;
widget.option("errormsg", error);
widget.option("state", 9);
var error = JSON.parse(res_update.responseText).message;
widget.option("errormsg", error);
widget.option("state", 9);
});
return stop_xhr; //RecAPI.stop
}

71
server/static/js/old.js
View file

@ -1,4 +1,4 @@
/*global $*/
/*global $, poll_job*/
var form = {
MAX_MINS: 5*60, // 5 hours
@ -42,6 +42,37 @@ var form = {
}
};
function click(widget) {
/*global RecAPI*/
var v = form.get_values();
RecAPI.fullcreate(v.name, v.start, v.end)
.done(function(res_create) {
console.log("ok, created");
RecAPI.generate(res_create.rec)
.done(function(res_gen) {
console.log("ok, generated", res_create);
//TODO: start polling
$('#download').thebutton('option', 'state', 'Wait');
poll_job(res_gen.job_id, function(data) {
if(data.job_status !== 'DONE') {
console.error("Job failed!", data);
widget.thebutton("option", "state", 'Failed');
widget.thebutton("option", "errormsg", data.exception);
} else {
widget.thebutton("option", "filename", res_gen.result);
widget.thebutton("option", "state", 'Download');
}
});
})
.fail(function() {
console.error("Oh shit, generate failed", res_create.rec);
});
})
.fail(function() {
console.error("Oh shit, fullcreate failed");
});
}
$(function() {
"use strict";
$( "#from-date" ).datepicker({
@ -66,36 +97,18 @@ $(function() {
}
});
$('#to-date, #from-date').datepicker($.datepicker.regional.it);
$('#download').thebutton();
$('#form').ajaxForm({
beforeSubmit: function() {
console.log("check", form.check());
if(form.check().length > 0) {
console.log("Form not valid, aborting");
return false;
$('#download').click(function() {
if(!$('#download').hasClass('rec-run')) {
return;
}
return true;
},
success: function() {
/*global RecAPI*/
var v = form.get_values();
RecAPI.fullcreate(v.name, v.start, v.end)
.done(function(res) {
console.log("ok, created");
RecAPI.generate(res.rec)
.done(function(res) {
console.log("ok, generated", res);
})
.fail(function() {
console.error("Oh shit, generate failed", res.rec);
});
})
.fail(function() {
console.error("Oh shit, fullcreate failed");
});
return false;
}
var check = form.check();
if(check.length > 0) {
console.log("Errors in form", check);
return;
}
click($('#download'));
});
});
/* vim: set ts=2 sw=2 noet fdm=indent: */

14
server/static/js/rec.js
View file

@ -47,3 +47,17 @@ var RecAPI = {
return $.getJSON('/api/get/ongoing');
}
};
function poll_job(job_id, callback) {
$.getJSON('/api/jobs/' + job_id)
.done(function(data) {
if(data.job_status !== 'WIP') {
console.log("polling completed for job[" + job_id + "]", data);
callback(data);
} else {
setTimeout(function() { poll_job(job_id, callback); },
config.polling_interval);
}
});
}

83
server/static/js/ui.js Normal file
View file

@ -0,0 +1,83 @@
/*global $*/
$.widget("ror.thebutton", {
options: {
state: 'Create',
filename: null,
errormsg: null
},
_create: function() {
"use strict";
//create an appropriate button
var widget = this;
var state = this.options.rec;
widget.element.addClass('pure-button');
widget.element.on("click", function(evt) {
/*global error_dialog*/
if(widget.element.hasClass("rec-failed")) {
error_dialog(widget.options.errormsg,
function() {
console.log("Should retry, TODO");
$(this).dialog("close");
widget._setOption('state', 'Create');
widget.element.click();
},
function() {
$(this).dialog("close");
});
}
});
this._update();
},
_setOption: function(key, value) {
this.options[key] = value;
if(key === 'state') {
if(this.options.state !== 'Download') {
this.options.filename = null;
}
}
this._update();
},
_update: function() {
this.element.removeClass('pure-button-disabled rec-run rec-create ' +
'rec-encoding rec-download rec-failed rec-stop');
switch(this.options.state) {
case 'Stop':
this.element.addClass("rec-stop rec-run").html(
$('<i/>').addClass('fa fa-stop')).append(' Stop');
break;
case 'Create':
this.element.addClass('rec-create rec-run').html(
$('<i/>').addClass('fa fa-gear')).append(' Create');
break;
case 'Failed':
this.element.addClass("rec-failed").html(
$('<i/>').addClass('fa fa-warning')).append(' Errori');
break;
case 'Wait':
this.element.addClass("pure-button-disabled rec-encoding") .html(
$('<i/>').addClass('fa fa-clock-o')).append(' Wait');
break;
case 'Download':
this.element
.addClass("rec-download")
.prop('href', this.options.filename)
.html(
$('<i/>').addClass('fa fa-download').css('color', 'green'))
.append(' Scarica');
break;
}
}
});
function error_dialog(msg, retry, cancel) {
$('<div/>').html($('<pre/>').text(msg))
.dialog({modal: true, title: "Dettaglio errori",
buttons: {
Retry: retry,
Cancel: cancel
}
});
}
/* vim: set ts=2 sw=2 noet fdm=indent: */