1
00:00:06,010 --> 00:00:06,940
Hey what's up guys.

2
00:00:06,940 --> 00:00:15,510
I'm Jacob Blitzer with slopes dot com and we got everything we wrote our objects to Rome and we fetched

3
00:00:15,510 --> 00:00:21,940
your objects from Rome so now we just have to display all of our data and our in our log visi.

4
00:00:21,970 --> 00:00:27,460
But before we get started let's pull up our terminal and I'm going to just make a new branch for this

5
00:00:27,460 --> 00:00:31,940
lesson lesson 14.

6
00:00:32,310 --> 00:00:32,820
All right.

7
00:00:32,830 --> 00:00:35,010
And once that starts we're ready to go.

8
00:00:35,170 --> 00:00:42,940
So if you go to our storyboard you remember we made the whole the whole run.

9
00:00:42,940 --> 00:00:44,330
Table View cell.

10
00:00:44,530 --> 00:00:48,300
Well we had to create we need to make a run cell view.

11
00:00:48,490 --> 00:00:54,540
And we also had to connect all over IAB outlets before we can start displaying any of our data right.

12
00:00:54,730 --> 00:01:03,220
So let's go ahead and right click our view folder and see new file and you want iOS and then let's do

13
00:01:03,220 --> 00:01:06,730
a cocoa touch class and hit next.

14
00:01:06,830 --> 00:01:16,820
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

15
00:01:16,850 --> 00:01:26,420
this our run log cell and don't create a zip file and language swift and hit next.

16
00:01:26,420 --> 00:01:28,780
Make sure your target is selected for your project.

17
00:01:30,220 --> 00:01:31,330
And here we are.

18
00:01:31,360 --> 00:01:38,160
We are good here and we can delete the set selected over I don't need it.

19
00:01:38,350 --> 00:01:41,210
We can get rid of this common code.

20
00:01:41,560 --> 00:01:43,300
And I think that's good.

21
00:01:43,300 --> 00:01:46,230
For now let's go back into our storyboard.

22
00:01:47,560 --> 00:01:49,510
And get our cell selected.

23
00:01:49,510 --> 00:01:55,950
So here's that and let's make sure that we have our reusable identifier.

24
00:01:56,110 --> 00:02:01,900
So if you go into your attributes Inspektor right here second on from the top.

25
00:02:01,900 --> 00:02:03,510
We have our identifier.

26
00:02:03,700 --> 00:02:06,100
I like to call it exactly the same way.

27
00:02:06,130 --> 00:02:08,860
I named my view file for it.

28
00:02:08,860 --> 00:02:10,640
So run log cell.

29
00:02:10,750 --> 00:02:13,720
And we named this run log cell already when we created it.

30
00:02:13,720 --> 00:02:15,400
But just in case you missed that.

31
00:02:15,400 --> 00:02:17,630
Make sure you have that in there.

32
00:02:18,070 --> 00:02:23,230
And let's go ahead and open our assistant editor now I'm going to go ahead and close the inspector window

33
00:02:23,230 --> 00:02:30,580
so we have a little more space for hooking up Iby outlets and it looks like it automatically opened

34
00:02:30,580 --> 00:02:37,300
my run log Visi because we're on the run log but we want our our table view cell so click on automatic

35
00:02:37,960 --> 00:02:43,720
and go to manual treads and go to View run logs cell and there we go.

36
00:02:43,720 --> 00:02:49,360
Now we see ourselves get some space above the Awake from NIB and now we just have to connect all of

37
00:02:49,360 --> 00:02:53,060
our labels so we can pass all of our data in.

38
00:02:53,410 --> 00:02:58,120
So if you select it's going since we have all of our stack views it's going to be hard to select the

39
00:02:58,120 --> 00:03:00,550
labels directly off the storyboard.

40
00:03:00,550 --> 00:03:07,660
So I come in here in our little add on our storyboard tree and here's the duration label.

41
00:03:07,660 --> 00:03:11,640
So I'm going to just control drag.

42
00:03:11,980 --> 00:03:18,120
Oh you know what I forgot to do is we have to set up our cell.

43
00:03:18,220 --> 00:03:25,270
Open up the inspector window again and go to the identity inspector and we have to set the class for

