Release Assembly - SMG Frontend Part 2

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. admin_manage_help_topics.html
   • Dashboard Details tab:
     • The ckeditor content will be rendered in home.html
     • The image to be uploaded will be used to create the content in the CKEditor.
     • We don't have API for this one, create simple model and add new controller to handle it.
   • Help Topics tab :
     • This tab will load the topics, it uses GET /helpTopic endpoint to retrieve topics.
     • For delete it users DELETE /helpTopic/:id endpoint, clicking delete should show confirmation message
     • For add/edit buttons, it will take user to add/edit help topics. It uses POST /helpTopic to add new topic, and PUT /helpTopic/:id to update existing one
     • Currently the html page render all forms for viewing/add/edit in single page, you can separate them into different pages if you want to.
2. help_topics_listing.html
   • Loads help topics using GET /helpTopic endpoint
   • Truncate help topic content, it should not exceed 140 characters, the turncate should be workd-based not character-based, meaning that it should not turncate words, it should count how many words that combine ~140 characters with spaces and truncate it.
   • Print is out of scope
   • "Learn More" will take user to help_topics_details.html
3. help_topics_details.html
   • It should display the content as it was provided in the CKEdtor. note that the image place is fixed, it should always appear in that position with the same size, so if image size is bigger it should be resized to fit it's position.
   • "Related Topics" and "Examples" widgets should be populated using corresponding endpoints for Topics and Examples, note that there is no specific logic to pull related topics and examples, so you can randomly populate these.
   • The endpoint to be used in GET /helpTopic/:id
4. examples_listing.html
   • Retrieve all SMG and retrieve examples associated and display it in the page.
   • For pick list, it should have list of the retrieved SMG, if user pick specific SMG from picklist, the page will be filtered to show examples associated with the SMG.
   • Learn more button will take user to example_details.html
5. example_details.html
   • It displays the example content as it was entered in CKEditor
   • Related examples should be the ones associated with parent SMG, if there is no other examples associated with SMG then don't show the widget.
   • Print is out of scope.
6. home.html
   • The top graphic/content are rendered from dashboard details entry in admin_manage_help_topics.html
   • The filter panel with radio buttons will render the active search form. Clicking on "Identify Solution" will take user to smg_listing.html page (clicking on the button should do nothing as it is out of scope for now).
7. prelogin.html
   • The page are displayed as default page when hitting the website domain (i.e. http://smg-domain.com/ should render 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

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.