SWAMI Page 3 - New Inspection
I shan't repeat the same beginning text from the previous pages (as that will bore the both of us!), so I'll skip straight to the inspectNewHI.html file (oh btw - HI = Health Inspection, I differentiated this as there might be the possibility that in the future we could have multiple inspection for a restaurant, one being a health inspection, another being a customer satisfaction inspection, one being a drive-thru inspection, etc..etc...).
As you can see, the html page outputs some of the data that was read from the JSONStore in relation to the restaurant being inspected. Once the user has completed the inspection they will press the completed button and this will call the 'completeInspection()' function that is located in the controller javascript file.
As mentioned, the html file contains output variable values at the top of the page, further down we have a progressBar and the data entry select/drop-down boxes that will show the questions to ask and a YES/NO answer. These are wrapped in the AngularJS-ui bootstrap control 'tabset'.
The controller file adds an extra element, the $routeParams. This is used to pass a variable value to the controller, in our case this is the inspectionID value that we use to look up the chosen restaurant.
As before, the $scope.onload() function is called when the controller is initially executed. This onLoad() function calls the $scope.getRestaurant() function that, again, calls the functions within the Restaurant.js file.
We pass the {{inspection_id}} value to the getRestaurant() function, the resulting object returned is then copied to the $scope.restaurant object and it is this that we use within the html page.
The $scope.getStatuses() function just returns a hard-coded set of values for the drop-down list, this could have come from values stored in a JSONStore, but, as these values are going to be static we can acceptably hard-code them.
I've setup the down-down/select questions so that when a change is made a call is made to the updateGrading() function passing the value selected.
This will increase or decrease the progressBar depending on whether it was a YES or a NO selected. It will also change the text that is displayed in the progressBar along with the colour of the bar.
I've also highlighted below the code that will show/hide a question depending upon the answer of a previous question. If that question is YES, then this particular fields visibility is set so that the user has to answer the new question.
Once, the user has completed all of the questions in all of the tabs, they will press the 'completed' button and the form will be submitted. This will call the relevant function within the controller file and this will persist the data to the JSONStore.
We pass the whole object over to the function addToCompletedInspection() and it is that code that saves the data to the JSONStore. If this is successful, we remove the restaurant from the To Do list Collection and redirect the user back to the main.html page.
If the user now goes back to the Inspection List page they will no longer see the restaurant that they have completed an inspection on. Although, if they choose to view the Completed Inspections they should see this restaurant listed, as we shall show on the next page.
As you can see, the html page outputs some of the data that was read from the JSONStore in relation to the restaurant being inspected. Once the user has completed the inspection they will press the completed button and this will call the 'completeInspection()' function that is located in the controller javascript file.
As mentioned, the html file contains output variable values at the top of the page, further down we have a progressBar and the data entry select/drop-down boxes that will show the questions to ask and a YES/NO answer. These are wrapped in the AngularJS-ui bootstrap control 'tabset'.
The controller file adds an extra element, the $routeParams. This is used to pass a variable value to the controller, in our case this is the inspectionID value that we use to look up the chosen restaurant.
As before, the $scope.onload() function is called when the controller is initially executed. This onLoad() function calls the $scope.getRestaurant() function that, again, calls the functions within the Restaurant.js file.
We pass the {{inspection_id}} value to the getRestaurant() function, the resulting object returned is then copied to the $scope.restaurant object and it is this that we use within the html page.
The $scope.getStatuses() function just returns a hard-coded set of values for the drop-down list, this could have come from values stored in a JSONStore, but, as these values are going to be static we can acceptably hard-code them.
I've setup the down-down/select questions so that when a change is made a call is made to the updateGrading() function passing the value selected.
This will increase or decrease the progressBar depending on whether it was a YES or a NO selected. It will also change the text that is displayed in the progressBar along with the colour of the bar.
I've also highlighted below the code that will show/hide a question depending upon the answer of a previous question. If that question is YES, then this particular fields visibility is set so that the user has to answer the new question.
Once, the user has completed all of the questions in all of the tabs, they will press the 'completed' button and the form will be submitted. This will call the relevant function within the controller file and this will persist the data to the JSONStore.
We pass the whole object over to the function addToCompletedInspection() and it is that code that saves the data to the JSONStore. If this is successful, we remove the restaurant from the To Do list Collection and redirect the user back to the main.html page.
If the user now goes back to the Inspection List page they will no longer see the restaurant that they have completed an inspection on. Although, if they choose to view the Completed Inspections they should see this restaurant listed, as we shall show on the next page.
Comments
Post a Comment