44
00:03:25,270 --> 00:03:25,660
this.

45
00:03:25,660 --> 00:03:28,950
We need it to be set to our run log cell.

46
00:03:28,960 --> 00:03:33,450
And the reason I knew we needed to do that is because it let me connect or Iby outlets.

47
00:03:33,460 --> 00:03:40,810
So now with that being done now our view is hooked to the cell and we can hide the identity or the inspector

48
00:03:40,810 --> 00:03:49,430
window again and let's control drag from our duration label over here and we will call this our run

49
00:03:49,550 --> 00:03:56,390
duration label Antar that's connected and then we have our distance level.

50
00:03:56,450 --> 00:04:04,100
So we'll go ahead and do a controlled drag from that one and this will be our total our total distance

51
00:04:04,970 --> 00:04:07,690
level right.

52
00:04:07,730 --> 00:04:12,380
And now it's open up this stack view and this would be our average pace.

53
00:04:12,380 --> 00:04:17,970
So let's go ahead and control drag from this label and we'll call this our average.

54
00:04:18,110 --> 00:04:21,420
I'm just going to do I guess I'll spill it all the way out.

55
00:04:21,440 --> 00:04:26,320
Average pace label and I spelt that way wrong.

56
00:04:26,320 --> 00:04:35,060
I'm going to delete that and let's control drag again and connect a new idea that average pace label.

57
00:04:35,060 --> 00:04:36,290
There we go.

58
00:04:36,890 --> 00:04:40,430
And if we right click our cell it's just make sure.

59
00:04:40,590 --> 00:04:40,900
OK.

60
00:04:40,910 --> 00:04:44,120
So that first IAB outlet I hooked up and spelled wrong.

61
00:04:44,360 --> 00:04:45,860
It still thinks it's connected.

62
00:04:45,860 --> 00:04:54,020
So if you right click your your cell right here run log cell you'll see a little yellow like yield sign.

63
00:04:54,020 --> 00:04:58,840
Go ahead and just hit the X there and that'll remove that IB outlet.

64
00:04:58,850 --> 00:04:59,170
All right.

65
00:04:59,180 --> 00:05:01,580
So we have our average pace hooked up.

66
00:05:01,580 --> 00:05:08,840
Now we just have to hook up our date label and that is right here you'll see it selected and let's control

67
00:05:08,840 --> 00:05:15,820
drag that over here and we will call this date label.

68
00:05:15,850 --> 00:05:16,300
All right.

69
00:05:16,330 --> 00:05:18,680
And that is all of our Iby outlets.

70
00:05:19,090 --> 00:05:25,690
Let's go ahead and close the assistant editor and let's just pull open our run logs cell view now and

71
00:05:25,690 --> 00:05:30,230
we can get everything configured right here.

72
00:05:30,270 --> 00:05:36,420
So first things first we need a function that will configure this cell so we can call it from our table

73
00:05:36,420 --> 00:05:36,660
view.

74
00:05:36,660 --> 00:05:37,540
Right.

75
00:05:37,560 --> 00:05:43,500
So let's do funk and we'll just call this configure and we're going to pass in a run object of type

76
00:05:43,500 --> 00:05:45,990
run.

77
00:05:46,030 --> 00:05:46,740
All right.

78
00:05:46,830 --> 00:05:50,380
And then phunk There we go.

79
00:05:51,700 --> 00:05:52,190
All right.

80
00:05:52,210 --> 00:06:00,000
And then inside here we just need to set all of our our labels to conform to show the right data.

81
00:06:00,010 --> 00:06:08,500
So our run duration labeled dot text is going to equal our run duration.

82
00:06:08,720 --> 00:06:15,170
And then we want to format this to our time duration format time duration to string or remember when

83
00:06:15,170 --> 00:06:16,700
we made that extension.

84
00:06:16,700 --> 00:06:22,100
So that's going to take care of that format for us which is really cool it's taking our duration which

85
00:06:22,100 --> 00:06:25,470
is an integer and making it a readable string.

86
00:06:25,670 --> 00:06:31,050
And then let's do our total distance level dot text and call.

