783 lines
20 KiB
HTML
783 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>MRS Dashboard</title>
|
|
<link rel="icon" href="/favicon.png">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
min-height: 100vh;
|
|
color: #fff;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
|
|
.search-section {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.search-bar {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-bar:focus-within {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.search-icon {
|
|
font-size: 1.2rem;
|
|
color: #64748b;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: #64748b;
|
|
}
|
|
|
|
.add-app-btn {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
color: #10b981;
|
|
border-radius: 12px;
|
|
padding: 0 1.2rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.add-app-btn:hover {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.apps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.apps-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.app-item {
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.app-icon-wrapper {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.app-item:hover .app-icon-wrapper {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.app-item:active .app-icon-wrapper {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.app-icon {
|
|
font-size: 2rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.app-name {
|
|
color: #fff;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.app-badge {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
border-radius: 50%;
|
|
background: #5a6b63;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
height: 28px;
|
|
width: 28px;
|
|
}
|
|
|
|
.app-badge:hover {
|
|
background: #6a7b73;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.app-badge i {
|
|
font-size: 0.75rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.context-menu {
|
|
position: fixed;
|
|
background: #1e293b;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
padding: 0.5rem;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
z-index: 2000;
|
|
display: none;
|
|
}
|
|
|
|
.context-menu.active {
|
|
display: block;
|
|
}
|
|
|
|
.context-menu-item {
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
color: #fff;
|
|
}
|
|
|
|
.context-menu-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.context-menu-item i {
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.context-menu-item.delete {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.context-menu-item.delete:hover {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal.active {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background: #1e293b;
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
max-width: 500px;
|
|
width: 90%;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: #94a3b8;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #cbd5e1;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-input:focus {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.icon-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.icon-preview-box {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.icon-preview-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.icon-preview-name {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.icon-preview-url {
|
|
font-size: 0.85rem;
|
|
color: #94a3b8;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #10b981;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #059669;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
details {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: #cbd5e1;
|
|
user-select: none;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
details[open] summary {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<notification-bar title="DASHBOARD"></notification-bar>
|
|
|
|
<div class="container">
|
|
<div class="search-section">
|
|
<div class="search-bar">
|
|
<i class="fas fa-search search-icon"></i>
|
|
<input type="text" class="search-input" placeholder="Search" id="search-input">
|
|
</div>
|
|
<button class="add-app-btn" id="add-app-btn">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="apps-grid" id="apps-grid"></div>
|
|
</div>
|
|
|
|
<div class="context-menu" id="context-menu">
|
|
<div class="context-menu-item" id="context-edit">
|
|
<i class="fas fa-edit"></i>
|
|
<span>Edit</span>
|
|
</div>
|
|
<div class="context-menu-item delete" id="context-delete">
|
|
<i class="fas fa-trash"></i>
|
|
<span>Delete</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="app-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="modal-title">Add Application</h2>
|
|
<button class="modal-close" id="modal-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="icon-preview" id="icon-preview">
|
|
<div class="icon-preview-box">
|
|
<i class="fas fa-question" id="preview-icon"></i>
|
|
</div>
|
|
<div class="icon-preview-text">
|
|
<div class="icon-preview-name" id="preview-name">App Name</div>
|
|
<div class="icon-preview-url" id="preview-url">http://localhost</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="app-form">
|
|
<div class="form-group">
|
|
<label class="form-label">Name</label>
|
|
<input type="text" class="form-input" id="app-name" placeholder="My Application" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">URL (use :PORT for local services)</label>
|
|
<input type="text" class="form-input" id="app-url" placeholder=":3000 or https://example.com" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Icon (Font Awesome class)</label>
|
|
<input type="text" class="form-input" id="app-icon" placeholder="fa-rocket" value="fa-question">
|
|
</div>
|
|
|
|
<details>
|
|
<summary>Corner Badge (Optional)</summary>
|
|
<div class="form-group">
|
|
<label class="form-label">Badge Icon (Font Awesome class)</label>
|
|
<input type="text" class="form-input" id="badge-icon" placeholder="fa-download">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Badge URL</label>
|
|
<input type="text" class="form-input" id="badge-url" placeholder=":3000 or https://example.com">
|
|
</div>
|
|
</details>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" id="cancel-btn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submit-btn">Add App</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="notification-bar.js"></script>
|
|
<script>
|
|
const APPS_KEY = 'dashboard-apps';
|
|
const DEFAULT_APPS = [
|
|
{ name: 'AI Assistant', url: ':1000', icon: 'fa-robot' },
|
|
{ name: 'ATAK', url: ':1100', icon: 'fa-shield-halved', badge: 'fa-download' },
|
|
{ name: 'Code Book', url: '/code-book.html', icon: 'fa-lock', badge: 'fa-download', badgeAction: 'saveCodeBook' },
|
|
{ name: 'Desktop', url: ':1200', icon: 'fa-desktop', badge: 'fa-download' },
|
|
{ name: 'File Browser', url: ':1300', icon: 'fa-folder' },
|
|
{ name: 'Library', url: ':1400', icon: 'fa-book', badge: 'fa-cog', badgeAction: 'openKiwix' },
|
|
{ name: 'Maps', url: ':1500', icon: 'fa-map' },
|
|
{ name: 'Meshtastic', url: ':1600', icon: 'fa-satellite-dish', badge: 'fa-download' },
|
|
{ name: 'Messages', url: ':1700', icon: 'fa-comments', badge: 'fa-download' },
|
|
{ name: 'Pentesting', url: ':1800', icon: 'fa-user-secret' },
|
|
{ name: 'SDR', url: ':1900', icon: 'fa-broadcast-tower', badge: 'fa-download' },
|
|
{ name: 'Intelligence', url: ':2000', icon: 'fa-eye' },
|
|
{ name: 'Speed Test', url: ':2100', icon: 'fa-gauge-high' }
|
|
];
|
|
|
|
class AppManager {
|
|
constructor() {
|
|
this.apps = this.loadApps();
|
|
this.editingIndex = null;
|
|
this.longPressTimer = null;
|
|
this.init();
|
|
}
|
|
|
|
loadApps() {
|
|
const saved = localStorage.getItem(APPS_KEY);
|
|
return saved ? JSON.parse(saved) : DEFAULT_APPS;
|
|
}
|
|
|
|
saveApps() {
|
|
localStorage.setItem(APPS_KEY, JSON.stringify(this.apps));
|
|
}
|
|
|
|
init() {
|
|
this.renderApps();
|
|
this.initializeSearch();
|
|
this.initializeModal();
|
|
this.initializeContextMenu();
|
|
this.convertPortLinks();
|
|
}
|
|
|
|
convertPortLinks() {
|
|
document.querySelectorAll('.app-item[href^=":"]').forEach(link => {
|
|
const port = link.getAttribute('href').substring(1);
|
|
const url = new URL(location.origin);
|
|
url.port = port;
|
|
link.href = url.toString();
|
|
});
|
|
}
|
|
|
|
renderApps() {
|
|
const grid = document.getElementById('apps-grid');
|
|
grid.innerHTML = this.apps.map((app, index) => `
|
|
<a href="${app.url}" class="app-item" data-name="${app.name}" data-index="${index}">
|
|
<div class="app-icon-wrapper">
|
|
<i class="fas ${app.icon} app-icon"></i>
|
|
${app.badge ? `
|
|
<div class="app-badge" onclick="window.handleBadgeClick(event, '${app.badgeAction || ''}', '${app.badgeUrl || ''}')">
|
|
<i class="fas ${app.badge}"></i>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
<div class="app-name">${app.name}</div>
|
|
</a>
|
|
`).join('');
|
|
this.convertPortLinks();
|
|
this.attachAppListeners();
|
|
}
|
|
|
|
attachAppListeners() {
|
|
const apps = document.querySelectorAll('.app-item');
|
|
apps.forEach(app => {
|
|
// Right click
|
|
app.addEventListener('contextmenu', (e) => {
|
|
e.preventDefault();
|
|
const index = parseInt(app.dataset.index);
|
|
this.showContextMenu(e.pageX, e.pageY, index);
|
|
});
|
|
|
|
// Long press
|
|
app.addEventListener('touchstart', (e) => {
|
|
this.longPressTimer = setTimeout(() => {
|
|
const index = parseInt(app.dataset.index);
|
|
const rect = app.getBoundingClientRect();
|
|
this.showContextMenu(rect.left + rect.width / 2, rect.top + rect.height / 2, index);
|
|
}, 500);
|
|
});
|
|
|
|
app.addEventListener('touchend', () => {
|
|
clearTimeout(this.longPressTimer);
|
|
});
|
|
|
|
app.addEventListener('touchmove', () => {
|
|
clearTimeout(this.longPressTimer);
|
|
});
|
|
});
|
|
}
|
|
|
|
showContextMenu(x, y, index) {
|
|
const menu = document.getElementById('context-menu');
|
|
menu.dataset.index = index;
|
|
|
|
// Position menu
|
|
menu.style.left = x + 'px';
|
|
menu.style.top = y + 'px';
|
|
menu.classList.add('active');
|
|
|
|
// Adjust if off screen
|
|
const rect = menu.getBoundingClientRect();
|
|
if (rect.right > window.innerWidth) {
|
|
menu.style.left = (x - rect.width) + 'px';
|
|
}
|
|
if (rect.bottom > window.innerHeight) {
|
|
menu.style.top = (y - rect.height) + 'px';
|
|
}
|
|
}
|
|
|
|
hideContextMenu() {
|
|
document.getElementById('context-menu').classList.remove('active');
|
|
}
|
|
|
|
initializeContextMenu() {
|
|
const menu = document.getElementById('context-menu');
|
|
const editBtn = document.getElementById('context-edit');
|
|
const deleteBtn = document.getElementById('context-delete');
|
|
|
|
editBtn.addEventListener('click', () => {
|
|
const index = parseInt(menu.dataset.index);
|
|
this.editApp(index);
|
|
this.hideContextMenu();
|
|
});
|
|
|
|
deleteBtn.addEventListener('click', () => {
|
|
const index = parseInt(menu.dataset.index);
|
|
this.deleteApp(index);
|
|
this.hideContextMenu();
|
|
});
|
|
|
|
// Close menu on click outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!menu.contains(e.target)) {
|
|
this.hideContextMenu();
|
|
}
|
|
});
|
|
}
|
|
|
|
editApp(index) {
|
|
this.editingIndex = index;
|
|
const app = this.apps[index];
|
|
|
|
document.getElementById('modal-title').textContent = 'Edit Application';
|
|
document.getElementById('submit-btn').textContent = 'Save';
|
|
document.getElementById('app-name').value = app.name;
|
|
document.getElementById('app-url').value = app.url;
|
|
document.getElementById('app-icon').value = app.icon;
|
|
document.getElementById('badge-icon').value = app.badge || '';
|
|
document.getElementById('badge-url').value = app.badgeUrl || '';
|
|
|
|
this.updatePreview();
|
|
document.getElementById('app-modal').classList.add('active');
|
|
}
|
|
|
|
deleteApp(index) {
|
|
if (confirm(`Delete "${this.apps[index].name}"?`)) {
|
|
this.apps.splice(index, 1);
|
|
this.saveApps();
|
|
this.renderApps();
|
|
}
|
|
}
|
|
|
|
initializeSearch() {
|
|
const searchInput = document.getElementById('search-input');
|
|
const appsGrid = document.getElementById('apps-grid');
|
|
|
|
searchInput.addEventListener('input', (e) => {
|
|
const query = e.target.value.toLowerCase();
|
|
const apps = appsGrid.querySelectorAll('.app-item');
|
|
|
|
apps.forEach(app => {
|
|
const name = app.getAttribute('data-name')?.toLowerCase() || '';
|
|
app.style.display = name.includes(query) ? 'flex' : 'none';
|
|
});
|
|
});
|
|
}
|
|
|
|
initializeModal() {
|
|
const modal = document.getElementById('app-modal');
|
|
const addBtn = document.getElementById('add-app-btn');
|
|
const closeBtn = document.getElementById('modal-close');
|
|
const cancelBtn = document.getElementById('cancel-btn');
|
|
const form = document.getElementById('app-form');
|
|
const nameInput = document.getElementById('app-name');
|
|
const urlInput = document.getElementById('app-url');
|
|
const iconInput = document.getElementById('app-icon');
|
|
|
|
addBtn.addEventListener('click', () => {
|
|
this.editingIndex = null;
|
|
document.getElementById('modal-title').textContent = 'Add Application';
|
|
document.getElementById('submit-btn').textContent = 'Add App';
|
|
form.reset();
|
|
iconInput.value = 'fa-question';
|
|
this.updatePreview();
|
|
modal.classList.add('active');
|
|
});
|
|
|
|
closeBtn.addEventListener('click', () => modal.classList.remove('active'));
|
|
cancelBtn.addEventListener('click', () => modal.classList.remove('active'));
|
|
|
|
nameInput.addEventListener('input', () => this.updatePreview());
|
|
urlInput.addEventListener('input', () => this.updatePreview());
|
|
iconInput.addEventListener('input', () => this.updatePreview());
|
|
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const badgeIcon = document.getElementById('badge-icon').value.trim();
|
|
const badgeUrl = document.getElementById('badge-url').value.trim();
|
|
|
|
const app = {
|
|
name: nameInput.value,
|
|
url: urlInput.value,
|
|
icon: iconInput.value || 'fa-question'
|
|
};
|
|
|
|
if (badgeIcon) {
|
|
app.badge = badgeIcon;
|
|
if (badgeUrl) {
|
|
app.badgeUrl = badgeUrl;
|
|
}
|
|
}
|
|
|
|
if (this.editingIndex !== null) {
|
|
// Preserve badgeAction if it exists
|
|
if (this.apps[this.editingIndex].badgeAction) {
|
|
app.badgeAction = this.apps[this.editingIndex].badgeAction;
|
|
}
|
|
this.apps[this.editingIndex] = app;
|
|
} else {
|
|
this.apps.push(app);
|
|
}
|
|
|
|
this.saveApps();
|
|
this.renderApps();
|
|
modal.classList.remove('active');
|
|
});
|
|
}
|
|
|
|
updatePreview() {
|
|
const name = document.getElementById('app-name').value || 'App Name';
|
|
const url = document.getElementById('app-url').value || 'http://localhost';
|
|
const icon = document.getElementById('app-icon').value || 'fa-question';
|
|
document.getElementById('preview-name').textContent = name;
|
|
document.getElementById('preview-url').textContent = url;
|
|
document.getElementById('preview-icon').className = `fas ${icon}`;
|
|
}
|
|
}
|
|
|
|
window.handleBadgeClick = (event, action, badgeUrl) => {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
if (badgeUrl) {
|
|
if (badgeUrl.startsWith(':')) {
|
|
const port = badgeUrl.substring(1);
|
|
const url = new URL(location.origin);
|
|
url.port = port;
|
|
window.location.href = url.toString();
|
|
} else {
|
|
window.location.href = badgeUrl;
|
|
}
|
|
} else if (action === 'saveCodeBook') {
|
|
window.location.href = '/code-book-print.html';
|
|
} else if (action === 'openKiwix') {
|
|
window.location.href = window.location.origin.replace(/:\d+/g, '') + ':1400/admin';
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new AppManager();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|