We now have channels sending updates from our server to our client over WebSockets.

We need to set up our client's front end to receive these events.

So be warned, this video has a lot of HTML, and even some JavaScript in it.

Now I said we were going to be working on the front end,

the client side with this video.

And we are, but we need to make a couple of small back

end editions to give the front end somewhere to live.

We'll start by adding a new route to our urls.py.

So I'm gonna add from votes.views,

import DashboardView which doesn't exist yet.

We'll have to make that in a second.

And a lot of new URL here which is dashboard and

we'll go to DashboardView.as_View name=dashboard.

All right, and now we need to edit the views.py here in the votes app,

which is completely empty.

Let's clear that out from django.views.generic

import TemplateView and from .models import Voter.

And this will make class DashboardView which is a TemplateView.

The template_name will be votes/dashboard.html and

in the get_context_data we'll say that

context_data = super.get_context_data

with whatever the kwargs are.

And then we'll say context_data'voters' = Voter.objects.all.

And we'll return the context data.

Now the dashboard view doesn't do much because well, it doesn't need to.

It's mostly just fetching the voters so we'll have some nice labels or

our dashboard.

Now speaking of that dashboard in our votes app we need to add a new directory,

named templates.

And then inside of templates we need to add another new directory named votes.

And inside of there you all know this drill.

We need to add a new file which we're gonna called dashboard.html.

And I already have some code generated for that.

So let me copy and paste this in.

And then we'll talk about what's there.

For the most part it's fairly simple.

And it's just some HTML to show the dashboard.

Couple of things to note about this though, we're using tables the way that

they are intended for actual tabular data instead of the layout of a page.

And two, we have these spans that are down here and we're creating these so

that our JavaScript has like a handle to grab onto to the update values.

And we're prefacing them with this js-, so

that we know, by looking at it, that this is for JavaScript not for CSS.

This is a somewhat common practice nowadays for prefix and

class names based on what they're doing.

Okay, so if we make sure that our server is running, and we come over here to

the dashboard page, we should see a pretty basic dashboard here.

Now it doesn't look great, all right.

It's not super pretty.

We can make it look better and we can also bring in a library that we're gonna need

with the jQuery library by bringing in bootstrap.

Now bootstrap as you're probably aware is a collection of CSS and

JavaScript that lets you add a bit of polish and interactivity or

just a clean default look to your website.

And it's often a really good starting place

if you're not sure how to make your site look great.

Your site will look okay using dashboard.

A benefit is that it depends on jQuery, which is a good fit for our needs.

Now you could of course use a more specific JavaScript library if you wanted

to, but jQuery's plenty for this workshop and it's, you know,

what I often reach for.

So let's bring in the bootstrap CSS,

which this goes right here in the head.

And then let's bring in the bootstrap JavaScript and jQuery itself.

Now we don't necessarily need the bootstrap JavaScript,

simply because I'm not gonna be doing any bootstrappy JavaScript.

But it never hurts to have things available,

just in case you need them later on.

So I'm gonna save both of those and all of this is going to be in the repo of course,

so you can check it out from the repo.

And we've added this class="table" to the table so

that bootstrap applies some nice styling, and let's refresh and see how this looks.

Yeah, that's a lot better.

That looks a lot nicer.

We can see who's doing want everything's lined up pretty nicely.

Okay, so now let's add in some JavaScript to handle all the WebSocket stuff.

So down here, below all of the other script tags, I'm gonna add a new script

tag and on document.ready,

we're going to run a function.

So first off we're gonna make a socket which is

a new WebSocket and it's gonna go to WS:// and

it will bring in window.location.host.

So that way it will work regardless of what our host name is and

then we'll do socket.onmessage.

We're gonna run a function, which takes an event.

Or rather some data like a message.

We'll say var data = JSON.parse(e.data).

And then for (var voter in data).

And for (var category in data voter).

And now we're gonna bring in our bet of jQuery.

So we'll do (*.js- " +_voter + "- "

+_category + "-yes", and

that text is gonna be updated to

(data[voter][category]["yes"].

So whatever the value is that's in there.

And let's just copy that and let's change this yes to a no.

And this yes to a no.

All right, so those two lines are exactly the same with the exception of yes and no.

So let's go over this just for a second.

So we're waiting here until the page is ready to be acted on and

then we're creating this websocket connection.

Now when that WebSocket connection receives data which is on this on message.

We go through the JSON dictionary that we send over a websockets and

we update the table cells with the right values.

Our dashboard should now be ready.

So I'm gonna reconnect here,

I'm gonna refresh this just to make sure the WebSockets are done.

And I'm gonna open up the admin over here, and I'm gonna go change this housing vote.

So let's save it like it is right now, so I'm gonna choose save and

continue editing.

And we see this page immediately update, these all got yeses.

And we've got a no there, and that stuff there.

So let's say that on this vote, let's say only Chairperson Tompkins and

Bello voted yes.

And that Adamson and Perez both voted no.

So I'm gonna save and update these again.

And we should see these housing values right here change.

And they did immediately, I didn't have to do anything,

that's just, it's real time, it's amazing that, that works.

So congratulations, we've built a real time WebSockets Power Data dashboard

powered Channels and Django.

All that's left is getting it deployed and we'll touch on that in the next video.