- Node.js
- Express
- JavaScript
- jQuery
- HTML
- CSS
- Google Firebase
- Amazon Web Services (AWS)
This app was written as a front-end project for DigitalCrafts 16-week Full-Stack Immersion Bootcamp. The idea was presented to Tyler Campbell by Calendly employee, Joelle Waksman. Joelle wished for a dashboard to display her teams realtime progress on support requests for the day. Joelle's reaction to the finished project is captured in this quote from a LinkedIn message:
The Calendly Zendesk Dashboard (CZD) provides a realtime visual display of each team members progress on ticket requests and completions. A photo of the team member along with two progress bars provide a visually appealing, easy-to-read display. It was laid out using Bootstrap.
The bars report the number of tickets received by the member and the number of tickets completed by the member. Each bar provides a visual, as well as numerical, description of the team members current work load so the team can be aware of the distribution of work and their individual progress.
The top bar, colored blue, displays the tickets received. The lower bar, colored green, displays the tickets completed.
A separate admin panel is accessed through a login page that requires a unique user name and id.
The admin page provides the supervisor with control over various items displayed in the dashboard.
to a menu on the left of the page. The menu displays the options to:- View Dashboard
- Add User
- Remove User
- Set Goal
- Logout
When adding a user, the admin will be promted to enter the team members name and a picture to use on the dashboard display.
The picture can be uploaded by browsing in Finder and selecting the appropriate file, or drag and drop the file into the area denoted in the middle of the add user panel.
Users are removed by selecting the remove user link in the task bar which brings up the remove user screen.
When removing a user, a drop down menu displays all the current users. From this list, the member to delete is selected.
The current picture along with the name of the selected team member is displayed. If the correct member has been selected, clicking the red boardered submit button at the bottom of the page will remove the team member from the Dashboard and Admin Panel display.
To set the main goal for the team, the admin selects set goal from the dropdown menu. Then the admin can enter a value and that value will be displayed in the header of the dashboard.
Clicking the logout button returns the admin to the admin login page and prevents viewing admin page without re-entering the correct user-name and password.
There are various errors that can occur when attempting to login to the admin panel.
If a user types in an email that does not contain the appropriate characters and section of a proper email address, this is noted with an error code in red.
If the user name is not found, an error code reading the same is displayed in red.
If there is an error in the password entered, this error is reported to the user in red.
The code below handles the error checks that are described above. A general error reporting function is called for each error message returned by the server.
// General input error code reporting function
var errorFcn = function(errorMessage) {
var msg = document.getElementById(errorMessage);
var emailForm = document.getElementById("email-form");
var pwdForm = document.getElementById("pwd-form")
var button = document.getElementById("reset-button-line");
msg.style.display = 'block';
button.style.marginTop = "22px";
$(email).on('click', function(event){
msg.style.display = 'none';
emailForm.value = '';
pwdForm.value = '';
button.style.marginTop = "70px";
});
};
// Alerts for "Invalid email", "User not found", and "Wrong password"
promise.catch(function(error){
if (error.code.includes("invalid-email")) {
errorFcn("email-error");
}else if (error.code.includes("user-not-found")) {
errorFcn("user-error");
}else if (error.code.includes("wrong-password")) {
errorFcn("password-error");
};
console.log(error.message);
console.log(error.code);
});
});It was requested that animations were installed that celebrated individual as well as group accomplishments for each day.
When an individual support team member reaches a predetermined goal for tickets solved, a bouncing rainbow colored sheep appears above their progress bar and is translated from the far right of the bar to just in front of their name. The length of their name is calculated so the sheep stops at correct place no matter the name length.
There is a team goal displayed at the top of the dashboard. When this goal is met, a large group of rainbow sheep, that takes up the verticle space of the screen, is translated from right to left across the screen.
- Back-end
- Layout
- Security
Since this was a full-stack project made after having gone through only front-end in class up to this point, it was quite the hurdle to learn and apply enough back-end tools to allow full functionality.
Laying out the dashboard for a 60inch screen first, made making it mobile responsive a difficult endevor.
Since this application was going to be used in a real world situation with proprietary data, it was important to limit access to the functionality to the team manager and make sure data was cleared each day. We did not import any historical data to limit vulnerability and complexity of data management.
The Minimum Viable Product (MVP) for this project was quite extensive. But there are several things that we would like to add and/or improve.
- Increase the complexity of the celebration animations.
- Insert the ability to have ticket goals for each team member.
- Correct the admin login text fields to clear after error is shown.
- Add animation to the submit buttons on the "add user" and "remove user" windows on admin page to verify submission.
- Clear the fields on "add user" and "remove user" after submission.