# Liftexperts Frontend for displaying dynamic reports

This project was made to create automated reports from data gatherd on site and fed to the backend.
It consumes the [Liftexperts API](https://gitlab.tend.ch/web/apps/4781-liftexperts/4781-liftexperts-backend) and displays a full report with multiple pages.
The reports can be printed as a pdf via the print dialog that opens with a click on the dedicated Print Button in the upper right corner.

## Development

The project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Following dependencies are used:
- [Router DOM](https://reactrouter.com/en/main) for internal routing
- [React to Print](https://github.com/gregnb/react-to-print) for custom print function.
- [Axios](https://axios-http.com) for data fetching.
- [Tailwind CSS](https://tailwindcss.com) a low level, utility-first CSS framework.

### Routes `src/routes`

- AppRoutes // contains all the following Routes for the site.
- `/` Home // not yet in use
- `/:elevatorId` Report // opens a report with the given `elevatorId`, shows the `<Report>` component.

### Components `src/components`
Holding all the project components

#### Elements `src/components/elements`
- Advice Section // returns an advice section with title and table of advices.
- Contact Box // return a box with author image, name, email, date and sign.
- DataTable // returns a table with title, two columns and infinite rows
- Handrails // returns a table with three rows and infinite columns
- IconListItem // returns list item with icon (image) and text
- ImageContainer // returns an image if url is given, else return placeholder
- LoadingSpinner // returns rotating spinner icon
- Page // returns page with header and footer, places childs given as content between.
- PrintButton // returns PrintButton which triggers the react-to-print hook
- ReportConclusion // returns feedback box with icon and text, color coded
- ReportEsbaItem // returns row for the esba table
- ReportNote // returns note containing status icon and text for the report sections
- ReportSection // returs a complete report section containing description, reportnotes and conclusions
- SectionTitle // returns title for section/pages
- SummaryListItem // returns a summary list item with status icon and text
- TeamMember // returns a team section with image, name, role and description

#### Pages `src/components/pages`
- Advantages // returns the layouted Advantages page
- Advice // returns the layouted Advice page
- Cover // return the layouted Cover page
- ElevatorSpecs // returns the layouted ElevatorSpecs page
- EsbaEvaluation // returns the layouted ESBA page
- Summary // returns the layouted Summary page
- Team // returns the layouted Team page

### Context `src/contex`
Provides the 'global' data to the children and handles fetches.
- ElevatorContext // fetches the elevator data and provides it.
- ReportContext // fetches the report data and provides it.
- StaticContext // fetches the static data and provides it.

### Helpers `src/helpers`
Small helping functions, see comments inside file.

### Hooks `src/hooks`
- useAuthor | returns author data
- useReportSections | returns paginated ReportSections depending on height of every section

### Available Scripts
In the project directory, you can run:

#### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

#### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

## Deployment

### Manual Deployment
The app can be built via the `npm run build` command and loaded to a basic webserver.\
The frontend can be found on http://liftexperts-frontend.herokuapp.com/

### Autmatic Deployment on Heroku
The app can be deployed automatically via git push to the heroku remote:

Initial Setup:
1. Create a new app on heroku
2. Set the remote url on your local repo for heroku, in our case: `git remote add heroku https://git.heroku.com/liftexperts-frontend.git`
3. Verify remote `git remote -v` and check if heroku appears in list

Deployment:
- run `git push heroku master` to deploy the master branch on heroku
- run `git push heroku develop:master` to deploy the develop branch on heroku