2015-08-29 22:46:51 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Hackerspace Printing System For Printing< / title >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
2015-08-29 23:25:49 +00:00
< style type = "text/css" >
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
< / style >
2015-08-29 22:46:51 +00:00
< / head >
< body >
< div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< h4 class = "modal-title" > Are you sure you want to print this?< / h4 >
< / div >
< div class = "modal-body" >
< p > These labels cost money. Don't be an asshole, and only print stuff that is really needed.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-default" data-dismiss = "modal" > Nevermind< / button >
< button type = "button" id = "btnconfirm" class = "btn btn-primary" > Yes please< / button >
< / div >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "page-header" >
< h1 > Hackerspace Printing System For Printing Labels< / h1 >
2015-08-29 23:46:34 +00:00
< h4 > System status: < span class = "label label-default" id = "systemstatus" > unknown< / span > < / h4 >
2015-08-29 22:46:51 +00:00
< / div >
< h3 > Box 'o Stuff Label < small > For SAMLA boxes with common equipment< / small > < / h3 >
< div class = "row" >
< div class = "col-md-2" >
< h4 > Preview< / h4 >
< img id = "preview" src = "/stuff/preview/70/?text=dupa" style = "border-width: 1px; border-style: solid; height: 300px;" / > < br / >
< / div >
< div class = "col-md-3" >
< h4 > Settings< / h4 >
< div class = "form-group" >
< label for = "fontsize" > Font Size< / label >
2016-10-14 00:16:37 +00:00
< input id = "fontsize" value = "60" style = "width: 100px;" class = "form-control" type = "number" / >
2015-08-29 22:46:51 +00:00
< / div >
< div class = "form-group" >
< label for = "labeltext" > Label Text< / label >
2016-10-14 00:16:37 +00:00
< textarea id = "labeltext" style = "width: 200px;" class = "form-control" > Sample Text< / textarea >
< / div >
< div class = "form-group" >
< label for = "parsehtml" >
< input id = "parsehtml" value = "1" type = "checkbox" / >
Parse HTML
< / label >
2015-08-29 22:46:51 +00:00
< / div >
< button type = "button" id = "btnpreview" class = "btn btn-default btn-lg" > < span class = "glyphicon glyphicon-picture" aria-hidden = "true" > < / span > Preview< / button >
< button type = "button" id = "btnprint" class = "btn btn-warning btn-lg" > < span class = "glyphicon glyphicon-print" aria-hidden = "true" > < / span > Print!< / button >
< / div >
< div class = "col-md-7" >
< h4 > API< / h4 >
< pre > $ # To get a label preview
2016-10-14 00:16:37 +00:00
$ curl http://label.waw.hackerspace.pl/stuff/preview/60/?text=foobar& html=0 | feh -
2015-08-29 22:46:51 +00:00
$ # To print the label
2016-10-14 00:16:37 +00:00
$ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar& html=0< / pre >
2015-08-29 22:46:51 +00:00
< / div >
< / div >
< / div >
2015-08-29 23:25:49 +00:00
< footer class = "footer" >
< div class = "container" >
2015-08-29 23:56:04 +00:00
< p class = "text-muted" style = "margin: 20px 0;" > Cobbled together by < a href = "https://q3k.org/" > q3k< / a > . Sauce on < a href = "https://code.hackerspace.pl/q3k/labelmaker" > code.hackerspace.pl/q3k/labelmaker< / a > < / p >
2015-08-29 23:25:49 +00:00
< / div >
< / footer >
2015-08-29 22:46:51 +00:00
< script src = "https://code.jquery.com/jquery-2.1.4.min.js" > < / script >
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js" > < / script >
< script >
$(document).ready(function() {
var generatePreview = function() {
2016-10-14 00:16:37 +00:00
var html = $("#parsehtml").is(':checked') ? 1 : 0;
2015-08-29 22:46:51 +00:00
var fontsize = parseInt($("#fontsize").val());
var text = encodeURIComponent($("#labeltext").val());
2016-10-14 00:16:37 +00:00
$("#preview").attr("src", "/stuff/preview/" + fontsize + "/?html=" + html + "& text=" + text);
2015-08-29 22:46:51 +00:00
};
$("#btnpreview").click(generatePreview);
var asked = false;
var print = function() {
2016-10-14 00:16:37 +00:00
var html = $("#parsehtml").is(':checked') ? 1 : 0;
2015-08-29 22:46:51 +00:00
var fontsize = parseInt($("#fontsize").val());
var text = encodeURIComponent($("#labeltext").val());
2016-10-14 00:16:37 +00:00
$.post("/stuff/print/" + fontsize + "/?html=" + html + "& text=" + text, function(data) {
2015-08-29 22:46:51 +00:00
if (data == "ok") {
$.bootstrapGrowl('Printed succesfully!', {'type': 'success'});
} else {
$.bootstrapGrowl('An error ocurred: ' + data, {'type': 'warning'});
}
});
};
$("#btnprint").click(function() {
if (!asked) {
$("#myModal").modal('show');
} else {
print();
}
});
$("#btnconfirm").click(function() {
asked = true;
$("#myModal").modal('hide');
print();
});
generatePreview();
2015-08-29 23:46:34 +00:00
var updateStatus = function() {
$.getJSON("/health", function(data) {
if (data.ok) {
$("#systemstatus").attr("class", "label label-success");
$("#systemstatus").html(data.details);
} else {
$("#systemstatus").attr("class", "label label-danger");
$("#systemstatus").html(data.details);
}
});
};
updateStatus();
setInterval(updateStatus, 1000);
2015-08-29 22:46:51 +00:00
});
< / script >
< / body >
< / html >