87
00:06:31,640 --> 00:06:38,180
So we're going to have to cast this inside of a string because we want to add Miles and our meters to

88
00:06:38,180 --> 00:06:41,150
Miles extension returns a double.

89
00:06:41,150 --> 00:06:46,470
So we just need to pass in our run object here.

90
00:06:46,490 --> 00:06:54,050
And then at the end of our label just put an eye for miles and we'll just call our run object that we

91
00:06:54,050 --> 00:07:02,260
passed in and we're looking for the distance and then we want to make sure we do meters to Miles.

92
00:07:02,330 --> 00:07:08,300
And we want to round to the nearest hundredth place so let's send it in to.

93
00:07:08,570 --> 00:07:11,170
So it does two decimal places over.

94
00:07:11,810 --> 00:07:12,220
All right.

95
00:07:12,230 --> 00:07:13,680
And that one's done.

96
00:07:13,880 --> 00:07:22,450
And now we need our average pace label that text and that is going to equal our run object dot pace.

97
00:07:22,670 --> 00:07:29,390
And we also call our format time duration to string extension and that one's done.

98
00:07:29,390 --> 00:07:33,080
Now we have our date label text.

99
00:07:34,280 --> 00:07:42,110
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

100
00:07:42,110 --> 00:07:44,930
now.

101
00:07:44,930 --> 00:07:48,350
Just so you can see how it prints and this date.

102
00:07:48,800 --> 00:07:54,290
And actually you see how it prints in any state down here still in my council from when we were printing

103
00:07:54,290 --> 00:07:59,390
the object earlier it just prints the whole object with the time stamp.

104
00:07:59,390 --> 00:08:02,380
And I believe this is the time zone.

105
00:08:02,690 --> 00:08:08,060
But all we care about on our log is our date.

106
00:08:08,090 --> 00:08:11,370
And we don't even want it in this order.

107
00:08:11,450 --> 00:08:13,140
Let's pull up our.

108
00:08:13,460 --> 00:08:16,490
Yes so we want it month day year.

109
00:08:16,550 --> 00:08:20,240
And it gets returned to us a year month day.

110
00:08:20,240 --> 00:08:24,710
So we had to reformat the next date a little bit.

111
00:08:25,010 --> 00:08:27,850
Why don't we go ahead and do that.

112
00:08:27,860 --> 00:08:36,500
Now let's go to our extensions folder and open up the extensions and inside the extensions we are going

113
00:08:36,500 --> 00:08:49,830
to extend this date so extension and as date and we want to call this we'll do funk and we'll be like

114
00:08:49,830 --> 00:08:52,640
get a date string.

115
00:08:52,830 --> 00:08:58,320
That's good for now and it's going to return a string for us.

116
00:08:58,340 --> 00:09:06,290
OK so we're returning a string when we call this and we're going to be passing in a test date.

117
00:09:06,320 --> 00:09:14,230
So to get a hold of the components of this date we need a reference to the current calendar.

118
00:09:14,360 --> 00:09:23,430
So let's make a variable called calendar and now just do a calendar dot current current OK so that is

119
00:09:23,430 --> 00:09:29,980
our current calendar and then we need a reference to the month.

120
00:09:30,150 --> 00:09:38,550
And now we can call the calendar variable we just created and do duck component and we can actually

121
00:09:38,550 --> 00:09:44,320
pull out the component we want from the end date which would be months so do daat month.

122
00:09:44,910 --> 00:09:45,710
Okay.

123
00:09:45,870 --> 00:09:50,950
And then from what date we want it self and we can cast this as a date.

124
00:09:51,240 --> 00:09:59,550
And that is the newer version of this date in swift which is fine that gives us these nicer tools to

125
00:09:59,550 --> 00:10:00,400
pull out.

126
00:10:00,450 --> 00:10:09,030
So we're pulling out the component month and setting it here and then all we have to do is do this two

127
00:10:09,030 --> 00:10:17,620
more times we need to do the day and the year as well so let's do let day equal calendar component Daten

128
00:10:17,670 --> 00:10:18,700
day.

129
00:10:19,470 --> 00:10:24,370
And then this is self because we are we already have the N.S. date right.

130
00:10:24,570 --> 00:10:33,510
And then let's just cast this as a date and then let year equal calendar component that year.

