add multupstream && new select
This commit is contained in:
wjqserver
parent
b10790c212
commit
30da719d57
4 changed files with 218 additions and 163 deletions
|
|
@ -1,6 +1,5 @@
|
|||
// js/ui.js - 管理所有与UI渲染和DOM操作相关的函数
|
||||
|
||||
// 集中管理所有需要操作的DOM元素
|
||||
export const DOMElements = {
|
||||
sidebar: document.getElementById('sidebar'),
|
||||
menuToggleBtn: document.getElementById('menu-toggle-btn'),
|
||||
|
|
@ -25,10 +24,16 @@ export const DOMElements = {
|
|||
caddyStatusIndicator: document.getElementById('caddy-status-indicator'),
|
||||
caddyActionButtonContainer: document.getElementById('caddy-action-button-container'),
|
||||
logoutBtn: document.getElementById('logout-btn'),
|
||||
serviceModeControl: document.getElementById('service-mode-control'),
|
||||
upstreamFieldset: document.getElementById('upstream-fieldset'),
|
||||
fileserverFieldset: document.getElementById('fileserver-fieldset'),
|
||||
upstreamHeadersContainer: document.getElementById('upstream-headers-container'),
|
||||
addUpstreamHeaderBtn: document.getElementById('add-upstream-header-btn'),
|
||||
mutiUpstreamCheckbox: document.getElementById('muti_upstream'),
|
||||
singleUpstreamGroup: document.getElementById('single-upstream-group'),
|
||||
multiUpstreamGroup: document.getElementById('multi-upstream-group'),
|
||||
multiUpstreamContainer: document.getElementById('multi-upstream-container'),
|
||||
addMultiUpstreamBtn: document.getElementById('add-multi-upstream-btn'),
|
||||
};
|
||||
|
||||
export function switchView(viewToShow) {
|
||||
|
|
@ -53,48 +58,6 @@ export function renderConfigList(filenames) {
|
|||
});
|
||||
}
|
||||
|
||||
export function createCustomSelect(containerId, options, onSelect) {
|
||||
const container = document.getElementById(containerId);
|
||||
container.innerHTML = `<div class="select-selected"></div><div class="select-items"></div><input type="hidden" name="tmpl_type">`;
|
||||
const selectedDiv = container.querySelector('.select-selected');
|
||||
const itemsDiv = container.querySelector('.select-items');
|
||||
const hiddenInput = container.querySelector('input[type="hidden"]');
|
||||
itemsDiv.innerHTML = '';
|
||||
options.forEach((option, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.textContent = option;
|
||||
item.dataset.value = option;
|
||||
if (index === 0) {
|
||||
selectedDiv.textContent = option;
|
||||
hiddenInput.value = option;
|
||||
}
|
||||
item.addEventListener('click', function(e) {
|
||||
selectedDiv.textContent = this.textContent;
|
||||
hiddenInput.value = this.dataset.value;
|
||||
itemsDiv.classList.remove('select-show');
|
||||
selectedDiv.classList.remove('select-arrow-active');
|
||||
onSelect && onSelect(this.dataset.value);
|
||||
e.stopPropagation();
|
||||
});
|
||||
itemsDiv.appendChild(item);
|
||||
});
|
||||
selectedDiv.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
document.querySelectorAll('.select-items.select-show').forEach(openSelect => {
|
||||
if (openSelect !== itemsDiv) {
|
||||
openSelect.classList.remove('select-show');
|
||||
openSelect.previousElementSibling.classList.remove('select-arrow-active');
|
||||
}
|
||||
});
|
||||
itemsDiv.classList.toggle('select-show');
|
||||
selectedDiv.classList.toggle('select-arrow-active');
|
||||
});
|
||||
document.addEventListener('click', () => {
|
||||
itemsDiv.classList.remove('select-show');
|
||||
selectedDiv.classList.remove('select-arrow-active');
|
||||
});
|
||||
}
|
||||
|
||||
export function addKeyValueInput(container, keyName, valueName, key = '', value = '') {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'header-entry';
|
||||
|
|
@ -107,22 +70,58 @@ export function addKeyValueInput(container, keyName, valueName, key = '', value
|
|||
container.appendChild(div);
|
||||
}
|
||||
|
||||
export function addSingleInput(container, inputName, placeholder, value = '') {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'header-entry';
|
||||
div.style.gridTemplateColumns = '1fr auto';
|
||||
div.innerHTML = `
|
||||
<input type="text" name="${inputName}" placeholder="${placeholder}" value="${value}">
|
||||
<button type="button" class="btn-icon" onclick="this.parentElement.remove()" title="移除此上游">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>`;
|
||||
container.appendChild(div);
|
||||
}
|
||||
|
||||
export function fillForm(config, originalFilename) {
|
||||
DOMElements.originalFilenameInput.value = originalFilename;
|
||||
DOMElements.domainInput.value = config.domain;
|
||||
document.getElementById('upstream').value = config.upstream?.upstream || '';
|
||||
document.getElementById('file_dir_path').value = config.file_server?.file_dir_path || '';
|
||||
document.getElementById('enable_browser').checked = config.file_server?.enable_browser || false;
|
||||
const selectContainer = document.getElementById('custom-select-tmpl');
|
||||
selectContainer.querySelector('.select-selected').textContent = config.tmpl_type;
|
||||
selectContainer.querySelector('input[type="hidden"]').value = config.tmpl_type;
|
||||
DOMElements.domainInput.value = config.domain_config?.domain || '';
|
||||
|
||||
const enableUpstream = config.upstream_config?.enable_upstream || false;
|
||||
const enableFileServer = config.file_server_config?.enable_file_server || false;
|
||||
let mode = 'none';
|
||||
if (enableUpstream) mode = 'reverse_proxy';
|
||||
else if (enableFileServer) mode = 'file_server';
|
||||
|
||||
const activeButton = DOMElements.serviceModeControl.querySelector(`[data-mode="${mode}"]`);
|
||||
if (activeButton) updateSegmentedControl(activeButton);
|
||||
|
||||
const upstreamConfig = config.upstream_config || {};
|
||||
DOMElements.mutiUpstreamCheckbox.checked = upstreamConfig.muti_upstream || false;
|
||||
document.getElementById('upstream').value = upstreamConfig.upstream || '';
|
||||
|
||||
DOMElements.multiUpstreamContainer.innerHTML = '';
|
||||
if (upstreamConfig.muti_upstream && upstreamConfig.upstream_servers) {
|
||||
upstreamConfig.upstream_servers.forEach(server => {
|
||||
addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', '例如: 127.0.0.1:8081', server);
|
||||
});
|
||||
}
|
||||
|
||||
DOMElements.upstreamHeadersContainer.innerHTML = '';
|
||||
if (upstreamConfig.upstream_headers) {
|
||||
Object.entries(upstreamConfig.upstream_headers).forEach(([k, v]) => v.forEach(val => addKeyValueInput(DOMElements.upstreamHeadersContainer, 'upstream_header_key', 'upstream_header_value', k, val)));
|
||||
}
|
||||
|
||||
document.getElementById('file_dir_path').value = config.file_server_config?.file_dir_path || '';
|
||||
document.getElementById('enable_browser').checked = config.file_server_config?.enable_browser || false;
|
||||
|
||||
DOMElements.headersContainer.innerHTML = '';
|
||||
if (config.headers) Object.entries(config.headers).forEach(([k, v]) => v.forEach(val => addKeyValueInput(DOMElements.headersContainer, 'header_key', 'header_value', k, val)));
|
||||
DOMElements.upstreamHeadersContainer.innerHTML = '';
|
||||
if (config.upstream?.upstream_headers) Object.entries(config.upstream.upstream_headers).forEach(([k, v]) => v.forEach(val => addKeyValueInput(DOMElements.upstreamHeadersContainer, 'upstream_header_key', 'upstream_header_value', k, val)));
|
||||
document.getElementById('enable_log').checked = config.log?.enable_log || false;
|
||||
document.getElementById('enable_error_page').checked = config.error_page?.enable_error_page || false;
|
||||
document.getElementById('enable_encode').checked = config.encode?.enable_encode || false;
|
||||
|
||||
document.getElementById('enable_log').checked = config.log_config?.enable_log || false;
|
||||
document.getElementById('enable_error_page').checked = config.error_page_config?.enable_error_page || false;
|
||||
document.getElementById('enable_encode').checked = config.encode_config?.enable_encode || false;
|
||||
|
||||
updateMultiUpstreamView(DOMElements.mutiUpstreamCheckbox.checked);
|
||||
}
|
||||
|
||||
export function showRenderedConfig(configs, filename) {
|
||||
|
|
@ -168,9 +167,27 @@ export function updateCaddyStatusView(status, handlers) {
|
|||
dot.classList.add(dotClass);
|
||||
}
|
||||
|
||||
export function updateFormVisibility(selectedTemplate, availableTemplates) {
|
||||
const showUpstream = selectedTemplate === 'reverse_proxy' && availableTemplates.includes('reverse_proxy');
|
||||
const showFileServer = selectedTemplate === 'file_server' && availableTemplates.includes('file_server');
|
||||
DOMElements.upstreamFieldset.classList.toggle('hidden', !showUpstream);
|
||||
DOMElements.fileserverFieldset.classList.toggle('hidden', !showFileServer);
|
||||
export function updateServiceModeView(mode) {
|
||||
DOMElements.upstreamFieldset.classList.toggle('hidden', mode !== 'reverse_proxy');
|
||||
DOMElements.fileserverFieldset.classList.toggle('hidden', mode !== 'file_server');
|
||||
}
|
||||
|
||||
export function updateMultiUpstreamView(isMulti) {
|
||||
DOMElements.singleUpstreamGroup.classList.toggle('hidden', isMulti);
|
||||
DOMElements.multiUpstreamGroup.classList.toggle('hidden', !isMulti);
|
||||
}
|
||||
|
||||
export function updateSegmentedControl(activeButton) {
|
||||
const slider = document.getElementById('segmented-control-slider');
|
||||
const control = DOMElements.serviceModeControl;
|
||||
if (!activeButton || !slider || !control) return;
|
||||
|
||||
control.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
|
||||
activeButton.classList.add('active');
|
||||
|
||||
const controlRect = control.getBoundingClientRect();
|
||||
const buttonRect = activeButton.getBoundingClientRect();
|
||||
|
||||
slider.style.width = `${buttonRect.width}px`;
|
||||
slider.style.transform = `translateX(${activeButton.offsetLeft - control.clientLeft - 4}px)`;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue