Skip to content

Most of the design done #47

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

Open
laurent-bouhnik-gh wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Most of the design done #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
86a7b9f
more design
laurent-bouhnik-gh Nov 5, 2016
17f6b30
more design
laurent-bouhnik-gh Nov 5, 2016
c11187d
delete a booking
laurent-bouhnik-gh Nov 5, 2016
7efe9d6
delete a booking from renter side
laurent-bouhnik-gh Nov 5, 2016
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
53 changes: 53 additions & 0 deletions public/stylesheets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ form {
font-size: 1em;
}

ol {
color: grey;
}

input {
border-style: solid;
border-color: #c1c1c1;
Expand Down Expand Up @@ -89,6 +93,25 @@ input.button, {
.button:hover {
background-color: #ff7a7f;
}
.centered {
margin: 0 auto;
text-align: left;
width: 90%;
}
.buttons {
width: 10em;
height: 3em;
margin: 0.2em;
background-color: #ff5a60;
color: white;
font-size: 1em;
border-radius: 4px;
border-color: grey;
align: center;
}
.buttons:hover {
background-color: #ff7a7f;
}

.navbar {
position: fixed;
Expand All @@ -105,3 +128,33 @@ input.button, {
height: 2.6em;
width: 100%;
}
.single-booking {
display: flex;
margin: 10px;
padding: 20px;
height: 50px;
border-style: solid;
border-radius: 4px;
border-color: #c1c1c1;
border-width: 1px;
}
.single-listing {
display: flex;
margin: 10px;
padding: 20px;
height: 175px;
border-style: solid;
border-radius: 4px;
border-color: #c1c1c1;
border-width: 1px;
}
.single-request {
display: flex;
margin: 10px;
padding: 20px;
height: 100px;
border-style: solid;
border-radius: 4px;
border-color: #c1c1c1;
border-width: 1px;
}
53 changes: 30 additions & 23 deletions routes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,39 +25,46 @@ router.get('/login', function(req, res) {

router.post('/login',function(req,res){
sess = req.session;
return models.User.count({ where: { email: req.body.email } && { password: req.body.password } })
.then(count => {
if (count !== 0) {
sess.email=req.body.email;
res.redirect('/user');
}
res.render('login_error', {
sess: sess
});
return models.User.count({ where: { email: req.body.email } && { password: req.body.password } })
.then(count => {
if (count !== 0) {
sess.email=req.body.email;
res.redirect('/user');
}
res.render('login_error', {
sess: sess
});
});
});

router.post('/booking/accept/:booking_id', function(req, res) {
sess = req.session;
var user;
var booking;
models.Booking.find({where: {id: req.params.booking_id }}).then(function(booking) {
booking.update({accepted: true}).then(function(){
res.redirect('/user/my_account');
});
});
});
router.post('/booking/reject/:booking_id', function(req, res) {
sess = req.session;
var user;
var booking;
models.Booking.find({where: {id: req.params.booking_id }}).then(function(booking) {
booking.update({accepted: true}).then(function(){
res.redirect('/user/my_account');
});
booking.update({accepted: false}).then(function(){
res.redirect('/user/my_account');
});
});
});

router.post('/booking/reject/:booking_id', function(req, res) {
sess = req.session;
var user;
var booking;
models.Booking.findAll({where: {id: req.params.booking_id }}).then(function(booking) {
booking.update({accepted: false}).then(function(){
res.redirect('/user/my_account');
});
});
});

router.post('/booking/delete/:booking_id', function(req, res) {
sess = req.session;
var user;
var booking;
models.Booking.destroy({where: {id: req.params.booking_id }}).then(function(booking) {
res.redirect('/user/my_account');
});
});


Expand Down
73 changes: 48 additions & 25 deletions views/admin.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,50 +6,73 @@
<link rel="stylesheet" href="/stylesheets/home.css" media="screen" title="no title">
<link rel="stylesheet" href="/stylesheets/admin.css" media="screen" title="no title">
<script src="javascripts/auth.js"></script>
<script>
function deleteConfirmation() {
alert("Booking deleted!");
}
</script>
<% include ./partials/header.ejs %>
</head>

<body>

<div class="greeting">
<h2 style="font-size: 2em">Welcome back <%= user.firstname %>!</h2><br>
</div>
<div>
<% if (listings.length > 0) { %>
<h2 id="colorful" style="font-size: 3em">Your current listings:</h2>
<% listings.forEach(function(listing) { %>
<ul style="list-style: none;">
<ol> <img height="25%" width="25%" src=<%= listing.image %>></ol>
<ol><%= listing.name %></ol><br>
<ol>Description:<br><%= listing.description %></ol><br>
<ol>price per night: £<%= listing.price %></ol>
<ol><form action="/listings/update/<%= listing.id %>">
<input class="submit" type="submit" value="Update" />
<div class="single-listing">
<a href="/listings/view/<%= listing.id %>">
<div class="image">
<img src=<%= listing.dataValues.image %> height="175" width="250">
</div>
</a>
<div class="text-content">
<div class="title">
<h3><%= listing.dataValues.name %></h3>
</div>
<div class="price">
<h3>£<%= listing.dataValues.price %>/night</h3>
</div>
</div>
</div>
<ol style="margin-right:30em"><form action="/listings/update/<%= listing.id %>">
<input class="buttons" type="submit" value="Update" />
</form></ol>
<ol><form action="/listings/delete/<%= listing.id %>">
<input class="submit" type="submit" value="Delete" />
</form></ol>
<input class="buttons" type="submit" value="Delete" />
</form></ol><br><br><br><br>
</ul>
<% }); %>
<% } %>
</div>
<div>
<h2>My current bookings made</h2>
<% if (bookings.length > 0) { %>
<br><br><h2 id="colorful">My current bookings made:</h2>
<% bookings.forEach(function(booking) { %>
<ul style="list-style: none;">
<ol><%= booking.listing_id %></ol><br>
<ol>from<%= booking.checkin %></ol>
<ol>to <%= booking.checkout %></ol>
<ol>price per night: £<%= booking.price %></ol>
<ul class="single-booking"style="list-style: none;">
<ol><p>Listing number: <%= booking.listing_id %>. From <%= booking.checkin %> to <%= booking.checkout %> </p></ol>
<ol><% if(booking.accepted){ %>
<p> booking accepted, you will soon receive a confirmation email</p>
<p>Booking accepted. You will soon receive a confirmation email</p>
<% } else if (booking.accepted === false) { %>
<p> booking declined, you will soon receive an explanation email</p>
<p>Booking declined. You will soon receive an explanation email</p>
<% } else { %>
<p> booking's acceptation pending</p>
<p>Booking's acceptation pending</p>
<% } %>
</ol>
</ul>
<form style="margin-left: 30%"method="post" action="/booking/delete/<%= booking.id %>">
<input class="buttons" type="submit" value="Delete Booking" onclick="deleteConfirmation()" />
</form>
</ul><br>
<% }); %>
</div>
<% }; %>
</div><br>
<div style="margin-right:58em">
<form action="/user/my_account/requests" method="post">
<input type="submit" value="My requests" />
<input class="buttons"type="submit" value="My requests" />
</form>
<div class="greeting">
<h2>Welcome back <%= user.firstname %>. This is your admin page.</h2>
</div>
</div><br><br><br>
<div id="colorful">
<h1> Add a new listing </h1>
</div>
Expand Down
9 changes: 8 additions & 1 deletion views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<title>MakersBnB</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="/stylesheets/style.css" media="screen" title="no title">
<link rel="stylesheet" href="/stylesheets/home.css" media="screen" title="no title">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascripts/auth.js"></script>
<% include ./partials/header.ejs %>
Expand Down Expand Up @@ -33,6 +34,8 @@

.title {
height: 60px;
font-size: 1.5em;
color: grey
}

.image {
Expand All @@ -41,12 +44,16 @@

.price {
height: 60px;
font-size: 1em;
color: grey
}

.text-content {
display: flex;
flex-direction: column;
margin-left: 50px;
font-size: 1em;
color: grey
}

</style>
Expand All @@ -55,7 +62,7 @@
<body>

<article class="main">
<h1>Browse Listings</h1>
<h1 id="colorful">Browse Listings</h1>
<% allListings.forEach(function(listing){ %>
<div class="single-listing">
<a href="/listings/view/<%= listing.id %>">
Expand Down
51 changes: 33 additions & 18 deletions views/listing.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,23 @@

<% include ./partials/header.ejs %>
<style>
#textboxid {
height:200px;
#textboxenquery {
height:150px;
font-size:14pt;
color: grey;
}
#textboxbook{
height:30px;
font-size:14pt;
color: grey;
}
}

body {
text-align: center;
color: grey;
}


.content {
text-align: left;
display: flex;
Expand All @@ -24,20 +32,24 @@
padding: 50px;
border-color: #c1c1c1;
border-width: 1px;
color: grey;
}
.book {
color: #ff5a60;
}

.image {
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div>
<h1><%= listing.location %></h1>
<article class="content">
<div class="listing">
<div class="image">
<img src=<%= listing.image %> height="350" width="500">
<img src="<%= listing.image %>" height="500" width="700">
</div>
<div class="title">
<h2><%= listing.name %></h2>
Expand All @@ -49,25 +61,28 @@
<p>£<%= listing.price %>/night</p>
</div>
</div>

Send a booking request online:
<form action="/listings/book/<%= listing.id %>" method="post">
<input placeholder="dd/mm/yyyy" type="text" name="checkin">
<input placeholder="dd/mm/yyyy" type="text" name="checkout">
<input type="submit" value="Book">
</div>
<div>
<h1 class="book" >Send a booking request online:</h1>
<form style="margin-right: 50%;" action="/listings/book/<%= listing.id %>" method="post">
<input id="textboxbook" placeholder="dd/mm/yyyy" type="text" name="checkin" required>
<input id="textboxbook" placeholder="dd/mm/yyyy" type="text" name="checkout" required>
<input style="margin-left: 20%" class="buttons" type="submit" value="Book">
</form>
</div>
<div>
<br><br><br><br><br><br><h2 style="margin-right:30%; color: grey">Or send us an e-mail with your booking dates or enquery</h2>

<h2>Or send us an e-mail with your booking dates or enquery</h2>

<form action="mailto:<%= user.email %>" method="post" enctype="text/plain">
<form style="margin-right: 50%;" action="mailto:<%= user.email %>" method="post" enctype="text/plain">
<input placeholder="Name"type="text" name="name"><br>
<input placeholder="E-mail"type="text" name="mail"><br>
<input id="textboxid" placeholder="Booking"type="text" name="comment" size="50"><br><br>
<input type="submit" value="Book">
<input type="reset" value="Reset">
<input id="textboxenquery" type="text" name="comment" size="50"><br><br>
<input class="buttons" type="submit" value="Send">
<input class="buttons" type="reset" value="Reset">
</form>
</div>
<% include ./partials/footer.ejs %>
</article>




Expand Down
Loading