Create Projects - hackforla/tdm-calculator GitHub Wiki
Project Page Forms
- User will be able to create project where they enter all the specification regarding the parking availability, which helps our website to determine/calculate the project level, citywide parking baseline, parking provided/baseline, earned and target points.
- User can enter all the basic information on page 1 where Project Name, Address and AIN/APN is mandatory field.
- Page 2 will allow user to add all the specifications which will help determine Project Level, Citywide Parking Baseline and target points.
- Page 3 will allow user to add parking spaces which helps TDM project to determine earned points and Parking provided/baseline.
- Page 4 will help user to determine if they qualify for a bonus package or an extra points or not.
- Page 5 will provide the details and results and will allow user to print summary and save project.
URLS
-
Page 1 Dev URL: https://tdm-dev.azurewebsites.net/calculation/1/0
-
Page 2 Dev URL: https://tdm-dev.azurewebsites.net/calculation/2/0
-
Page 3 Dev URL: https://tdm-dev.azurewebsites.net/calculation/3/0
-
Page 4 Dev URL: https://tdm-dev.azurewebsites.net/calculation/4/0
-
Page 5 Dev URL: https://tdm-dev.azurewebsites.net/calculation/5/0
-
Page1 Prod URL: https://tdm.ladot.lacity.org/calculation/1/0
-
Page2 Prod URL: https://tdm.ladot.lacity.org/calculation/2/0
-
Page3 Prod URL: https://tdm.ladot.lacity.org/calculation/3/0
-
Page4 Prod URL: https://tdm.ladot.lacity.org/calculation/4/0
-
Page5 Prod URL: https://tdm.ladot.lacity.org/calculation/5/0
-
GitHub location:
-
Figma Design:
- WIKI TDM Calculator Figma Pages and Structure
- Figma [TDM Calculator Figma Pages and Structure, User-Facing Screens]
- Figma [TDM Calculator Handoff, User-Facing Screens]
Issue label
- Issue Label on Issue tab:
- Issue label on Project Board:
Screen shots of page
Technical Details
See Calculation Engine for an overview of how the Calculation Wizard works, including Web API calls for retrieving calculation rules, retrieving existing project data, and saving new projects or changes to existing projects. The wizard is also used to edit existing projects (in which case the above urls will have a path that ends with the projectId of the saved project, instead of zero). If you use the reset project links on a new project, the Wizard inputs are cleared. if you use the reset project links on an existing project, the inputs are reset to the previously saved values on all pages. The left sidebar and page navigation footer are common to all pages, though each has different controls displayed and enabled, depending on the state of the calculation and current page.
The UI is built with a Model-Presentation pattern, where the (non-visual) model is implemented in the TdmCalculationContainer component and the TdmCalculationWizard component contains the (visual) presentation of the calculation as a child of the container. Of particular note, a filter object on the TdmCalculationContainer defines the logic for which rules are rendered on each page of the Wizard. With each change to an of the controls on the first four pages of the wizard, the calculation engine is re-run.
The TdmCalculationWizard, in turn, is comprised of a whole hierarchy of components, including separate components for each page:
-
Page 1 is the Project Description. It contains the calculation identification information inputs, which happen to all be text fields.
-
Page 2 is the Project Specifications. It contains the project specifications, which are mostly numeric values that are used as the basis for computing the baseline parking spaces, but also factor into the project level and land use types.
-
Page 3 is the Target Points Project Target Points . It has a single input, Parking Provided, that is the last bit of information required to finish the Target Points calculation.
-
Page 4 is Project Strategies. It is where the user chooses the various TDM Strategies and can see the points they earned toward the Target Points. The available strategies are disabled if they are not applicable (usually based on land uses, mutual exclusivity of related strategies, project level and parking provided). Most have an accordion-style drop-down with a detailed explanation of what the strategy entails.
-
Page 5 is the (read-only) Project Summary. This page shows all the information about the calculation. It also provides a number of controls that do not affect the calculation itself, but are more about managing the project it represents - such as printing, converting to a snapshot, submitting a snapshot, etc. Eventually these Call to Action controls should provide the same set of options that are available on the kebab menu of the My Projects page, and frequently invoke modal dialogs to complete the corresponding operation.