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
Show 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 styles %}
<link rel ="stylesheet" type="text/css" href="{% static 'booking/detail.css' %}">
<script src="https://kit.fontawesome.com/e3617e5fde.js" crossorigin="anonymous"></script>
{% endblock %}
{% block content %} {% block content %}
<h1> Booking Details </h1> <div class="header">
<h1> Passenger Information </h1> <i class="fa-solid fa-earth-asia"></i>
<p> <h1> MAGIS AIR </h1>
Passenger ID: {{booking.Passenger.P_ID}} <br> </div>
Passenger Name: {{booking.Passenger.First_Name}} {{booking.Passenger.Middle_Initial}} {{booking.Passenger.Last_Name}}<br> <div class="main">
Birth Date: {{booking.Passenger.Birthdate}} <br> <h2>Booking Details</h2>
Age: {{booking.Passenger.Age}} <br> <h4>Booking ID: {{booking.Booking_ID}}</h4>
Gender: {{booking.Passenger.Gender}} <br>
</p>
<h1> Total Cost </h1> <div class="passenger-cost">
PHP {{booking.Total_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>
<h1> Booking Information </h1> <div class="cost">
Date Booked: {{booking.Booking_Date}} <h3> Total Cost </h3>
<p>PHP{{booking.Total_Cost}}</p>
</div>
</div>
<h1> Trip Itinerary </h1> <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 %} {% for result in booksched %}
{{result.Sched_Code.Flight_Code}} <tr>
{{result.Sched_Code.Departure_Time}} <th>{{result.Sched_Code.Flight_Code}}</th>
{{result.Sched_Code.Arrival_Time}} <th>{{result.Sched_Code.Flight_Code.Origin_Airport.City_Name}}, {{result.Sched_Code.Flight_Code.Origin_Airport.Country}}</th>
{{result.Sched_Code.Duration}} <th>{{result.Sched_Code.Flight_Code.Destination_Airport.City_Name}}, {{result.Sched_Code.Flight_Code.Destination_Airport.Country}}</th>
{{result.Sched_Code.Flight_Cost}} <br> <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 %} {% 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