Skip to content

C
CSCI 41 Project
Commit 2b668e73 authored by Alia Lawraine Olay's avatar Alia Lawraine Olay
Browse files
Options

Edited CSS for detail.html

parent f1a263c4
Hide whitespace changes
Inline Side-by-side
Showing with 301 additions and 29 deletions
MagisAir/booking/models.py
View file @ 2b668e73
...@@ -49,7 +49,7 @@ class Flight(models.Model): ...@@ -49,7 +49,7 @@ class Flight(models.Model):
Destination_Airport = models.ForeignKey(City, on_delete=models.CASCADE, related_name='destination') Destination_Airport = models.ForeignKey(City, on_delete=models.CASCADE, related_name='destination')
def __str__(self): def __str__(self):
return self.Flight_Code + ' (' + self.Origin_Airport.City_Name + ' to ' + self.Destination_Airport.City_Name + ')' return self.Flight_Code
class Additional_Item(models.Model): class Additional_Item(models.Model):
......
MagisAir/booking/static/booking/detail.css 0 → 100644
View file @ 2b668e73
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
* {
font-family: Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #313334;
}
body {
background-color: #F6F6F6;
overflow-x: hidden;
}
.header {
display: flex;
position: relative;
width: 110%;
background-color: #F6F6F6;
top: -1rem;
left: -1rem;
padding: 0.5rem 0 0.5rem 1rem;
box-shadow: 0 10px 40px rgba(204, 212, 220, 0.5254901961);
}
i {
color: #04364B;
font-size: 50px;
margin: 1.7rem 0 0 2rem;
position: absolute;
}
h1 {
color: #04364B;
font-size: 3rem;
font-weight: 700;
font-family: "Poppins", sans-serif;
padding: 1rem 0 0 6rem;
z-index: 1;
}
h2 {
font-size: 60px;
font-weight: bold;
}
h2 + h4 {
background-color: #dce1e6;
padding: 5px 10px 5px;
}
h3 {
color: #2B7296;
font-size: 1.6rem;
text-transform: uppercase;
}
h4 {
margin: 1rem 0 0.5rem;
font-size: 1.2rem;
text-transform: uppercase;
}
p {
padding: 4px;
}
.main {
display: flex;
flex-direction: column;
padding: 3rem 17rem 3rem;
width: 60%;
}
.passenger-cost {
display: flex;
justify-content: space-between;
}
.passenger-cost .passenger {
width: 60%;
}
.passenger-cost .cost {
width: 20%;
}
.booking-details {
margin-top: 2rem;
}
.booking-details h4 {
margin-top: 1.5rem;
color: #7c7f82;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
th {
border: 2px solid #dce1e6;
text-align: left;
padding: 8px;
font-weight: lighter;
}
span {
font-weight: bolder;
}/*# sourceMappingURL=detail.css.map */
\ No newline at end of file
MagisAir/booking/static/booking/detail.css.map 0 → 100644
View file @ 2b668e73
{"version":3,"sources":["detail.scss","detail.css"],"names":[],"mappings":"AAAQ,qFAAA;AAUR;EACI,kCAAA;EACA,UAAA;EACA,SAAA;EACA,cARI;ACAR;;ADWA;EACI,yBAbI;EAcJ,kBAAA;ACRJ;;ADWA;EACI,aAAA;EACA,kBAAA;EACA,WAAA;EACA,yBArBI;EAsBJ,UAAA;EACA,WAAA;EACA,6BAAA;EACA,yDAAA;ACRJ;;ADWA;EACI,cAhCU;EAiCV,eAAA;EACA,uBAAA;EACA,kBAAA;ACRJ;;ADWA;EACI,cAvCU;EAwCV,eAAA;EACA,gBAAA;EACA,kCAAA;EACA,sBAAA;EACA,UAAA;ACRJ;;ADWA;EACI,eAAA;EACA,iBAAA;ACRJ;ADSI;EACI,yBA9CD;EA+CC,qBAAA;ACPR;;ADWA;EACI,cAxDW;EAyDX,iBAAA;EACA,yBAAA;ACRJ;;ADWA;EACI,qBAAA;EACA,iBAAA;EACA,yBAAA;ACRJ;;ADWA;EACI,YAAA;ACRJ;;ADWA;EACI,aAAA;EACA,sBAAA;EACA,wBAAA;EACA,UAAA;ACRJ;;ADWA;EACI,aAAA;EACA,8BAAA;ACRJ;ADSI;EACI,UAAA;ACPR;ADSI;EACI,UAAA;ACPR;;ADWA;EACI,gBAAA;ACRJ;ADSI;EACI,kBAAA;EACA,cAxFI;ACiFZ;;ADWA;EACI,yBAAA;EACA,WAAA;EACA,YAAA;ACRJ;;ADWA;EACI,yBAAA;EACA,gBAAA;EACA,YAAA;EACA,oBAAA;ACRJ;;ADWA;EACI,mBAAA;ACRJ","file":"detail.css"}
\ No newline at end of file
MagisAir/booking/static/booking/detail.scss 0 → 100644
View file @ 2b668e73
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
$dark-accent: #04364B;
$light-accent: #2B7296;
$light-accent2:#82a6b9;
$white: #F6F6F6;
$black: #313334;
$grey: #dce1e6;
$dark-grey: #7c7f82;
*{
font-family: Helvetica, sans-serif;
padding: 0;
margin: 0;
color: $black;
}
body{
background-color: $white;
overflow-x: hidden;
}
.header{
display:flex;
position: relative;
width: 110%;
background-color: $white;
top: -1rem;
left: -1rem;
padding: 0.5rem 0 0.5rem 1rem;
box-shadow: 0 10px 40px #ccd4dc86;
}
i{
color: $dark-accent;
font-size: 50px;
margin: 1.7rem 0 0 2rem;
position: absolute;
}
h1{
color: $dark-accent;
font-size: 3rem;
font-weight: 700;
font-family: 'Poppins', sans-serif;
padding: 1rem 0 0 6rem;
z-index: 1;
}
h2{
font-size: 60px;
font-weight: bold;
+ h4{
background-color: $grey;
padding: 5px 10px 5px;
}
}
h3{
color: $light-accent;
font-size: 1.6rem;
text-transform: uppercase;
}
h4{
margin: 1rem 0 0.5rem;
font-size: 1.2rem;
text-transform: uppercase;
}
p{
padding: 4px;
}
.main{
display: flex;
flex-direction: column;
padding: 3rem 17rem 3rem;
width: 60%;
}
.passenger-cost{
display: flex;
justify-content: space-between;
.passenger{
width: 60%;
}
.cost{
width: 20%;
}
}
.booking-details{
margin-top: 2rem;
h4{
margin-top: 1.5rem;
color: $dark-grey;
}
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
th {
border: 2px solid $grey;
text-align: left;
padding: 8px;
font-weight: lighter;
}
span{
font-weight: bolder;
}
\ No newline at end of file
MagisAir/booking/templates/booking/detail.html
View file @ 2b668e73
{% extends "booking/base.html" %} {% extends "booking/base.html" %}
{% load static %} {% load static %}
{% block content %} {% block styles %}
<h1> Booking Details </h1> <link rel ="stylesheet" type="text/css" href="{% static 'booking/detail.css' %}">
<h1> Passenger Information </h1> <script src="https://kit.fontawesome.com/e3617e5fde.js" crossorigin="anonymous"></script>
<p> {% endblock %}
Passenger ID: {{booking.Passenger.P_ID}} <br>
Passenger Name: {{booking.Passenger.First_Name}} {{booking.Passenger.Middle_Initial}} {{booking.Passenger.Last_Name}}<br>
Birth Date: {{booking.Passenger.Birthdate}} <br>
Age: {{booking.Passenger.Age}} <br>
Gender: {{booking.Passenger.Gender}} <br>
</p>
<h1> Total Cost </h1>
PHP {{booking.Total_Cost}}
<h1> Booking Information </h1>
Date Booked: {{booking.Booking_Date}}
<h1> Trip Itinerary </h1> {% block content %}
<div class="header">
{% for result in booksched %} <i class="fa-solid fa-earth-asia"></i>
{{result.Sched_Code.Flight_Code}} <h1> MAGIS AIR </h1>
{{result.Sched_Code.Departure_Time}} </div>
{{result.Sched_Code.Arrival_Time}} <div class="main">
{{result.Sched_Code.Duration}} <h2>Booking Details</h2>
{{result.Sched_Code.Flight_Cost}} <br> <h4>Booking ID: {{booking.Booking_ID}}</h4>
<div class="passenger-cost">
<div class="passenger">
<h3>Passenger Information</h3>
<p><span>Passenger ID:</span> {{booking.Passenger.P_ID}}</p>
<p><span>Passenger Name:</span> {{booking.Passenger.First_Name}} {{booking.Passenger.Middle_Initial}} {{booking.Passenger.Last_Name}}</p>
<p><span>Birth Date:</span> {{booking.Passenger.Birthdate}}</p>
<p><span>Age:</span> {{booking.Passenger.Age}}</p>
<p><span>Gender:</span> {{booking.Passenger.Gender}}</p>
</div>
<div class="cost">
<h3> Total Cost </h3>
<p>PHP{{booking.Total_Cost}}</p>
</div>
</div>
{% endfor %} <div class="booking-details">
<h3>Booking Information</h3>
<p><span>Date Booked:</span> {{booking.Booking_Date}}</p>
<h4>Trip Itinerary</h4>
<table>
<tr class="head">
<th style="color: #7c7f82; font-weight: bolder;">FLIGHT</th>
<th style="color: #7c7f82; font-weight: bolder;">ORIGIN</th>
<th style="color: #7c7f82; font-weight: bolder;">DESTINATION </th>
<th style="color: #7c7f82; font-weight: bolder;">DEPARTURE TIME</th>
<th style="color: #7c7f82; font-weight: bolder;">ARRIVAL TIME</th>
<th style="color: #7c7f82; font-weight: bolder;">DURATION</th>
<th style="color: #7c7f82; font-weight: bolder;">COST</th>
</tr>
{% for result in booksched %}
<tr>
<th>{{result.Sched_Code.Flight_Code}}</th>
<th>{{result.Sched_Code.Flight_Code.Origin_Airport.City_Name}}, {{result.Sched_Code.Flight_Code.Origin_Airport.Country}}</th>
<th>{{result.Sched_Code.Flight_Code.Destination_Airport.City_Name}}, {{result.Sched_Code.Flight_Code.Destination_Airport.Country}}</th>
<th>{{result.Sched_Code.Departure_Time | time:'H:i'}}</th>
<th>{{result.Sched_Code.Arrival_Time | time:'H:i'}}</th>
<th>{{result.Sched_Code.Duration}}</th>
<th>PHP{{result.Sched_Code.Flight_Cost}}</th>
</tr>
{% endfor %}
</table>
<h4>Additional Items</h4>
<table>
<tr class="head">
<th style="color: #7c7f82; font-weight: bolder;">DESCRIPTION</th>
<th style="color: #7c7f82; font-weight: bolder;">QUANTITY</th>
<th style="color: #7c7f82; font-weight: bolder;">SUBTOTAL </th>
</tr>
{% for item in add_items %}
<tr>
<th>{{item.AddItem_Desc}}</th>
<th>{{item.Quantity}}</th>
<th>PHP{{item.Subtotal}}</th>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endblock %} {% endblock %}
\ No newline at end of file
MagisAir/booking/views.py
View file @ 2b668e73
from django.http import HttpResponse from django.http import HttpResponse
from django.http import Http404 from django.http import Http404
from django.shortcuts import render, redirect from django.shortcuts import render, redirect
from .models import Booking, Booking_Sched, Passenger, City, Flight, Schedule from .models import Booking, Booking_Sched, Booking_AddItem, Passenger, City, Flight, Schedule
from django.views import View from django.views import View
from django.db.models import F from django.db.models import F
...@@ -56,9 +56,12 @@ def detail(request, booking_id=None): ...@@ -56,9 +56,12 @@ def detail(request, booking_id=None):
booking = Booking.objects.get(pk=booking_id) booking = Booking.objects.get(pk=booking_id)
#for trip itinerary table #for trip itinerary table
booksched = Booking_Sched.objects.select_related('Sched_Code').filter(Booking_ID=booking_id).all() booksched = Booking_Sched.objects.select_related('Sched_Code').filter(Booking_ID=booking_id).all()
#for additional items
add_items = Booking_AddItem.objects.filter(Booking_ID=booking_id).all()
context = { context = {
"booking": booking, "booking": booking,
"booksched": booksched "booksched": booksched,
"add_items": add_items
} }
except Booking.DoesNotExist: except Booking.DoesNotExist:
raise Http404("Booking does not exist!") raise Http404("Booking does not exist!")
......
Markdown is supported
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