Skip to content

move hardcoded html #89

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
giancastro merged 5 commits into from
Jun 9, 2021
Merged

move hardcoded html #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c37c282
move hardcoded html to templates folder
IuryPiva Jun 7, 2021
748a156
remove unused import
IuryPiva Jun 8, 2021
449fd3d
Merge branch 'master' into iurypiva/move-hardcoded-html
IuryPiva Jun 8, 2021
a0b0fa8
Merge branch 'master' into iurypiva/move-hardcoded-html
giancastro Jun 9, 2021
01e8bc2
fix code lint error
giancastro Jun 9, 2021
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
107 changes: 7 additions & 100 deletions mapshader/flask_app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
from bokeh.tile_providers import STAMEN_TONER_BACKGROUND
from bokeh.tile_providers import get_provider

from jinja2 import Template
from jinja2 import Environment, FileSystemLoader

from bokeh.resources import INLINE

Expand All @@ -28,8 +28,9 @@

from mapshader.sources import MapSource

from mapshader.utils import psutil_fetching, psutils_html
from mapshader.utils import psutil_fetching

jinja2_env = Environment(loader=FileSystemLoader("mapshader/templates/"))

def flask_to_tile(source: MapSource, z=0, x=0, y=0):

Expand Down Expand Up @@ -122,116 +123,22 @@ def build_previewer(service: MapService):
def service_page(service: MapService):
plot = build_previewer(service)
script, div = components(dict(preview=plot))

