Convenience Plus App

This project was to help someone keep track of their employee's hours and activities and to create emails to send their clients invoices.

This was my first attempt of using Angular.JS. The front end was done with Javascript and Angular.JS and the backend consisted of PHP and MySQL. All dates use the JQuery UI Datepicker.


You can try it by Clicking Here
Username: test | Password: test

Home Page

This is the first page you'll see after you login. It has two input boxes, Add and Select. The Add box will add new activities based on the employee and client. With the Select box, you can pick any employee and client (you can also select All on either one as well as a range of dates) and a list of activities will appear below based on the selection. You can edit any row on the selected worklist or delete activities. If you checkoff any or multiple activities, you can click 'Delete All Checked' and they will no longer appear.

This page uses Angular.JS and some Javascript to show the activity worklist when an employee and client are selected or changed in the Select box. A factory is used to access a PHP file via http. The PHP file takes the fields from the http statement and gets the data from a table in the MySQL database. Once the data is accessed, PHP converts the table data to JSON and returns it to the Angular front end where the factory sends it to the controller. The controller takes the JSON data and produces the worklist on the page via ng-repeat. The dates on the Select box use JQuery UI datepicker to show a calendar of the current month where you can click on the date and appear in the input box above. If you put in a date after selecting a client and employee, the worklist will change to just show those activities within the range of dates given. If you click the Edit button, the text in that row will change to select and input boxes via ng-show. When you're done editing, you can click the Update button and the fields go back to just text with whatever changes were done. You can delete one row by clicking the Delete button on the right side or multiple rows by checking off more than one row on the left side. At the bottom of the page showing the total hours based on adding all of the hours in the worklist.



Employee/Client Pages

The Employee and Client pages look exactly the same structure wise, just the information is different. These pages have three boxes. The left box has all of the employee or client names that had been entered. The middle box shows the information of a particular employee. You can select any name in the left box and the information in the middle box will change. The right box is an Add box if you click on Add from the left box or an Edit box if you click on Edit in the middle box.

These were the first pages that I worked on when I started to learn Angular.JS. Before doing this app, I had done basic AJAX using Javascript and PHP. The left box shows the names from the MySQL employee and client tables. The middle box gets the address, phone number and email from either table. The right box will either add a new entry to the table or edit an existing entry. Based on what was done in the right box can change what is in the left and/or middle boxes. Deleting an entry will not delete it in the MySQL table, but tag it so it won't appear anymore on this screen.



Email Page

You select a client (and an optional date) and a worklist will appear of all activities done for that client. You can check off any rows to include in the email or don't check any activities and all of them will be included in the email. Then click Build Email and a sample email is created below. You can change any field in the Build Email box. Once you do that, click the Send Email button and the invoice will be sent to the client.

The Select box works similar to the one on the Home Page to create an activity worklist. The Build Email box takes in the email from the MySQL client table and the Body of the email based on the information from the worklist. Clicking the Send Email button will email the invoice using a PHP script.