hswaw
/
labelmaker
6
0
Fork 5
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Add viewport meta tag for better mobile viewing

pull/1/head
vibe 2023-11-03 22:03:57 +01:00 committed by vibe
parent d37cfbb222
commit 23ed2468e6
1 changed files with 139 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
templates/index.html
View File

@ -1,34 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hackerspace Printing System For Printing</title> <title>Hackerspace Printing System For Printing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css"> <style type="text/css">
html { html {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
body {
body {
/* Margin bottom by footer height */ /* Margin bottom by footer height */
margin-bottom: 60px; margin-bottom: 60px;
} }
.footer {
.footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
/* Set the fixed height of the footer here */ /* Set the fixed height of the footer here */
height: 60px; height: 60px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
</style> </style>
</head> </head>
<body>
<body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Are you sure you want to print this?</h4> <h4 class="modal-title">Are you sure you want to print this?</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -50,7 +56,8 @@ body {
<div class="row"> <div class="row">
<div class="col-md-2"> <div class="col-md-2">
<h4>Preview</h4> <h4>Preview</h4>
<img id="preview" src="/stuff/preview/70/?text=dupa" style="border-width: 1px; border-style: solid; height: 300px;"/><br/> <img id="preview" src="/stuff/preview/70/?text=dupa"
style="border-width: 1px; border-style: solid; height: 300px;" /><br />
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<h4>Settings</h4> <h4>Settings</h4>
@ -68,8 +75,10 @@ body {
Parse HTML Parse HTML
</label> </label>
</div> </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="btnpreview" class="btn btn-default btn-lg"><span
<button type="button" id="btnprint" class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print!</button> 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="col-md-7">
<h4>API</h4> <h4>API</h4>
@ -82,15 +91,16 @@ $ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar&amp;htm
</div> </div>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<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> <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> </div>
</footer> </footer>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <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://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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
<script> <script>
$(document).ready(function() { $(document).ready(function () {
var generatePreview = function() { var generatePreview = function () {
var html = $("#parsehtml").is(':checked') ? 1 : 0; var html = $("#parsehtml").is(':checked') ? 1 : 0;
var fontsize = parseInt($("#fontsize").val()); var fontsize = parseInt($("#fontsize").val());
var text = encodeURIComponent($("#labeltext").val()); var text = encodeURIComponent($("#labeltext").val());
@ -98,33 +108,33 @@ $(document).ready(function() {
}; };
$("#btnpreview").click(generatePreview); $("#btnpreview").click(generatePreview);
var asked = false; var asked = false;
var print = function() { var print = function () {
var html = $("#parsehtml").is(':checked') ? 1 : 0; var html = $("#parsehtml").is(':checked') ? 1 : 0;
var fontsize = parseInt($("#fontsize").val()); var fontsize = parseInt($("#fontsize").val());
var text = encodeURIComponent($("#labeltext").val()); var text = encodeURIComponent($("#labeltext").val());
$.post("/stuff/print/" + fontsize + "/?html=" + html + "&text=" + text, function(data) { $.post("/stuff/print/" + fontsize + "/?html=" + html + "&text=" + text, function (data) {
if (data == "ok") { if (data == "ok") {
$.bootstrapGrowl('Printed succesfully!', {'type': 'success'}); $.bootstrapGrowl('Printed succesfully!', { 'type': 'success' });
} else { } else {
$.bootstrapGrowl('An error ocurred: ' + data, {'type': 'warning'}); $.bootstrapGrowl('An error ocurred: ' + data, { 'type': 'warning' });
} }
}); });
}; };
$("#btnprint").click(function() { $("#btnprint").click(function () {
if (!asked) { if (!asked) {
$("#myModal").modal('show'); $("#myModal").modal('show');
} else { } else {
print(); print();
} }
}); });
$("#btnconfirm").click(function() { $("#btnconfirm").click(function () {
asked = true; asked = true;
$("#myModal").modal('hide'); $("#myModal").modal('hide');
print(); print();
}); });
generatePreview(); generatePreview();
var updateStatus = function() { var updateStatus = function () {
$.getJSON("/health", function(data) { $.getJSON("/health", function (data) {
if (data.ok) { if (data.ok) {
$("#systemstatus").attr("class", "label label-success"); $("#systemstatus").attr("class", "label label-success");
$("#systemstatus").html(data.details); $("#systemstatus").html(data.details);
@ -136,7 +146,8 @@ $(document).ready(function() {
}; };
updateStatus(); updateStatus();
setInterval(updateStatus, 1000); setInterval(updateStatus, 1000);
}); });
</script> </script>
</body> </body>
</html> </html>