Release Assembly - SMG Frontend Part 1

Project Overview

Competition Task Overview

Provided an HTML/CSS/JS prototype and NASA SMG API, your are required to integrate the API with the prototype and produce a functional website. Below a sketch of how the website will work :

The diagram explained as follow :

1. The application is hosted in Windows Server, in IIS as an application, the application hosts both HTML/CSS/JS and NodeJS API.
2. User hits NASA SMG web page. As NTLM is enabled, user will be prompted to enter credentials, if the page can be accessed by general user then any valid credentials can work on it, admin pages can only be accessed via Admins.
3. Rendered web page in client side browser communicates with the NodeJS API via ajax calls from the Javascript to load to the content of the page.
4. NodeJS API facilitates CRUD operations if this is an admin request, or facilitates R operations if this is a general user request.
5. Both API and HTML are hosted on the same domain under IIS so no origin policy issue would occur.

You are provided with the following :

• HTML/CSS/JS Prototype with hardcoded content.
• NodeJS API with deployment guide to set it up on IIS on a windows server

You are required to address the following :

• Update the required HTML pages to communicate with the NodeJS API via ajax. All pages to deliver must be functional.
• You might need to make minor fixes to the prototype if there is a specific functionality or styling missing.
• Fix any issue in the API if needed.
• Notes when deploying the HTML pages + API to IIS 7 :
  • NTLM authentication must be enabled, other authentications should be disabled.
  • Admin pages should be access via /admin/XXX path
  • Admin pages should be accessed only by users with admin role.

Required Pages

The blow are required pages, the mapping between the pages and NodeJS API should be strightforward, note that everything in these pages must be implemented

1. smg_admin_listing.html
   • Everything in the page must be implemented. No specific requirements, please ask in forums if you need clarifications.
   • The GET /smg and DELETE /SMG API Endpoints are main endpionts to be used in this page.
2. smg_admin_add_edit_smg.html/smg_admin_edit_smg.html
   • Everything in the page must be implemented.
   • Fields (label/field type/content) in both "Information" tab and "How to start" tab are populated from Characterstics API.
     • Label represents the characterstics name
     • Type of UI component to render are pulled from characterstics type associated with the characterstics
     • If there is default value of the characterstic it should be loaded.
     • If the characterstic type has lookup values it should be rendered properly (i.e. checkboxes, picklist, radio buttons ..etc)
   • Tooltips content are rendered from characterstics description field.
   • The GET /smg, POST /smg, PUT /smg API endpoints are the main endpoints to be used in this page.
3. smg_admin_characterstics_listing.html
   • Everything in the page must be implemented.
   • Add new piclist field in Adding or Editing Characterstic popup that represents which tab it will be rendered into in (smg_admin_add_edit_smg.html/smg_admin_edit_smg.html).
   • Type pick list should include the following UI components types (these are lookups stored in characterstic type model) :
     • Picklist - Allows users to select a value from a list you define.
     • Textarea - Allows users to enter up to 32,768 characters on separate lines.
     • Text - Allows users to enter any combination of letters and numbers.
     • Checkbox - Allows users to select a True (checked) or False (unchecked) value.
     • Radio button - Allows users to select from a list of two or more options, the user must select exactly one choice.
     • Number - Allows users to enter any number. Leading zeros are removed.
   • ALL  /characteristic and GET /characteristicType API endpoints are mainly used in this page and the popups in the page.
4. Admin_Manage-Search-Parameter.html
   • Everything in the page must be implemented. No specific requirements, please ask in forums if you need clarifications.
   • GET /searchForms and DELETE /searchForms are main endpoints to be used in this page.
5. Admin_Manage-Search-Parameter_view-details.html
   • Everything in the page must be implemented. No specific requirements, please ask in forums if you need clarifications.
   • All /searchForm endpoints to be used in this page.
6. Admin_Manage-Search-Parameter_add-new-filter-form.html
   • Everything in the page must be implemented. No specific requirements, please ask in forums if you need clarifications.
   • /SearchForm and /Characterstic endpoints are used in this page.
7. smg_listing.html
   • Everything in the page must be implemented.
   • The green left panel, these are loaded from the Active Search Form fields.
   • User can select only two solutions to compare.
   • GET /smg and GET /searchForm, GET /search are the main endpoints to be used in this page and it's popups.
8. smg_compare.html
   • Everything in the page must be implemented. No specific requirements, please ask in forums if you need clarifications.
   • GET /smg is the main endpoint to be used in this page.
9. smg_details.html
   • Everything in the page must be implemented. No specific requirements, please ask in forums if you need clarifications.
   • GET /smg  is the main endpoint to be used in this page.

General Notes

• Please note that PRINT functionality is out of scope.
• Validation errors and styling must be implemented in all Add/Edit/Search forms.
• Endpoints to be used in each page are listed above but there might be other endpoints to be used. If you need more help you can ask in the challenge forums and Copilot will provide help.

Testing

You need to provide manual demo to verify your implementation.

Documentation Provided

Documentation and Applications that will be provided in the challenge forums to registered members:

• UI Prototype
• NASA SMG API

Final Submission Guidelines

Submission Deliverables

Below is an overview of the deliverables:

• Fully Implemented NASA SMG website including any changes to the API.
• A complete and detailed deployment document explaining how to deploy the application including configuration information.

Final Submission

For each member, the final submission should be uploaded to the Online Review Tool.