So this time around, we want to add a delete button right here that allows us to delete the reservation.
So let's update the e-mail first.
Just add the button and then we'll add the necessary JavaScript and handlers in a moment.
Now, as I said before, I don't want to delete button to appear here.
I want it to be way over here and I'll make it red.
So it's easy to see.
But I want to make sure that it's far enough away that people don't accidentally click on that and delete
a reservation just without reading the dialog box, which in my experience happens far too frequently.
So that's not to hurt.
Bootstrap gives us some nice ways to do it.
So first of all, let's put the button in there.
I'm just going to duplicate that one and give myself some space and I'll give it the class of danger
button danger, which makes it red and I'll have it call a function delete rez, which doesn't exist
yet, and we'll call this delete.
And down here I'll just create an empty function for now called the function delete rez and it will
take an ID and we'll leave empty.
So let's see how that looks.
So there it is in the wrong spot.
I don't want it there.
I want it over here.
And fortunately, we can do that pretty easily in bootstrap.
We have these buttons from here.
Save down to Mark is processed.
I want those to be on the left.
So I'm going to wrap them in a div with the class of float left and I'll put the closing div down here.
And as you might have guessed already, I'll give this one the div of class float.
Right.
And move it to divide Dow, closing div tag down to here, format, the whole thing.
So what that does is everything inside this div will float to the left of the screen and everything
in this div will float to the right of the screen.
And any time you're floating things in bootstrap and this is a built in function, that's part of the
bootstrap framework, it's always good practice.
In fact, it's almost essential that you put this in div class equals clear fix.
And that makes sure that everything from this point on in the page will render properly, if you leave
this out, things will look strange.
So let's give this a save and reload this page.
And now that button is where I want it.
OK, so what am I going to do in this button?
Well, the reality is I'm doing almost exactly the same thing I'm doing here in process reservation.
I'm just calling a different you are out, which I will call delete reservation.
OK, so we should be able to save this, reload this and this should work.
And it does.
OK, and if I click OK, sure.
Take me to a page not found and it does.
So let's go set up the routes and the handlers.
I'll do the handler first.
So I'm in my handlers don't go file and I'm just going to copy this entire function pasted and rename
it admin process reservation becomes admin delete reservation and we'll copy this and fix the comment
and we'll just change this to say delete a reservation and all we have to do is change the message reservation
marked as process becomes reservation deleted and call the correct database function.
And it's as simple as delete reservation.
With just ID as a parameter and that we set up the route, so let's go back to our roots file and duplicate
this one, have it call admin, delete reservation and have it match this route, delete reservation,
and that should be it.
So let's try this.
Let's go back to our terminal, stop the application, start the application, make sure it compiles.
And it does.
And let's go reload this page.
Just to make sure everything's current and I've got John Smith reservation ID one, and I'm going to
delete that reservation.
And it's deleted and John Smith and if I go to all reservations and sort my ID, it is gone.
So that works exactly the way that we want it to.
Now, you might be asking yourself, OK, you deleted this reservation.
What about the item restrictions?
What about the room restrictions?
Well, if you look in the database and I'll go in here and look at room restrictions and refresh this
page, you will see that reservation ID one doesn't appear here anywhere.
And that's because we have a foreign key relationship that says, undelete Kaskade.
So on the room, the room restrictions table, the reservations table that's at the reservations table.
There's a foreign key between that and the column reservation underscore ID in room restrictions and
that foreign key says on update or undelete cascade.
So when you delete the reservation, the restrictions are deleted without you having to do anything
else.
And that's one of the great advantages of a foreign key relationship.
OK, so we're getting closer.
The next step is arguably the most difficult one we're going to do, and that is displaying the reservation
calendar.
And what I want to have happen on this page right now, it's just dummy content is I want to display
the current month and year.
Then I want to have one row for each of the rooms that we have.
So there'll be two rows and those rows will consist of checkboxes all the way across where I can check
a box and click save to close a room or block a room for a given date or date range.
And actual reservations will just show up with some indication that this is a reservation.
And clicking on it should take me to the page for that reservation.
And then I want to be able to move back and forth between months with buttons, maybe one over here
and one over here that will allow me to go to a specific month easily and we'll take care of that in
the next few lectures.