github-mirror/grocy
1
0
Fork 0
mirror of https://github.com/grocy/grocy.git synced 2026-04-07 05:16:15 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resolves #740 Add print options onto Shopping List page

Browse Source
This commit is contained in:
Louis Sandoval 2020-06-12 07:08:14 -07:00
parent 67a3041d07
commit 948540ba01
2 changed files with 71 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/viewjs/shoppinglist.js
View File

@ -343,12 +343,6 @@ function OnListItemRemoved()
}
OnListItemRemoved();
$(document).on("click", "#print-shopping-list-button", function(e)
{
$(".print-timestamp").text(moment().format("l LT"));
$("#description-for-print").html($("#description").val());
window.print();
});
$("#description").on("summernote.change", function()
{
@ -424,3 +418,44 @@ if ($(window).width() < 768 & window.location.hash !== "#compact" && !BoolVal(Gr
{
$("#shopping-list-compact-view-button").click();
}
/**
* Printing
* =========
*/
const defaultPrintTextSize = 16;
let currentPrintTextSize = defaultPrintTextSize;
const showPrintHeaders = true;
// cached selectors
const textSizeSandbox = document.getElementById("print-text-size-sandbox");
const textSizeDisplay = document.getElementById("print-text-size-display");
const printBlock = document.querySelector(".d-print-block table");
// show print modal button
document.getElementById("print-shopping-list-button").addEventListener("click", function (e) {
changePrintTextSize(currentPrintTextSize); // remember for current session
$("#print-options-modal").modal("show");
});
// range slider
document.getElementById("print-text-size").addEventListener("change", function ({target}) {
currentPrintTextSize = target.value;
changePrintTextSize(currentPrintTextSize);
});
// print button
document.getElementById("print-button").addEventListener("click", function (e) {
printBlock.querySelector('thead').style.visibility = document.getElementById("show-print-headers").checked ? "visible" : "hidden";
document.getElementById("print-timestamp").innerText = moment().format("l LT");
// value from wysiwyg is stored in jQuery, so we have to pull it out using jQuery
document.getElementById("description-for-print").innerHTML = $("#description").val();
window.print();
});
function changePrintTextSize(textSize) {
textSizeSandbox.style.fontSize = `${textSize}pt`; // init text size before opening modal
textSizeDisplay.innerText = textSize;
// shopping list text
printBlock.style.fontSize = `${textSize}pt`;
};

31
views/shoppinglist.blade.php
View File

@ -202,6 +202,35 @@
</div>
</div>
{{-- Printing Options Modal --}}
<div class="modal fade d-print-none" id="print-options-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content text-center">
<div class="modal-body">
<form>
<div class="form-group">
<label for="print-text-size" id="print-text-size-sandbox">
<!-- would normally implement using the Vue interpolation syntax, but it messes with PHP interpreter -->
<span>{{ $__t('Print Text Size') }}</span>
<span id="print-text-size-display"></span>
<span>pt</span>
</label>
<input type="range" id="print-text-size" min="6" max="26" class="form-control-range">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="show-print-headers" />
<label class="form-check-label" for="show-print-headers">{{ $__t('Show Print Headers') }}</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="print-button" type="button" class="btn btn-primary"><i class="fas fa-print"></i> {{ $__t('Print') }}</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ $__t('Close') }}</button>
</div>
</div>
</div>
</div>
<div class="d-none d-print-block">
<h1 class="text-center">
<img src="{{ $U('/img/grocy_logo.svg?v=', true) }}{{ $version }}" height="30" class="d-print-flex mx-auto">
@ -214,7 +243,7 @@
@endif
<h6 class="text-center mb-4">
{{ $__t('Time of printing') }}:
<span class="d-inline print-timestamp"></span>
<span id="print-timestamp" class="d-inline"></span>
</h6>
<div class="row w-75">
<div class="col">