344 lines
11 KiB
HTML
344 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NebuleAir - Config Editor</title>
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
|
<style>
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
#sidebar a.nav-link {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#sidebar a.nav-link:hover {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
#sidebar a.nav-link svg {
|
|
margin-right: 8px; /* Add spacing between icons and text */
|
|
}
|
|
#sidebar {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
.offcanvas-backdrop {
|
|
z-index: 1040;
|
|
}
|
|
#jsonEditor {
|
|
width: 100%;
|
|
min-height: 400px;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
white-space: pre;
|
|
}
|
|
.password-popup {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 2000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.password-container {
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Topbar -->
|
|
<span id="topbar"></span>
|
|
|
|
<!-- Sidebar Offcanvas for Mobile -->
|
|
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body" id="sidebar_mobile">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid mt-5">
|
|
<div class="row">
|
|
<!-- Side bar -->
|
|
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
|
</aside>
|
|
<!-- Main content -->
|
|
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
|
<h1 class="mt-4">Configuration Editor</h1>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="alert alert-warning">
|
|
<strong>Warning:</strong> Editing the configuration file directly can affect system functionality.
|
|
Make changes carefully and ensure valid JSON format.
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">config.json</h5>
|
|
<div>
|
|
<button id="editBtn" class="btn btn-primary me-2">Edit</button>
|
|
<button id="saveBtn" class="btn btn-success me-2" disabled>Save</button>
|
|
<button id="cancelBtn" class="btn btn-secondary" disabled>Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="jsonEditor" class="mb-3" readonly></div>
|
|
<div id="errorMsg" class="alert alert-danger" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Modal -->
|
|
<div class="password-popup" id="passwordModal">
|
|
<div class="password-container">
|
|
<h5>Authentication Required</h5>
|
|
<p>Please enter the admin password to edit configuration:</p>
|
|
<div class="mb-3">
|
|
<input type="password" class="form-control" id="adminPassword" placeholder="Password">
|
|
</div>
|
|
<div class="mb-3 d-flex justify-content-between">
|
|
<button class="btn btn-secondary" id="cancelPasswordBtn">Cancel</button>
|
|
<button class="btn btn-primary" id="submitPasswordBtn">Submit</button>
|
|
</div>
|
|
<div id="passwordError" class="text-danger mt-2" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
|
|
<!-- Link Ajax locally -->
|
|
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
|
<!-- Link Bootstrap JS and Popper.js locally -->
|
|
<script src="assets/js/bootstrap.bundle.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const elementsToLoad = [
|
|
{ id: 'topbar', file: 'topbar.html' },
|
|
{ id: 'sidebar', file: 'sidebar.html' },
|
|
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
|
];
|
|
|
|
elementsToLoad.forEach(({ id, file }) => {
|
|
fetch(file)
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.innerHTML = data;
|
|
}
|
|
})
|
|
.catch(error => console.error(`Error loading ${file}:`, error));
|
|
});
|
|
});
|
|
|
|
// Add admin password (should be changed to something more secure)
|
|
const ADMIN_PASSWORD = "nebuleair123";
|
|
|
|
// Global variables for editor
|
|
let originalConfig = '';
|
|
let jsonEditor;
|
|
let editBtn;
|
|
let saveBtn;
|
|
let cancelBtn;
|
|
let passwordModal;
|
|
let adminPassword;
|
|
let submitPasswordBtn;
|
|
let cancelPasswordBtn;
|
|
let passwordError;
|
|
let errorMsg;
|
|
|
|
// Initialize DOM references after document is loaded
|
|
function initializeElements() {
|
|
jsonEditor = document.getElementById('jsonEditor');
|
|
editBtn = document.getElementById('editBtn');
|
|
saveBtn = document.getElementById('saveBtn');
|
|
cancelBtn = document.getElementById('cancelBtn');
|
|
passwordModal = document.getElementById('passwordModal');
|
|
adminPassword = document.getElementById('adminPassword');
|
|
submitPasswordBtn = document.getElementById('submitPasswordBtn');
|
|
cancelPasswordBtn = document.getElementById('cancelPasswordBtn');
|
|
passwordError = document.getElementById('passwordError');
|
|
errorMsg = document.getElementById('errorMsg');
|
|
}
|
|
|
|
// Load config file
|
|
function loadConfigFile() {
|
|
fetch('../config.json')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
originalConfig = data;
|
|
// Format JSON for display with proper indentation
|
|
try {
|
|
const jsonObj = JSON.parse(data);
|
|
const formattedJSON = JSON.stringify(jsonObj, null, 2);
|
|
jsonEditor.textContent = formattedJSON;
|
|
} catch (e) {
|
|
jsonEditor.textContent = data;
|
|
console.error("Error parsing JSON:", e);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading config.json:', error);
|
|
jsonEditor.textContent = "Error loading configuration file.";
|
|
});
|
|
}
|
|
|
|
// Event listeners
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize DOM elements
|
|
initializeElements();
|
|
|
|
// Load config file
|
|
loadConfigFile();
|
|
|
|
// Edit button
|
|
editBtn.addEventListener('click', function() {
|
|
passwordModal.style.display = 'flex';
|
|
adminPassword.value = ''; // Clear password field
|
|
passwordError.style.display = 'none';
|
|
adminPassword.focus();
|
|
});
|
|
|
|
// Password submit button
|
|
submitPasswordBtn.addEventListener('click', function() {
|
|
if (adminPassword.value === ADMIN_PASSWORD) {
|
|
passwordModal.style.display = 'none';
|
|
enableEditing();
|
|
} else {
|
|
passwordError.textContent = 'Invalid password';
|
|
passwordError.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
// Enter key for password
|
|
adminPassword.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
submitPasswordBtn.click();
|
|
}
|
|
});
|
|
|
|
// Cancel password button
|
|
cancelPasswordBtn.addEventListener('click', function() {
|
|
passwordModal.style.display = 'none';
|
|
});
|
|
|
|
// Save button
|
|
saveBtn.addEventListener('click', function() {
|
|
saveConfig();
|
|
});
|
|
|
|
// Cancel button
|
|
cancelBtn.addEventListener('click', function() {
|
|
cancelEditing();
|
|
});
|
|
});
|
|
|
|
// Enable editing mode
|
|
function enableEditing() {
|
|
jsonEditor.setAttribute('contenteditable', 'true');
|
|
jsonEditor.focus();
|
|
jsonEditor.classList.add('border-primary');
|
|
editBtn.disabled = true;
|
|
saveBtn.disabled = false;
|
|
cancelBtn.disabled = false;
|
|
}
|
|
|
|
// Cancel editing
|
|
function cancelEditing() {
|
|
jsonEditor.setAttribute('contenteditable', 'false');
|
|
jsonEditor.classList.remove('border-primary');
|
|
jsonEditor.textContent = originalConfig;
|
|
// Reformat JSON
|
|
try {
|
|
const jsonObj = JSON.parse(originalConfig);
|
|
const formattedJSON = JSON.stringify(jsonObj, null, 2);
|
|
jsonEditor.textContent = formattedJSON;
|
|
} catch (e) {
|
|
jsonEditor.textContent = originalConfig;
|
|
}
|
|
editBtn.disabled = false;
|
|
saveBtn.disabled = true;
|
|
cancelBtn.disabled = true;
|
|
errorMsg.style.display = 'none';
|
|
}
|
|
|
|
// Save config
|
|
function saveConfig() {
|
|
const newConfig = jsonEditor.textContent;
|
|
|
|
// Validate JSON
|
|
try {
|
|
JSON.parse(newConfig);
|
|
|
|
// Send to server
|
|
$.ajax({
|
|
url: 'launcher.php',
|
|
method: 'POST',
|
|
data: {
|
|
type: 'save_config',
|
|
config: newConfig
|
|
},
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
if (response.success) {
|
|
originalConfig = newConfig;
|
|
jsonEditor.setAttribute('contenteditable', 'false');
|
|
jsonEditor.classList.remove('border-primary');
|
|
editBtn.disabled = false;
|
|
saveBtn.disabled = true;
|
|
cancelBtn.disabled = true;
|
|
|
|
// Show success message
|
|
errorMsg.textContent = 'Configuration saved successfully!';
|
|
errorMsg.classList.remove('alert-danger');
|
|
errorMsg.classList.add('alert-success');
|
|
errorMsg.style.display = 'block';
|
|
|
|
// Hide success message after 3 seconds
|
|
setTimeout(() => {
|
|
errorMsg.style.display = 'none';
|
|
}, 3000);
|
|
} else {
|
|
errorMsg.textContent = 'Error saving configuration: ' + response.message;
|
|
errorMsg.classList.remove('alert-success');
|
|
errorMsg.classList.add('alert-danger');
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
errorMsg.textContent = 'Error saving configuration: ' + error;
|
|
errorMsg.classList.remove('alert-success');
|
|
errorMsg.classList.add('alert-danger');
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
});
|
|
} catch (e) {
|
|
errorMsg.textContent = 'Invalid JSON format: ' + e.message;
|
|
errorMsg.classList.remove('alert-success');
|
|
errorMsg.classList.add('alert-danger');
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |