safebox/web-installer
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 30 Wiki Activity

progress after install
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
hael
2025-08-04 14:49:55 +00:00
parent ff97952f67
commit a1aa1c0d14
3 changed files with 215 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
install.js Normal file
View File

@@ -0,0 +1,174 @@
function updateProgress(percentage) {
// Clamp percentage between 0 and 99.9 (never reach 100)
percentage = Math.max(0, Math.min(99.9, percentage));
progressBar.style.width = percentage + '%';
progressText.textContent = Math.round(percentage) + '%';
currentProgress = percentage;
}
function setProgress(percentage) {
clearInterval(progressInterval);
updateProgress(percentage);
startProgress();
}
function startProgress() {
clearInterval(progressInterval);
const duration = 60000; // 60 seconds
const startTime = Date.now() - (currentProgress / 100) * duration;
progressInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
// Use exponential approach to 100% - gets slower as it approaches
let progress = (1 - Math.exp(-4 * elapsed / duration)) * 100;
// Ensure it never reaches 100%
progress = Math.min(progress, 99.9);
updateProgress(progress);
// Stop when we've been running for 60+ seconds
if (elapsed >= duration) {
clearInterval(progressInterval);
}
}, 100); // Update every 100ms
}
function resetProgress() {
clearInterval(progressInterval);
updateProgress(0);
}
// Example: Simulate loading with custom speeds
function simulateLoading(duration = 3000) {
clearInterval(progressInterval);
const startTime = Date.now();
progressInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
const progress = Math.min((elapsed / duration) * 100, 99.9);
updateProgress(progress);
if (elapsed >= duration) {
clearInterval(progressInterval);
}
}, 16); // ~60fps
}
function redirectToInstall() {
setProgress(100);
window.location.href = 'install.html';
}
function redirectToManage() {
setProgress(100);
// window.location.href = 'manage.html';
}
function start_system() {
var url = 'scan.php?op=system';
$.get(url, function(data){
console.log('start_system: '+data);
if (data=='OK') {
$("#info").html('Scanning for previous install. Please wait...');
check_system();
}
else {
$("#info").html('Scanning for previous install has aborted...');
}
});
}
function check_system() {
var url = 'scan.php?op=check_system';
$.get(url, function(data){
console.log('check_system: '+data);
if (data=='NEW') {
$("#info").html('No previous install has found...');
setTimeout(redirectToInstall, 3000);
}
else if (data=='EXISTS') {
$("#info").html('Previous install has found...');
setProgress(80);
setTimeout(redirectToManage, 3000);
}
else if (data=='WAIT') {
setTimeout(check_system, 1000);
}
else {
// UNEXPECTED ERROR
}
});
}
function check_redis() {
var url = 'scan.php?op=redis';
$.get(url, function(data){
console.log('check_redis: '+data);
if (data=='OK') {
$("#info").html('Redis server - OK');
check_install();
}
else {
$("#info").html('Redis server is not available...');
setTimeout(check_redis, 1000);
}
});
}
function check_directory() {
var url = 'scan.php?op=directory';
$.get(url, function(data){
console.log('check_directory: '+data);
if (data=='OK') {
$("#info").html('Connection is ready - OK');
check_install();
}
else {
$("#info").html('Shared directory is not available...');
}
});
}
function check_interface() {
var url = 'scan.php?op=get_interface';
$.get(url, function(data){
console.log('check_interface: '+data);
if (data=='redis') {
check_redis();
}
else if (data=='directory') {
check_directory();
}
else {
$("#info").html('Invalid interface definition...');
}
});
}
function check_install() {
console.log('install: '+install);
if (install==1) {
var url = 'scan.php?op=check_install&key=<?php echo $key;?>';
$.get(url, function(data){
console.log('check_install:'+data+' counter: '+counter);
if (data=='INSTALLED') {
redirectToManage();
}
else {
counter+=1
$("#info").html('Please wait ... ' + counter);
setTimeout(check_install, 1000);
}
});
}
else start_system(); // scan
}

124
install.php
View File

@@ -61,106 +61,54 @@ echo "<pre>".$output."</pre>";
//echo $output; //echo $output;
*/ */
?> ?><!DOCTYPE html>
<!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <meta charset="UTF-8" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Safebox - INSTALLER TOOL</title>
<title>INSTALLER TOOL</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="style.css?t=4" />
<!-- Custom styles for this template -->
<link href="installer.css?t=1" rel="stylesheet">
</head> </head>
<body id="install" class="text-center"> <body id="install" class="text-center">
<div class="container-fluid"> <div class="main">
<div class="col-md-12"> <div id="myAppsContainer">
<h1><?php echo $header_text?></h1> <div class="logo" style="margin-top:100px">
<div id="redis"></div> <img src="/img/logo.png" alt="Safebox"/>
<div id="response"></div> <span>Safebox</span>
</div> </div>
</div> <div class="progress-box">
<div class="progress-title"><?php echo $header_text?></div>
<div class="progress-description" id="info"></div>
<div class="progress-container-shadow">
</div>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
<div class="progress-text" id="progressText">0%</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="install.js?t=6"></script>
<script> <script>
$(function() { const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
let currentProgress = 0;
let progressInterval;
let install = 1;
function redirectToManage() { // Initialize
window.location.href = 'manage.html'; updateProgress(0);
} startProgress();
function check_install() { check_interface();
counter=0;
var url = 'scan.php?op=check_install&key=<?php echo $key;?>';
$.get(url, function(data){
console.log('check_install:'+data+' counter: '+counter);
if (data=='INSTALLED') {
redirectToManage();
}
else {
counter+=1
$("#response").html('Please wait... ' + counter);
setTimeout(check_install, 1000);
}
});
}
function check_redis() {
var url = 'scan.php?op=redis';
$.get(url, function(data){
console.log('check_redis: '+data);
if (data=='OK') {
$("#redis").html('Redis server - OK');
check_install();
}
else {
$("#redis").html('Redis server is not available...');
setTimeout(check_redis, 1000);
}
});
}
function check_directory() {
var url = 'scan.php?op=directory';
$.get(url, function(data){
console.log('check_directory: '+data);
if (data=='OK') {
$("#redis").html('Connection is ready - OK');
check_install();
}
else {
$("#redis").html('Shared directory is not available...');
}
});
}
function check_interface() {
var url = 'scan.php?op=get_interface';
$.get(url, function(data){
console.log('check_interface: '+data);
if (data=='redis') {
check_redis();
}
else if (data=='directory') {
check_directory();
}
else {
$("#redis").html('Invalid interface definition...');
}
});
}
check_interface();
counter=0;
});
</script> </script>
</body> </body>
</html> </html>

