From 9861c42ca0ab85514dcea2839b7123ebd3e08472 Mon Sep 17 00:00:00 2001
From: markjcrane <markjcrane@gmail.com>
Date: Mon, 26 Jan 2026 18:27:25 -0700
Subject: [PATCH] Add javascript select_group_option

---
 app/recordings/recording_edit.php           | 59 ++++++++++++++--
 resources/javascript/select_group_option.js | 75 +++++++++++++++++++++
 themes/default/template.php                 |  5 +-
 3 files changed, 132 insertions(+), 7 deletions(-)
 create mode 100644 resources/javascript/select_group_option.js

diff --git a/app/recordings/recording_edit.php b/app/recordings/recording_edit.php
index 01c889d1ba..84f56f8547 100644
--- a/app/recordings/recording_edit.php
+++ b/app/recordings/recording_edit.php
@@ -39,6 +39,15 @@
 	$language = new text;
 	$text = $language->get();
 
+//determine the typ of array
+	function array_type(array $array): string {
+		$result = count($array, COUNT_RECURSIVE) > count($array);
+		if ($result) {
+			return 'multi';
+		}
+		return 'single';
+	}
+
 //set defaults
 	$recording_name = '';
 	$recording_message = '';
@@ -68,6 +77,14 @@
 		//$translate_enabled = $speech->get_translate_enabled();
 		//$language_enabled = $speech->get_language_enabled();
 		//$languages = $speech->get_languages();
+
+		// Determine the aray type single, or multi
+		$voices_array_type = array_type($voices);
+
+		// Sort the array by language code keys alphabetically
+		if ($voices_array_type == 'multi') {
+			ksort($voices);
+		}
 	}
 
 //add the transcribe object and get the languages arrays
