DungTT/ManagerAccount
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
Tran Tien Dung
2026-03-26 13:47:46 +07:00
commit 56ab9f931e
11 changed files with 2912 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

575
applications.html Normal file
View File

@@ -0,0 +1,575 @@
<!DOCTYPE html>
<html class="light" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>VaultSentinel - Applications Management</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"on-secondary-fixed-variant": "#4e5c71",
"on-secondary": "#f8f8ff",
"secondary-fixed-dim": "#c7d5ed",
"surface-variant": "#d9e4ea",
"surface-tint": "#3755c3",
"primary-container": "#dde1ff",
"primary-dim": "#2848b7",
"on-background": "#2a3439",
"surface-container-lowest": "#ffffff",
"tertiary-fixed-dim": "#d4cdee",
"on-tertiary-container": "#514d68",
"error-container": "#fe8983",
"on-secondary-container": "#455367",
"outline": "#717c82",
"on-primary": "#f8f7ff",
"on-primary-container": "#2747b6",
"inverse-primary": "#6d89fa",
"on-surface": "#2a3439",
"primary-fixed": "#dde1ff",
"on-primary-fixed": "#0732a3",
"secondary-dim": "#465468",
"surface-container-high": "#e1e9ee",
"surface-container-highest": "#d9e4ea",
"on-primary-fixed-variant": "#3352c0",
"on-error-container": "#752121",
"secondary": "#526074",
"tertiary-fixed": "#e3dbfd",
"primary": "#3755c3",
"surface-dim": "#cfdce3",
"tertiary": "#605c78",
"on-error": "#fff7f6",
"secondary-fixed": "#d5e3fc",
"error-dim": "#4e0309",
"surface-bright": "#f7f9fb",
"on-surface-variant": "#566166",
"on-tertiary": "#fcf7ff",
"tertiary-container": "#e3dbfd",
"inverse-on-surface": "#9a9d9f",
"on-tertiary-fixed-variant": "#5b5672",
"tertiary-dim": "#54506b",
"outline-variant": "#a9b4b9",
"on-secondary-fixed": "#324053",
"inverse-surface": "#0b0f10",
"on-tertiary-fixed": "#3e3a54",
"primary-fixed-dim": "#cad2ff",
"surface-container": "#e8eff3",
"secondary-container": "#d5e3fc",
"surface-container-low": "#f0f4f7",
"background": "#f7f9fb",
"error": "#9f403d",
"surface": "#f7f9fb"
},
fontFamily: {
"headline": ["Manrope"],
"body": ["Inter"],
"label": ["Inter"]
},
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
font-size: 1.25rem;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-flex;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
body { font-family: 'Inter', sans-serif; overflow: hidden; height: 100vh; }
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
.modal-backdrop {
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
display: none;
}
.modal-backdrop.open {
display: flex !important;
opacity: 1;
pointer-events: auto;
}
</style>
</head>
<body class="bg-background text-on-surface antialiased flex h-screen w-screen">
<!-- SideNavBar (shared with all pages) -->
<aside class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
<div class="flex flex-col h-full py-6">
<!-- Header -->
<div class="px-6 mb-8">
<div class="text-lg font-black text-slate-900 dark:text-slate-50 tracking-tight leading-none">VaultSentinel</div>
<div class="text-[10px] uppercase tracking-widest text-on-surface-variant mt-1.5 font-bold">Admin Console</div>
</div>
<!-- Primary Nav -->
<nav class="flex-1 px-3 space-y-1">
<a href="index.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
<span class="material-symbols-outlined">dashboard</span>
<span>Dashboard</span>
</a>
<a href="applications.html" class="flex items-center gap-3 px-3 py-2 border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold transition-all group cursor-pointer">
<span class="material-symbols-outlined">apps</span>
<span>Applications</span>
</a>
<a href="accounts.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
<span class="material-symbols-outlined">manage_accounts</span>
<span>Accounts</span>
</a>
</nav>
<!-- Footer -->
<div class="px-6 pt-4 border-t border-outline-variant/10">
<div class="text-[10px] font-bold text-on-surface-variant/40 uppercase tracking-widest">v1.0.0</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col h-screen min-w-0">
<!-- TopAppBar -->
<header class="h-14 flex items-center justify-between px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-outline-variant/10 shrink-0">
<div class="flex items-center gap-4 flex-1">
<div class="flex items-center bg-surface-container-high px-3 py-1.5 rounded-full w-64 group focus-within:ring-2 ring-primary/20 transition-all">
<span class="material-symbols-outlined text-on-surface-variant text-base">search</span>
<input id="searchInput" class="bg-transparent border-none focus:ring-0 text-xs w-full placeholder:text-on-surface-variant/60 py-0" placeholder="Search resources..." type="text"/>
</div>
</div>
<div class="flex items-center gap-3">
<button class="p-1.5 rounded-full text-slate-500 hover:bg-slate-200 transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-1.5 rounded-full text-slate-500 hover:bg-slate-200 transition-colors">
<span class="material-symbols-outlined">settings</span>
</button>
</div>
</header>
<!-- Content Area -->
<div class="flex-1 flex flex-col p-6 space-y-6 min-h-0 overflow-auto">
<div class="flex items-center justify-between gap-6 mb-6 shrink-0">
<div>
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight">Applications</h2>
<p class="text-sm text-on-surface-variant">Manage and monitor active infrastructure services.</p>
</div>
<button id="addAppBtn" class="bg-primary hover:bg-primary-dim text-on-primary px-4 py-2 rounded-xl font-bold flex items-center gap-2 transition-all active:scale-95 shadow-sm">
<span class="material-symbols-outlined">add</span>
Add New
</button>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-4 mb-6 shrink-0">
<div class="bg-surface-container-lowest px-4 py-3 rounded-xl shadow-sm border border-outline-variant/5 flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-xl">lan</span>
</div>
<div>
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Active</p>
<p class="text-lg font-black text-on-surface" id="activeCount">0</p>
</div>
</div>
<div class="bg-surface-container-lowest px-4 py-3 rounded-xl shadow-sm border border-outline-variant/5 flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-tertiary/10 flex items-center justify-center text-tertiary">
<span class="material-symbols-outlined text-xl">bolt</span>
</div>
<div>
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Total</p>
<p class="text-lg font-black text-on-surface" id="totalCount">0</p>
</div>
</div>
<div class="bg-surface-container-lowest px-4 py-3 rounded-xl shadow-sm border border-outline-variant/5 flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
<span class="material-symbols-outlined text-xl">database</span>
</div>
<div>
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Health</p>
<p class="text-lg font-black text-on-surface">99.9%</p>
</div>
</div>
</div>
<!-- Applications Table -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden flex flex-col flex-1 min-h-0">
<div class="px-6 py-3 flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-low/20 shrink-0">
<h3 class="text-sm font-bold text-on-surface uppercase tracking-wider">Registered Services</h3>
<div class="relative">
<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-on-surface-variant text-base">search</span>
<input id="searchInput" class="pl-8 pr-3 py-1.5 bg-surface-container-low border-none rounded-lg text-xs focus:ring-1 focus:ring-primary/40 w-48" placeholder="Filter..." type="text"/>
</div>
</div>
<div class="overflow-y-auto flex-1">
<table class="w-full text-left border-collapse">
<thead class="sticky top-0 bg-surface-container-lowest z-10">
<tr class="bg-surface-container-low/30 border-b border-outline-variant/10">
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Name</th>
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Type</th>
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Status</th>
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest text-right">Actions</th>
</tr>
</thead>
<tbody id="appList" class="divide-y divide-outline-variant/5">
<!-- Apps will be inserted here -->
</tbody>
</table>
</div>
</div>
</div> <!-- End Content Area -->
</main>
<!-- Add/Edit App Modal -->
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px] hidden" id="appModal">
<div class="w-full max-w-[640px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden m-4">
<!-- Modal Header -->
<div class="px-8 py-6 border-b border-surface-container flex justify-between items-start">
<div>
<span class="text-[0.625rem] font-bold uppercase tracking-[0.1em] text-on-surface-variant block mb-1">Application Management</span>
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight" id="appModalTitle">Add New Application</h2>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors text-on-surface-variant" onclick="closeModal()">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<!-- Modal Content -->
<form id="appForm" class="p-8 space-y-6">
<div>
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1 block mb-2">Application Name</label>
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">apps</span>
<input type="text" id="appName" class="flex-1 bg-transparent border-none focus:ring-0 text-sm font-medium text-on-surface placeholder:text-on-surface-variant/60 p-0" required placeholder="AWS Services">
</div>
</div>
<div>
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1 block mb-2">Type</label>
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">category</span>
<input type="text" id="appType" class="flex-1 bg-transparent border-none focus:ring-0 text-sm font-medium text-on-surface placeholder:text-on-surface-variant/60 p-0" required placeholder="Cloud">
</div>
</div>
<div>
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1 block mb-2">Status</label>
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">check_circle</span>
<select id="appStatus" class="flex-1 bg-transparent border-none focus:ring-0 text-sm font-medium text-on-surface p-0">
<option value="online">Online</option>
<option value="offline">Offline</option>
</select>
</div>
</div>
</form>
<!-- Modal Footer -->
<div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3">
<button class="px-5 h-11 text-sm font-bold text-on-surface-variant hover:bg-surface-container transition-all rounded-lg" onclick="closeModal()">
Close
</button>
<button onclick="document.getElementById('appForm').dispatchEvent(new Event('submit'))" class="px-6 h-11 text-sm font-bold text-on-primary bg-gradient-to-br from-primary to-primary-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-base">save</span>
Save Application
</button>
</div>
</div>
</div>
<!-- View App Details Modal -->
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px] hidden" id="viewAppModal">
<div class="w-full max-w-[640px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden m-4">
<!-- Modal Header -->
<div class="px-8 py-6 border-b border-surface-container flex justify-between items-start">
<div>
<span class="text-[0.625rem] font-bold uppercase tracking-[0.1em] text-on-surface-variant block mb-1">Application Details</span>
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight" id="viewAppName">Application Name</h2>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors text-on-surface-variant" onclick="closeViewModal()">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<!-- Modal Content -->
<div class="p-8 space-y-6">
<!-- Service Info Section -->
<div class="flex items-center gap-5 p-5 bg-surface-container-low rounded-xl">
<div class="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center">
<span class="material-symbols-outlined text-primary text-3xl" id="viewAppIcon">apps</span>
</div>
<div class="flex-1">
<div class="text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-0.5">Application Type</div>
<div class="text-xl font-bold text-on-surface" id="viewAppType">-</div>
</div>
<div>
<span class="px-3 py-1 text-[0.7rem] font-bold rounded-full uppercase tracking-tighter" id="viewAppStatusBadge">Offline</span>
</div>
</div>
<!-- Details Grid -->
<div class="space-y-4">
<div>
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant block mb-2">Status</label>
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg">
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">check_circle</span>
<span class="text-sm font-medium text-on-surface" id="viewAppStatusText">Online</span>
</div>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3">
<button class="px-5 h-11 text-sm font-bold text-on-surface-variant hover:bg-surface-container transition-all rounded-lg" onclick="closeViewModal()">
Close
</button>
<button onclick="editCurrentApp()" class="px-6 h-11 text-sm font-bold text-on-primary bg-gradient-to-br from-primary to-primary-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-base">edit</span>
Edit Application
</button>
</div>
</div>
</div>
<!-- Delete Confirm Modal -->
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px] hidden" id="deleteConfirmModal">
<div class="w-full max-w-[480px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden m-4">
<!-- Modal Header -->
<div class="px-8 py-6 border-b border-surface-container bg-error/5">
<h3 class="text-base font-extrabold text-error flex items-center gap-2">
<span class="material-symbols-outlined">warning</span>
Delete Application
</h3>
</div>
<!-- Modal Content -->
<div class="px-8 py-6">
<p class="text-sm text-on-surface-variant">Are you sure you want to delete <strong id="deleteAppName" class="text-on-surface"></strong>? This action cannot be undone.</p>
</div>
<!-- Modal Footer -->
<div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3">
<button class="px-5 h-11 text-sm font-bold text-on-surface-variant hover:bg-surface-container transition-all rounded-lg" onclick="closeDeleteModal()">
Cancel
</button>
<button onclick="confirmDelete()" class="px-6 h-11 text-sm font-bold text-on-error bg-gradient-to-br from-error to-error-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-base">delete</span>
Delete
</button>
</div>
</div>
</div>
<script>
class AppManager {
constructor() {
this.applications = this.loadApps() || [
{ id: 1, name: 'AWS', type: 'Cloud', status: 'online', icon: 'cloud' },
{ id: 2, name: 'GitHub', type: 'VCS', status: 'online', icon: 'code' },
{ id: 3, name: 'Google Workspace', type: 'Collaboration', status: 'online', icon: 'mail' },
{ id: 4, name: 'Nginx Proxy', type: 'Infra', status: 'offline', icon: 'dns' },
];
this.init();
}
init() {
this.render();
this.setupEventListeners();
}
setupEventListeners() {
document.getElementById('addAppBtn').addEventListener('click', () => this.openModal());
document.getElementById('appForm').addEventListener('submit', (e) => this.handleSubmit(e));
document.getElementById('searchInput').addEventListener('input', (e) => this.filterApps(e.target.value));
}
render() {
this.updateStats();
this.renderTable(this.applications);
this.setupDeleteButtons();
}
updateStats() {
document.getElementById('activeCount').textContent = this.applications.filter(a => a.status === 'online').length;
document.getElementById('totalCount').textContent = this.applications.length;
}
renderTable(apps) {
const tbody = document.getElementById('appList');
tbody.innerHTML = apps.map((app, idx) => `
<tr class="hover:bg-surface-container-low/30 transition-colors">
<td class="px-6 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-surface-container-highest flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-sm">${app.icon}</span>
</div>
<span class="font-bold text-sm text-on-surface">${app.name}</span>
</div>
</td>
<td class="px-6 py-3">
<span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-surface-container-highest text-on-surface-variant">${app.type}</span>
</td>
<td class="px-6 py-3">
<div class="flex items-center gap-1.5">
<div class="w-1.5 h-1.5 rounded-full ${app.status === 'online' ? 'bg-primary' : 'bg-error'} ring-2 ${app.status === 'online' ? 'ring-primary/20' : 'ring-error/20'}"></div>
<span class="text-xs font-medium ${app.status === 'online' ? 'text-on-primary-fixed-variant' : 'text-error'}">${app.status === 'online' ? 'Online' : 'Offline'}</span>
</div>
</td>
<td class="px-6 py-3 text-right">
<button class="p-1.5 text-on-surface-variant hover:text-on-surface transition-colors view-app" data-idx="${idx}" title="View Details">
<span class="material-symbols-outlined text-lg">info</span>
</button>
<button class="p-1.5 text-on-surface-variant hover:text-primary transition-colors edit-app" data-idx="${idx}" title="Edit">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-1.5 text-on-surface-variant hover:text-error transition-colors delete-app" data-idx="${idx}" title="Delete">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</td>
</tr>
`).join('');
}
setupDeleteButtons() {
document.querySelectorAll('.view-app').forEach(btn => {
btn.addEventListener('click', () => {
const idx = btn.dataset.idx;
const app = this.applications[idx];
window.currentViewApp = app;
window.currentViewAppIdx = idx;
document.getElementById('viewAppName').textContent = app.name;
document.getElementById('viewAppType').textContent = app.type;
document.getElementById('viewAppStatusText').textContent = app.status === 'online' ? 'Online' : 'Offline';
document.getElementById('viewAppStatusBadge').textContent = app.status === 'online' ? 'Online' : 'Offline';
document.getElementById('viewAppStatusBadge').className = 'px-3 py-1 text-[0.7rem] font-bold rounded-full uppercase tracking-tighter ' + (app.status === 'online' ? 'bg-primary/15 text-primary' : 'bg-error/15 text-error');
document.getElementById('viewAppModal').classList.add('open');
});
});
document.querySelectorAll('.delete-app').forEach(btn => {
btn.addEventListener('click', () => {
const idx = btn.dataset.idx;
const app = this.applications[idx];
window.pendingDeleteIdx = idx;
document.getElementById('deleteAppName').textContent = app.name;
document.getElementById('deleteConfirmModal').classList.add('open');
});
});
document.querySelectorAll('.edit-app').forEach(btn => {
btn.addEventListener('click', () => {
const idx = btn.dataset.idx;
const app = this.applications[idx];
document.getElementById('appName').value = app.name;
document.getElementById('appType').value = app.type;
document.getElementById('appStatus').value = app.status;
document.getElementById('appModalTitle').textContent = 'Edit Application';
this.editingIdx = idx;
this.openModal();
});
});
}
filterApps(query) {
const filtered = this.applications.filter(app =>
app.name.toLowerCase().includes(query.toLowerCase()) ||
app.type.toLowerCase().includes(query.toLowerCase())
);
this.renderTable(filtered);
this.setupDeleteButtons();
}
handleSubmit(e) {
e.preventDefault();
const app = {
name: document.getElementById('appName').value,
type: document.getElementById('appType').value,
status: document.getElementById('appStatus').value,
icon: 'cloud'
};
if (this.editingIdx !== undefined) {
this.applications[this.editingIdx] = app;
this.editingIdx = undefined;
} else {
this.applications.push(app);
}
this.saveApps();
this.closeModal();
this.render();
}
openModal() {
if (this.editingIdx === undefined) {
document.getElementById('appForm').reset();
document.getElementById('appModalTitle').textContent = 'Add New Application';
}
document.getElementById('appModal').classList.add('open');
}
closeModal() {
document.getElementById('appModal').classList.remove('open');
this.editingIdx = undefined;
}
loadApps() {
return JSON.parse(localStorage.getItem('applications'));
}
saveApps() {
localStorage.setItem('applications', JSON.stringify(this.applications));
}
}
function closeModal() {
document.getElementById('appModal').classList.remove('open');
}
function closeDeleteModal() {
document.getElementById('deleteConfirmModal').classList.remove('open');
window.pendingDeleteIdx = null;
}
function confirmDelete() {
const idx = window.pendingDeleteIdx;
if (idx !== null && idx !== undefined) {
appManager.applications.splice(idx, 1);
appManager.saveApps();
appManager.render();
closeDeleteModal();
}
}
function closeViewModal() {
document.getElementById('viewAppModal').classList.remove('open');
}
function editCurrentApp() {
const idx = window.currentViewAppIdx;
const app = window.currentViewApp;
closeViewModal();
document.getElementById('appName').value = app.name;
document.getElementById('appType').value = app.type;
document.getElementById('appStatus').value = app.status;
document.getElementById('appModalTitle').textContent = 'Edit Application';
appManager.editingIdx = idx;
appManager.openModal();
}
let appManager;
document.addEventListener('DOMContentLoaded', () => {
appManager = new AppManager();
});
</script>
</body>
</html>