131
00:10:33,780 --> 00:10:39,840
And then also for himself because we already are the dates are it and there we go.

132
00:10:39,840 --> 00:10:43,910
Now we have each individual component from any state that we need.

133
00:10:43,950 --> 00:10:52,050
And now all we have to do is return a string in the format that we want so return and go ahead and make

134
00:10:52,050 --> 00:10:52,980
our string.

135
00:10:53,100 --> 00:11:00,480
And now we just have to pass in a few objects here and the first one we want our month there and then

136
00:11:00,480 --> 00:11:03,440
we want it to be a did we.

137
00:11:03,440 --> 00:11:05,390
Did he do dashes or.

138
00:11:05,440 --> 00:11:06,980
OK forward slashes.

139
00:11:07,080 --> 00:11:13,560
So do a forward slash and then the next component which would be day and then forward slash and the

140
00:11:13,560 --> 00:11:15,870
next component where the last component

141
00:11:18,460 --> 00:11:26,740
which would be year and that is going to return a nice string exactly in the format that we want.

142
00:11:26,740 --> 00:11:28,260
All right.

143
00:11:28,350 --> 00:11:29,530
So this is done.

144
00:11:29,670 --> 00:11:38,450
So now if we go back to a our run logs self-view we can just we don't need to

145
00:11:41,740 --> 00:11:46,900
cast our object anymore or we can just say we want our run dot date object.

146
00:11:47,020 --> 00:11:58,120
And now since we overrode Ennes date we can say forgot what we called our function get a date string.

147
00:11:58,120 --> 00:11:58,750
OK.

148
00:11:59,260 --> 00:12:03,390
So now we can just do not get date string.

149
00:12:03,490 --> 00:12:04,510
And there we go.

150
00:12:04,510 --> 00:12:07,940
So that will be all formatted for us and work.

151
00:12:07,990 --> 00:12:11,290
So we're really close.

152
00:12:11,290 --> 00:12:19,000
We're really close to being able to display our data but we do have to set up our our run log Visi now.

153
00:12:19,000 --> 00:12:21,450
So we have our cell all ready to go.

154
00:12:21,760 --> 00:12:28,920
But now we need our run log Visi and we don't have our table view or anything set up here yet.

155
00:12:28,960 --> 00:12:30,690
So why don't we do that.

156
00:12:30,700 --> 00:12:32,050
We need to open up.

157
00:12:32,050 --> 00:12:37,180
Let's open up our storyboard.

158
00:12:37,200 --> 00:12:37,870
All right.

159
00:12:37,900 --> 00:12:49,500
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

160
00:12:49,500 --> 00:12:54,000
and do automatic and there it is run MMOG Visi and there's nothing here.

161
00:12:54,000 --> 00:12:54,900
I'm going to delete this.

162
00:12:54,900 --> 00:12:57,160
Did receive memory warning override.

163
00:12:57,180 --> 00:13:04,050
And these comments and feuded load and the very first thing we need to do is select our table view and

164
00:13:04,050 --> 00:13:11,180
less control drag that over to the run log B.C. And we'll just call this variable table view.

165
00:13:13,230 --> 00:13:20,430
And we'll create that IB outlet and that is all we're going to need to hook up to get this cell work.

166
00:13:20,430 --> 00:13:28,380
So let's close our assistant editor so we have more space and go back to our run log Visi and we have

167
00:13:28,380 --> 00:13:34,590
our table view now and we need to let's see here.

168
00:13:34,710 --> 00:13:37,500
We need to make our table view right.

169
00:13:37,500 --> 00:13:45,320
So why don't we go ahead and extend our run log VC So extension of run log visi.

170
00:13:45,910 --> 00:13:56,920
And let's go ahead and have it inherit from our UI table view delegate and our UI table view data datasource

171
00:13:56,920 --> 00:14:03,590
table view table view data source.

172
00:14:03,590 --> 00:14:04,310
There we go.

173
00:14:04,310 --> 00:14:10,090
Opening and closing brackets and then up in view did load.

174
00:14:10,370 --> 00:14:20,210
Let's go ahead and say Table View dot delegate equals self and then Table View dot data source equals

