1
00:00:00,410 --> 00:00:05,570
Throughout this course we'll be using
Fitness Frog's list page to add, edit,

2
00:00:05,570 --> 00:00:07,190
and delete entries.

3
00:00:07,190 --> 00:00:10,460
Before we start updating our
web app with new features,

4
00:00:10,460 --> 00:00:14,190
let's review its associated
controller action method and view.

5
00:00:14,190 --> 00:00:18,390
I'll press Ctrl,
Comma to open the Navigate To dialog, and

6
00:00:18,390 --> 00:00:22,590
type Entries to open
the Entries Controller class.

7
00:00:22,590 --> 00:00:24,188
Here's the index action method.

8
00:00:24,188 --> 00:00:28,630
I'll collapse the solution explorer window
to give us more room for the editor.

9
00:00:28,630 --> 00:00:33,260
Here we're making a call to the repository
to get the list of available entries.

10
00:00:33,260 --> 00:00:37,840
Then we are using link to calculate
the total activity by filtering out

11
00:00:37,840 --> 00:00:41,945
in the entries whose exclude
properties are set to True and

12
00:00:41,945 --> 00:00:45,160
summing in the duration property values.

13
00:00:45,160 --> 00:00:48,310
In order to calculate
the average daily activity

14
00:00:48,310 --> 00:00:51,920
we're getting the count of
the distinct entry date values,

15
00:00:51,920 --> 00:00:55,560
which will later divide into
the total activity value.

16
00:00:55,560 --> 00:00:59,530
If you're new to Link or need a refresher,
see the teachers notes for

17
00:00:59,530 --> 00:01:01,890
other Treehouse content that can help.

18
00:01:01,890 --> 00:01:03,680
Right before we call the view method,

19
00:01:03,680 --> 00:01:09,930
we're setting the ViewBag TotalActivity
and AverageDailyActivity property values.

20
00:01:09,930 --> 00:01:12,980
Remember from our earlier
course that ViewBag gives us

21
00:01:12,980 --> 00:01:17,190
an easy way to pass values
from a controller to a view.

22
00:01:17,190 --> 00:01:20,670
We're using ViewBag here because
we're already passing our

23
00:01:20,670 --> 00:01:24,930
entries collection to our view
through our call to the View method.

24
00:01:24,930 --> 00:01:28,190
In a future course,
we'll see how we can use a View model

25
00:01:28,190 --> 00:01:32,900
to pass multiple values to our View
without having to rely upon ViewBag.

26
00:01:32,900 --> 00:01:34,976
Now let's take a look at the index view.

27
00:01:41,025 --> 00:01:45,697
Here at the top, we've got a model
directive that strongly types our Views

28
00:01:45,697 --> 00:01:48,830
model property to be
a list of entry objects.

29
00:01:48,830 --> 00:01:52,800
The first item in our View is
the stats summary section.

30
00:01:52,800 --> 00:01:56,976
Just some basic markup with some
custom CSS classes for the styles.

31
00:02:00,341 --> 00:02:02,840
Here's our HTML table of entries.

32
00:02:03,880 --> 00:02:08,379
The CSS classes that you see
being used here, table and

33
00:02:08,379 --> 00:02:12,460
hidden-xs are part of bootstrap.

34
00:02:12,460 --> 00:02:16,220
The bootstrap table class
is used to style our table.

35
00:02:16,220 --> 00:02:21,100
The hidden dash excess class has been
used to hide the intensity column for

36
00:02:21,100 --> 00:02:25,220
smaller screen sizes,
like smartphones for instance.

37
00:02:25,220 --> 00:02:26,880
Here's another use case.

38
00:02:26,880 --> 00:02:31,500
We're changing the display format of
the date depending on the screen size.

39
00:02:31,500 --> 00:02:36,680
On smaller screens we need to conserve
as much horizontal space as possible

40
00:02:36,680 --> 00:02:39,110
in order for the table to fit properly.

41
00:02:39,110 --> 00:02:43,680
Remember how our entry model contains
properties for both activity ID and

42
00:02:43,680 --> 00:02:44,650
activity.

43
00:02:44,650 --> 00:02:48,050
One of the reasons that we have
both properties on our model is so

44
00:02:48,050 --> 00:02:53,940
we can display the activity name values,
instead of the activity ID values.

45
00:02:53,940 --> 00:02:59,320
Our users probably wouldn't find
the activity IDs very intuitive to read.

46
00:02:59,320 --> 00:03:02,450
Lastly, here's our Edit and
Delete buttons,

47
00:03:02,450 --> 00:03:07,940
which are actually hyperlinks styled as
buttons using Bootstraps button styles.

48
00:03:07,940 --> 00:03:13,100
As you've seen in other Treehouse courses,
we're calling the URL.Action method

49
00:03:13,100 --> 00:03:17,323
to get a URL to the edit entry,
And delete entry pages.

50
00:03:17,323 --> 00:03:21,960
Notice how we're supplying the route
values by supplying an anonymous

51
00:03:21,960 --> 00:03:26,350
object with its ID property set
to the entry ID property value.

52
00:03:27,980 --> 00:03:31,350
And that's all of the code for
our list page.

53
00:03:31,350 --> 00:03:35,890
After a short quiz will be working on
making our ad entry page functional.