Hey what's up guys.
I'm Jacob Blitzer with slopes dot com and we got everything we wrote our objects to Rome and we fetched
your objects from Rome so now we just have to display all of our data and our in our log visi.
But before we get started let's pull up our terminal and I'm going to just make a new branch for this
lesson lesson 14.
All right.
And once that starts we're ready to go.
So if you go to our storyboard you remember we made the whole the whole run.
Table View cell.
Well we had to create we need to make a run cell view.
And we also had to connect all over IAB outlets before we can start displaying any of our data right.
So let's go ahead and right click our view folder and see new file and you want iOS and then let's do
a cocoa touch class and hit next.
And this is going to be we want to look for a you I table view cell and let's go ahead and just call
this our run log cell and don't create a zip file and language swift and hit next.
Make sure your target is selected for your project.
And here we are.
We are good here and we can delete the set selected over I don't need it.
We can get rid of this common code.
And I think that's good.
For now let's go back into our storyboard.
And get our cell selected.
So here's that and let's make sure that we have our reusable identifier.
So if you go into your attributes Inspektor right here second on from the top.
We have our identifier.
I like to call it exactly the same way.
I named my view file for it.
So run log cell.
And we named this run log cell already when we created it.
But just in case you missed that.
Make sure you have that in there.
And let's go ahead and open our assistant editor now I'm going to go ahead and close the inspector window
so we have a little more space for hooking up Iby outlets and it looks like it automatically opened
my run log Visi because we're on the run log but we want our our table view cell so click on automatic
and go to manual treads and go to View run logs cell and there we go.
Now we see ourselves get some space above the Awake from NIB and now we just have to connect all of
our labels so we can pass all of our data in.
So if you select it's going since we have all of our stack views it's going to be hard to select the
labels directly off the storyboard.
So I come in here in our little add on our storyboard tree and here's the duration label.
So I'm going to just control drag.
Oh you know what I forgot to do is we have to set up our cell.
Open up the inspector window again and go to the identity inspector and we have to set the class for
this.
We need it to be set to our run log cell.
And the reason I knew we needed to do that is because it let me connect or Iby outlets.
So now with that being done now our view is hooked to the cell and we can hide the identity or the inspector
window again and let's control drag from our duration label over here and we will call this our run
duration label Antar that's connected and then we have our distance level.
So we'll go ahead and do a controlled drag from that one and this will be our total our total distance
level right.
And now it's open up this stack view and this would be our average pace.
So let's go ahead and control drag from this label and we'll call this our average.
I'm just going to do I guess I'll spill it all the way out.
Average pace label and I spelt that way wrong.
I'm going to delete that and let's control drag again and connect a new idea that average pace label.
There we go.
And if we right click our cell it's just make sure.
OK.
So that first IAB outlet I hooked up and spelled wrong.
It still thinks it's connected.
So if you right click your your cell right here run log cell you'll see a little yellow like yield sign.
Go ahead and just hit the X there and that'll remove that IB outlet.
All right.
So we have our average pace hooked up.
Now we just have to hook up our date label and that is right here you'll see it selected and let's control
drag that over here and we will call this date label.
All right.
And that is all of our Iby outlets.
Let's go ahead and close the assistant editor and let's just pull open our run logs cell view now and
we can get everything configured right here.
So first things first we need a function that will configure this cell so we can call it from our table
view.
Right.
So let's do funk and we'll just call this configure and we're going to pass in a run object of type
run.
All right.
And then phunk There we go.
All right.
And then inside here we just need to set all of our our labels to conform to show the right data.
So our run duration labeled dot text is going to equal our run duration.
And then we want to format this to our time duration format time duration to string or remember when
we made that extension.
So that's going to take care of that format for us which is really cool it's taking our duration which
is an integer and making it a readable string.
And then let's do our total distance level dot text and call.
So we're going to have to cast this inside of a string because we want to add Miles and our meters to
Miles extension returns a double.
So we just need to pass in our run object here.
And then at the end of our label just put an eye for miles and we'll just call our run object that we
passed in and we're looking for the distance and then we want to make sure we do meters to Miles.
And we want to round to the nearest hundredth place so let's send it in to.
So it does two decimal places over.
All right.
And that one's done.
And now we need our average pace label that text and that is going to equal our run object dot pace.
And we also call our format time duration to string extension and that one's done.
Now we have our date label text.
We don't want to just do our run dot date because it's going to be ugly but we're going to do it for
now.
Just so you can see how it prints and this date.
And actually you see how it prints in any state down here still in my council from when we were printing
the object earlier it just prints the whole object with the time stamp.
And I believe this is the time zone.
But all we care about on our log is our date.
And we don't even want it in this order.
Let's pull up our.
Yes so we want it month day year.
And it gets returned to us a year month day.
So we had to reformat the next date a little bit.
Why don't we go ahead and do that.
Now let's go to our extensions folder and open up the extensions and inside the extensions we are going
to extend this date so extension and as date and we want to call this we'll do funk and we'll be like
get a date string.
That's good for now and it's going to return a string for us.
OK so we're returning a string when we call this and we're going to be passing in a test date.
So to get a hold of the components of this date we need a reference to the current calendar.
So let's make a variable called calendar and now just do a calendar dot current current OK so that is
our current calendar and then we need a reference to the month.
And now we can call the calendar variable we just created and do duck component and we can actually
pull out the component we want from the end date which would be months so do daat month.
Okay.
And then from what date we want it self and we can cast this as a date.
And that is the newer version of this date in swift which is fine that gives us these nicer tools to
pull out.
So we're pulling out the component month and setting it here and then all we have to do is do this two
more times we need to do the day and the year as well so let's do let day equal calendar component Daten
day.
And then this is self because we are we already have the N.S. date right.
And then let's just cast this as a date and then let year equal calendar component that year.
And then also for himself because we already are the dates are it and there we go.
Now we have each individual component from any state that we need.
And now all we have to do is return a string in the format that we want so return and go ahead and make
our string.
And now we just have to pass in a few objects here and the first one we want our month there and then
we want it to be a did we.
Did he do dashes or.
OK forward slashes.
So do a forward slash and then the next component which would be day and then forward slash and the
next component where the last component
which would be year and that is going to return a nice string exactly in the format that we want.
All right.
So this is done.
So now if we go back to a our run logs self-view we can just we don't need to
cast our object anymore or we can just say we want our run dot date object.
And now since we overrode Ennes date we can say forgot what we called our function get a date string.
OK.
So now we can just do not get date string.
And there we go.
So that will be all formatted for us and work.
So we're really close.
We're really close to being able to display our data but we do have to set up our our run log Visi now.
So we have our cell all ready to go.
But now we need our run log Visi and we don't have our table view or anything set up here yet.
So why don't we do that.
We need to open up.
Let's open up our storyboard.
All right.
And then let's open up our assistant editor and now we need to open up our r r log VCs So let's go ahead
and do automatic and there it is run MMOG Visi and there's nothing here.
I'm going to delete this.
Did receive memory warning override.
And these comments and feuded load and the very first thing we need to do is select our table view and
less control drag that over to the run log B.C. And we'll just call this variable table view.
And we'll create that IB outlet and that is all we're going to need to hook up to get this cell work.
So let's close our assistant editor so we have more space and go back to our run log Visi and we have
our table view now and we need to let's see here.
We need to make our table view right.
So why don't we go ahead and extend our run log VC So extension of run log visi.
And let's go ahead and have it inherit from our UI table view delegate and our UI table view data datasource
table view table view data source.
There we go.
Opening and closing brackets and then up in view did load.
Let's go ahead and say Table View dot delegate equals self and then Table View dot data source equals
self OK.
And now we need to have we need to know number of rows and section and we also need to know cell for
row at index path right.
So if we go ahead and just start typing the number of rows in section there we go and we'll just return
one for now.
Just so it stops yelling at us.
I mean just read and then we also need cell for a row cell for row an index path.
OK.
And here we will just return a run log cell for now.
And then we won't get yelled at with any errors.
I mean all we need on for Table B is cell for road and X path and number of 0 Oh this is number of sections.
No wonder why it's yelling at us.
All right we need a number of rows in section.
There we go return 1.
For now let's see if that gets rid of all of our errors.
You guys are probably screaming at me that I didn't see that OK.
There we go.
I was thought I was losing it for a second.
So now our table is all set up and we need to now pass in our data retrieve things.
All that cool stuff.
So why don't we instead of for the number of rows in a section.
Why don't we just simply return run that get all runs doc count and since that's optional if it fails
we'll just returns 0
and it's going to want us to optionally bind that.
OK so if so if I get all runs doesn't return anything we'll just return 0.
And so that means if there are no runs there will be zero rows in our
in our table view and then up here.
Let's go ahead and say if let sell.
So let's create our cell and this is going to be table view.
The Q reusable cell for index path our identifier is our run log cell.
Spelling is very important remember the reusable identifier.
All right.
And I don't want the 4 index path let's just delete that.
And this is going to be as a run Largs cell opening and closing brackets.
And then let's go ahead and create our run object for configuring our cell so we'll do a guard let run
equal run and get all runs and then we're going to we unwrap that and in the index since results can
you can call by index.
So we're going to just pass in the index path dot row to get the right object.
And then if this fails we're just going to return a empty run log cell.
All right.
So the guard if this fails it returns this if it doesn't fail it continues down here and we can go ahead
and call our cell doc configure and pass in our run object.
And now if we run our app we should see our two runs that we previously added to run.
And let's just go to our run MMOG and it looks like we have two cells.
OK.
So you guys are probably yelling at me again because I forgot to return the cell we just configure it.
I just left the blank UI table view cell down here.
And so underneath the cell config.
Now let's just return our cell if I can type.
OK.
And then else.
So if the cell were to be nil for whatever reason then we'll just return a empty run log cell.
OK.
And now that we're returning to our cell we will see this again.
And let's run this and now our data will show up and of just being 2 white blank spots.
And there we go.
And you know what I just realized we forgot to put the white divider line in.
So why don't we do that because this it's cool that we see it all but we want it very distinctive that
these are two separate cells.
So let's go back to our storyboard and we can just add a let's see a UI view.
Right here underneath date would probably be great.
And let's just shrink this down.
Shrink this up and let's spread it all the way to the sides and let's just go ahead and pin this zero
to the left zero to the right zero to the bottom and let's give this a height of like two points.
And let's see how that looks.
All right go into our log.
And there we go.
Now we have our line and it looks like there is.
It's not quite 100 percent opaque.
So let's say it's still highlighted for me.
It's not just select the view and in the identity in the attributes inspector Ulisses lower the alpha
a little bit and less childlike point six and see how that looks
OK click on my blog.
And that looks pretty awesome.
So I would say we are done.
We could probably even make it one point if you think two points is too thick.
But I'm going to leave that for now.
And now in the next lesson we're going to be able to work on some cool things so since we have data
from our old runs we can now go to our designs here.
And if you remember the on the here we go.
If you remember the map view when you finish a run we want this view to pop up and show previous run.
And we're going to have the pace distance and duration.
So if you guys want to challenge you guys should get that done before starting the next lesson.
And then if you need any help start the next lesson.
And that's what we're going to be doing next.
And since we have all our relm data you just have to poll the most recent run and display it on the
map view.
So I will see you guys in the next lesson.