Add deletion of events on the Events page.

hCaptcha · Feb 1, 2025 · 24583a3 · 24583a3
1 parent 2ed0fed
commit 24583a3
Show file tree

Hide file tree

Showing 10 changed files with 570 additions and 550 deletions.
diff --git a/assets/css/settings-base.css b/assets/css/settings-base.css
@@ -53,7 +53,7 @@ body.settings_page_hcaptcha {
 .hcaptcha-header-bar {
 	position: sticky;
 	top: 60px;
-	z-index: 1;
+	z-index: 2;
 	background: #f0f2f5;
 	display: flex;
 	justify-content: space-between;

diff --git a/assets/js/events.js b/assets/js/events.js
@@ -1,62 +1,130 @@
-/* global Chart, HCaptchaEventsObject */
+/* global jQuery, Chart, hCaptchaSettingsBase, HCaptchaListPageBaseObject, HCaptchaEventsObject */
 
 /**
+ * @param HCaptchaEventsObject.ajaxUrl
+ * @param HCaptchaEventsObject.bulkAction
+ * @param HCaptchaEventsObject.bulkNonce
  * @param HCaptchaEventsObject.failed
  * @param HCaptchaEventsObject.failedLabel
  * @param HCaptchaEventsObject.succeed
  * @param HCaptchaEventsObject.succeedLabel
  * @param HCaptchaEventsObject.unit
  */
-document.addEventListener( 'DOMContentLoaded', function() {
-	const ctx = document.getElementById( 'eventsChart' );
-	const aspectRatio = window.innerWidth > 600 ? 3 : 2;
-
-	new Chart( ctx, {
-		type: 'bar',
-		data: {
-			datasets: [
-				{
-					label: HCaptchaEventsObject.succeedLabel,
-					data: HCaptchaEventsObject.succeed,
-					borderWidth: 1,
-				},
-				{
-					label: HCaptchaEventsObject.failedLabel,
-					data: HCaptchaEventsObject.failed,
-					borderWidth: 1,
-				},
-			],
-		},
-		options: {
-			responsive: true,
-			maintainAspectRatio: true,
-			aspectRatio,
-			scales: {
-				x: {
-					type: 'time',
-					time: {
-						displayFormats: {
-							millisecond: 'HH:mm:ss',
-							second: 'HH:mm:ss',
-							minute: 'HH:mm',
-							hour: 'HH:mm',
-							day: 'dd.MM.yyyy',
-							week: 'dd.MM.yyyy',
-							month: 'dd.MM.yyyy',
-							quarter: 'dd.MM.yyyy',
-							year: 'dd.MM.yyyy',
+
+/**
+ * Events page logic.
+ *
+ * @param {Object} $ jQuery instance.
+ */
+const events = function( $ ) {
+	function initChart() {
+		const ctx = document.getElementById( 'eventsChart' );
+		const aspectRatio = window.innerWidth > 600 ? 3 : 2;
+
+		new Chart( ctx, {
+			type: 'bar',
+			data: {
+				datasets: [
+					{
+						label: HCaptchaEventsObject.succeedLabel,
+						data: HCaptchaEventsObject.succeed,
+						borderWidth: 1,
+					},
+					{
+						label: HCaptchaEventsObject.failedLabel,
+						data: HCaptchaEventsObject.failed,
+						borderWidth: 1,
+					},
+				],
+			},
+			options: {
+				responsive: true,
+				maintainAspectRatio: true,
+				aspectRatio,
+				scales: {
+					x: {
+						type: 'time',
+						time: {
+							displayFormats: {
+								millisecond: 'HH:mm:ss',
+								second: 'HH:mm:ss',
+								minute: 'HH:mm',
+								hour: 'HH:mm',
+								day: 'dd.MM.yyyy',
+								week: 'dd.MM.yyyy',
+								month: 'dd.MM.yyyy',
+								quarter: 'dd.MM.yyyy',
+								year: 'dd.MM.yyyy',
+							},
+							tooltipFormat: 'dd.MM.yyyy HH:mm',
+							unit: HCaptchaEventsObject.unit,
 						},
-						tooltipFormat: 'dd.MM.yyyy HH:mm',
-						unit: HCaptchaEventsObject.unit,
 					},
-				},
-				y: {
-					beginAtZero: true,
-					ticks: {
-						precision: 0,
+					y: {
+						beginAtZero: true,
+						ticks: {
+							precision: 0,
+						},
 					},
 				},
 			},
-		},
-	} );
-} );
+		} );
+	}
+
+	function handleBulkAction( event ) {
+		event.preventDefault();
+
+		const form = event.target.closest( 'form' );
+		const formData = new FormData( form );
+
+		const bulk = formData.get( 'action' );
+
+		if ( bulk === '-1' ) {
+			hCaptchaSettingsBase.showErrorMessage( HCaptchaListPageBaseObject.noAction );
+
+			return;
+		}
+
+		const ids = formData.getAll( 'bulk-checkbox[]' );
+
+		if ( ! ids.length ) {
+			hCaptchaSettingsBase.showErrorMessage( HCaptchaListPageBaseObject.noItems );
+
+			return;
+		}
+
+		const data = {
+			action: HCaptchaEventsObject.bulkAction,
+			nonce: HCaptchaEventsObject.bulkNonce,
+			bulk,
+			ids: JSON.stringify( ids ),
+		};
+
+		$.post( {
+			url: HCaptchaEventsObject.ajaxUrl,
+			data,
+			beforeSend: () => hCaptchaSettingsBase.showSuccessMessage( HCaptchaListPageBaseObject.DoingBulk ),
+		} )
+			.done( function( response ) {
+				if ( ! response.success ) {
+					hCaptchaSettingsBase.showErrorMessage( response.data );
+
+					return;
+				}
+
+				window.location.reload();
+			} )
+			.fail(
+				function( response ) {
+					hCaptchaSettingsBase.showErrorMessage( response.statusText );
+				},
+			);
+	}
+
+	initChart();
+	document.getElementById( 'doaction' ).addEventListener( 'click', handleBulkAction );
+};
+
+window.hCaptchaForms = events;
+
+jQuery( document ).ready( events );
diff --git a/assets/js/forms.js b/assets/js/forms.js
@@ -1,27 +1,23 @@
 /* global jQuery, Chart, hCaptchaSettingsBase, HCaptchaListPageBaseObject, HCaptchaFormsObject */
 
 /**
+ * @param HCaptchaFormsObject.ajaxUrl
+ * @param HCaptchaFormsObject.bulkAction
+ * @param HCaptchaFormsObject.bulkNonce
  * @param HCaptchaFormsObject.served
  * @param HCaptchaFormsObject.servedLabel
  * @param HCaptchaFormsObject.unit
- * @param HCaptchaListPageBaseObject.ajaxUrl
- * @param HCaptchaListPageBaseObject.bulkAction
- * @param HCaptchaListPageBaseObject.bulkNonce
  * @param HCaptchaListPageBaseObject.noAction
  * @param HCaptchaListPageBaseObject.noItems
  * @param HCaptchaListPageBaseObject.DoingBulk
  */
 
 /**
- * General settings page logic.
+ * Forms page logic.
  *
  * @param {Object} $ jQuery instance.
  */
 const forms = function( $ ) {
-	const headerBarSelector = '.hcaptcha-header-bar';
-	const msgSelector = '#hcaptcha-message';
-	let $message = $( msgSelector );
-
 	function initChart() {
 		const ctx = document.getElementById( 'formsChart' );
 		const aspectRatio = window.innerWidth > 600 ? 3 : 2;
@@ -72,48 +68,7 @@ const forms = function( $ ) {
 		} );
 	}
 
-	function clearMessage() {
-		$message.remove();
-		// Concat below to avoid an inspection message.
-		$( '<div id="hcaptcha-message">' + '</div>' ).insertAfter( headerBarSelector );
-		$message = $( msgSelector );
-	}
-
-	function showMessage( message = '', msgClass = '' ) {
-		message = message === undefined ? '' : String( message );
-
-		if ( ! message ) {
-			return;
-		}
-
-		clearMessage();
-		$message.addClass( msgClass + ' notice is-dismissible' );
-
-		const messageLines = message.split( '\n' ).map( function( line ) {
-			return `<p>${ line }</p>`;
-		} );
-
-		$message.html( messageLines.join( '' ) );
-
-		$( document ).trigger( 'wp-updates-notice-added' );
-
-		$( 'html, body' ).animate(
-			{
-				scrollTop: $message.offset().top - hCaptchaSettingsBase.getStickyHeight(),
-			},
-			1000,
-		);
-	}
-
-	function showSuccessMessage( message = '' ) {
-		showMessage( message, 'notice-success' );
-	}
-
-	function showErrorMessage( message = '' ) {
-		showMessage( message, 'notice-error' );
-	}
-
-	function handleFormSubmit( event ) {
+	function handleBulkAction( event ) {
 		event.preventDefault();
 
 		const form = event.target.closest( 'form' );
@@ -122,7 +77,7 @@ const forms = function( $ ) {
 		const bulk = formData.get( 'action' );
 
 		if ( bulk === '-1' ) {
-			showErrorMessage( HCaptchaListPageBaseObject.noAction );
+			hCaptchaSettingsBase.showErrorMessage( HCaptchaListPageBaseObject.noAction );
 
 			return;
 		}
@@ -138,26 +93,26 @@ const forms = function( $ ) {
 		);
 
 		if ( ! ids.length ) {
-			showErrorMessage( HCaptchaListPageBaseObject.noItems );
+			hCaptchaSettingsBase.showErrorMessage( HCaptchaListPageBaseObject.noItems );
 
 			return;
 		}
 
 		const data = {
-			action: HCaptchaListPageBaseObject.bulkAction,
-			nonce: HCaptchaListPageBaseObject.bulkNonce,
+			action: HCaptchaFormsObject.bulkAction,
+			nonce: HCaptchaFormsObject.bulkNonce,
 			bulk,
 			ids: JSON.stringify( ids ),
 		};
 
 		$.post( {
-			url: HCaptchaListPageBaseObject.ajaxUrl,
+			url: HCaptchaFormsObject.ajaxUrl,
 			data,
-			beforeSend: () => showSuccessMessage( HCaptchaListPageBaseObject.DoingBulk ),
+			beforeSend: () => hCaptchaSettingsBase.showSuccessMessage( HCaptchaListPageBaseObject.DoingBulk ),
 		} )
 			.done( function( response ) {
 				if ( ! response.success ) {
-					showErrorMessage( response.data );
+					hCaptchaSettingsBase.showErrorMessage( response.data );
 
 					return;
 				}
@@ -166,15 +121,15 @@ const forms = function( $ ) {
 			} )
 			.fail(
 				function( response ) {
-					showErrorMessage( response.statusText );
+					hCaptchaSettingsBase.showErrorMessage( response.statusText );
 				},
 			);
 	}
 
 	initChart();
-	document.getElementById( 'doaction' ).addEventListener( 'click', handleFormSubmit );
+	document.getElementById( 'doaction' ).addEventListener( 'click', handleBulkAction );
 };
 
-window.hCaptchaGeneral = forms;
+window.hCaptchaForms = forms;
 
 jQuery( document ).ready( forms );
diff --git a/assets/js/settings-base.js b/assets/js/settings-base.js
@@ -22,7 +22,9 @@ const settingsBase = ( function( $ ) {
 	const headerBar = document.querySelector( '.hcaptcha-header-bar' );
 
 	const h2Selector = '.hcaptcha-header h2';
+	const headerBarSelector = '.hcaptcha-header-bar';
 	const msgSelector = '#hcaptcha-message';
+	let $message = $( msgSelector );
 
 	function setHeaderBarTop() {
 		const isAbsolute = adminBar ? window.getComputedStyle( adminBar ).position === 'absolute' : true;
@@ -82,6 +84,47 @@ const settingsBase = ( function( $ ) {
 
 			return adminBarHeight + tabsHeight + headerBarHeight;
 		},
+
+		clearMessage() {
+			$message.remove();
+			// Concat below to avoid an inspection message.
+			$( '<div id="hcaptcha-message">' + '</div>' ).insertAfter( headerBarSelector );
+			$message = $( msgSelector );
+		},
+
+		showMessage( message = '', msgClass = '' ) {
+			message = message === undefined ? '' : String( message );
+
+			if ( ! message ) {
+				return;
+			}
+
+			app.clearMessage();
+			$message.addClass( msgClass + ' notice is-dismissible' );
+
+			const messageLines = message.split( '\n' ).map( function( line ) {
+				return `<p>${ line }</p>`;
+			} );
+
+			$message.html( messageLines.join( '' ) );
+
+			$( document ).trigger( 'wp-updates-notice-added' );
+
+			$( 'html, body' ).animate(
+				{
+					scrollTop: $message.offset().top - app.getStickyHeight(),
+				},
+				1000,
+			);
+		},
+
+		showSuccessMessage( message = '' ) {
+			app.showMessage( message, 'notice-success' );
+		},
+
+		showErrorMessage( message = '' ) {
+			app.showMessage( message, 'notice-error' );
+		},
 	};
 
 	// Move WP notices to the message area.