175
00:14:20,210 --> 00:14:24,550
self OK.

176
00:14:24,860 --> 00:14:33,760
And now we need to have we need to know number of rows and section and we also need to know cell for

177
00:14:33,760 --> 00:14:35,980
row at index path right.

178
00:14:36,040 --> 00:14:43,690
So if we go ahead and just start typing the number of rows in section there we go and we'll just return

179
00:14:45,160 --> 00:14:46,360
one for now.

180
00:14:46,360 --> 00:14:48,590
Just so it stops yelling at us.

181
00:14:48,610 --> 00:14:55,370
I mean just read and then we also need cell for a row cell for row an index path.

182
00:14:55,630 --> 00:14:56,470
OK.

183
00:14:56,470 --> 00:15:03,980
And here we will just return a run log cell for now.

184
00:15:05,630 --> 00:15:08,810
And then we won't get yelled at with any errors.

185
00:15:08,810 --> 00:15:17,360
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.

186
00:15:17,360 --> 00:15:19,560
No wonder why it's yelling at us.

187
00:15:19,940 --> 00:15:25,420
All right we need a number of rows in section.

188
00:15:25,420 --> 00:15:27,130
There we go return 1.

189
00:15:27,130 --> 00:15:30,020
For now let's see if that gets rid of all of our errors.

190
00:15:31,830 --> 00:15:37,040
You guys are probably screaming at me that I didn't see that OK.

191
00:15:37,280 --> 00:15:38,480
There we go.

192
00:15:38,920 --> 00:15:41,760
I was thought I was losing it for a second.

193
00:15:41,980 --> 00:15:50,910
So now our table is all set up and we need to now pass in our data retrieve things.

194
00:15:51,250 --> 00:15:52,870
All that cool stuff.

195
00:15:52,930 --> 00:15:58,120
So why don't we instead of for the number of rows in a section.

196
00:15:58,120 --> 00:16:08,770
Why don't we just simply return run that get all runs doc count and since that's optional if it fails

197
00:16:08,770 --> 00:16:10,310
we'll just returns 0

198
00:16:13,320 --> 00:16:19,070
and it's going to want us to optionally bind that.

199
00:16:19,150 --> 00:16:27,740
OK so if so if I get all runs doesn't return anything we'll just return 0.

200
00:16:27,930 --> 00:16:34,170
And so that means if there are no runs there will be zero rows in our

201
00:16:37,520 --> 00:16:41,020
in our table view and then up here.

202
00:16:41,210 --> 00:16:43,510
Let's go ahead and say if let sell.

203
00:16:43,520 --> 00:16:46,350
So let's create our cell and this is going to be table view.

204
00:16:46,480 --> 00:16:57,360
The Q reusable cell for index path our identifier is our run log cell.

205
00:16:57,630 --> 00:17:00,880
Spelling is very important remember the reusable identifier.

206
00:17:01,690 --> 00:17:02,310
All right.

207
00:17:02,350 --> 00:17:07,170
And I don't want the 4 index path let's just delete that.

208
00:17:07,540 --> 00:17:14,390
And this is going to be as a run Largs cell opening and closing brackets.

209
00:17:14,710 --> 00:17:24,400
And then let's go ahead and create our run object for configuring our cell so we'll do a guard let run

210
00:17:24,520 --> 00:17:40,650
equal run and get all runs and then we're going to we unwrap that and in the index since results can

211
00:17:40,660 --> 00:17:42,390
you can call by index.

212
00:17:42,430 --> 00:17:49,120
So we're going to just pass in the index path dot row to get the right object.

213
00:17:49,330 --> 00:17:59,590
And then if this fails we're just going to return a empty run log cell.

214
00:17:59,600 --> 00:18:01,780
All right.

215
00:18:01,830 --> 00:18:09,840
So the guard if this fails it returns this if it doesn't fail it continues down here and we can go ahead

216
00:18:09,840 --> 00:18:18,780
and call our cell doc configure and pass in our run object.

217
00:18:18,850 --> 00:18:28,600
And now if we run our app we should see our two runs that we previously added to run.

218
00:18:28,690 --> 00:18:34,380
And let's just go to our run MMOG and it looks like we have two cells.

