Skip to content
Snippets Groups Projects
Commit 4bac025c authored by Christian Boettcher's avatar Christian Boettcher
Browse files

template for frontend with render script

parent 013502b4
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 203 additions and 2 deletions
.gitignore
+ 2
− 1
View file @ 4bac025c
...@@ -2,3 +2,4 @@ ...@@ -2,3 +2,4 @@
# contains data for local tests # contains data for local tests
app/ app/
site/
\ No newline at end of file
frontend/createStatic.py 0 → 100644
+ 46
− 0
View file @ 4bac025c
from jinja2 import Environment, FileSystemLoader
import os
import shutil
def main():
## copy javascript files to site folder
src_files = os.listdir('frontend/js')
dest = 'site/js'
os.makedirs(dest, exist_ok=True)
#os.mkdir(dest)
for file_name in src_files:
full_name = os.path.join('frontend/js', file_name)
if os.path.isfile(full_name):
shutil.copy(full_name, dest)
## render templates to site folder
file_loader = FileSystemLoader('frontend/templates')
env = Environment(loader=file_loader)
files = {
'index' : 'index_content.html.jinja',
'storage' : 'storage_content.html.jinja',
'impressum' : 'impressum_content.html.jinja',
'login' : 'login_content.html.jinja'
}
templates = {}
for file in files.keys():
templates[file] = env.get_template(files[file])
html = {}
html['index'] = templates['index'].render(home=True)
html['storage'] = templates['storage'].render(storage=True)
html['impressum'] = templates['impressum'].render(impressum=True)
html['login'] = templates['login'].render(login=True)
for file in files.keys():
with open('site/'+file+'.html', 'w') as f:
f.write(html[file])
if __name__ == "__main__":
main()
\ No newline at end of file
frontend/js/apicalls.js 0 → 100644
+ 1
− 0
View file @ 4bac025c
// This file will contain the api calls, as well as transform the data into html-text (via a template)
\ No newline at end of file
frontend/js/auth.js 0 → 100644
+ 1
− 0
View file @ 4bac025c
// This file will contain functions to manage authentication (including the token storage and access)
frontend/js/choose_storage.js 0 → 100644
+ 27
− 0
View file @ 4bac025c
// get data from url query variables
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
// return the storage type
function getType() {
var type = getUrlVars()["type"]
console.log("Type: " + type)
return type
}
// set the text of the typetext element
function setTypeText() {
$('#typetext').text(getType())
}
setTypeText()
\ No newline at end of file
frontend/templates/base.html.jinja 0 → 100644
+ 60
− 0
View file @ 4bac025c
<!DOCTYPE html>
<html lang="en">
<head>
<title>eFlows4HPC Data Catalog - {% block title %}{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<!--BIG TITLE WITH LOGO-->
<div class="jumbotron text-center" style="margin-bottom:0">
<h1><a href="https://www.eFlows4HPC.eu">eFlows4HPC Data Catalog</a></h1>
</div>
<!--NAVBAR-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Data Catalog</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li {% if home is true %} class="active"{% endif %}><a href="./index.html">Home</a></li>
<li {% if storage is true %} class="active"{% endif %}><a href="./storage.html?type=dataset">Storage</a></li>
<li {% if impressum is true %} class="active"{% endif %}><a href="./impressum.html">Impressum</a></li>
<li {% if login is true %} class="active"{% endif %}><a href="./login.html" id="loginText">Log In</a></li> <!--If token is found in local storage, replace with logged in username and log-out option (i.e. delete local token)-->
</ul>
</div>
</div>
</nav>
<!--SPECIFIC PAGE CONTENT-->
{% block content%}
{% endblock %}
<!--FOOTER-->
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Information about server admin and impressum</p>
</div>
<!--EXTRA JAVASCRIPT-->
{% block scripts %}
{% endblock %}
<!--SHARED JAVASCRIPT-->
<script src="js/auth.js"></script>
</body>
\ No newline at end of file
frontend/templates/impressum_content.html.jinja 0 → 100644
+ 9
− 0
View file @ 4bac025c
{% extends "base.html.jinja"%}
{% block title %}Impressum{% endblock %}
{% block content %}
<p>INSERT IMPRESSUM HERE!!</p>
{% endblock %}
{% block scripts %}
{% endblock %}
\ No newline at end of file
frontend/templates/index_content.html.jinja 0 → 100644
+ 18
− 0
View file @ 4bac025c
{% extends "base.html.jinja"%}
{% block title %}Home{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>Basic information about this service</h2>
<h5>Documentation of the data format</h5>
<div class="fakeimg">Maybe the Logo again</div>
<hr class="hidden-sm hidden-md hidden-lg">
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{% endblock %}
\ No newline at end of file
frontend/templates/login_content.html.jinja 0 → 100644
+ 9
− 0
View file @ 4bac025c
{% extends "base.html.jinja"%}
{% block title %}Login{% endblock %}
{% block content %}
<p>INSERT Login Stuff HERE!!</p>
{% endblock %}
{% block scripts %}
{% endblock %}
\ No newline at end of file
frontend/templates/storage_content.html.jinja 0 → 100644
+ 28
− 0
View file @ 4bac025c
{% extends "base.html.jinja"%}
{% block title %}Storage{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuType" data-bs-toggle="dropdown" aria-expanded="false">
Select Storage Type
</button> <label id="typetext">TYPENAME</label>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuType">
<li><a class="dropdown-item" href="?type=dataset">Dataset</a></li>
<li><a class="dropdown-item" href="?type=storagetarget">Storage Target</a></li>
</ul>
</div>
<h2>Basic information about this service</h2>
<h5>Documentation of the data format</h5>
<div class="fakeimg">Maybe the Logo again</div>
<hr class="hidden-sm hidden-md hidden-lg">
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="js/choose_storage.js"></script>
{% endblock %}
\ No newline at end of file
requirements.txt
+ 2
− 1
View file @ 4bac025c
...@@ -6,3 +6,4 @@ python-dotenv==0.17.1 ...@@ -6,3 +6,4 @@ python-dotenv==0.17.1
python-multipart==0.0.5 python-multipart==0.0.5
python-jose[cryptography]==3.2.0 python-jose[cryptography]==3.2.0
passlib[bcrypt]==1.7.4 passlib[bcrypt]==1.7.4
jinja2==3.0.1
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment