WordPress · evrpress · Jun 5, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025
diff --git a/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui-sounds.js b/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui-sounds.js
diff --git a/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui.css b/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui.css
@@ -274,6 +274,32 @@ li.item .spinner:after {
     font-size: 16px;
     padding-left: 2px;
     padding-right: 16px; }
+#attendees-list-wrapper .qr-scanner {
+	display: none;
+	z-index: 400;
+	position: absolute;
+	bottom: 1em;
+	right: 1em;
+	height: auto;
+	width: 90vw;
+	width: calc(100% - 2em);
+	max-width: 480px;
+}
+#qr-reader {
+	min-height: 200px;
+}
+#qr-reader__dashboard_section {
+	_display: none;
+	position: absolute;
+	background: #fff;
+	bottom: 0;
+}
+.qr-scanner:hover #qr-reader__dashboard_section {
+	display: block;
+}
+.qr-scanner-active #attendees-list-wrapper .qr-scanner {
+	display: block;
+}
 
 .attendee-toggle-wrap {
   margin: 0;

diff --git a/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui.js b/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui.js
@@ -395,12 +395,13 @@ jQuery(document).ready(function($){
 		 * Main Application events/controls.
 		 */
 		events: {
-			'fastClick .dashicons-menu': 'menu',
-			'fastClick .submenu .search': 'searchView',
-			'fastClick header h1': 'searchView',
-			'fastClick .submenu .sort': 'sortView',
-			'fastClick .submenu .refresh': 'refresh',
-			'fastClick .submenu .filter': 'filterView'
+			'click .dashicons-menu': 'menu',
+			'click .submenu .search': 'searchView',
+			'click header h1': 'searchView',
+			'click .submenu .sort': 'sortView',
+			'click .submenu .refresh': 'refresh',
+			'click .submenu .qr': 'qr',
+			'click .submenu .filter': 'filterView',			
 		},
 
 		/**
@@ -421,8 +422,8 @@ jQuery(document).ready(function($){
 
 			this.render();
 
-			this.$header = this.$el.find( 'header' );
-			this.$menu = this.$header.find( '.menu' );
+			this.$header = this.$el.find('header');
+			this.$menu = this.$header.find('.menu');
 
 			this.scroll = _.chain( this.scroll ).bind( this ).value();
 			this.$list = this.$el.find( '.attendees-list' );
@@ -435,6 +436,14 @@ jQuery(document).ready(function($){
 			this.on( 'filter', this.filter, this );
 
 			this.setupCollection();
+
+			if (
+				_camptixAttendanceQRScanning !== undefined &&
+				_camptixAttendanceQRScanning
+			) {
+				this.qr();
+			}
+
 		},
 
 		/**
@@ -574,6 +583,99 @@ jQuery(document).ready(function($){
 			return false;
 		},
 
+		qr: function () {
+			this.$el.toggleClass('qr-scanner-active');
+			this.$menu.removeClass('dropdown');
+
+			let that = this;
+
+			let html5QrcodeScanner;
+			let lastScan;
+			let toggleView;
+			let lastScanTimeout;
+
+			function onScanSuccess(decodedText) {
+				if (lastScan === decodedText) {
+					return;
+				}
+
+				lastScan = decodedText;
+				lastScanTimeout && clearTimeout(lastScanTimeout);
+
+				if (toggleView) toggleView.close();
+				let method = 'read';
+				let model = that.collection;
+				let options = {
+					data: { qrcode: decodedText },
+				};
+				let attendeeModel;
+
+				that.collection
+					.sync(method, model, options)
+					.done(
+						function (res) {
+							// not sure why this is an array
+							attendeeModel = new camptix.models.Attendee(res[0]);
+							toggleView = new camptix.views.AttendeeToggleView({
+								model: attendeeModel,
+								controller: that,
+							});
+							$(document.body).append(toggleView.render().el);
+						}.bind(that)
+					)
+					.fail(function (res) {
+						console.error(res);
+						// play the sound to indicate that the scan is bad
+						window._camptixAttendanceSounds.blm();
+
+						// let the sound play before showing the alert
+						setTimeout(function () {
+							if (typeof res === 'string') {
+								alert(res);
+							} else {
+								alert('[' + res.status + '] ' + res.statusText);
+							}
+							lastScan = null;
+							html5QrcodeScanner.resume();
+						}, 100);
+
+					})
+					.then(() => {
+						// play the sound to indicate that the scan is good
+						window._camptixAttendanceSounds.beep();
+						setTimeout(() => {
+							html5QrcodeScanner.resume();							
+							//lastScan = null;
+							//that.refresh();
+						}, 3000);
+					})
+					.always(() => {
+						lastScanTimeout = setTimeout(() => {
+							// clear last scan to allow for new scan
+							lastScan = null;
+							// play the sound to indicate that the scan is over
+							//window._camptixAttendanceSounds.bob();
+						}, 15000);
+					});
+
+				html5QrcodeScanner.pause();
+			}
+
+			let qrReader = document.getElementById('qr-scanner').getBoundingClientRect();
+
+			let smallerSide = Math.min(qrReader.width, qrReader.height);
+
+			let qrbox = {
+				width: Math.max(smallerSide * 0.9, 50),
+				height: Math.max(smallerSide * 0.9, 50),
+			};
+
+			html5QrcodeScanner = new Html5QrcodeScanner('qr-scanner', { fps: 10, qrbox: qrbox }, false);
+			html5QrcodeScanner.render(onScanSuccess);
+
+			return false;
+		},
+
 		/**
 		 * Re-initialize a calloction with a search term.
 		 */

diff --git a/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui.scss b/public_html/wp-content/plugins/camptix-attendance/addons/assets/attendance-ui.scss
@@ -30,7 +30,7 @@ header {
 	color: white;
 	padding-left: 16px;
 
-	z-index: 100;
+	z-index: 300;
 }
 
 header h1,
@@ -221,6 +221,20 @@ li.item {
 	display: block;
 	margin-right: 50px;
 	margin-left: 50px;
+
+	.previews {
+		position: fixed;
+		bottom: 1em;
+		left: 1em;
+		right: 1em;
+
+		video {
+			max-height: 8em;
+			max-width: 8em;
+			width: 8em;
+			float: right;
+		}
+	}
 }
 
 .attendee-search-view input {
@@ -412,6 +426,72 @@ li.item {
 	}
 }
 
+.qr-scanner-wrap {
+	display: none;
+	z-index: 299;
+	position: absolute;
+	bottom: 1em;
+	right: 1em;
+	width: calc(100% - 2em);
+	aspect-ratio: 4/3;
+	max-width: 480px;
+	background: #ccc;
+
+	#qr-scanner {
+		height: 100%;
+	}
+	#qr-scanner__scan_region{		
+		display: flex;
+		align-self: center;
+		justify-content: center;
+		position: absolute;
+		inset: 0;
+	}
+	#qr-scanner__dashboard {
+		display: none;
+		position: absolute;
+		background: #fff;
+		bottom: 0;
+
+		button{
+			height: 50px;
+			display: block;
+			width: calc(100% - 2em);
+			margin:1em;
+			line-height: 50px;
+			font-size: 16px;
+			background: #333;
+			color: white;
+			text-decoration: none;
+			-webkit-appearance: none;
+			cursor: pointer;
+		}
+		#html5-qrcode-anchor-scan-type-change{
+			display: none !important;
+		}
+	}
+	&:hover #qr-scanner__dashboard {
+		display: block;
+	}
+
+}
+@media screen and (max-width: 480px) {
+	.qr-scanner-wrap {
+		position: fixed;
+		inset:60px 1em 1em;
+		width: calc(100% - 2em);
+		height: calc(100% - 2em - 60px);
+		margin: 0;
+		#qr-scanner__dashboard {
+			display: block;
+		}
+	}
+}
+
+.qr-scanner-active .qr-scanner-wrap {
+	display: block;
+}
+
 /** Animations, courtesy of https://github.com/lukehaas/css-loaders **/
 
 @-webkit-keyframes load1 {

diff --git a/public_html/wp-content/plugins/camptix-attendance/addons/assets/html5-qrcode.min.js b/public_html/wp-content/plugins/camptix-attendance/addons/assets/html5-qrcode.min.js
diff --git a/public_html/wp-content/plugins/camptix-attendance/addons/attendance-ui.php b/public_html/wp-content/plugins/camptix-attendance/addons/attendance-ui.php
@@ -24,6 +24,7 @@
 	<script>
 		_camptixAttendanceSecret = '<?php echo esc_js( $_GET['camptix-attendance'] ); ?>';
 		_camptixAttendanceTickets = [ <?php echo esc_js( implode( ', ', array_map( 'absint', wp_list_pluck( $camptix_tickets, 'ID' ) ) ) ); ?> ];
+		_camptixAttendanceQRScanning = <?php echo ! empty( $camptix_options['attendance-qr-enabled'] ) ? 'true' : 'false'; ?>;
 	</script>
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
@@ -76,6 +77,7 @@
 					<a href="#" class="search">Search</a>
 					<a href="#" class="filter">Sort & Filter</a>
 					<a href="#" class="refresh">Refresh</a>
+					<a href="#" class="qr">QR Scanner</a>
 				</div>
 			</div>
 			<h1><?php echo esc_html( $camptix_options['event_name'] ); ?></h1>
@@ -88,13 +90,15 @@
 					<span>Loading...</span>
 				</li>
 			</ul>
+			<div class="qr-scanner-wrap"><div id="qr-scanner"></div></div>
 		</div>
 	</script>
 
 	<script id="tmpl-attendee-search" type="text/template">
 		<a href="#" class="close dashicons dashicons-no"></a>
 		<div class="wrapper">
 			<input type="text" autocomplete="off" placeholder="Search" />
+			<div class="previews"></div>
 		</div>
 	</script>