add config page and terminal page
This commit is contained in:
Your Name
344
html/config.html
Normal file
344
html/config.html
Normal file
@@ -0,0 +1,344 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user