From 9ca2b1655ae1cdee6a96c3811bf2fabaa0923ffa Mon Sep 17 00:00:00 2001
From: jweg <jweg@informatik.uni-kiel.de>
Date: Thu, 27 Jul 2017 10:37:14 +0200
Subject: [PATCH] work in progress: show download message
---
app.js | 8 +-
views/download.hbs | 204 ++++++++++++---------------------------------
views/home.hbs | 74 ++++++++--------
3 files changed, 95 insertions(+), 191 deletions(-)
diff --git a/app.js b/app.js
index c02bf00..baff28b 100644
--- a/app.js
+++ b/app.js
@@ -34,10 +34,10 @@ app.set('view engine', '.hbs');
//TODO add spinner for telling user to wait until initialization is done
-
+ //initGitRepos.initialize(downloadFiles);
//routes
app.get('/', function(req, res){
- initGitRepos.initialize(downloadFiles);
+
res.render('home', {downloadFiles: downloadNames});
});
@@ -46,7 +46,7 @@ app.set('view engine', '.hbs');
const checkedFiles = Object.keys(req.body);
if(typeof checkedFiles !== 'undefined' && checkedFiles.length > 0){
- res.render('download', {checkedFiles: checkedFiles});
+ res.render('download', {checkedFiles: checkedFiles, downloadFiles: downloadNames});
}
else {
res.render('home', {downloadFiles: downloadNames});
@@ -67,7 +67,7 @@ app.set('view engine', '.hbs');
frontendChecked = checkedFiles.find(function(file){
return file === 'explorviz-ui-frontend';
});
-//the user is not allowed to check plugins without having checked frontend or backend
+//the user is not allowed to check plugins without having checked frontend or backend core
if(!(backendChecked || frontendChecked)){
res.render('home', {downloadFiles: downloadNames});
}
diff --git a/views/download.hbs b/views/download.hbs
index 65c2900..55fdfd9 100644
--- a/views/download.hbs
+++ b/views/download.hbs
@@ -1,156 +1,58 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
- <title>Downloading</title>
-<style type="text/css">
-.sk-circle {
- margin: 40px auto;
- width: 40px;
- height: 40px;
- position: relative; }
- .sk-circle .sk-child {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0; }
- .sk-circle .sk-child:before {
- content: '';
- display: block;
- margin: 0 auto;
- width: 15%;
- height: 15%;
- background-color: #333;
- border-radius: 100%;
- -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
- animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
- .sk-circle .sk-circle2 {
- -webkit-transform: rotate(30deg);
- -ms-transform: rotate(30deg);
- transform: rotate(30deg); }
- .sk-circle .sk-circle3 {
- -webkit-transform: rotate(60deg);
- -ms-transform: rotate(60deg);
- transform: rotate(60deg); }
- .sk-circle .sk-circle4 {
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg); }
- .sk-circle .sk-circle5 {
- -webkit-transform: rotate(120deg);
- -ms-transform: rotate(120deg);
- transform: rotate(120deg); }
- .sk-circle .sk-circle6 {
- -webkit-transform: rotate(150deg);
- -ms-transform: rotate(150deg);
- transform: rotate(150deg); }
- .sk-circle .sk-circle7 {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg); }
- .sk-circle .sk-circle8 {
- -webkit-transform: rotate(210deg);
- -ms-transform: rotate(210deg);
- transform: rotate(210deg); }
- .sk-circle .sk-circle9 {
- -webkit-transform: rotate(240deg);
- -ms-transform: rotate(240deg);
- transform: rotate(240deg); }
- .sk-circle .sk-circle10 {
- -webkit-transform: rotate(270deg);
- -ms-transform: rotate(270deg);
- transform: rotate(270deg); }
- .sk-circle .sk-circle11 {
- -webkit-transform: rotate(300deg);
- -ms-transform: rotate(300deg);
- transform: rotate(300deg); }
- .sk-circle .sk-circle12 {
- -webkit-transform: rotate(330deg);
- -ms-transform: rotate(330deg);
- transform: rotate(330deg); }
- .sk-circle .sk-circle2:before {
- -webkit-animation-delay: -1.1s;
- animation-delay: -1.1s; }
- .sk-circle .sk-circle3:before {
- -webkit-animation-delay: -1s;
- animation-delay: -1s; }
- .sk-circle .sk-circle4:before {
- -webkit-animation-delay: -0.9s;
- animation-delay: -0.9s; }
- .sk-circle .sk-circle5:before {
- -webkit-animation-delay: -0.8s;
- animation-delay: -0.8s; }
- .sk-circle .sk-circle6:before {
- -webkit-animation-delay: -0.7s;
- animation-delay: -0.7s; }
- .sk-circle .sk-circle7:before {
- -webkit-animation-delay: -0.6s;
- animation-delay: -0.6s; }
- .sk-circle .sk-circle8:before {
- -webkit-animation-delay: -0.5s;
- animation-delay: -0.5s; }
- .sk-circle .sk-circle9:before {
- -webkit-animation-delay: -0.4s;
- animation-delay: -0.4s; }
- .sk-circle .sk-circle10:before {
- -webkit-animation-delay: -0.3s;
- animation-delay: -0.3s; }
- .sk-circle .sk-circle11:before {
- -webkit-animation-delay: -0.2s;
- animation-delay: -0.2s; }
- .sk-circle .sk-circle12:before {
- -webkit-animation-delay: -0.1s;
- animation-delay: -0.1s; }
-@-webkit-keyframes sk-circleBounceDelay {
- 0%, 80%, 100% {
- -webkit-transform: scale(0);
- transform: scale(0); }
- 40% {
- -webkit-transform: scale(1);
- transform: scale(1); } }
-@keyframes sk-circleBounceDelay {
- 0%, 80%, 100% {
- -webkit-transform: scale(0);
- transform: scale(0); }
- 40% {
- -webkit-transform: scale(1);
- transform: scale(1); } }
- </style>
- <!-- Bootstrap -->
- <!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- </head>
- <body>
- <div class="container">
- <div class="sk-circle">
- <div class="sk-circle1 sk-child"></div>
- <div class="sk-circle2 sk-child"></div>
- <div class="sk-circle3 sk-child"></div>
- <div class="sk-circle4 sk-child"></div>
- <div class="sk-circle5 sk-child"></div>
- <div class="sk-circle6 sk-child"></div>
- <div class="sk-circle7 sk-child"></div>
- <div class="sk-circle8 sk-child"></div>
- <div class="sk-circle9 sk-child"></div>
- <div class="sk-circle10 sk-child"></div>
- <div class="sk-circle11 sk-child"></div>
- <div class="sk-circle12 sk-child"></div>
- </div>
- <div class="row">
- <div class="col-md-3"></div><div class="col-md-6"> Your download is being prepared. This may take a moment. Do not close the window.</div>
- </div>
- {{#each checkedFiles as |file|}}
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+ <title>Download</title>
+
+ <!-- Bootstrap -->
+ <!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+ <div class ="container">
+ <div class="row">
+ <div class="col-md-3"></div>
+ <div class="col-md-9">
+ <h3>Choose which files to compile into your custom build of ExplorViz:</h3>
+ <form action="/" method="post">
+ <div class ="form-group">
+ <div class="checkbox">
+ <label>
+ {{#each downloadFiles as |item|}}
+ <input type="checkbox" name={{item}} value={{item}}>{{item}}<br>
+ {{/each}}
+ <br>
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Create Build and Download Zip</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-3"></div>
+ <div class="col-md-6">
+ <iframe id ="downloadFrame" src="" onload="onDownloadFinished(this)"></iframe>
+ <script type="text/javascript">
+ document.getElementById('downloadFrame').onload= function() {
+ //"Your download will start automatically."
+ // Hier newDownload anzeigen und checkedFiles übergeben?!
+ };
+ </script>
+{{#each checkedFiles as |file|}}
{{/each}}
<script> location.href="/download?checkedFiles={{checkedFiles}}" </script>
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- <!-- Include all compiled plugins (below), or include individual files as needed -->
- <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- </body>
-</html>
+ </div>
+
+ </div>
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+ </body>
+ </html>
\ No newline at end of file
diff --git a/views/home.hbs b/views/home.hbs
index ca8f69b..75f82eb 100644
--- a/views/home.hbs
+++ b/views/home.hbs
@@ -1,41 +1,43 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
- <title>Download</title>
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+ <title>Download</title>
- <!-- Bootstrap -->
- <!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- </head>
- <body>
- <div class="row">
- <div class="col-md-3"></div>
- <div class="container">
- <h3>Choose which files to compile into your custom build of ExplorViz:</h3>
- <form action="/" method="post">
- <div class ="form-group">
- <div class="checkbox">
- <label>
- {{#each downloadFiles as |item|}}
- <input type="checkbox" name={{item}} value={{item}}>{{item}}<br>
- {{/each}}
- <br>
- </label>
+ <!-- Bootstrap -->
+ <!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+ <div class ="container">
+ <div class="row">
+ <div class="col-md-3"></div>
+ <div class="col-md-9">
+ <h3>Choose which files to compile into your custom build of ExplorViz:</h3>
+ <form action="/" method="post">
+ <div class ="form-group">
+ <div class="checkbox">
+ <label>
+ {{#each downloadFiles as |item|}}
+ <input type="checkbox" name={{item}} value={{item}}>{{item}}<br>
+ {{/each}}
+ <br>
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Create Build and Download Zip</button>
</div>
- <button type="submit" class="btn btn-primary">Create Build and Download Zip</button>
- </div>
- </form>
- </div>
- </div>
+ </form>
+ </div>
+ </div>
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- <!-- Include all compiled plugins (below), or include individual files as needed -->
- <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- </body>
-</html>
\ No newline at end of file
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+ </body>
+ </html>
\ No newline at end of file
--
GitLab