forked from hswaw/labelmaker
Merge pull request 'Fix webpage scaling on mobile' (#1) from vibe/labelmaker:master into master
Reviewed-on: hswaw/labelmaker#1master
commit
acbdae95a8
|
|
@ -1,142 +1,152 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<title>Hackerspace Printing System For Printing</title>
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<style type="text/css">
|
<title>Hackerspace Printing System For Printing</title>
|
||||||
html {
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||||
position: relative;
|
<style type="text/css">
|
||||||
min-height: 100%;
|
html {
|
||||||
}
|
position: relative;
|
||||||
body {
|
min-height: 100%;
|
||||||
/* Margin bottom by footer height */
|
}
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
body {
|
||||||
.footer {
|
/* Margin bottom by footer height */
|
||||||
position: absolute;
|
margin-bottom: 60px;
|
||||||
bottom: 0;
|
}
|
||||||
width: 100%;
|
|
||||||
/* Set the fixed height of the footer here */
|
.footer {
|
||||||
height: 60px;
|
position: absolute;
|
||||||
background-color: #f5f5f5;
|
bottom: 0;
|
||||||
}
|
width: 100%;
|
||||||
</style>
|
/* Set the fixed height of the footer here */
|
||||||
</head>
|
height: 60px;
|
||||||
<body>
|
background-color: #f5f5f5;
|
||||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
}
|
||||||
<div class="modal-dialog">
|
</style>
|
||||||
<div class="modal-content">
|
</head>
|
||||||
<div class="modal-header">
|
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
<body>
|
||||||
<h4 class="modal-title">Are you sure you want to print this?</h4>
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||||
</div>
|
<div class="modal-dialog">
|
||||||
<div class="modal-body">
|
<div class="modal-content">
|
||||||
<p>These labels cost money. Don't be an asshole, and only print stuff that is really needed.</p>
|
<div class="modal-header">
|
||||||
</div>
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||||||
<div class="modal-footer">
|
aria-hidden="true">×</span></button>
|
||||||
<button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
|
<h4 class="modal-title">Are you sure you want to print this?</h4>
|
||||||
<button type="button" id="btnconfirm" class="btn btn-primary">Yes please</button>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<div class="container">
|
</div>
|
||||||
<div class="page-header">
|
<div class="container">
|
||||||
<h1>Hackerspace Printing System For Printing Labels</h1>
|
<div class="page-header">
|
||||||
<h4>System status: <span class="label label-default" id="systemstatus">unknown</span></h4>
|
<h1>Hackerspace Printing System For Printing Labels</h1>
|
||||||
|
<h4>System status: <span class="label label-default" id="systemstatus">unknown</span></h4>
|
||||||
|
</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" alt="Label preview" /><br />
|
||||||
</div>
|
</div>
|
||||||
<h3>Box 'o Stuff Label <small>For SAMLA boxes with common equipment</small></h3>
|
<div class="col-md-3">
|
||||||
<div class="row">
|
<h4>Settings</h4>
|
||||||
<div class="col-md-2">
|
<div class="form-group">
|
||||||
<h4>Preview</h4>
|
<label for="fontsize">Font Size</label>
|
||||||
<img id="preview" src="/stuff/preview/70/?text=dupa" style="border-width: 1px; border-style: solid; height: 300px;"/><br/>
|
<input id="fontsize" value="60" style="width: 100px;" class="form-control" type="number" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
<div class="form-group">
|
||||||
<h4>Settings</h4>
|
<label for="labeltext">Label Text</label>
|
||||||
<div class="form-group">
|
<textarea id="labeltext" style="width: 200px;" class="form-control">Sample Text</textarea>
|
||||||
<label for="fontsize">Font Size</label>
|
|
||||||
<input id="fontsize" value="60" style="width: 100px;" class="form-control" type="number" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="labeltext">Label Text</label>
|
|
||||||
<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>
|
|
||||||
</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>
|
||||||
<div class="col-md-7">
|
<div class="form-group">
|
||||||
<h4>API</h4>
|
<label for="parsehtml">
|
||||||
<pre>$ # To get a label preview
|
<input id="parsehtml" value="1" type="checkbox" />
|
||||||
|
Parse HTML
|
||||||
|
</label>
|
||||||
|
</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
|
||||||
$ curl http://label.waw.hackerspace.pl/stuff/preview/60/?text=foobar&html=0 | feh -
|
$ curl http://label.waw.hackerspace.pl/stuff/preview/60/?text=foobar&html=0 | feh -
|
||||||
$ # To print the label
|
$ # To print the label
|
||||||
$ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar&html=0</pre>
|
$ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar&html=0</pre>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer class="footer">
|
</div>
|
||||||
<div class="container">
|
<footer class="footer">
|
||||||
<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>
|
<div class="container">
|
||||||
</div>
|
<p class="text-muted" style="margin: 20px 0;">Cobbled together by <a href="https://q3k.org/">q3k</a>. Sauce
|
||||||
</footer>
|
on <a href="https://code.hackerspace.pl/q3k/labelmaker">code.hackerspace.pl/q3k/labelmaker</a></p>
|
||||||
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
</div>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
</footer>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||||
<script>
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||||
$(document).ready(function() {
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
|
||||||
var generatePreview = function() {
|
<script>
|
||||||
var html = $("#parsehtml").is(':checked') ? 1 : 0;
|
$(document).ready(function () {
|
||||||
var fontsize = parseInt($("#fontsize").val());
|
var generatePreview = function () {
|
||||||
var text = encodeURIComponent($("#labeltext").val());
|
var html = $("#parsehtml").is(':checked') ? 1 : 0;
|
||||||
$("#preview").attr("src", "/stuff/preview/" + fontsize + "/?html=" + html + "&text=" + text);
|
var fontsize = parseInt($("#fontsize").val());
|
||||||
};
|
var text = encodeURIComponent($("#labeltext").val());
|
||||||
$("#btnpreview").click(generatePreview);
|
$("#preview").attr("src", "/stuff/preview/" + fontsize + "/?html=" + html + "&text=" + text);
|
||||||
var asked = false;
|
};
|
||||||
var print = function() {
|
$("#btnpreview").click(generatePreview);
|
||||||
var html = $("#parsehtml").is(':checked') ? 1 : 0;
|
var asked = false;
|
||||||
var fontsize = parseInt($("#fontsize").val());
|
var print = function () {
|
||||||
var text = encodeURIComponent($("#labeltext").val());
|
var html = $("#parsehtml").is(':checked') ? 1 : 0;
|
||||||
$.post("/stuff/print/" + fontsize + "/?html=" + html + "&text=" + text, function(data) {
|
var fontsize = parseInt($("#fontsize").val());
|
||||||
if (data == "ok") {
|
var text = encodeURIComponent($("#labeltext").val());
|
||||||
$.bootstrapGrowl('Printed succesfully!', {'type': 'success'});
|
$.post("/stuff/print/" + fontsize + "/?html=" + html + "&text=" + text, function (data) {
|
||||||
} else {
|
if (data == "ok") {
|
||||||
$.bootstrapGrowl('An error ocurred: ' + data, {'type': 'warning'});
|
$.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();
|
||||||
|
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);
|
||||||
});
|
});
|
||||||
};
|
</script>
|
||||||
$("#btnprint").click(function() {
|
</body>
|
||||||
if (!asked) {
|
|
||||||
$("#myModal").modal('show');
|
</html>
|
||||||
} else {
|
|
||||||
print();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$("#btnconfirm").click(function() {
|
|
||||||
asked = true;
|
|
||||||
$("#myModal").modal('hide');
|
|
||||||
print();
|
|
||||||
});
|
|
||||||
generatePreview();
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue