I have a templatetag function that returns a Collapse menu with all folders, subfolders and images in a root directory but now I want to be able to filter which folders I get, the templatetag function recives one parameter, the root directory, and I know it should recibe a second parameter with the folder I want to get but I'm confused in this part.
in my settings.py I have this:
STATICFILES_DIRS = [
BASE_DIR / 'static',
'D:/Users/my_user/Documents/Luis/results',
]
in my templatetag.py I have this:
from django import template
from django.utils.safestring import mark_safe
import os
register = template.Library()
#register.simple_tag
def my_tag(path):
html=''
for file in os.listdir(path):
rel = os.path.join(path, file)
if os.path.isdir(rel):
html += f"""<button type="button" class="collapsible">{file}</button>"""
html +='<div class="content"><div class="row mt-2">'
html += my_tag(rel)
html += '</div></div>'
else:
html +=f'<div class="col-md-6 d-flex align-items-stretch"><picture>'
x=str(rel)[43:]
print(x)
html += """<img src="/static"""+"""/%s" """%(x)
html += """ class="lazy card-img-top" width="500" height="400" """
html += """alt="/static"""+"""/%s" """%(x)
html +='></picture></div>'
return mark_safe(html)
and in my template.html I have this:
{% load static files %}
<style>
.collapsible {
background-color: #F8F8F8;
color: #858E9B;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* .active, .collapsible:hover {
background-color: #555;
}*/
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #F8F8F8;
}.card-img-top {
height: 90vh !important;
object-fit: contain;
}
</style>
{% my_tag 'D:/Users/my_user/Documents/Luis/results' %}
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
This is an example of the final result:
So the idea is to get a specific day, can anyone give me an idea?
Related
href in a tag inside li don't woriking. It does not redirect me to /sub1/.
This is my code:
body,
html {
margin: 0;
font-family: Arial, sans-serif;
font-size: 1em;
}
.navbar {
width: 100%;
background-color: #4682B4;
height: 80px;
color: #fff;
}
.navbar .nav {
margin: 0;
padding: 0;
float: left;
list-style-type: none;
}
.navbar .nav li.nav-item {
float: left;
margin: 0 95px;
}
.navbar .nav li.nav-item>a {
display: inline-block;
padding: 15px 20px;
height: 50px;
line-height: 50px;
color: #fff;
text-decoration: none;
}
.navbar .nav li.nav-item>a:hover {
background-color: #B0C4DE;
}
.dropdown a:focus {
background-color: #B0C4DE;
}
.dropdown a:focus~.dropdown-container {
max-height: 500px;
transition: max-height 0.5s ease-in;
-webkit-transition: max-height 0.5s ease-in;
-moz-transition: max-height 0.5s ease-in;
}
.dropdown-container {
position: absolute;
top: 80px;
max-height: 0;
overflow: hidden;
background: #4682B4;
color: #B0C4DE;
}
.dropdown-container a {
color: #fff;
text-decoration: none;
}
.dropdown-menu {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-menu li a {
display: inline-block;
min-width: 250px;
padding: 15px 20px;
border-bottom: 1px solid #333;
}
.dropdown-menu li a:hover {
text-decoration: none;
background: #B0C4DE;
}
<body>
<nav class="navbar">
<ul class="nav" id="primary-nav">
<li class="nav-item">Home</li>
<li class="nav-item dropdown">
Servicios
<div class="dropdown-container">
<div class="dropdown-inner">
<ul class="dropdown-menu">
<li class="dropdown-menu-item">Submenu 1</li>
<li class="dropdown-menu-item">Submenu2</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">Agenda</li>
<li class="nav-item">¿Quiénes somos?</li>
<li class="nav-item">Contacto</li>
</ul>
</nav>
</body>
Urls.py
from django.urls import path, re_path
from Applications.Datos import views
app_name = "Datos"
urlpatterns = [
re_path('^sub1/', views.Datos, name='sub1'),
path('search/', views.buscar),
]
Views.py
from django.shortcuts import render
from django.http import request
# Create your views here.
def Datos(request):
return render(request, template_name='datos.html')
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
You are not using correct syntax.
Where <view_name> is the view name you gave in urls.py for the app in which template is made. like here:
from django.urls import path, re_path
from home import views
app_name = "home"
urlpatterns = [
path('', views.home_view, name='productsPage'),
re_path('^wishlist/', views.wishlist_view, name='wishlistPage'),
]
The name of the view is wishlistPage and app is home so you write to make a link to that page redirect:
Update
sub1 is the path of your MAIN VIEW FOR THAT APP when you want to visit <youwebsite>/sub1. In that case the urls.py for this app is incorrect.
Edit this urls.py to be like this:
from django.urls import path, re_path
from Applications.Datos import views
app_name = "Datos"
urlpatterns = [
re_path('', views.Datos, name='sub1'), # UPDATE: LET IT BE BLANK
path('search/', views.buscar),
]
And update your main urls.py to b like this:
urlpatterns = [
[...your other urls...],
re_path(r'^sub1/', include(('Datos.urls', 'Datos'), namespace='Datos')),
]
It won't work like this. You have to call it like this. in Django while linking html files/pages we use a slightly different approach.
<a class="nav-link" href="{% url 'sub1' %}">SubMenu</a>
so I have this website that allows me to get the email from a user that has signed up to the website, so when you sign up it adds your discord username and your email after it in a text file like this
Discorduser#0182 Test#example.com
Discordusernumber_one#0182 Testboi#example.co.uk
However, it retrieves the email from the first line when i put in the first option, but if i do the 2nd user, it cant seem to find it, here is the code to the website... the code is part of a bottle.py script but here is the main parts of this page
#get('/get_confirm')
def confirm():
return CONFIRM_PAGE
#post('/get_confirm')
def confirm():
name = request.forms.get('name')
for line in open('Confirmations.txt', 'r').readlines():
login_info = line.replace('\n', '').split()
if name == login_info[0]:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + login_info[1] + '</h1>')
else:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + 'That user is not valid' + '</h1>')
CONFIRM_PAGE = '''
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/static/icon.ico">
<title>TylerR - get_confirms</title>
<style>
.content {
background: white;
padding: 15px;
border-radius: 3px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body style='background-size: cover; background-image: url(\"/static/WebisteBackground.png\"); background-attachment: fixed;'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/commands'>Commands</a></li>
<li><a href='/youtube'>Youtube</a></li>
<li><a href='/downloads'>Downloads</a></li>
<a href='https://www.youtube.com/channel/UCTHnGh3DpDXMyuL03ove1tQ'>
<img align='right' src='/static/youtubelogo.png' style="width:40px;height:40px;">
</a>
<a href='https://www.instagram.com/drumsnaps/'>
<img align='right' src='/static/Insta.png' style="width:40px;height:40px;">
</a>
</ul>
</div>
<center>
<h1 style="font-family:Cooper Black; font-size: 7em;"><b>Confirmations<b></h1>
<br>
<h1>Please enter an username to retrieve email</h1>
<h3>When entering name, replace any spaces with _</h3>
<form method='POST' action='/get_confirm'>
<h2>Discord Username:</h2>
<input name='name' type='text' placeholder='User#0000'>
<br>
<input type='submit'>
</form>
<div class='content'>
<h1 id='emailbox'></h1>
</div>
</center>
</body>
</html>
'''
I am using bottle.py
so if anyone could let me know why this is happening that would be great
In your check it returns immediately - with success (if user is on the first line) or no success (if user is not on first line). You want to return no success, only after you checked all lines.
#post('/get_confirm')
def confirm():
name = request.forms.get('name')
with open('Confirmations.txt', 'r') as f:
for line in f:
user, email = line.strip().split()
if name == user:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + email + '</h1>')
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + 'That user is not valid' + '</h1>')
Also, better use template engine like jinja2 to construct the HTML page.
I am trying to render a PDF document within my Flask application. For this, I am using the following HTML template:
<!DOCTYPE html>
<html>
<head>
<style>
#page {
margin:0
}
h1 {
color:white;
}
.header{
background: #0a0045;
height: 250px;
}
.center {
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align:center;
}
</style>
</head>
<body>
<div class="header">
<div class="center">
<h1>Name</h1>
</div>
</div>
</body>
</html>
I keep getting white margins at the top and right/left of my header section:
Is there a way to remove them?
Edit:
Below is the code used to generate the PDF file using WeasyPrint in my Flask app:
def generate_pdf(id):
element = Element.query.filter_by(id=id).first()
attri_dict = get_element_attri_dict_for_tpl(element)
html = render_template('element.html', attri_dict=attri_dict)
pdf = HTML(string=html).write_pdf()
destin_loc = app.config['ELEMENTS_FOLDER']
timestamp = dt.datetime.now().strftime('%Y%m%d%H%M%S')
file_name = '_'.join(['new_element', timestamp])
path_to_new_file = destin_loc + '/%s.pdf' % file_name
f = open(path_to_new_file, 'wb')
f.write(pdf)
filename = return_latest_element_path()
return send_from_directory(directory=app.config['ELEMENTS_FOLDER'],
filename=filename,
as_attachment=True)
Maybe you forgot " ; " or/and " mm ",
it works:
#page {
size: A4; /* Change from the default size of A4 */
margin: 0mm; /* Set margin on each page */
}
The weasyprint uses 3 sources of css, one of them is default user agent stylesheet
(https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#supported-features)
That defines:
body {
display: block;
margin: 8px;
}
make sure to override that margin on tag and you will loose the margin.
Disclaimer: Title may not be the best way to describe what I am about to ask. If you have a better title in mind, please put it instead of mine
I am working on a scope database which will allow me to know what user has access to what ressource. To put it simply:
admin
super-foo
manager-foo-1
user-1
user-2
manager-foo-2
user-3
user-4
super-bar
manager-bar-1
user-5
user-6
manager-bar-2
user-7
user-8
admin has access to all users underneath him.
super-foo has access to all users underneath him, but not the ones of super-bar
etc... until your reach for example user-1, which doesn't have access to anything except himself
(when I say underneath, I mean hierarchically)
(when I say acces, I mean access data, the users, whatever)
Each entry of my DB is like this (using manager-foo-1 for example):
id=manager-foo-1 (I have a function that I can call to get everything on the user as the uuid is the hash key of my user DB (because i'm using their usernames here, but the ids are uuids.))
parents_id=['super-foo']
children_id=['user-1', 'user2']
Here's my DB right now (I've replaced the uuid4 with names):
for user_scope in UserScope.scan():
print("User {} has parents {} and childs {}".format(user_scope.id, user_scope.parents_id, user_scope.children_id))
User manager-foo has parents [super-foo] and childs [user-1, user-2]
User admin has parents None and childs [super-foo]
User super-foo has parents [admin] and childs [manager-foo]
User user-1 has parents [manager-foo] and childs None
User user-1 has parents [manager-foo] and childs None
childs are set to None when you reach the bottom, but that shouldn't really matter
What I would like it to get a pretty display, or at least an understandable display or that DB, when given an id. So if given admin, display EVERYTHING. If given user-1, only display user-1 etc...
I've used a little bit of jinja templates but nothing advanced, the furthest I've got was this for loop to make a user list (using a macro)
{% for user in user_list %}
{% from "user_line.html" import user_line %}
{{user_line(user)}}
{% endfor %}
I'm having trouble to wrap my head around how to do this, what should the layout be, in what order should I display them and should I use macros? templates?
Thanks in advance
I ended up finding a way to solve this.
First of all, I generated a dictionnary containing everything I need scopewise:
def get_all_children_tree(uid):
scope = get_userscope_dict(user.client_id)
children = []
if scope['children_id'] is None:
ret = {
"user": scope['id'],
"children": None
}
return ret
for child_id in scope['children_id']:
children.append(get_all_children_tree(child_id))
ret = {
"user": scope['id'],
"children": children
}
return ret
This will give me something like this:
{
'user':'cbf7f365-db8a-419b-9f8c-c24b2ce01361',
'children':[
{
'user':'17bc0bdc-892b-4e47-b749-36c1687c0992',
'children':[
{
'user':'d51056b7-60fe-437f-abe0-4a30076df4cd',
'children':[
{
'user':'14f1963b-0f64-4431-a52f-819877d6096c',
'children':None
},
{
'user':'40765a8d-6001-4146-9d1f-ce3fd95646c7',
'children':None
}
]
},
{
'user':'8a617821-e189-4b17-ac67-597ca79b98e9',
'children':[
{
'user':'42af51b0-2810-4004-b063-a4789631bb2e',
'children':None
},
{
'user':'26d43e72-4e45-40c3-ab2b-98c637dde5aa',
'children':None
}
]
}
]
}
]
}
Then I wrote a jinja template like so :
{% extends "main.html" %}
{% block body %}
<!-- tree -->
<style type="text/css">
ul.tree {
overflow-x: auto;
white-space: nowrap;
}
ul.tree,
ul.tree ul {
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}
ul.tree li {
display: block;
width: auto;
float: left;
vertical-align: top;
padding: 0;
margin: 0;
}
ul.tree ul li {
background-image: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=);
background-repeat: repeat-x;
background-position: left top;
}
ul.tree li span {
display: block;
width: 5em;
/*
uncomment to fix levels
height: 1.5em;
*/
margin: 0 auto;
text-align: center;
white-space: normal;
letter-spacing: normal;
}
</style>
<!--[if IE gt 8]> IE 9+ and not IE -->
<style type="text/css">
ul.tree ul li:last-child {
background-repeat: no-repeat;
background-size:50% 1px;
background-position: left top;
}
ul.tree ul li:first-child {
background-repeat: no-repeat;
background-size: 50% 1px;
background-position: right top;
}
ul.tree ul li:first-child:last-child {
background: none;
}
ul.tree ul li span {
background: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=) no-repeat 50% top;
background-size: 1px 0.8em;
padding-top: 1.2em;
}
ul.tree ul {
background: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=) no-repeat 50% top;
background-size: 1px 0.8em;
margin-top: 0.2ex;
padding-top: 0.8em;
}
</style>
<!-- <[endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
/* Just to simplify HTML for the moment.
* This could easily be replaced by inline classes.
*/
$(function() {
$('li:first-child').addClass('first');
$('li:last-child').addClass('last');
$('li:first-child:last-child').addClass('lone');
});
</script>
<style type="text/css">
ul.tree ul li {
background-image: url(pixel.gif);
}
ul.tree ul li.first {
background-image: url(left.gif);
background-position: center top;
}
ul.tree ul li.last {
background-image: url(right.gif);
background-position: center top;
}
ul.tree ul li.lone {
background: none;
}
ul.tree ul li span {
background: url(child.gif) no-repeat 50% top;
padding-top: 14px;
}
ul.tree ul {
background: url(child.gif) no-repeat 50% top;
margin-top: 0.2ex;
padding-top: 11px;
}
</style>
<[endif]-->
<!-- page presentation -->
<style type="text/css">
body {
font-family:sans-serif;
color: #666;
text-align: center;
}
A, A:visited, A:active {
color: #c00;
text-decoration: none;
}
A:hover {
text-decoration: underline;
}
ul.tree,
#wrapper {
width: 960px;
margin: 0 auto;
}
ul.tree {
width: 650px;
}
p {
margin-top: 2em;
}
</style>
<div id="page-wrapper">
<p> {{ data }}</p>
<div id="wrapper">
<ul class="tree">
<li>
<span> {{ get_user(data['user']).username }}</span>
<ul>
{%- for child in data['children'] recursive %}
<li>
<span> {{ get_user(child['user']).username }} </span>
{%- if child['children'] -%}
<ul>
{{ loop(child['children']) }}
</ul>
{%- endif %}
</li>
{%- endfor %}
</ul>
</li>
</ul>
</div>
</div>
{% endblock %}
Here's the final result
Ok so I have the web.py file called app.py.
app.py references index.html and foo.html.
Both of these html files call just fine, what I mean is when I run app.py and go to http://localhost:8080/ and http://localhost:8080/Foo both of them display a webpage just fine, the issue is with the foo.html file tho. I have a large section in there that is supposed to use the rotate.css file and make the text in the section spin. The problem is the text doesn't even show up.
Files are below:
app.py
import web
urls = (
'/', 'Index',
'/Foo', 'Foo'
)
app = web.application(urls, globals())
render = web.template.render('templates/')
class Index(object):
def GET(self):
greeting_Index = "Hello World"
return render.index(greeting = greeting_Index)
class Foo(object):
def GET(self):
greeting_Foo = 'FooBAR'
return render.foo(greeting = greeting_Foo)
if __name__ == "__main__":
app.run()
foo.html
$def with (greeting)
$var cssfiles: static/rotate.css
<html>
<head>
<meta charset="UTF-8">
<title>Foobar</title>
</head>
<body>
$if greeting:
<em style="color: red; font-size: 5em;">Welcome to the Foo bar. $greeting.</em>
$else:
Herro world!
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>Real poetry is like</span>
<span>creating</span>
<div class="rw-words rw-words-1">
<span>breathtaking moments</span>
<span>lovely sounds</span>
<span>incredible magic</span>
<span>unseen experiences</span>
<span>happy feelings</span>
<span>beautiful butterflies</span>
</div>
<br />
<span>with a silent touch of</span>
<div class="rw-words rw-words-2">
<span>sugar</span>
<span>spice</span>
<span>colors</span>
<span>happiness</span>
<span>wonder</span>
<span>happiness</span>
</div>
</h2>
</section>
</body>
</html>
rotate.css
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #444;
white-space: nowrap;
font-size: 200%;
font-weight: normal;
}
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
}
.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2){
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3){
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4){
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5){
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6){
animation-delay: 15s;
color: #9b6b9d;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
According to http://webpy.org/cookbook/staticfiles you may have to alter your apache.conf file to allow apache to serve up those files.
And I did notice that nowhere in your html file do you actually link to the css file
<link rel="stylesheet" href="static/rotate.css" type="text/css">
somewhere in the head is missing or since your using it as a variable it should be
<link rel="stylesheet" href="$cssfiles" type="text/css">