219
00:18:34,520 --> 00:18:35,130
OK.

220
00:18:35,150 --> 00:18:42,450
So you guys are probably yelling at me again because I forgot to return the cell we just configure it.

221
00:18:42,450 --> 00:18:46,670
I just left the blank UI table view cell down here.

222
00:18:47,620 --> 00:18:50,650
And so underneath the cell config.

223
00:18:50,700 --> 00:18:56,380
Now let's just return our cell if I can type.

224
00:18:57,220 --> 00:18:57,730
OK.

225
00:18:57,730 --> 00:18:59,070
And then else.

226
00:18:59,080 --> 00:19:08,140
So if the cell were to be nil for whatever reason then we'll just return a empty run log cell.

227
00:19:08,480 --> 00:19:09,120
OK.

228
00:19:09,340 --> 00:19:12,450
And now that we're returning to our cell we will see this again.

229
00:19:12,460 --> 00:19:21,520
And let's run this and now our data will show up and of just being 2 white blank spots.

230
00:19:22,520 --> 00:19:23,560
And there we go.

231
00:19:23,660 --> 00:19:30,770
And you know what I just realized we forgot to put the white divider line in.

232
00:19:30,800 --> 00:19:36,780
So why don't we do that because this it's cool that we see it all but we want it very distinctive that

233
00:19:36,800 --> 00:19:38,700
these are two separate cells.

234
00:19:38,990 --> 00:19:49,590
So let's go back to our storyboard and we can just add a let's see a UI view.

235
00:19:52,350 --> 00:19:57,560
Right here underneath date would probably be great.

236
00:19:57,810 --> 00:19:59,710
And let's just shrink this down.

237
00:20:00,870 --> 00:20:08,770
Shrink this up and let's spread it all the way to the sides and let's just go ahead and pin this zero

238
00:20:08,770 --> 00:20:16,530
to the left zero to the right zero to the bottom and let's give this a height of like two points.

239
00:20:17,670 --> 00:20:19,440
And let's see how that looks.

240
00:20:22,460 --> 00:20:24,740
All right go into our log.

241
00:20:24,960 --> 00:20:25,950
And there we go.

242
00:20:25,950 --> 00:20:29,500
Now we have our line and it looks like there is.

243
00:20:29,540 --> 00:20:32,950
It's not quite 100 percent opaque.

244
00:20:33,180 --> 00:20:36,030
So let's say it's still highlighted for me.

245
00:20:36,030 --> 00:20:42,900
It's not just select the view and in the identity in the attributes inspector Ulisses lower the alpha

246
00:20:42,960 --> 00:20:48,150
a little bit and less childlike point six and see how that looks

247
00:20:51,650 --> 00:20:53,540
OK click on my blog.

248
00:20:53,810 --> 00:20:55,330
And that looks pretty awesome.

249
00:20:55,340 --> 00:20:57,510
So I would say we are done.

250
00:20:57,710 --> 00:21:01,220
We could probably even make it one point if you think two points is too thick.

251
00:21:01,220 --> 00:21:02,890
But I'm going to leave that for now.

252
00:21:03,140 --> 00:21:11,870
And now in the next lesson we're going to be able to work on some cool things so since we have data

253
00:21:11,900 --> 00:21:19,930
from our old runs we can now go to our designs here.

254
00:21:20,030 --> 00:21:24,110
And if you remember the on the here we go.

255
00:21:24,590 --> 00:21:30,830
If you remember the map view when you finish a run we want this view to pop up and show previous run.

256
00:21:30,830 --> 00:21:33,110
And we're going to have the pace distance and duration.

257
00:21:33,170 --> 00:21:40,220
So if you guys want to challenge you guys should get that done before starting the next lesson.

258
00:21:40,270 --> 00:21:43,040
And then if you need any help start the next lesson.

259
00:21:43,060 --> 00:21:45,140
And that's what we're going to be doing next.

260
00:21:45,190 --> 00:21:51,220
And since we have all our relm data you just have to poll the most recent run and display it on the

261
00:21:51,220 --> 00:21:52,140
map view.

262
00:21:52,150 --> 00:21:53,940
So I will see you guys in the next lesson.