370a10c512
This patch builds on a patch by Mark Tompsett, adding the option to take a patron's picture using the computer's webcam. The photo can then be saved to the patron's account. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Go to Administration -> System preferences and enable the 'patronimages' preference. - View a patron record. In the sidebar, hover your mouse over the blank patron image. Click the "Edit" button which appears. - A modal window should appear with two sections, "Upload patron photo" and "Take patron photo." - If your computer has a webcam, your browser should ask permission to access it. Grant access. - You should see the view of your webcam shown under the "Take photo" button. - Click the "Take photo" button. The captured photo should be shown in place of the live video from the webcam. - You should now see three buttons: "Retake photo," "Download photo," and "Upload photo." - Clicking "Retake photo" should hide those buttons and return you to a live video view. - Clicking "Download" should make your browser download the image. - Clicking "Upload" should cause the page to redirect back to the patron detail page where you should see the new patron image displayed in the sidebar. - Trigger the modal again and click the "cancel" button. The modal should disappear and camera access should stop. - If your computer has no webcam the modal should appear correctly but there should be a banner at the bottom indicating that a camera is not available. - Try the test again but this time deny your browser access to the webcam. You may need to reset the camera permissions in your browser's settings. When the modal appears you should see a message saying access to the camera is denied. - The patron image edit modal should be available on all pages which show the patron image in the sidebar: Check out, Batch check out, Details, Accounting, Routing lists, Circulation history, Holds history, Modification log, Notices, Statistics, Files, Purchase suggestions, Discharges, Housebound, and ILL requests history. - Test adding an image to a patron record using the "Upload photo" option. It should still work correctly. - If the patron has an image attached, the "Upload photo" section should have a "Delete" button. Test that it works correctly. Signed-off-by: Nicolas Legrand <nicolas.legrand@bulac.fr> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
83 lines
5.1 KiB
Text
83 lines
5.1 KiB
Text
[% USE Koha %]
|
|
|
|
[% IF ( Koha.Preference('patronimages') ) %]
|
|
[% IF ( CAN_user_tools_batch_upload_patron_images ) %]
|
|
<div id="upload-patron-image" class="patroninfo-section">
|
|
<h5>Upload patron photo</h5>
|
|
<form method="post" id="picture-upload" action="/cgi-bin/koha/tools/picture-upload.pl"
|
|
enctype="multipart/form-data">
|
|
[% IF ( patron.image ) %]
|
|
<div class="hint">
|
|
To update the image for [% patron.title | html %] [% patron.firstname | html %] [% patron.surname | html %], select a new image file and click 'Upload.' <br />Click the 'Delete' button to
|
|
remove the current image.
|
|
</div>
|
|
[% ELSE %]
|
|
<div class="hint">
|
|
[% patron.title | html %] [% patron.firstname | html %] [% patron.surname | html %] does not currently have an image available. To import an image for [% patron.title | html %] [% patron.firstname | html %] [% patron.surname | html %], enter the name of an image file to upload.
|
|
</div>
|
|
[% END %]
|
|
<p>Only PNG, GIF, JPEG, XPM formats are supported.</p>
|
|
<label for="uploadfile">Select the file to upload: </label>
|
|
<input type="file" id="uploadfile" name="uploadfile" required="required" />
|
|
<div class="action">
|
|
<input type="hidden" id="csrf_token" name="csrf_token" value="[% csrf_token | html %]" />
|
|
<input type="hidden" id="image" name="filetype" value="image" />
|
|
<input type="hidden" id="cardnumber" name="cardnumber" value="[% patron.cardnumber | html %]" />
|
|
<input type="hidden" id="borrowernumber" name="borrowernumber" value="[% patron.borrowernumber | html %]" />
|
|
<button type="submit" class="btn btn-default btn-xs"><i class="fa fa-upload"></i> Upload photo</button>
|
|
<input name="op" type="hidden" value="Upload" />
|
|
[% IF ( patron.image ) %]
|
|
<a id="delpicture"
|
|
href="/cgi-bin/koha/tools/picture-upload.pl?op=Delete&borrowernumber=[% patron.borrowernumber | html %]&csrf_token=[% csrf_token | html %]"
|
|
class="btn btn-default btn-xs delete"><i class="fa fa-trash"></i> Delete</a>
|
|
[% END %]
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="capture-patron-image" class="patroninfo-section">
|
|
<h5>Take patron photo</h5>
|
|
<form method="post" id="camera-upload" action="/cgi-bin/koha/tools/picture-upload.pl">
|
|
<div class="btn-toolbar">
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" id="takebutton"><i class="fa fa-camera"></i> Take photo</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" id="retakebutton" style="display:none;"><i class="fa fa-refresh"></i> Retake photo</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a id="downloadbutton" href="#" class="btn btn-default" style="display:none;"><i class="fa fa-download"></i> Download photo</a>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button id="savebutton" type="submit" class="btn btn-default" style="display:none;"><i class="fa fa-hdd-o"></i> Upload</button>
|
|
</div>
|
|
</div>
|
|
<div id="camera">
|
|
<video id="viewfinder">Video stream not available.</video>
|
|
</div>
|
|
<canvas id="canvas" style="display:none"></canvas>
|
|
<div id="output" style="display:none">
|
|
<img style="width:100%;height:auto;" id="photo" alt="The screen capture will appear in this box.">
|
|
</div>
|
|
<input type="hidden" name="uploadfilename" value="patron-photo.jpg" />
|
|
<textarea id="uploadfiletext" name="uploadfiletext" style="display:none;"></textarea>
|
|
<input type="hidden" name="csrf_token" value="[% csrf_token | html %]" />
|
|
<input type="hidden" name="filetype" value="image" />
|
|
<input type="hidden" name="cardnumber" value="[% patron.cardnumber | html %]" />
|
|
<input type="hidden" name="borrowernumber" value="[% patron.borrowernumber | html %]" />
|
|
<input name="op" type="hidden" value="Upload" />
|
|
</form>
|
|
</div>
|
|
<div class="dialog message" style="display:none" id="camera-error">
|
|
<div>
|
|
<span class="fa-stack fa-lg">
|
|
<i class="fa fa-camera fa-stack-1x"></i>
|
|
<i class="fa fa-ban fa-stack-2x text-danger"></i>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<strong>Cannot take patron photo.</strong>
|
|
<span id="camera-error-message"></span>
|
|
</div>
|
|
</div>
|
|
[% END %]
|
|
[% END %]
|