159
scan.html
View File

@@ -25,11 +25,9 @@
<div class="progress-text" id="progressText">0%</div> <div class="progress-text" id="progressText">0%</div>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
<button onclick="document.location='install.html'" class="save-button">STOP AND START INSTALL</button> <button onclick="document.location='install.html'" class="save-button">STOP AND START INSTALL</button>
</div> </div>
</div> </div>
</div> </div>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
@@ -37,172 +35,19 @@
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="install.js?t=6"></script>
<script> <script>
const progressBar = document.getElementById('progressBar'); const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText'); const progressText = document.getElementById('progressText');
let currentProgress = 0; let currentProgress = 0;
let progressInterval; let progressInterval;
let install = 0; // scan
function updateProgress(percentage) {
// Clamp percentage between 0 and 99.9 (never reach 100)
percentage = Math.max(0, Math.min(99.9, percentage));
progressBar.style.width = percentage + '%';
progressText.textContent = Math.round(percentage) + '%';
currentProgress = percentage;
}
function setProgress(percentage) {
clearInterval(progressInterval);
updateProgress(percentage);
startProgress();
}
function startProgress() {
clearInterval(progressInterval);
const duration = 60000; // 60 seconds
const startTime = Date.now() - (currentProgress / 100) * duration;
progressInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
// Use exponential approach to 100% - gets slower as it approaches
let progress = (1 - Math.exp(-4 * elapsed / duration)) * 100;
// Ensure it never reaches 100%
progress = Math.min(progress, 99.9);
updateProgress(progress);
// Stop when we've been running for 60+ seconds
if (elapsed >= duration) {
clearInterval(progressInterval);
}
}, 100); // Update every 100ms
}
function resetProgress() {
clearInterval(progressInterval);
updateProgress(0);
}
// Example: Simulate loading with custom speeds
function simulateLoading(duration = 3000) {
clearInterval(progressInterval);
const startTime = Date.now();
progressInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
const progress = Math.min((elapsed / duration) * 100, 99.9);
updateProgress(progress);
if (elapsed >= duration) {
clearInterval(progressInterval);
}
}, 16); // ~60fps
}
function redirectToInstall() {
setProgress(100);
window.location.href = 'install.html';
}
function redirectToManage() {
setProgress(100);
window.location.href = 'manage.html';
}
function start_system() {
var url = 'scan.php?op=system';
$.get(url, function(data){
console.log('start_system: '+data);
if (data=='OK') {
$("#info").html('Scanning for previous install. Please wait...');
check_system();
}
else {
$("#info").html('Scanning for previous install has aborted...');
}
});
}
function check_system() {
var url = 'scan.php?op=check_system';
$.get(url, function(data){
console.log('check_system: '+data);
if (data=='NEW') {
$("#info").html('No previous install has found...');
setTimeout(redirectToInstall, 3000);
}
else if (data=='EXISTS') {
$("#info").html('Previous install has found...');
setProgress(80);
setTimeout(redirectToManage, 3000);
}
else if (data=='WAIT') {
setTimeout(check_system, 1000);
}
else {
// UNEXPECTED ERROR
}
});
}
function check_redis() {
var url = 'scan.php?op=redis';
$.get(url, function(data){
console.log('check_redis: '+data);
if (data=='OK') {
$("#info").html('Redis server - OK');
start_system();
}
else {
$("#info").html('Redis server is not available...');
setTimeout(check_redis, 1000);
}
});
}
function check_directory() {
var url = 'scan.php?op=directory';
$.get(url, function(data){
console.log('check_directory: '+data);
if (data=='OK') {
$("#info").html('Connection is ready - OK');
start_system();
}
else {
$("#info").html('Shared directory is not available...');
}
});
}
function check_interface() {
var url = 'scan.php?op=get_interface';
$.get(url, function(data){
console.log('check_interface: '+data);
if (data=='redis') {
check_redis();
}
else if (data=='directory') {
check_directory();
}
else {
$("#info").html('Invalid interface definition...');
}
});
}
// Initialize // Initialize
updateProgress(0); updateProgress(0);
startProgress(); startProgress();
check_interface(); check_interface();
</script> </script>
</body> </body>
</html> </html>