I am trying to get the image to line up above the sent message as you would have it in most standard DMs: https://prnt.sc/IR__3qyiXqlI (what I want it to look like)
But for some reason, the text attached to the image proceeds to layer itself beside the image rather than below the image, as shown in the screenshot below. When I add float: right; to my CSS the image and the text layer horizontally in a strange manner: what it looks like currently
Ideally, the image should be on the same side as the texts from the person who sent the image and should be just above the message that was attached to the image (as is commonplace).
The HTML doc the DMs are stored on:
thread.html:
> {% extends 'landing/base.html' %} {% load crispy_forms_tags %}
>
> {% block content %}
>
> <div class="container">
> <div class="row">
> <div class="card col-md-12 mt-5 p-3 shadow-sm">
> {% if thread.receiver == request.user %}
> <h5><a href="{% url 'profile' thread.user.profile.pk %}"><img class="rounded-circle post-img" height="50" width="50"
> src="{{ thread.user.profile.picture.url }}" /></a> #{{ thread.user
> }}</h5>
> {% else %}
> <h5>#{{ thread.receiver }}</h5>
> {% endif %}
> </div>
> </div>
>
> {% if message_list.all.count == 0 %}
> <div class="row my-5">
> <div class="col-md-12">
> <p class="empty-text">No messages yet.</p>
> </div>
> </div>
> {% endif %}
>
> {% for message in message_list %}
> <div class="row">
> {% if message.sender_user == request.user %}
> <div class="col-md-12 my-1">
>
> <div class="message-sender-container ms-auto">
> {% if message.image %}
> <img src="{{ message.image.url }}" class="message-image-sent" />
> {% endif %}
> <div class="sent-message my-1">
> <p>{{ message.body }}</p>
> </div>
> </div>
>
>
> </div>
> {% elif message.receiver_user == request.user %}
> <div class="col-md-12">
> {% if message.image %}
> <div class="message-receiver-container offset-6">
> <img src="{{ message.image.url }}" class="message-image-received" />
> </div>
> {% endif %}
> <div class="received-message my-3">
> <p>{{ message.body }}</p>
> </div>
> </div>
> {% endif %}
> </div>
> {% endfor %}
>
>
> <div class="row">
> <div class="card col-md-12 p-3 shadow-sm">
> <form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
> {% csrf_token %}
> {{ form | crispy }}
>
> <div class="d-grid gap-2 mt-3">
> <button btn btn-light type="submit">Send Message</button>
> </div>
> </form>
> </div>
> </div> </div>
>
> {% endblock content %}
the relevant CSS file:
style.css:
.empty-text {
color: #777;
font-size: 1.5rem;
text-align: center;
}
.sent-message {
background-color: #d7a5eb;
border-radius: 30px;
padding: 10px 25px;
width: 25%;
float: right;
}
.received-message {
background-color: #cc64c3;
color: #000;
border-radius: 30px;
padding: 10px 25px;
width: 25%;
}
.message-receiver-container {
margin-left: auto;
margin-right: 0;
}
.message-sender-container {
margin-left: 0;
margin-right: auto;
}
.message-image-received {
border-radius: 10px;
max-width: 35%;
height: auto;
}
.message-image-sent {
border-radius: 10px;
max-width: 35%;
height: auto;
float: right;
}
.shared-post {
margin-left: 30px;
}
#Eduardo Tolmasquim
I've tried adding that and even with trial and error it didn't change anything. Despite this, I've managed to ~half way~ fix it, only problem is now the sent messages and received messages are on the wrong side! (i.e. the messages sent by the logged in user are on the left and the messages they received are on the right, on most apps like Whatsapp it is the other way round). This is what it looks like now.
thread.html:
{% extends 'landing/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<div class="row">
<div class="card col-md-12 mt-5 p-3 shadow-sm">
{% if thread.receiver == request.user %}
<h5><img class="rounded-circle post-img" height="50" width="50" src="{{ thread.user.profile.picture.url }}" /> #{{ thread.user }}</h5>
{% else %}
<h5>#{{ thread.receiver }}</h5>
{% endif %}
</div>
</div>
{% if message_list.all.count == 0 %}
<div class="row my-5">
<div class="col-md-12">
<p class="empty-text">No messages yet.</p>
</div>
</div>
{% endif %}
{% for message in message_list %}
<div class="row">
{% if message.sender_user == request.user %}
<div class="col-md-12 my-1">
{% if message.image %}
<div class="message-sender-container ms-auto">
<img src="{{ message.image.url }}" class="message-image" />
</div>
{% endif %}
<div class="sent-message my-3">
<p>{{ message.body }}</p>
</div>
</div>
{% elif message.receiver_user == request.user %}
<div class="col-md-12 offset-6">
{% if message.image %}
<div>
<img src="{{ message.image.url }}" class="message-image" />
</div>
{% endif %}
<div class="received-message my-3">
<p>{{ message.body }}</p>
</div>
</div>
{% endif %}
</div>
{% endfor %}
<div class="row">
<div class="card col-md-12 p-3 shadow-sm">
<form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
{% csrf_token %}
{{ form | crispy }}
<div class="d-grid gap-2 mt-3">
<button btn btn-light type="submit">Send Message</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
style.css:
.empty-text {
color: #777;
font-size: 1.5rem;
text-align: center;
}
.sent-message {
background-color: #d7a5eb;
border-radius: 30px;
padding: 10px 25px;
width: 35%;
}
.received-message {
background-color: #cc64c3;
color: #000;
border-radius: 30px;
padding: 10px 25px;
width: 35%;
}
.message-sender-container {
margin-left: auto;
margin-right: 0;
}
.message-image {
border-radius: 10px;
max-width: 35%;
height: auto;
}
.shared-post {
margin-left: 30px;
}
Related
I'm trying to create a table of records to update with a single click. I keep getting the error [{'id': ['This field is required.']}] I can't seem to figure it out. I have tried to put {{ form.label_tag }} in somewhere to see if that would help, but it doesn't. I can't figure out how to be sure id gets passed back in for the edit.
forms.py
class ReleaseAssignForm(ModelForm):
def __init__(self, *args, **kwargs):
super(ReleaseAssignForm, self).__init__(*args, **kwargs)
for key in self.fields:
self.fields[key].required = False
class Meta:
model = Releases
fields = [
'id',
'rel_title',
'rel_summary',
'rel_english_title',
'rel_english_summary',
'rel_country',
'rel_risk_category',
'rel_ops_category',
'rel_assoc_indicator',
'rel_industry',
'rel_risk_assigned',
'rel_ops_assigned',
'rel_indu_assigned',
'rel_indi_assigned',
]
views.py
def preview_releases(request):
today = datetime.date.today()
count = 0
releases = Releases.published.filter(rel_date=today)
ReleaseAssignFormSet = modelformset_factory(Releases, ReleaseAssignForm, fields = '__all__', extra=0)
if request.method == "POST":
formset = ReleaseAssignFormSet(request.POST, queryset=releases)
if formset.is_valid():
posts = formset.save(commit=False)
for post in posts:
post.save()
return redirect('preview_releases')
else:
print(formset.errors)
print("Form Invalid")
else:
formset = ReleaseAssignFormSet(queryset=releases)
count = formset.total_form_count()
context = {
'count': count,
'formset': formset,
}
return render(request, 'management/preview-releases.html', context)
template.html
<form action="" method="POST">
{% csrf_token %}
{{ formset.management_form }}
{% if formset %}
{% for form in formset.forms %}
<div class="row py-5" style="border-bottom: 1px black solid;font-size: 14px;">
<div class="row px-5 pb-2" style="border-bottom: 1px lightgray dotted;font-size: 14px;">
<div class="col px-5 pb-2">
<span style="font-size: 12px;color: darkred;">Risk Category</span><br>
{{ form.rel_risk_category }}
</div>
<div class="col px-5 pb-2" style="border-right: 1px darkgray dotted;">
<span style="font-size: 12px;color: darkred;">Assigned</span><br>
{{ form.rel_risk_assigned }}
</div>
<div class="col px-5 pb-2">
<span style="font-size: 12px;color: darkred;">Ops Category</span><br>
{{ form.rel_ops_category }}
</div>
<div class="col px-5 pb-2">
<span style="font-size: 12px;color: darkred;">Assigned</span><br>
{{ form.rel_ops_assigned }}
</div>
</div>
<div class="row px-5 pt-2 pb-5">
<div class="col px-5 pb-2">
<span style="font-size: 12px;color: darkred;">Associated Indicator</span><br>
{{ form.rel_assoc_indicator }}
</div>
<div class="col px-5 pb-2" style="border-right: 1px darkgray dotted;">
<span style="font-size: 12px;color: darkred;">Assigned</span><br>
{{ form.rel_indi_assigned }}
</div>
<div class="col px-5 pb-2">
<span style="font-size: 12px;color: darkred;">Industry</span><br>
{{ form.rel_industry }}
</div>
<div class="col px-5 pb-2" >
<span style="font-size: 12px;color: darkred;">Assigned</span><br>
{{ form.rel_indu_assigned }}
</div>
</div>
<div class="row">
<div class="col px-5">
<h3>{{ form.instance.rel_title }}</h3>
<p>{{ form.label_tag }}</p>
<p>{{ form.instance.rel_summary }}</p>
</div>
<div class="col px-5" style="border-left: 1px lightgray dashed;">
<a target="_blank" href="{% url 'clean_release' form.instance.id %}"><h3>{{ form.instance.rel_title }}</h3></a>
<p>{{ form.instance.rel_country }}</p>
{% autoescape off %}
<p>{{ form.instance.rel_summary }}</p>
{% endautoescape %}
</div>
<div class="col px-5" style="border-left: 1px lightgray dashed;">
<a target="_blank" href="{% url 'clean_release' form.instance.id %}"><h3>{{ form.instance.rel_english_title }}</h3></a>
<p>{{ form.instance.rel_country }}</p>
{% autoescape off %}
<p>{{ form.instance.rel_english_summary }}</p>
{% endautoescape %}
</div>
</div>
</div>
{% endfor %}
{% else %}
No resources found.
{% endif %}
<div class="text-end py-5">
<button type="submit" class="btn btn-primary">Submit Changes</button>
</div>
</div>
</form>
I think i have successfully created relation between user model and another table called shop_details but the data is not been inserted. i don't know what is going wrong.
the code is here.
models.py
from django.db import models
from django.contrib.auth.models import User
class Shop_Details(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
shop_name = models.CharField(max_length=50)
shop_street = models.TextField()
shop_area = models.TextField()
city = models.CharField(max_length=50)
state = models.CharField(max_length=50)
pin_code = models.TextField()
my views.py is here
views.py
def shop_detils(request):
if request.method == "POST":
shop_name = request.POST['shop_name']
shop_street = request.POST['shop_street']
shop_area = request.POST['shop_area']
city = request.POST['city']
state = request.POST['state']
pin_code = request.POST['pin_code']
if(len(str(pin_code))!=6):
messages.info(request,"please provide a valid address pin-code")
print("niceee...........................")
return render(request,'shop_details.html')
else:
if(is_number(int(pin_code))):
shop = Shop_Details(shop_name=shop_name,shop_street=shop_street,shop_area=shop_area,city=city,state=state,pin_code=pin_code,user=request.user)
shop.save()
messages.info(request,"Shop Details Updated")
shop_data = Shop_Details.objects.filter(user = request.user)
print(shop_data[1])
print("congrats...........................")
return redirect('home',{'data':shop_data})
else:
messages.info(request,"please provide a valid address")
print("nice2222222222222222222222222")
return render(request,'shop_details.html')
else:
return render(request,'shop_details.html')
my shop_details.html is here
shop_detsils.html
enter code here
{% extends 'layout.html' %}
{% csrf_token %}
{% if user.is_authenticated %}
{% csrf_token %}
{% load static %}
{% csrf_token %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% csrf_token %}
<body align="center">
{% csrf_token %}
{% csrf_token %}
{% csrf_token %}
{% block content %}
<form action="shop_detils" method="POST">
{% csrf_token %}
<div align="center" class='resp_code frms'>
{% csrf_token %}
<p align='center'<h5><font style='font: 1em/1.3em Tahoma,Geneva,sans-serif;'>
<b>Shop Details</b></font></h5></p>
<div id="selection">
{% csrf_token %}
<table>
{% csrf_token %}
<tr><td>Shop Name: </td><td><input required style="width:200%;" name="shop_name" type="text"></td></tr>
<tr><td>Shop Street: </td><td><input required style="width:200%;" name="shop_street" type="text"></td></tr>
<tr><td>Shop Area: </td><td><input required style="width:200%;" name="shop_area" type="text"></td></tr>
<tr><td>City: </td><td><input required style="width:200%;" name="city" type="text"></td></tr>
<tr><td>State: </td><td><input required style="width:200%" list="state" name="state" type="text"></td></tr>
<datalist id="state">
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Puducherry">Puducherry</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</datalist>
<tr><td>Pin-code: </td><td><input required name="pin_code" type="text"></td></tr>
</table>
<input style="border-radius: 0.5em; background-color:rgba(2, 2, 253, 0.753);
width:2.5cm;height:0.8cm; font-family: sans-serif;" type="submit" value="Submit">
</div>
</div>
</form>
{% endblock %}
</body>
{% endif %}
my layout.html is here. basically Iam extending layout.html in all html files.
layout.html
<!DOCTYPE html>
{% load static %}
{% csrf_token %}
<html>
<title>GrocSale</title>
<head>
<script language="Javascript" href="{% static 'js/jquery.js' %}"></script>
<script type="text/JavaScript" href="{% static 'js/state.js'%}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'style.css'%}">
</head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
{% csrf_token %}
<style>
* {box-sizing: border-box}
body{
background:url("{% static 'groc.jpeg' %}") no-repeat;
background-size:cover ;
background-attachment:fixed;
}
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 20%;
height: 1000px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
.divs{
width: 300px;
height: 300px;
border: 1px solid green;
padding: 50px;
float: left;
border-radius: 1em;
box-shadow: 10px 10px;
margin-right: 15px;
margin-left: 15px;
margin-top: 15px;
}
.divs:hover:not(.active) {
background-color: gold;
cursor: grab;
}
</style>
<body>
{% csrf_token %}
<header align="center" style="height: 150px;background-color:orange">
{% csrf_token %}
<strong>
{% csrf_token %}
{% for detail in data%}
<h1>{{detail.shop_name}}</h1>
<h4>Arokya,Hatsun,Arun All Products Available Here</h4>
<h6>{{detail.shop_street}}{{detail.shop_area}}, {{detail.city}}, {{detail.state}} - {{detail.pin_code}}</h6>
{% endfor %}
</strong>
</header>
<div style="background-color:orange;" class="tab" >
{% csrf_token %}
<button class="w3-bar-item w3-button" >Home</button>
<button class="w3-bar-item w3-button" >Add/Update Product</button>
<button class="w3-bar-item w3-button" >Add Stock/Update Stock</button>
<button class="w3-bar-item w3-button" >Add Sale</button>
<button class="w3-bar-item w3-button" >Total Sale</button>
<button class="w3-bar-item w3-button" >Daily Collection Customers</button>
<button class="w3-bar-item w3-button" >Today's Collection Status</button>
<button class="w3-bar-item w3-button" >Show Products</button>
<button class="w3-bar-item w3-button" >All Stock Orders</button>
<button class="w3-bar-item w3-button" >Settings</button>
<a href="{% url 'shop_detils' %}" ><button class="w3-bar-item w3-button" >Shop Details</button></a>
<button class="w3-bar-item w3-button" >Contact Us</button>
<button class="w3-bar-item w3-button" >Logout</button>
</div>
{% block content %}
{% endblock %}
</body>
</html>
Iam still a learner in Django.
Thanks in advance.
my error is shown in image
enter image description here
My Python Version 3.6+, Django version 1.11.6 and OS: Windows-10 64bit.
I am creating the PDF file with weasyprint within Django project. But the problem is Bengali font is not rendering. Please check this screenshot.
Now this is my views.py file
def get_pdf_file(request, customer_id, sys_type):
sys_type = customer_id
area = "pdf"
site_credit = site_credit1
time_now = timezone.now()
customers = get_object_or_404(CustomerInfo, pk=customer_id)
due_taka_track = customers.duetaka_set.all()
if due_taka_track == None:
due_taka_track = 0
unpaid_taka = int(customers.customer_price -
customers.customer_due_taka_info)
due_taka_track = customers.duetaka_set.all()
sum_cost_taka = due_taka_track.aggregate(
sp=Sum('customer_due')).get('sp', 0)
if sum_cost_taka == None:
sum_cost_taka = 0
total_paid_taka = sum_cost_taka + customers.customer_due_taka_info
payment_status = 'complete'
payment_message = ' '
remain_taka='Full Paid '
remain_msg=''
if customers.customer_due_taka_info < customers.customer_price:
payment_status = 'incomplete'
payment_message = 'সম্পূর্ন টাকা পরিষোধ করা হয়নি'
remain_msg='টাকা বাকী আছে'
baki_ase="পাওনা আছে "
remain_taka = customers.customer_price - customers.customer_due_taka_info
context = {'customers': customers,
'sys_type': sys_type,
'area': area,
'site_credit': site_credit,
'site_name': 'Moon Telecom',
'sys_type': sys_type,
'due_taka_track': due_taka_track,
'total_paid_taka': total_paid_taka,
'payment_message': payment_message,
'time_now': time_now,
'unpaid_taka': unpaid_taka,
'payment_message': payment_message,
'remain_taka': remain_taka,
'sum_cost_taka': sum_cost_taka,
'remain_msg': remain_msg}
html_string = render_to_string('shop/pdf_invoice.html', context).encode(encoding="UTF-8")
response = HttpResponse(content_type='application/pdf')
response['Content-Disposition'] = 'inline; filename=invoice' + \
str(customers.id)+customers.customer_uid + customers.customer_name + '.pdf'
HTML(string=html_string).write_pdf(response)
return response
and this is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>invoice copy {% if customers.customer_name %}Customer Name:{{customers.customer_name}}{% else %}
Name: দেওয়া হয়নি{% endif %} | {{customers.customer_uid}}</title>
<head>
<style>
#import url('https://fonts.maateen.me/siyam-rupali/font.css');
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
}
p,th,td,th,tr{
font-size:10px;line-height:12px
font-family: 'SiyamRupali', sans-serif;
}
.border_sx {
border-style: solid;
border-width: 1px;
padding: 5px;
border-radius: 5px;
display:block;
width: 100%;
margin-right:-100px;
padding: 10px;
}
#background{
position:absolute;
z-index:0;
background:white;
display:block;
min-height:50%;
min-width:50%;
color:yellow;
}
#content{
position:absolute;
z-index:0.1;
}
#bg-text
{
color:lightgrey;
font-size:70px;
margin-top: 160px;
margin-right: 40px;
transform:rotate(320deg);
-webkit-transform:rotate(300deg);
}
#bg-text-one
{
color:lightgrey;
font-size:20px;
line-height: 25px;
margin-right: 100px;
margin-bottom: 800px;
margin-top: -10px;
transform:rotate(320deg);
-webkit-transform:rotate(300deg);
}
#fix_font
{
font-size: 13.5px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
}
</style>
</head>
<body>
<div id="background">
<p id="bg-text">Moon Telecom</p>
<p id="bg-text-one">Fulhata Bazar জাহাঙ্গীর সুপার মার্কেট, ব্রীজ রোড, ফুলহাতা বাজার, মোডেলগঞ্জ। 01717-051200(সুকান্ত বসু) 01828-163858(দোকান)</p>
</div>
<div id="content" class="border_sx">
<div class="invoice_intro">
<div class="site_title" style="text-align:center; margin:0 auto">
<h1 style="font-size:10px;line-height:12px">ওঁ</h1>
<p style="font-size:8px;line-height:10px">মা কালী সহায়</p>
<h2 style="font-size:19px;line-height:13px;">মুন টেলিকম</h2>
<div class="invoice_info_one" style="width:70%;margin:0 auto; text-align:center">
<p style=";">সকল প্রকার মোবাইল সেট, সীম কার্ড, মেমোরী কার্ড, MP-3, সোলার চার্জার, সোলার ফ্যান, মোবাইল ফোনের ব্যাটারী, চার্জার,
ক্যাচিং,কাভার,হেডফোন, রেবন, ডিসপ্লে এবং ইলেট্রিক মালামাল বিক্রেতা</p>
</div>
<div class="invoice_location">
<p>জাহাঙ্গীর সুপার মার্কেট, ব্রীজ রোড, ফুলহাতা বাজার, মোডেলগঞ্জ।</p>
</div>
<div class="invoice_contact">
<p>01717-051200(সুকান্ত বসু) 01828-163858(দোকান)
<b>Email:</b> moontelecom2008#gmail.com</p>
</div>
<hr>
</div>
</div>
<div class="customer_part" style="width:40%;margin:0px left;display:block">
<div class="customer_info">
{% if customers.customer_name %}
<p style="font-size:">Customer Name:
<b> {{customers.customer_name}}</b>
</p>
{% else %}
<p> Name: দেওয়া হয়নি</p> {% endif %}
<p style="font-size:x">Phone Number: {% if customers.customer_mobile_no %} {{customers.customer_mobile_no}} {% else %} No Mobile Number
{% endif%}
</p>
<p style="font-size:">Purchase Time: {{customers.customer_sell_date}}</p>
<p style="font-size:">invoice id:
<b>{{customers.customer_uid}}</b>
</p>
<p>{{customers.product_warrenty}}</p>
</div>
</div>
<div class="">
<table style="border-style: solid;border-width: 0px;">
<tr>
<th>Product Name</th>
<th colspan="">Price</th>
<th>Product Price (MRP)</th>
<th>ID or IME</th>
<th>Warrenty</th>
<th>QN</th>
</tr>
<tr>
<td>
<b>{{customers.customer_product_name}}</b>
</td>
<td>
<b>Customer Price: {{customers.customer_price}}</b> TK
<i>{% if customers.customer_discount_taka %}
( Discount added {{customers.customer_discount_taka}} TK )
{% else%}
{%endif%}</i>
</td>
<td>{{customers.customer_product_mrp}} Taka * {{customers.customer_product_quantity}} (QN) </td>
<td>{{customers.customer_product_id}}</td>
<td>
{% if customers.customer_product_warrenty %} {{customers.customer_product_warrenty}} Months {% else %} No {% endif %}
</td>
<td>{{customers.customer_product_quantity}}</td>
</tr>
<th>
First Time Payment
</th>
<th>
{{customers.customer_first_time_payment}} TK
<span style="color:red">{{customers.customer_first_due_info}}</span>
</th>
<td>
{{customers.customer_sell_date}}
</td>
{% if due_taka_track %}
<tr>
<th>SL</th>
<th>Taka</th>
<th>Paid Date</th>
<th>Due Info</th>
</tr>
<hr> {% for track in due_taka_track %}
<tr>
<td>{{forloop.counter}}</td>
<td>
<i>{{track.customer_due}}</i> TK</td>
<td>{{track.customer_due_date}}</td>
<td>{{track.customer_due_info}}</td>
</tr>
{% endfor %} {% else %} {% endif %} {% if sum_cost_taka %}
<tr>
<td>Total Due Complete </td>
<th>{{sum_cost_taka}} TK</th>
</tr>
{% else %} {% endif %}
<tr>
<td>
<b>Total Paid</b>
</td>
<th>
{% if payment_message %}
{{customers.customer_due_taka_info}} TK
<span style="color:red">{{payment_message}}</span>
<br>
<button type="button" class="btn btn-danger">{{remain_msg}} {{remain_taka}}TK</button>
{%else %} {{customers.customer_due_taka_info}} TK
<button type="button" class="btn btn-success">Payment Completed</button>
{% endif %}
</th>
</tr>
</table>
<table border="none!important" style="margin-top:10px;border:none!important">
<tr>
<th style="text-align:left">Customer signature</th>
<th style="text-align:right">Authorized signature</th>
</tr>
</table>
</div>
<div class="customer_notifications">
<div class="container">
<div class="row">
<div class="col-lg-12">
{% if customers.customer_conditions %}
<div class="warning">
<p>
<i>{{customers.customer_product_name}} {{customers.customer_conditions}}</i>
</p>
</div>
{% else %} {% endif %}
<div class="col-lg-12">
<div class="footer_info">
<p id="fix_font"><b>বিঃদ্রঃ ডেলিভারির সময় মাল বুঝিয়া নিবেন। পরে কোন আপত্তী গ্রহনযোগ্য নয়। (বিক্রিত মাল ফেরত হয় না) </h6>
<p>Print date: {{time_now}}</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="display:block">
<div class="footer_info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="footer_info">
<div class="copy_right">
{% if site_credit %}
<p>{{site_credit}}</p>
{% else %} {% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I changed UTF-8/UTF but this issue did not fix.
I installed(Kalpurush) font on my PC. Then I added that font write_pdf variable.
HTML(string=html_string).write_pdf(response,stylesheets=[CSS(string='body,p,h1,h2,h3,h4,h5,tr,td { font-family: Kalpurush !important }')])
I am trying to tile images with the logic, if there are an even amount of images - tile them (2 per row) and then go on to the next row, if there is only one image - center it, if there are an odd number of images - tile the images but for the last one, center it.
<table style="border-spacing: 0px; margin: 0 auto; width: 100%">
<tbody>
<tr>{% for item in event.Items %}{% if forloop.counter|divisibleby:2 %}
<td style="margin-top: 5px;">
<p style="text-align: center; letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; padding: 15px 0;">{{ item.Name }}</p>
<img src="{{ item.ImageURL }}" style="width: 250px;" /></td>
</tr>
<tr>{% endif %}{% endfor %}
</tr>
</tbody>
I have also been trying to use {% if event.Items|length == 1 %}, {% elif forloop.last and forloop.counter|divisibleby:2 == False %} but have not been able to figure out exactly how to lay everything out. This example below is not tiled - figured using the html table would allow me to do this easier
For Example:
{% for item in event.Items %}{% if event.Items|length == 1 %}
<div style="margin:0 auto; text-align: center; clear: both;"><br />
<p style="display: block;"><a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" />
</a></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.last and forloop.counter|divisibleby:2 == False %}
<div style="clear: both;">def <br>
<a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" />
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.counter|divisibleby:2 == False %}
<div style="float: left;margin:0 auto; padding-left: 30px;">a
<p><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" /></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.counter|divisibleby:2 %}
<div style="float:right;margin:0 auto; padding-right: 30px;">b
<p><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" /></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% endif %} {% endfor %}
PS - forgive my inline styling!
I've created a add-to-cart in my website and it works just great.
Am using Jquery.getJSON to make the request to get the value of the chosen product, here is the code:
$(function() {
$('a#process_menu').bind('click', function() {
/*var amount = document.getElementById('kale').value;*/
$.getJSON('{{url_for("get_the_order")}}', {
menu_order: $(this).text(), price_order: $('input[name="kalkal"]').val(),
}, function(data) {
location.reload();
});
return false;
});
});
and here is the function that receiving the request:
#app.route('/get_the_order')
def get_the_order():
global the_order_list
try:
the_order_list = []
sum_list = []
get_order = request.args.get('menu_order', 0, type=str)
get_price = request.args.get('price_order', 0, type=str)
the_order_list.append(get_order)
sum_list.append(get_price)
session['theOrder'] = ' '.join(the_order_list)
session['price'] = ' '.join(sum_list)
return jsonify(result=the_order_list + sum_list)
except Exception as e:
return redirect("menu")
and here i have the template that shows all the products:
{% if entries_menu %}
{% for menu_ent in entries_menu %}
<div class="col-sm-6 col-md-3 col-lg-3 {{menu_ent.categorie}}">
<div class="portfolio-item">
<div class="hover-bg">
<a id="process_menu">
<div class="hover-text">
<h4 id="title">{{menu_ent.title}}</h4>
<small id="price">{{menu_ent.price}}</small>
<div class="clearfix"></div>
<i class="fa fa-plus add_basket"></i>
<div class="counter-order">
<div class="row">
<div class="col-md-3">
<form>
<fieldset>
<div class="form-group">
<input id="kale" name="kalkal" class="form-control" type="number" value="1" min="1" max="999" />
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<img src="../../static/{{menu_ent.path}}" class="img-responsive" alt="..." id="image-menu">
</a>
</div>
<h4 class="brand bold">{{menu_ent.title}}</h4>
<span class="price pull-right">{{menu_ent.price}} </span><span class="amount pull-right"> {{menu_ent.amount}}</span>
<p id="descr">{{menu_ent.descr}}</p>
</div>
</div>
{% endfor %}
{% endif %}
here i made this function to put all the products within array and showing them above where the cart exist beside the header, this is the file where all the logic happens also where it should show what i want:
{% if session.logged_in %}
{% if session.theOrder %}
<div class="confirm-cancel">
<i class="fa fa-close fa-3x btn-danger"></i>
<i class="fa fa-check fa-3x btn-success"></i>
</div>
{% endif %}
<li class='main'><a href='/#main'><span>Main</span></a></li>
<li class="comfort"><a href='/#ckidki' ><span>Chief</span></a></li>
<li class="menu"><a href='/menu/' ><span>Menu</span></a></li>
<li class="order"><a href="/order/" ><span>Make an order</span></a></li>
<li class="contact"><a href='/#contact' ><span>Contact us</span></a></li>
<li class="last orders"><a href='/admin/' ><span>Admin</span></a></li>
{% if session.theOrder %}
<li class="basket"><i class="fa fa-shopping-basket fa-3x" style="color: #fff;"><p class="pull-left" id="bask" style="font-size: 19px; font-weight: 600; font-family: "Russo One",sans-serif;">{{session.get('theOrder')}}  x{{session.get('price')}}</p></i></li>
{% else %}
<li class="basket"><i class="fa fa-shopping-basket fa-3x" style="color: #fff;"><p class="pull-left" id="bask" style="font-size: 19px; font-weight: 600; font-family: "Russo One",sans-serif;">0$   </p></i></li>
{% endif %}
{% endif %}
The problem is i can't get all the products that i've been chosen inside the session, so if i checked the products list i see only one, in fact , am getting only the clicked item every time.
Please, any suggestion how to make that work, anyway please, any help would be tons appreciated .
I modified your code like this:
the_order_list = session['theOrder']
sum_list = session['price']
the_order_list.append(get_order)
sum_list.append(get_price)
session['theOrder'] = the_order_list
session['price'] = sum_list
I was facing the same issue and finally got this answer!
#app.route('/addtocart/') #加入购物车选项
def addtocart():
id = request.args.get('id')
if 'cart' not in session:
session['cart'] = [] #
cart_list = session['cart']
cart_list.append(id)
session['cart'] = cart_list #
print(session)
cart_list = session['cart'] will return an empty list. Then, after cart_list.append(id), you've got a list with length 1. The key sentence is session['cart'] = cart_list, if you don't do this, your list's maximum length is 2.