Enable setting autohold and address validation in web UI

resources/views/system/widget/system.blade.php

@@ -297,6 +297,11 @@
 								</span>
 							</div>
 						</div>
+
+						<div class="col-6">
+							<label for="passkey" class="form-label">Auto Hold</label>
+							<button id="autohold" @class(['btn','btn-danger'=>$o->autohold,'btn-success'=>(! $o->autohold)])><i @class(['bi-toggle-on'=>$o->autohold,'bi-toggle-off'=>(! $o->autohold)])></i></button>
+						</div>
 					</div>
 				@endcan
 
@@ -440,6 +445,57 @@
 				$('#heartbeat_option').addClass('d-none');
 				console.log('hold');
 			})
+			$("#autohold").on('click',function(item) {
+				var that = $(this)
+				var icon = that.find('i');
+
+				if (icon.hasClass('bi-toggle-on')) {
+					$.ajax({
+						url: '/system/api/autohold/off',
+						type: 'POST',
+						dataType: 'json',
+						data : {id: {{ $o->id }}},
+						beforeSend: function() {
+							icon.addClass('spinner-grow spinner-grow-sm')
+						},
+						complete: function() {
+							icon.removeClass('spinner-grow spinner-grow-sm')
+						},
+						success: function(data) {
+							icon.removeClass('bi-toggle-on')
+								.addClass('bi-toggle-off')
+
+							that.removeClass('btn-danger')
+								.addClass('btn-success')
+						},
+						cache: false
+					});
+
+				} else {
+					$.ajax({
+						url: '/system/api/autohold/on',
+						type: 'POST',
+						dataType: 'json',
+						data : {id: {{ $o->id }}},
+						beforeSend: function() {
+							icon.addClass('spinner-grow spinner-grow-sm')
+						},
+						complete: function() {
+							icon.removeClass('spinner-grow spinner-grow-sm')
+						},
+						success: function(data) {
+							icon.removeClass('bi-toggle-off')
+								.addClass('bi-toggle-on');
+
+							that.removeClass('btn-success')
+								.addClass('btn-danger')
+						},
+						cache: false
+					});
+				}
+
+				return false;
+			})
 		})
 	</script>
 @append