cismet / verkehrszeichenkataster

HTML UI des Wuppertaler Verkehrszeichenkatasters
0 stars 1 forks source link

Description of the application #51

Closed d4v3000 closed 9 months ago

d4v3000 commented 10 months ago

The main part of the application can be found under the route /anordnung/#id/verlauf. This is done so at some time in the future when we have Kataster Objects the route /anordnung/#id/kataster or something like that can be used and make use of the current Wrapper file (https://github.com/dev-cismet/verkehrszeichenkataster/blob/dev/src/pages/DetailsWrapper.jsx).

The main application screen contains 3 different parts.

  1. Navbar
  2. Sidebar
  3. Timeline

The main Navbar (https://github.com/dev-cismet/verkehrszeichenkataster/blob/dev/src/components/commons/Navbar.jsx) contains two rows and is always visible. The first one is structured like the verdis navbar, where you have space for links on the left and different actions and buttons on the right side. The second row is done using the Ant Design Tabs (https://github.com/dev-cismet/verkehrszeichenkataster/blob/7409d0e5ee746cfde1e4530cbcee0f65aba0cb70/src/components/commons/Navbar.jsx#L202) and show all the currently selected Anordnungen.

The sidebar (https://github.com/dev-cismet/verkehrszeichenkataster/blob/dev/src/components/commons/Sidebar.jsx) is only visible when an Antrag is selected. It displays every attachment that is currently used and beneath them there are some Kataster objects that are currently hard coded. They change the route and display some ui but are not used for anything right now.

There are some problems with the attachment links on the sidebar. Right now they are only there for visibility and don't have another purpose. The plan was to make them clickable and then scroll the attachment the user clicked on appear on the screen if it wasn't visible before. That is currently not working. If the user clicks on a kataster object and then clicks on a attachment it will just show whitespace where the real application part should be.

The main application code can be found in the timeline page (https://github.com/dev-cismet/verkehrszeichenkataster/blob/dev/src/pages/TimelinePage.jsx). It consists of a heading part (https://github.com/dev-cismet/verkehrszeichenkataster/blob/dev/src/components/timeline/Heading.jsx) Where the user can change the title and print the pdf and also see some information about the currently selected Anordnung.

Under the Heading there is a two column design with the main part on the left being all the added attachments (https://github.com/dev-cismet/verkehrszeichenkataster/blob/7409d0e5ee746cfde1e4530cbcee0f65aba0cb70/src/pages/TimelinePage.jsx#L134) and the submit card (https://github.com/dev-cismet/verkehrszeichenkataster/blob/dev/src/components/timeline/SubmitCard.jsx) beneath. On the right there is the ant timeline (https://github.com/dev-cismet/verkehrszeichenkataster/blob/7409d0e5ee746cfde1e4530cbcee0f65aba0cb70/src/pages/TimelinePage.jsx#L164) displaying the timeline of all the added attachments and some useful buttons beneath it. There is the Textbausteine part (https://github.com/dev-cismet/verkehrszeichenkataster/blob/dev/src/components/timeline/TagList.jsx) where the user can click on these tags and they add different pre defined attachments to the timeline. They currently use a text comparison in order to check if they should be checked or not. There is probably a better way to to this in the future to prevent errors. Beneath the Textbausteine (https://github.com/dev-cismet/verkehrszeichenkataster/blob/7409d0e5ee746cfde1e4530cbcee0f65aba0cb70/src/pages/TimelinePage.jsx#L171) is some space for different action buttons but currently there is only one button to close and open the whole anordnung.

All the different attachments can be found in /components/timeline and are basically ant cards with different content. In the future it would be better to refactor them a little bit because there is still some duplicate code between them.