Anabel Hospitality IoT Alert System Angular 9 Prototype 1

Challenge Objectives

• Build part 1 of the prototype for the Anabel Hospitality IoT Alert System using Angular 9.

 

Project Background

• Anabel is planning to build an MVP for a web service that utilizes IoT technology, that will help their clients (hotel owners) with monitoring both assets in their properties and their employees’ locations, and safety within the properties for different purposes.

 

Technology Stack

• Angular 9

• HTML5

• Javascript

• CSS

 

User Roles

The system supports multiple different roles, which are listed below:

• Anabel Super Admin (SA)

  • Full access to all data and user interface of the web app

• Anabel Account Manager (AM)

  • Same as SA, but with access to specific clients only

• Client Sssssuper Admin (CSA)

  • Full access to all the data specific to one client

• Client Group Admin (GA)

  • Access to the actual individual user credentials only

  • Full access to multiple sites, but only the sites in their named group

• Client Property / Site Manager (SM)

  • No client-level data access

  • No site address and site physical attributes

  • Full access to a single site operational data

• Property / Site User (SU)

  • Read access to site data

  • Mainly an operator of the system with no write access except for their specific credentials

• No access users

  • These are users added to the system but will not have a login or access

  • Client Contact (CC) - Accounting, Operations, etc.

  • Site Staff (SS) - Staff wearing badges, or retrieving assets and not wearing a badge

 

API Integration

Although the API is not ready yet, you need to implement local controllers/services to fetch the data showing in the app from local JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort so hardcoded data is not acceptable. This is evaluated as a major requirement.

 

General UI Requirements

• You are expected to build the prototype following the provided design unless otherwise specified.

• Angular 9 must be used, and browser compatibility requirements must be covered.

• This app should be built using ngrx for state management.

• The UI should be fluid and generally responsive to different screen sizes (desktop only, but need to support smaller size laptop screens).

• Make sure you don’t just copy & paste code to create the UI, it’s very important to maintain code reusability so that integration will be easier later. This will be evaluated in the scorecard as a major requirement.

• Do NOT use global z-indexes.

• No errors with production build.

• Must pass standard lint and NPM audit.

• The data to be displayed must come from local JSON files and cannot be hardcoded.

• The pages should clearly indicate invalid input as shown in the design.

• Must follow Angular best coding practices.

• These will be considered as major requirements.

 

Screen Requirements

Below is the list of screens that are supposed to be implemented in the challenge. Please cross-compare this with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification/confirmation.

 

Login / Reset Password / Terms of Service

We’d like to implement Login differently instead of following the design, try to use the colors / fonts / styles from the design but the layout should be changed to a simple one like the one we posted in the forum.

 

Other screens like reset password, terms of service popup, suspended message popup, etc. should all be implemented on top of this layout instead of the one in design. Validation messages such as login failure can be shown under the login button.

 

Navigation Menu / Header / User Profile

We will not implement the dashboard for any of the user roles and for admin the Manage Users menu is also unnecessary, so the navigation menu should not contain these two icons as shown in the design.

The header includes the logo, a search box, the notifications icon, and the avatar. Clicking the avatar will show the user’s profile details.

Search results should be shown as per 13B Search Results.png.

These menus and the header are in scope of this challenge, however the user profile screens (15A - 15C) are NOT in scope of this challenge.

 

Admin Role - Clients (02D Clients – table.png)

Since we are not implementing the dashboard, the clients page will be the landing page after an admin logs in:

• We will only implement the table view (02D Clients – table.png) and ignore the grid view, please remove the grid and table icons above the table since we are not going to be able to switch between the views.

• At the bottom of the table we don’t need the “Load more” button since we have pagination controls already.

• On the right side of the page, the alerts should come from a local json file, and admins can filter alerts by type.

• Admins should be able to initiate the client creation process by clicking the New Client button, but in this challenge we only need the button to be static.

• Admins should be able to search for clients and get filtered results in the table.

• Clicking table headers should sort the records based on that column, searching will be done by the server but in your prototype please return a different json on sort to simulate the feature.

• Pagination will also be done by the server but similar to sorting, please return different json when a different page is clicked to simulate the feature.

• Clicking the client name in the table will navigate to the Client Details page.

• Admins should be able to edit, delete or archive a client from the table.

• Confirmation popups and toast messages must be implemented as shown in 10A Confirmation and success messages.png

 

Admin Role - Client Details (03A Client Details.png)

The page will display the details of the selected client:

• From the header admins can go back to All Clients table view, or switch to a different client.

• Admins can also archive or delete the client from this page.

• We don’t need the map view in the Client Info section, please remove that.

• The Client Info section can be collapsed or expanded.

• On the right side of the page, the alerts should come from a local json file, and admins can filter alerts by type.

• All tabs in the Client Info section need to be implemented, including the edit views, search, filters, New Admin (08K Client Creation - Admin Users.png), New Contact, etc. For Edit Configuration please check 08R Client Creation - Configuration.png.

• Below the Client Info section we are showing the sites, and again we are only going to implement a table view instead of grid view, please remove the grid / table view icons.

• The sites table view will be similar to the client table view, but we’ll only have Edit and Delete icons for sites. Clicking the site name will navigate to the Site Details page. The table also needs pagination but not the “Load more” button.

• Admins can search for sites, sort sites and create new sites.

• Create Site can be static, it doesn’t need to work for now.

• Confirmation popups and toast messages must be implemented as shown in 10A Confirmation and success messages.png
   

Admin Role - Site Details (04A Site Details.png)

• The site details page will allow admins to go back to the previous table view or switch to a different site.

• Admins can delete the site from this page.

• The Site Info page has multiple tabs, only the following tabs are in scope of this challenge:

  • Address

  • Property Details

  • Rooms

  • Options

  • Please implement the tab headers for Teams and Notification Setup but leave the body empty for this challenge.

• For the tabs in scope, you should cover the read only views and the edit views:

  • We don’t need the map view under the address tab, just the texts

  • Edit Address will be similar to 03B Client Details – edit.png

  • For the other tabs we have edit views in design, these are all in scope including search, New Room, etc.

  • All the tables will need pagination but not the “Load more” button, and searching / sorting / pagination will both be server side.

  • Under Rooms tab, the Export and Import buttons don’t need to work for now.

  • Confirmation popups and toast messages must be implemented as shown in 10A Confirmation and success messages.png
     

HTML Requirements

• HTML should be valid HTML5 compliant.

• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all HTML code so future developers can follow the code.

• All HTML code naming should not have any conflicts or errors.

• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)

• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

• No inline CSS styles- all styles must be placed in an external stylesheet.

• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 

Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all CSS so developers can follow the code.

• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.

• Ensure that there are no lint errors.

• All CSS naming should not have any conflicts.

• You’re free to choose between CSS & SCSS but you need to use flex instead of float.

• Follow a clean folder structure.

• Use CSS3 Media Queries to load different styles for each page and don't build different pages for different devices / layout.

• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.

• Make sure npm run build works without any errors.

 

Javascript Requirements

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. 

• Use typescript and linter for code quality

 

Licenses & Attribution

• Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.

• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

Browser Requirements

Windows: IE 11+, Chrome (latest)

Mac: Safari (latest), Chrome (latest)

 

Documentation

Register to download the following documents we provided in the forum:

• Design Source File (in XD format)

Final Submission Guidelines

• Code that covers all the requirements.

• A detailed README file including information on how to set up, run and verify your application.