feat(frontend): add telegram backup interval UI to settings page
This commit is contained in:
ReturnFI
@ -131,7 +131,7 @@
|
||||
<!-- Telegram Bot Tab -->
|
||||
<div class='tab-pane fade' id='telegram' role='tabpanel' aria-labelledby='telegram-tab'>
|
||||
<form id="telegram_form">
|
||||
<div class='form-group'>
|
||||
<div class='form-group' data-group="start-only">
|
||||
<label for='telegram_api_token'>API Token:</label>
|
||||
<input type='text' class='form-control' id='telegram_api_token'
|
||||
placeholder='Enter API Token'>
|
||||
@ -139,7 +139,7 @@
|
||||
Please enter a valid API Token.
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-group'>
|
||||
<div class='form-group' data-group="start-only">
|
||||
<label for='telegram_admin_id'>Admin ID:</label>
|
||||
<input type='text' class='form-control' id='telegram_admin_id'
|
||||
placeholder='Enter Admin ID'>
|
||||
@ -147,8 +147,18 @@
|
||||
Please enter a valid Admin ID.
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-group'>
|
||||
<label for='telegram_backup_interval'>Automatic Backup Interval (Hours):</label>
|
||||
<input type='number' class='form-control' id='telegram_backup_interval' min="1"
|
||||
placeholder='e.g., 12 (Default)'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid positive number for the interval.
|
||||
</div>
|
||||
</div>
|
||||
<button id="telegram_start" type='button' class='btn btn-success'>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>Start</button>
|
||||
<button id="telegram_save_interval" type='button' class='btn btn-primary'
|
||||
style="display: none;">Save Interval</button>
|
||||
<button id="telegram_stop" type='button' class='btn btn-danger'
|
||||
style="display: none;">Stop</button>
|
||||
</form>
|
||||
@ -693,7 +703,7 @@
|
||||
|
||||
function validateForm(formId) {
|
||||
let isValid = true;
|
||||
$(`#${formId} .form-control`).each(function () {
|
||||
$(`#${formId} .form-control:visible`).each(function () {
|
||||
const input = $(this);
|
||||
const id = input.attr('id');
|
||||
let fieldValid = true;
|
||||
@ -712,8 +722,12 @@
|
||||
fieldValid = input.val().trim() !== "";
|
||||
} else if (id === 'extra_config_uri') {
|
||||
fieldValid = isValidURI(input.val());
|
||||
} else if (id === 'block_duration' || id === 'max_ips') {
|
||||
fieldValid = isValidPositiveNumber(input.val());
|
||||
} else if (id === 'block_duration' || id === 'max_ips' || id === 'telegram_backup_interval') {
|
||||
if (input.val().trim() === '' && id === 'telegram_backup_interval') {
|
||||
fieldValid = true;
|
||||
} else {
|
||||
fieldValid = isValidPositiveNumber(input.val());
|
||||
}
|
||||
} else if (id === 'decoy_path') {
|
||||
fieldValid = isValidPath(input.val());
|
||||
} else {
|
||||
@ -944,10 +958,27 @@
|
||||
};
|
||||
|
||||
Object.keys(servicesMap).forEach(serviceKey => {
|
||||
let targetSelector = servicesMap[serviceKey];
|
||||
let isRunning = data[serviceKey];
|
||||
|
||||
if (serviceKey === "hysteria_normal_sub") {
|
||||
if (serviceKey === "hysteria_telegram_bot") {
|
||||
const $form = $("#telegram_form");
|
||||
if (isRunning) {
|
||||
$form.find('[data-group="start-only"]').hide();
|
||||
$("#telegram_start").hide();
|
||||
$("#telegram_stop").show();
|
||||
$("#telegram_save_interval").show();
|
||||
if ($form.find(".alert-info").length === 0) {
|
||||
$form.prepend(`<div class='alert alert-info'>Service is running. You can stop it or change the backup interval.</div>`);
|
||||
}
|
||||
} else {
|
||||
$form.find('[data-group="start-only"]').show();
|
||||
$("#telegram_start").show();
|
||||
$("#telegram_stop").hide();
|
||||
$("#telegram_save_interval").hide();
|
||||
$form.find(".alert-info").remove();
|
||||
}
|
||||
|
||||
} else if (serviceKey === "hysteria_normal_sub") {
|
||||
const $normalForm = $("#normal_sub_service_form");
|
||||
const $normalFormGroups = $normalForm.find(".form-group");
|
||||
const $normalStartBtn = $("#normal_start");
|
||||
@ -1011,23 +1042,6 @@
|
||||
$("#warp_config_form")[0].reset();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const $formSelector = $(targetSelector);
|
||||
if ($formSelector.length > 0) {
|
||||
if (isRunning) {
|
||||
$formSelector.find(".form-group").hide();
|
||||
$formSelector.find(".btn-success").hide();
|
||||
$formSelector.find(".btn-danger").show();
|
||||
if ($formSelector.find(".alert-info").length === 0) {
|
||||
$formSelector.prepend(`<div class='alert alert-info'>Service is running. You can stop it if needed.</div>`);
|
||||
}
|
||||
} else {
|
||||
$formSelector.find(".form-group").show();
|
||||
$formSelector.find(".btn-success").show();
|
||||
$formSelector.find(".btn-danger").hide();
|
||||
$formSelector.find(".alert-info").remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1223,11 +1237,21 @@
|
||||
if (!validateForm('telegram_form')) return;
|
||||
const apiToken = $("#telegram_api_token").val();
|
||||
const adminId = $("#telegram_admin_id").val();
|
||||
let backupInterval = $("#telegram_backup_interval").val();
|
||||
|
||||
const data = {
|
||||
token: apiToken,
|
||||
admin_id: adminId
|
||||
};
|
||||
if (backupInterval) {
|
||||
data.backup_interval = parseInt(backupInterval);
|
||||
}
|
||||
|
||||
confirmAction("start the Telegram bot", function () {
|
||||
sendRequest(
|
||||
"{{ url_for('telegram_start_api') }}",
|
||||
"POST",
|
||||
{ token: apiToken, admin_id: adminId },
|
||||
data,
|
||||
"Telegram bot started successfully!",
|
||||
"#telegram_start"
|
||||
);
|
||||
@ -1246,6 +1270,36 @@
|
||||
});
|
||||
}
|
||||
|
||||
function saveTelegramInterval() {
|
||||
if (!validateForm('telegram_form')) return;
|
||||
let backupInterval = $("#telegram_backup_interval").val();
|
||||
|
||||
if (!backupInterval) {
|
||||
Swal.fire("Error!", "Backup interval cannot be empty.", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
backup_interval: parseInt(backupInterval)
|
||||
};
|
||||
|
||||
confirmAction(`change the backup interval to ${backupInterval} hours`, function () {
|
||||
sendRequest(
|
||||
"{{ url_for('telegram_set_interval_api') }}",
|
||||
"POST",
|
||||
data,
|
||||
"Backup interval updated successfully!",
|
||||
"#telegram_save_interval",
|
||||
false,
|
||||
function() {
|
||||
$("#telegram_backup_interval").val("");
|
||||
$("#telegram_backup_interval").removeClass("is-invalid");
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function startNormal() {
|
||||
if (!validateForm('normal_sub_service_form')) return;
|
||||
const domain = $("#normal_domain").val();
|
||||
@ -1528,6 +1582,7 @@
|
||||
|
||||
$("#telegram_start").on("click", startTelegram);
|
||||
$("#telegram_stop").on("click", stopTelegram);
|
||||
$("#telegram_save_interval").on("click", saveTelegramInterval);
|
||||
$("#normal_start").on("click", startNormal);
|
||||
$("#normal_stop").on("click", stopNormal);
|
||||
$("#normal_subpath_save_btn").on("click", editNormalSubPath);
|
||||
@ -1621,13 +1676,17 @@
|
||||
$(this).addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
$('#block_duration, #max_ips').on('input', function () {
|
||||
$('#block_duration, #max_ips, #telegram_backup_interval').on('input', function () {
|
||||
if ($(this).attr('id') === 'telegram_backup_interval' && $(this).val().trim() === '') {
|
||||
$(this).removeClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
if (isValidPositiveNumber($(this).val())) {
|
||||
$(this).removeClass('is-invalid');
|
||||
} else if ($(this).val().trim() !== "") {
|
||||
$(this).addClass('is-invalid');
|
||||
} else {
|
||||
$(this).removeClass('is-invalid');
|
||||
$(this).addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
@ -1643,4 +1702,4 @@
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user