SWAMI Page 2 - List of To Dos
After synch-ing the Restaurants that need to be Inspected, we have a screen that will retrieve the data from the JSONStore and present it to the user.
The app.js has a routing value to navigate to the inspectList.html file. As you can see, the main html file contains href links that refer to the contents within the app.js file. As shown here, the inspectList link is coordinated by the app.js that will navigate to the html file that is specified.
If you recall, we are making a sample that follows the "Day in the Life of...." a Restaurant Mobile Inspector, at the start of their day they synchronise their application to get the To Dos of the day.
The inspectList html file is (again) very simple, it contains a table (yes, I know...tables are so 1990s...but whatever) that shows some of the data relating to the Restaurants that the Inspector needs to visit.
The logo image of the restaurant is setup so that when clicked it will navigate to the inspectNewHI html page, as you can see we pass the {{inspection_id}} value to that controller so we can lookup that specific restaurant and render all the details in the corresponding html page.
Just for fun, I've also output the {{numRows}} value to display how many rows of data there are in the JSONStore.
We use ng-repeat from AngularJS and recently I read an article that stated not to use this for performance reasons....hmmmmm.....whilst I could see that could be an issue if you had a lot of data, for the use case that we are meeting, I don't believe it will be a problem.
The controller file (InspectListCtrl.js) again, defines $q, $scope and $window for usage within the controller code. The $scope.onLoad() function is executed when the controller is initially loaded and as before, you can see that it calls the 'initRestaurant()' function that is contained within the 'Restaurant.js' file. Once initialised, we call 'getRestaurants()' that gets the data from the JSONStore, we then copy the response object to the $scope.restaurants variable so we can loop through it in the html page and output via the ng-repeat.
In the html page, the contactName of the restaurant is output as a 'mailto:', so if the user clicks on the link it will open the native email application and allow the user to send an email to that user.
Similarly, if the user presses the phone number, it is associated to a 'tel:' and if this application is running on a phone device, this will initiate a phone call to the phone number shown.
The main purpose of this page though is to allow the Inspector to start a new Inspection for the selected restaurant. We shall see how that works in the next page.
The app.js has a routing value to navigate to the inspectList.html file. As you can see, the main html file contains href links that refer to the contents within the app.js file. As shown here, the inspectList link is coordinated by the app.js that will navigate to the html file that is specified.
If you recall, we are making a sample that follows the "Day in the Life of...." a Restaurant Mobile Inspector, at the start of their day they synchronise their application to get the To Dos of the day.
The inspectList html file is (again) very simple, it contains a table (yes, I know...tables are so 1990s...but whatever) that shows some of the data relating to the Restaurants that the Inspector needs to visit.
The logo image of the restaurant is setup so that when clicked it will navigate to the inspectNewHI html page, as you can see we pass the {{inspection_id}} value to that controller so we can lookup that specific restaurant and render all the details in the corresponding html page.
Just for fun, I've also output the {{numRows}} value to display how many rows of data there are in the JSONStore.
We use ng-repeat from AngularJS and recently I read an article that stated not to use this for performance reasons....hmmmmm.....whilst I could see that could be an issue if you had a lot of data, for the use case that we are meeting, I don't believe it will be a problem.
The controller file (InspectListCtrl.js) again, defines $q, $scope and $window for usage within the controller code. The $scope.onLoad() function is executed when the controller is initially loaded and as before, you can see that it calls the 'initRestaurant()' function that is contained within the 'Restaurant.js' file. Once initialised, we call 'getRestaurants()' that gets the data from the JSONStore, we then copy the response object to the $scope.restaurants variable so we can loop through it in the html page and output via the ng-repeat.
In the html page, the contactName of the restaurant is output as a 'mailto:', so if the user clicks on the link it will open the native email application and allow the user to send an email to that user.
Similarly, if the user presses the phone number, it is associated to a 'tel:' and if this application is running on a phone device, this will initiate a phone call to the phone number shown.
The main purpose of this page though is to allow the Inspector to start a new Inspection for the selected restaurant. We shall see how that works in the next page.
Comments
Post a Comment