Skip to content

Added installation page logic #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paulotruta merged 4 commits into from
Mar 19, 2023
Merged

Added installation page logic #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
20b3e3e
Added installation page to display on unantended install when .instal…
paulotruta Mar 18, 2023
2976dc8
Updated gitignore
paulotruta Mar 18, 2023
25c0e5e
Some increments to the install page
paulotruta Mar 18, 2023
5dd053e
Replaced .install lockfile with installing.html
paulotruta Mar 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ module-configs/*
!module-configs/.gitkeep
docker-compose.yml
.ready
assets/.install
105 changes: 105 additions & 0 deletions assets/proxy_installing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>EdgeBox - 404 app not found</title>
<link rel="stylesheet" href="/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main class='container'>
<span class='particle'>🚀</span>
<span class='particle'>0%</span>
<span class='particle'>starting...</span>
<span class='particle'>0%</span>
<span class='particle'>😍</span>
<span class='particle'>0%</span>
<span class='particle'>getting ready...</span>
<span class='particle'>0%</span>
<span class='particle'>0%</span>
<span class='particle'>👋</span>
<span class='particle'>🚦%</span>
<span class='particle'>0%</span>
<span class='particle'>welcome!</span>
<span class='particle'>0%</span>
<span class='particle'>0%</span>
<span class='particle'>🤔</span>
<span class='particle'>0%</span>
<span class='particle'>0%</span>
<span class='particle'>thinking...</span>
<span class='particle'>0%</span>
<span class='particle'>🌟</span>
<span class='particle'>🤓</span>
<span class='particle'>🎉</span>
<span class='particle'>...</span>
<span class='particle'>...</span>
<span class='particle'>please wait...</span>
<article class='content'>
<p><img src="/crest.png"></p>
<div class="loading" style="color: #595959;"></div>
<p><strong>Installing</strong></p>
<div class="loading" style="color: #595959; margin-top: -25px; padding-bottom: 25px;"></div>
<p>Please wait while Edgebox is starting and configuring itself for the first time</p>
<p>
<br>
</p>
<p style="font-size: 10px;"><i>This will take approximately 20 minutes</i></p>
</article>
</main>
<!-- partial -->
<!-- <script src="/script.js"></script> -->
<script>
console.log('Gradually incrementing particle value for all elements...');
var elements = document.getElementsByClassName('particle');

// Make all particles have an annimation effect of a smoothly moving gradient color as their font color
setInterval(() => {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.style.color = 'hsl(' + Math.floor(Math.random() * 360) + ', 100%, 50%)';
element.style.animation = 'color-change 2s infinite';
// It should have a gradual transition from one color to the other
element.style.transition = 'color 2s';
}
}, 100);

var value = 0;
var interval = setInterval(function () {
console.log("Progress: " + value + "%")
value++;
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.innerHTML = value + '%';
// There is a one in 30 change that this element turns into a random emoji in a list
var emoji_list = ['🚀', '👋', '🤔', '🌟', '🤓', '🎉', '🚦', '😍'];
if (Math.floor(Math.random() * 30) == 0) {
element.innerHTML = emoji_list[Math.floor(Math.random() * emoji_list.length)];
}
}
if (value == 100) {
clearInterval(interval);
}
}, 12000);

// Check with fetch if the file installing.html responds with 200 OK
// If it does, then we can assume that the installation is still underway
// If it doesn't, then we can assume that the installation is complete

var interval = setInterval(function () {
fetch('/installing.html')
.then(function (response) {
if (response.status == 200) {
console.log("Installation is still underway");
} else {
console.log("Installation is complete");
clearInterval(interval);
window.location.href = "http://api.edgebox.local";
}
})
}, 1000);


</script>
</body>
</html>
27 changes: 27 additions & 0 deletions assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -664,4 +664,31 @@ body {
50% {
transform: translateY(-28px);
}
}

.loading {
font-size: 30px;
color: #595959;
}

.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(4,end) 900ms infinite;
animation: ellipsis steps(4,end) 900ms infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0px;
}

@keyframes ellipsis {
to {
width: 1.25em;
}
}

@-webkit-keyframes ellipsis {
to {
width: 1.25em;
}
}
22 changes: 21 additions & 1 deletion proxy.conf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ server {

server_name localhost;

location / {
if (-f /usr/share/nginx/html/installing.html) {
return 503;
}
}

location = /installing.html {
root /usr/share/nginx/html;
}

location = /style.css {
root /usr/share/nginx/html;
}
Expand All @@ -33,16 +43,26 @@ server {
root /usr/share/nginx/html;
}

location = /script.js {
root /usr/share/nginx/html;
}

error_page 404 /proxy_404.html;
location = /proxy_404.html {
root /usr/share/nginx/html;
internal;
}

error_page 500 502 503 504 /proxy_50x.html;
error_page 500 502 504 /proxy_50x.html;
location = /proxy_50x.html {
root /usr/share/nginx/html;
internal;
}

error_page 503 /proxy_installing.html;
location = /proxy_installing.html {
root /usr/share/nginx/html;
internal;
}

}