Add qr scan to checkin
This commit is contained in:
		
							parent
							
								
									adcfa45967
								
							
						
					
					
						commit
						c09b926b87
					
				
					 4 changed files with 108 additions and 15 deletions
				
			
		
							
								
								
									
										24
									
								
								pinaxcon/templates/test.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								pinaxcon/templates/test.html
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,24 @@ | |||
| {% load static %} | ||||
| <!DOCTYPE html5> | ||||
| <meta charset="utf-8"/> | ||||
| <head> | ||||
|     <script type="text/javascript" src="{% static 'js/instascan.min.js' %}"></script> | ||||
| </head> | ||||
| 
 | ||||
| <body> | ||||
|     <video id="preview" autoplay style="width: 500px; height: 500px; border: 1px solid green;"></video> | ||||
|     <script type="text/javascript"> | ||||
|         let scanner = new Instascan.Scanner({ video: document.getElementById('preview') }); | ||||
|         scanner.addListener('scan', function (content) { | ||||
|           // This should ensure we start with the lca base domain! | ||||
|           window.location.href = content; | ||||
|         }); | ||||
| 
 | ||||
|         function startCamera(cameras) { scanner.start(cameras[0]); } | ||||
|         function errorCamera(error) { console.error(e); } | ||||
| 
 | ||||
|         Instascan.Camera.getCameras().then(startCamera).catch(errorCamera); | ||||
|     </script> | ||||
| </body> | ||||
| 
 | ||||
| 
 | ||||
							
								
								
									
										48
									
								
								static/src/js/instascan.min.js
									
										
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										48
									
								
								static/src/js/instascan.min.js
									
										
									
									
										vendored
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							|  | @ -3,21 +3,14 @@ | |||
| 
 | ||||
| {% load i18n %} | ||||
| 
 | ||||
| {% block body_class %}reviews{% endblock %} | ||||
| {% block head_title %}Checkin{% endblock head_title %} | ||||
| {% block extra_head %}<script type="text/javascript" src="{% static 'js/instascan.min.js' %}"></script>{% endblock %} | ||||
| {% block body_class %}text-primary{% endblock body_class %} | ||||
| {% block main_class %}container{% endblock main_class %} | ||||
| 
 | ||||
| {% block body_outer %} | ||||
| <div class="l-content-page"> | ||||
| <div class="l-content-page--richtext"> | ||||
| <div class="rich-text"> | ||||
| 
 | ||||
|   <div class="row"> | ||||
|     <div class="col-md-10"> | ||||
|       {% block body %} | ||||
|       {% endblock %} | ||||
|     </div> | ||||
|   </div> | ||||
| </div></div></div> | ||||
| {% block content %} | ||||
| {% endblock %} | ||||
| 
 | ||||
| {% block extra_script %} | ||||
| <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.css"/> | ||||
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> | ||||
|  |  | |||
|  | @ -6,8 +6,15 @@ | |||
| {% endblock %} | ||||
| 
 | ||||
| 
 | ||||
| {% block body %} | ||||
|     <div> | ||||
| {% block content %} | ||||
| 
 | ||||
| <div class="my-5 col-12"> | ||||
|     <h2>Check-in</h2> | ||||
|     <p>Please scan QR Code or enter it below</p> | ||||
|         <video id="preview"" autoplay style="width: 500px; height: 500px; border: 1px solid green;"></video> | ||||
|     </div> | ||||
| 
 | ||||
|     <div class="my-5 col-12"> | ||||
|         <div id="code_div" class="form-group has-feedback has-error"> | ||||
|             <label class="control-label" for="bpcode">Boarding Pass Code</label> | ||||
|             <input id="bptext" type="text" class="form-control" id="bpcode" placeholder="Code"> | ||||
|  | @ -19,6 +26,27 @@ | |||
|         <button id="clear" class="btn btn-danger">Clear</button> | ||||
|         <a type=button" class="btn btn-info pull-right" href="{% url 'regidesk:boarding_overview' %}">Overview</a> | ||||
|     </div> | ||||
| 
 | ||||
| 
 | ||||
|     <script type="text/javascript"> | ||||
|         let scanner = new Instascan.Scanner({ video: document.getElementById('preview') }); | ||||
|         scanner.addListener('scan', function (content) { | ||||
|           // This should ensure we start with the lca base domain. However, I don't have the time for this | ||||
|           // considering we have quite a few domains right now. | ||||
|           // We simply validate that the domain ends in an OK format, which isn't ideal but should give us | ||||
|           // enough reassurance for the time being. 2020 Can fix this :P | ||||
|           var checkin_re = new RegExp('\/checkin\/[A-Z0-9]{6}\.png$'); | ||||
|           if (checkin_re.test(content)) { | ||||
|               window.location.href = content; | ||||
|           } | ||||
|         }); | ||||
| 
 | ||||
|         function startCamera(cameras) { scanner.start(cameras[0]); } | ||||
|         function errorCamera(error) { console.error(e); } | ||||
| 
 | ||||
|         Instascan.Camera.getCameras().then(startCamera).catch(errorCamera); | ||||
|     </script> | ||||
| 
 | ||||
|     <script type="text/javascript"> | ||||
|         var code_div = document.getElementById("code_div"); | ||||
|         var icon = document.getElementById("input_icon"); | ||||
|  |  | |||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 Tobias
						Tobias