devlab/server-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add download modal with app summary and progress bar for APK download

Browse Source
This commit is contained in:
Agent
2026-06-14 09:52:18 -04:00
parent f48a5a5495
commit 5453a5d856
2 changed files with 95 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
public/assets/js/main.js
View File

@@ -243,3 +243,61 @@ function closeUserMenu(e) {
document.removeEventListener('click', closeUserMenu);
}
}
function showDownloadModal() {
document.getElementById('downloadModal').style.display = 'flex';
document.getElementById('downloadProgressWrap').style.display = 'none';
document.getElementById('downloadConfirmBtn').disabled = false;
document.getElementById('downloadConfirmBtn').innerHTML = '<i class="fas fa-download"></i> Download APK';
document.getElementById('downloadProgressBar').style.width = '0%';
document.getElementById('downloadPercent').textContent = '0%';
}
function closeDownloadModal() {
document.getElementById('downloadModal').style.display = 'none';
}
function startDownload() {
const btn = document.getElementById('downloadConfirmBtn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Downloading...';
document.getElementById('downloadProgressWrap').style.display = 'block';
document.getElementById('downloadModalFooter').style.display = 'none';
const xhr = new XMLHttpRequest();
xhr.open('GET', '/sysadmin.apk', true);
xhr.responseType = 'blob';
xhr.onprogress = function(e) {
if (e.lengthComputable) {
const pct = Math.round((e.loaded / e.total) * 100);
document.getElementById('downloadProgressBar').style.width = pct + '%';
document.getElementById('downloadPercent').textContent = pct + '%';
}
};
xhr.onload = function() {
if (xhr.status === 200) {
const url = URL.createObjectURL(xhr.response);
const a = document.createElement('a');
a.href = url;
a.download = 'sysadmin.apk';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
setTimeout(closeDownloadModal, 1000);
} else {
showToast('error', 'Download failed.');
closeDownloadModal();
}
};
xhr.onerror = function() {
showToast('error', 'Download failed.');
closeDownloadModal();
};
xhr.send();
}

38
views/layouts/main.php
View File

@@ -78,7 +78,7 @@ if (!isset($user) || $user === null) {
<!-- Mobile -->
<hr class="nav-divider">
<div class="nav-section">Mobile</div>
<a href="/sysadmin.apk" class="nav-item" download>
<a href="#" class="nav-item" onclick="showDownloadModal(); return false;">
<i class="fas fa-download"></i>
<span>Download APK</span>
</a>
@@ -168,6 +168,42 @@ if (!isset($user) || $user === null) {
<div id="toastContainer" class="toast-container"></div>
<!-- Download Modal -->
<div class="modal" id="downloadModal" onclick="if (event.target === this) closeDownloadModal()">
<div class="modal-dialog" style="max-width: 440px;">
<div class="modal-header">
<h3><i class="fas fa-download" style="color:var(--accent);margin-right:0.5rem"></i>Download ServerManager</h3>
<button class="modal-close" onclick="closeDownloadModal()">&times;</button>
</div>
<div class="modal-body">
<p style="margin-bottom:1rem;font-size:0.92rem;line-height:1.6">
The Android companion app lets you manage your servers on the go:
</p>
<ul style="list-style:none;padding:0;margin:0 0 1.25rem;font-size:0.88rem;display:flex;flex-direction:column;gap:0.6rem">
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Monitor server status and metrics</li>
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Receive push notifications for alerts</li>
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Execute commands remotely</li>
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Manage services and processes</li>
</ul>
<div id="downloadProgressWrap" style="display:none">
<div style="display:flex;justify-content:space-between;font-size:0.8rem;color:var(--text-muted);margin-bottom:0.3rem">
<span>Downloading...</span>
<span id="downloadPercent">0%</span>
</div>
<div style="height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden">
<div id="downloadProgressBar" style="height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:3px;transition:width 0.3s ease"></div>
</div>
</div>
</div>
<div class="modal-footer" id="downloadModalFooter">
<button class="btn btn-secondary" onclick="closeDownloadModal()">Cancel</button>
<button class="btn btn-primary" id="downloadConfirmBtn" onclick="startDownload()">
<i class="fas fa-download"></i> Download APK
</button>
</div>
</div>
</div>
<script src="/assets/js/app.js?v=<?= asset_version() ?>"></script>
<?php if (isset($scripts)): ?>
<?php foreach ($scripts as $script): ?>