@@ -385,13 +402,43 @@
 		echo "</td>\n";
 		echo "<td class='vtable' align='left'>\n";
 		if (!empty($voices)) {
-			echo "	<select class='formfld' name='recording_voice'>\n";
-			echo "		<option value=''></option>\n";
-			foreach ($voices as $key => $voice) {
-				$recording_voice_selected = (!empty($recording_voice) && $key == $recording_voice) ? "selected='selected'" : null;
-				echo "		<option value='".escape($key)."' $recording_voice_selected>".escape(ucwords($voice))."</option>\n";
+			if ($voices_array_type == 'single') {
+				echo "	<select class='formfld' name='recording_voice' style='width: 200px;'>\n";
+				echo "		<option value=''></option>\n";
+				foreach ($voices as $key => $voice) {
+					$recording_voice_selected = (!empty($recording_voice) && $key == $recording_voice) ? "selected='selected'" : null;
+					echo "		<option value='".escape($key)."' $recording_voice_selected>".escape(ucwords($voice))."</option>\n";
+				}
+				echo "	</select>\n";
+			}
+			if ($voices_array_type == 'multi') {
+				echo "	<select class='formfld' id='recording_voice_source' name='recording_voice_source' style='display: none;'>\n";
+				echo "		<option value=''></option>\n";
+				foreach ($voices as $category => $sub_array) {
+					$category = $text['label-'.$category] ?? $category;
+					echo "<optgroup label='".$category."' data-type='".$category."'>\n";
+					foreach ($sub_array as $key => $voice) {
+						$recording_voice_selected = (!empty($recording_voice) && $key == $recording_voice) ? "selected='selected'" : null;
+						echo "		<option value='".escape($key)."' $recording_voice_selected>".escape(ucwords($voice))."</option>\n";
+					}
+					echo "</optgroup>\n";
+				}
+				echo "	</select>\n";
+
+				// Select showing only optgroup labels
+				echo "	<select class='formfld' id='recording_voice_group_select' style='width: 100px;' >\n";
+				echo "	<option value='' disabled='disabled' selected='selected'></option>\n";
+				echo "	</select>\n";
+
+				// Select showing only options from selected group\n";
+				echo "	<select class='formfld' id='recording_voice_option_select' name='recording_voice' style='width: 195px;' disabled='disabled'>\n";
+				echo "	<option value='' disabled='disabled' selected='selected'></option>\n";
+				echo "	</select>\n";
+
+				echo "<script>\n";
+				echo "	select_group_option('recording_voice_source', 'recording_voice_group_select', 'recording_voice_option_select');\n";
+				echo "</script>\n";
 			}
-			echo "	</select>\n";
 		}
 		else {
 			echo "		<input class='formfld' type='text' name='recording_voice' maxlength='255' value=\"".escape($recording_voice)."\">\n";
diff --git a/resources/javascript/select_group_option.js b/resources/javascript/select_group_option.js
new file mode 100644
index 0000000000..c3b81fb2aa
--- /dev/null
+++ b/resources/javascript/select_group_option.js
@@ -0,0 +1,75 @@
+
+function select_group_option(original_select_id, group_select_id, option_select_id) {
+	const original_select = document.getElementById(original_select_id);
+	const group_select = document.getElementById(group_select_id);
+	const option_select = document.getElementById(option_select_id);
+
+	if (!original_select || !group_select || !option_select) {
+		console.error('Function select_group_option select IDs one or more not found in the DOM.');
+		return;
+	}
+
+	// Populate group select with optgroup labels
+	const optgroups = original_select.querySelectorAll('optgroup');
+	optgroups.forEach(optgroup => {
+		const option = document.createElement('option');
+		option.value = optgroup.label;
+		option.textContent = optgroup.label;
+		group_select.appendChild(option);
+	});
+
+	// When a group is selected, populate option select
+	group_select.addEventListener('change', function() {
+		const selected_group = this.value;
+		option_select.innerHTML = '<option value=""></option>';
+
+		if (selected_group) {
+			option_select.disabled = false;
+			const optgroup = original_select.querySelector(`optgroup[label="${selected_group}"]`);
+			if (optgroup) {
+				const options = optgroup.querySelectorAll('option');
+				options.forEach(opt => {
+					const option_element = document.createElement('option');
+					option_element.value = opt.value;
+					option_element.textContent = opt.textContent;
+					option_select.appendChild(option_element);
+				});
+			}
+		} else {
+			option_select.disabled = true;
+		}
+	});
+
+	// Set the selected value
+	const original_value = original_select.value;
+	if (original_value) {
+		// Find which optgroup contains the selected option
+		const selected_optgroup = Array.from(original_select.querySelectorAll('optgroup')).find(optgroup =>
+			optgroup.querySelector(`option[value="${original_value}"]`)
+		);
+
+		if (selected_optgroup) {
+			// Set group select to the selected optgroup
+			group_select.value = selected_optgroup.label;
+
+			// Populate and select the corresponding option
+			const optgroup = original_select.querySelector(`optgroup[label="${selected_optgroup.label}"]`);
+			if (optgroup) {
+				const options = optgroup.querySelectorAll('option');
+				option_select.innerHTML = '<option value=""></option>';
+
+				options.forEach(opt => {
+					const option_element = document.createElement('option');
+					option_element.value = opt.value;
+					option_element.textContent = opt.textContent;
+					option_select.appendChild(option_element);
+				});
+
+				// Select the matching option
+				option_select.value = original_value;
+				option_select.disabled = false;
+			}
+		}
+	}
+}
+//select_group_option('original_select', 'group_select', 'option_select');
diff --git a/themes/default/template.php b/themes/default/template.php
index ba9f726250..2436e0d273 100644
--- a/themes/default/template.php
+++ b/themes/default/template.php
@@ -50,6 +50,9 @@
 		<script language='JavaScript' type='text/javascript' src='{$project_path}/resources/fonts/web_font_loader.php?v={$settings.theme.font_loader_version}'></script>
 	{/if}
 
+{*//javascript functions *}
+	<script language='JavaScript' type='text/javascript' src='{$project_path}/resources/javascript/select_group_option.js'></script>
+
 {*//local javascript *}
 	<script language='JavaScript' type='text/javascript'>
 
@@ -1011,7 +1014,7 @@
 			document.querySelectorAll('input[type="checkbox"]:not([name*="enabled"])').forEach(checkbox => {
 				checkbox.checked = false;
 			});
-	
+
 			//select the checkbox with the specified id
 			document.getElementById(checkbox_id).checked = true;
 		}