From 14878da2f10453a8fd7600404fea7dcb2cbfa35d Mon Sep 17 00:00:00 2001
From: jweg <jweg@informatik.uni-kiel.de>
Date: Wed, 19 Jul 2017 16:41:06 +0200
Subject: [PATCH] bootstrap and spinner added to views
---
app.js | 6 ++++--
package.json | 5 ++++-
views/download.hbs | 39 +++++++++++++++++++++---------------
views/home.hbs | 49 ++++++++++++++++++++++++++++++++++++++--------
4 files changed, 72 insertions(+), 27 deletions(-)
diff --git a/app.js b/app.js
index 0d1c939..23a1610 100644
--- a/app.js
+++ b/app.js
@@ -9,7 +9,8 @@ var fsReaddir = require('fs-readdir');
var JSZip = require('jszip');
var exphbs = require('express-handlebars');
-
+// global.jQuery = require('jquery');
+// const bootstrap = require('bootstrap');
//initializer
var initGitRepos = require('./initializers/gitRepos.js');
//load names of available download files
@@ -55,7 +56,7 @@ app.use(bodyParser.json());
});
- app.get('/download', function(req, res){
+ app.get('/download', function(req, res, next){
//holds promises for backend and/or frontend
const promiseArray = []
const checkedFiles = req.query.checkedFiles.split(',');
@@ -141,6 +142,7 @@ function createZip(zip){
}).on('finish', function () {
console.log('explorviz-builds.zip written.');
res.download('explorviz-builds.zip');
+ //how to redirect to home page?
});
})
diff --git a/package.json b/package.json
index 8f08ffd..1ae2bde 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,17 @@
"license": "Apache-2.0",
"dependencies": {
"body-parser": "^1.17.1",
+ "bootstrap": "^3.3.7",
"child_process": "^1.0.2",
"express": "^4.15.2",
"express-handlebars": "^3.0.0",
"fs": "0.0.1-security",
"fs-readdir": "0.0.3",
+ "jquery": "^3.2.1",
"jszip": "^3.1.3",
"node-zip": "^1.1.1",
- "path": "^0.12.7"
+ "path": "^0.12.7",
+ "spinkit": "^1.2.5"
},
"devDependencies": {
"eslint": "^4.1.1",
diff --git a/views/download.hbs b/views/download.hbs
index c66d09b..65c2900 100644
--- a/views/download.hbs
+++ b/views/download.hbs
@@ -1,10 +1,12 @@
- <!DOCTYPE html>
- <html>
- <head>
- <title>Downloading</title>
- <!-- Bootstrap -->
- <link src="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
- <style type="text/css">
+<!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;
@@ -118,9 +120,12 @@
-webkit-transform: scale(1);
transform: scale(1); } }
</style>
- </head>
- <body>
- <div class="container">
+ <!-- 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>
@@ -136,14 +141,16 @@
<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 class="col-md-3"></div>
+ <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|}}
{{/each}}
<script> location.href="/download?checkedFiles={{checkedFiles}}" </script>
- </body>
- </html>
-
-
-
+ <!-- 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>
diff --git a/views/home.hbs b/views/home.hbs
index c795eef..ca8f69b 100644
--- a/views/home.hbs
+++ b/views/home.hbs
@@ -1,8 +1,41 @@
-<form action="/" method="post">
- Choose which files to compile into your custom build of ExplorViz:<br>
- {{#each downloadFiles as |item|}}
- <input type="checkbox" name={{item}} value={{item}}>{{item}}<br>
- {{/each}}
- <br>
- <button type="submit">Create Build and Download Zip</button>
- </form>
\ No newline at end of file
+<!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>
+
+ <!-- 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>
+ </div>
+ <button type="submit" class="btn btn-primary">Create Build and Download Zip</button>
+ </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
--
GitLab