template = Template(
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<title>{{service.name}}</title>
{{ resources }}
{{ script }}
<style>
.embed-wrapper {
display: flex;
justify-content: space-evenly;
}
body {
font-family: "Roboto", sans-serif;
}
.header {
padding: 10px;
}
</style>
</head>
<body>
{{ psutils_html }}
<div class="header">
<h3>{{service.name}}</h3>
<hr />
<h5><strong>Client URL:</strong>
{{service.client_url}}
</h5>
<h5><strong>Description:</strong>
{{service.source.description}}
</h5>
<h5><strong>Geometry Type:</strong>
{{service.source.geometry_type.capitalize()}}
</h5>
</div>
<hr />
<div class="embed-wrapper">
{% for key in div.keys() %}
{{ div[key] }}
{% endfor %}
</div>
<hr />
<div class="header">
<h4>Details</h4>
<hr />
<h5>
<strong>
Data Path:
</strong>
{{service.source.filepath}}
</h5>
<h5>
<strong>
Span:
</strong>
{{service.source.span}}
</h5>
<h5>
<strong>
Overviews:
</strong>
{{service.source.overviews.keys()}}
</h5>
<h5>
<strong>
Aggregation Method:
</strong>
{{service.source.agg_func}}
</h5>
<h5>
<strong>
Colormap Interpolation Method:
</strong>
{{service.source.shade_how}}
</h5>
</div>
</body>
</html>
'''
)
template = jinja2_env.get_template("service_page.html")

resources = INLINE.render()
html = template.render(resources=resources,
script=script,
service=service,
len=len,
div=div,
psutils_html=psutils_html())
div=div)

return html


def index_page(services):
links = []
for s in services:
links.append(f'<li><a href="{s.service_page_url}">{s.name}</a></li>')

html = '<html>'
html += '<body>'
html += '<ul>'
html += ''.join(links)
html += '</ul>'
html += '</body>'
html += '</html>'
template = jinja2_env.get_template('index_page.html')

return html
return template.render(services=services)


def configure_app(app: Flask, user_source_filepath=None, contains=None):
Expand Down
10 changes: 10 additions & 0 deletions mapshader/templates/index_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<html>
<body>
{% include 'psutils.html' %}
<ul>
{%- for s in services %}
<li><a href="{{s.service_page_url}}">{{s.name}}</a></li>
{% endfor %}
</ul>
</body>
</html>
134 changes: 134 additions & 0 deletions mapshader/templates/psutils.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<style>
#psutils {
display: flex;
gap: 8px;
}

.bar-main-container {
width: 300px;
height: 24px;
border-radius: 4px;
font-family: sans-serif;
font-weight: normal;
font-size: 0.7em;
color: rgb(64, 64, 64);
}

.wrap {
padding: 0 8px;
position: relative;
}

.bar-text {
width: calc(100% - 14px);
position: absolute;
display: flex;
justify-content: center;
top: 4.5px;
}

.bar-container {
float: right;
border-radius: 10px;
height: 10px;
background: rgba(0, 0, 0, 0.13);
width: 100%;
margin: 7px 0px;
overflow: hidden;
}

.bar {
float: left;
background: #ffffffd1;
height: 100%;
border-radius: 10px 0px 0px 10px;
opacity: 1;
transition: width 0.1s;
width: 0%;
}

/* COLORS */
.azure {
background: #38b1cc;
}
.emerald {
background: #2cb299;
}
.violet {
background: #8e5d9f;
}
.yellow {
background: #efc32f;
}
.red {
background: #e44c41;
}
</style>
<div id="psutils">
<div class="bar-main-container azure">
<div class="wrap">
<span class="bar-text">
<span>CPU:&nbsp;</span>
<span id="cpu-percentage">0,0%</span>
</span>
<div class="bar-container">
<div id="cpu-percentage-bar" class="bar"></div>
</div>
</div>
</div>
<div class="bar-main-container violet">
<div class="wrap">
<span class="bar-text">
<span>MEMORY:&nbsp;</span>
<span id="memory-percentage">0,0%</span>
</span>
<div class="bar-container">
<div id="memory-percentage-bar" class="bar"></div>
</div>
</div>
</div>
<div class="bar-main-container yellow">
<div class="wrap">
<span class="bar-text">
<span>DISK:&nbsp;</span>
<span id="disk-percentage">0,0%</span>
</span>
<div class="bar-container">
<div id="disk-percentage-bar" class="bar"></div>
</div>
</div>
</div>
</div>
<script>
const fetchAndPopulate = async () => {
const data = await fetch("http://localhost:5000/psutil");
const log = await data.json();

document.getElementById(
"cpu-percentage"
).innerText = `${log.cpu.cpu_usage_percentage}%`;

document.getElementById(
"cpu-percentage-bar"
).style.width = `${log.cpu.cpu_usage_percentage}%`;

document.getElementById(
"memory-percentage"
).innerText = `${log.memory.percent}%`;

document.getElementById(
"memory-percentage-bar"
).style.width = `${log.memory.percent}%`;

document.getElementById(
"disk-percentage"
).innerText = `${log.disk.percent}%`;

document.getElementById(
"disk-percentage-bar"
).style.width = `${log.disk.percent}%`;
};
fetchAndPopulate();

setInterval(fetchAndPopulate, 2000);
</script>
73 changes: 73 additions & 0 deletions mapshader/templates/service_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto"
/>
<title>{{service.name}}</title>
{{ resources }} {{ script }}
<style>
.embed-wrapper {
display: flex;
justify-content: space-evenly;
}
body {
font-family: "Roboto", sans-serif;
}
.header {
padding: 10px;
}
</style>
</head>
<body>
{% include "psutils.html" %}

<div class="header">
<h3>{{service.name}}</h3>
<hr />
<h5>
<strong>Client URL:</strong>
{{service.client_url}}
</h5>
<h5>
<strong>Description:</strong>
{{service.source.description}}
</h5>
<h5>
<strong>Geometry Type:</strong>
{{service.source.geometry_type.capitalize()}}
</h5>
</div>
<hr />
<div class="embed-wrapper">
{% for key in div.keys() %} {{ div[key] }} {% endfor %}
</div>
<hr />
<div class="header">
<h4>Details</h4>
<hr />
<h5>
<strong> Data Path: </strong>
{{service.source.filepath}}
</h5>
<h5>
<strong> Span: </strong>
{{service.source.span}}
</h5>
<h5>
<strong> Overviews: </strong>
{{service.source.overviews.keys()}}
</h5>
<h5>
<strong> Aggregation Method: </strong>
{{service.source.agg_func}}
</h5>
<h5>
<strong> Colormap Interpolation Method: </strong>
{{service.source.shade_how}}
</h5>
</div>
</body>
</html>
Loading