Skip to content
Snippets Groups Projects
Commit 14878da2 authored by Josefine Wegert's avatar Josefine Wegert
Browse files

bootstrap and spinner added to views

parent 773845e7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app.js
+ 4
− 2
View file @ 14878da2
...@@ -9,7 +9,8 @@ var fsReaddir = require('fs-readdir'); ...@@ -9,7 +9,8 @@ var fsReaddir = require('fs-readdir');
var JSZip = require('jszip'); var JSZip = require('jszip');
var exphbs = require('express-handlebars'); var exphbs = require('express-handlebars');
// global.jQuery = require('jquery');
// const bootstrap = require('bootstrap');
//initializer //initializer
var initGitRepos = require('./initializers/gitRepos.js'); var initGitRepos = require('./initializers/gitRepos.js');
//load names of available download files //load names of available download files
...@@ -55,7 +56,7 @@ app.use(bodyParser.json()); ...@@ -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 //holds promises for backend and/or frontend
const promiseArray = [] const promiseArray = []
const checkedFiles = req.query.checkedFiles.split(','); const checkedFiles = req.query.checkedFiles.split(',');
...@@ -141,6 +142,7 @@ function createZip(zip){ ...@@ -141,6 +142,7 @@ function createZip(zip){
}).on('finish', function () { }).on('finish', function () {
console.log('explorviz-builds.zip written.'); console.log('explorviz-builds.zip written.');
res.download('explorviz-builds.zip'); res.download('explorviz-builds.zip');
//how to redirect to home page?
}); });
}) })
......
package.json
+ 4
− 1
View file @ 14878da2
...@@ -10,14 +10,17 @@ ...@@ -10,14 +10,17 @@
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"body-parser": "^1.17.1", "body-parser": "^1.17.1",
"bootstrap": "^3.3.7",
"child_process": "^1.0.2", "child_process": "^1.0.2",
"express": "^4.15.2", "express": "^4.15.2",
"express-handlebars": "^3.0.0", "express-handlebars": "^3.0.0",
"fs": "0.0.1-security", "fs": "0.0.1-security",
"fs-readdir": "0.0.3", "fs-readdir": "0.0.3",
"jquery": "^3.2.1",
"jszip": "^3.1.3", "jszip": "^3.1.3",
"node-zip": "^1.1.1", "node-zip": "^1.1.1",
"path": "^0.12.7" "path": "^0.12.7",
"spinkit": "^1.2.5"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^4.1.1", "eslint": "^4.1.1",
......
views/download.hbs
+ 23
− 16
View file @ 14878da2
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Downloading</title> <meta charset="utf-8">
<!-- Bootstrap --> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link src="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"> <!-- 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 { .sk-circle {
margin: 40px auto; margin: 40px auto;
width: 40px; width: 40px;
...@@ -118,9 +120,12 @@ ...@@ -118,9 +120,12 @@
-webkit-transform: scale(1); -webkit-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
</style> </style>
</head> <!-- Bootstrap -->
<body> <!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
<div class="container"> <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-circle">
<div class="sk-circle1 sk-child"></div> <div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div> <div class="sk-circle2 sk-child"></div>
...@@ -136,14 +141,16 @@ ...@@ -136,14 +141,16 @@
<div class="sk-circle12 sk-child"></div> <div class="sk-circle12 sk-child"></div>
</div> </div>
<div class="row"> <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> </div>
{{#each checkedFiles as |file|}} {{#each checkedFiles as |file|}}
{{/each}} {{/each}}
<script> location.href="/download?checkedFiles={{checkedFiles}}" </script> <script> location.href="/download?checkedFiles={{checkedFiles}}" </script>
</body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
</html> <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>
views/home.hbs
+ 41
− 8
View file @ 14878da2
<form action="/" method="post"> <!DOCTYPE html>
Choose which files to compile into your custom build of ExplorViz:<br> <html lang="en">
{{#each downloadFiles as |item|}} <head>
<input type="checkbox" name={{item}} value={{item}}>{{item}}<br> <meta charset="utf-8">
{{/each}} <meta http-equiv="X-UA-Compatible" content="IE=edge">
<br> <meta name="viewport" content="width=device-width, initial-scale=1">
<button type="submit">Create Build and Download Zip</button> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
</form> <title>Download</title>
\ No newline at end of file
<!-- 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment