diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..712be594beabcb336729eebdcad76c25059743f4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +site +venv diff --git a/docs/assets/web-app-project-structure.png b/docs/assets/web-app-project-structure.png new file mode 100644 index 0000000000000000000000000000000000000000..c21613e3e4289944568515c72428b443a52d9dcf Binary files /dev/null and b/docs/assets/web-app-project-structure.png differ diff --git a/docs/components/custom-apps/web-app/changelog.md b/docs/components/custom-apps/web-app/changelog.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/contact.md b/docs/components/custom-apps/web-app/contact.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/credits.md b/docs/components/custom-apps/web-app/credits.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/dataset/data.md b/docs/components/custom-apps/web-app/dataset/data.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/dataset/info.md b/docs/components/custom-apps/web-app/dataset/info.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/dataset/resources.md b/docs/components/custom-apps/web-app/dataset/resources.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/drafts.md b/docs/components/custom-apps/web-app/drafts.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/feedback.md b/docs/components/custom-apps/web-app/feedback.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/footer.md b/docs/components/custom-apps/web-app/footer.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/header.md b/docs/components/custom-apps/web-app/header.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/homepage.md b/docs/components/custom-apps/web-app/homepage.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app.md b/docs/components/custom-apps/web-app/overview.md similarity index 52% rename from docs/components/custom-apps/web-app.md rename to docs/components/custom-apps/web-app/overview.md index a226ecb94445196e2ddb12e40d2265f4eeb301ac..e0180910a6302c6aaab7e009fe1f0077d4d95d67 100644 --- a/docs/components/custom-apps/web-app.md +++ b/docs/components/custom-apps/web-app/overview.md @@ -1,64 +1,174 @@ -## Lyon Portal Open Data +# Web app ## Files & Folders structure -Organize a folders and files structure inside a project is never an easy task, and it exists many ways to do so. + +Organize a folders and files structure inside a project is never an easy task, and it exists many ways to do so. We think that at the beginning we should just not overthink about it, choose one way to do it, keep to it, until a natural re-organization will happen if needed. Here is our `/src` folder structure: - - -* `src/app`: where the Angular code is located. With time we organized this part in different modules taking care on one main functionnality each. Inside one module each component has its own folder with one `.ts`, one `.scss` and one `html` file. -* `/src/assets`: contains all the images, favicon, svg, fonts, Mapbox style files. -* `src/environments`: - + + +* `src/app/`: where the Angular code is located. With time we organized this part in different modules each taking care of one main functionnality. Here is the list of the modules: + * `core/`: constitutes the base of the application (layout, notifications, navigation history...) + * `dataset-details/`: contains the components and logic allowing the display of a dataset information (metadata, data, map...) + * `datasets/`: contains the components and some of the logic related to the research + * `editorialisation/`: contains the components and logic related to the display of editorial content (static pages, articles) + * `elasticsearch/`: + * `map/`: contains the components and logic allowing the display and manipulation of a map + * `shared/`: provides components, directives and others things that can be reused in different modules + * `user/`: contains the components and logic related to the user management in the application (login, logout, user profil...) +* `src/assets/`: contains all the images, favicon, svg, fonts, dynamic config file... +* `src/environments/`: contains files with static configuration. +* `src/i18n/`: this folder is dedicated to the translation. The are two types of files: + * `.xlf`: + * `.ts`: +* `src/scss/`: +* `src/app-routing.module.ts`: +* `src/app.component(.ts, .html, .scss)`: +* `src/app.module.ts`: +* `src/routes.ts`: + +Each module is organized in the following way: (not all the subfolders are required) + +* `<module-name>.module.ts`: +* `<module-name>-routing.module.ts`: +* `components/`: +* `directives/`: +* `guards/`: +* `handlers/`: +* `interceptors/`: +* `models/`: +* `pipes/`: +* `resolvers/`: +* `services/`: +* `validators/`: + +Inside one module each component has its own folder with one `.ts`, one `.scss` and one `html` file. ## CSS integration with Bulma -All the styling work has been done with [Bulma](https://bulma.io/), a free and open source CSS framework based on Flexbox, has been used. + +All the styling work has been done with [Bulma](https://bulma.io/), a free and open source CSS framework based on Flexbox. It is highlighy customizable and easy to integrate in a project. To do so, a `variables.scss` file that contains our project variables, overrides the Bulma variables (color, padding, anything you want). Then Bulma is imported and added to our main `style.scss`. That's it, our style incorporate a personalized Bulma . +## Features by pages -## Research features -This core feature is based on [Elasticsearch](https://www.elastic.co/fr/) (ES). Almost all the information in the portal (including datasets, articles, geographical data) is indexed in ES. This allows lot's of possibilities with the powerful features of this tool. -Here are the features existing on the portal: -* *research*: thanks to ES great indexation, to go through millions of documents is super fast (millions because we are not only looking inside the metadata, but also inside the data) -* *autocompletion*: using the score based on some criteria, we provides an autocompletion feature that helps to give a context for some research keywords. -* *suggestion*: if a research didn't give good or no results (for example because of a typo), a word with more results will be suggested. +### Home -Of course there is a plenty of room for improvements for these features (and for new ones). ES is very powerful but also very complex to master. It's in a constant improvement. +#### Explore + +#### News + +#### All news + +### Side menu + +#### Draft button + +#### App version number + +#### FR and EN buttons + +### Feedback + +### Static pages + +### Partners + +### Reuses + +### Draft page + +### Contact + +### Last changes + +### Download the catalogue + +### Credits + +### Sign In & Sign Up + +### User profil + +### User data + +### Research + +#### Filters + +#### Tabs + +#### Pagination + +#### Sort + +#### Suggestion + +#### Dataset result + +### Datset details (Data tab) + +#### Research in the data + +#### Properties display toggle + +#### Data table (sort properties & complex properties & hostory of the click elements) + +#### Map + +* plan vecto & satellite +* research by address +* geoloc +* copy map +* interactions +* detail of a data on map feature click -## Map features For each geographical dataset it's possible to display the data on a map. Here is what have been done to make this happen. -#### Mapbox GL JS +Mapbox GL JS + On the client side, the library [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) is used. This is a very interesting tool improving quickly. The only drawback using it with Angular is that we cannot always use its last version. Indeed as we are using Typescript, we need to wait until the @types are updated. -#### Styling +### Styling + Mapbox use the [Mapbox style specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) to define the visual appearance of a map. In our project we have created different styles depending on how we want to display the map. For example when we display the aerial layer, we don't necessary want the names of, say the roads and the river, to have the same color than when we display the vectorial layer. So when we change these layers, we load the appropriate style. -#### How the data is fetched ? +### How is the data fetched ? + Initially we were using Web Feature Service (WFS) and Web Map Service protocols to get the data (geojson or images). But for WFS we realized that when our needs became more complex and precise, this could sometimes be not so easy (filters are not the most funny thing to do). So we used...Elasticsearch. It is super fast and even have geographical research. We fetch the data from ES, format it into a `.geojson` and voilà ! This will also allow us in the future to have more advanced features on the map (like filters). -## API & Downloads feature +#### Fullscreen +#### Toggle Map/data -## CI/CD +### Datset details (Info tab) +#### Parent and children datasets -## Credits +#### License -## Licence +#### Contact us -### TODO -bannière accés restreint -drafts -MVT+WMS -listing of data accesses ? -button for license ? +## Research features + +This core feature is based on [Elasticsearch](https://www.elastic.co/fr/) (ES). Almost all the information in the portal (including datasets, articles, geographical data) is indexed in ES. This allows lot's of possibilities with the powerful features of this tool. +Here are the features existing on the portal: + +* *research*: thanks to ES great indexation, to go through millions of documents is super fast (millions because we are not only looking inside the metadata, but also inside the data) +* *autocompletion*: using the score based on some criteria, we provides an autocompletion feature that helps to give a context for some research keywords. +* *suggestion*: if a research didn't give good or no results (for example because of a typo), a word with more results will be suggested. + +Of course there is a plenty of room for improvements for these features (and for new ones). ES is very powerful but also very complex to master. It's in a constant improvement. + + +## API & Downloads feature + +## CI/CD diff --git a/docs/components/custom-apps/web-app/partners.md b/docs/components/custom-apps/web-app/partners.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/reuses.md b/docs/components/custom-apps/web-app/reuses.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/search.md b/docs/components/custom-apps/web-app/search.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/side-menu.md b/docs/components/custom-apps/web-app/side-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/sign-up-in-out.md b/docs/components/custom-apps/web-app/sign-up-in-out.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/custom-apps/web-app/static-pages.md b/docs/components/custom-apps/web-app/static-pages.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/components/services/authentication.md b/docs/components/services/authentication.md index 0c17ed4733c30336840b4fdbd217144cd3625a83..6ba6e8e2d213d3d49a83cddb98f75aba7a1c9ea6 100644 --- a/docs/components/services/authentication.md +++ b/docs/components/services/authentication.md @@ -9,7 +9,7 @@ This service allows users to login to / logout from the Web Portal. Establishing The service relies on * the [API Gateway](../off-the-shelf-apps/api-gateway.md), in particular its Admin API; -* external identity providers, which actually store user profiles and can verify user credentials. Despite being designed to potentially support different identity providers, in the present implementation only the [Legacy AUTH Identity Provider](../core/legacy-auth.md) is supported. A [middleware](../middlewares/legacy-auth-middleware.md) was developed, so as to facilitate the interaction between this service and the Legacy AUTH Identity Provider. +* external identity providers, which actually store user profiles and can verify user credentials. Despite being designed to potentially support different identity providers, in the present implementation only the [Legacy AUTH Identity Provider](../core/legacy-auth.md) is supported. A [middleware](../middlewares/legacy-auth.md) was developed, so as to facilitate the interaction between this service and the Legacy AUTH Identity Provider.  @@ -33,7 +33,7 @@ This service provides five **endpoints**: 5. An **health** endpoint, `/health`, returning a `200` HTTP Status Code in case the service is healthy, `503` in the opposite case. For this service to be healthy, two conditions must be fulfilled: * the [API Gateway](../off-the-shelf-apps/api-gateway.md) must be up; - * the [Legacy AUTH Middleware](../middlewares/legacy-auth-middleware.md) must be up. + * the [Legacy AUTH Middleware](../middlewares/legacy-auth.md) must be up. ## Implementation diff --git a/docs/extra.css b/docs/extra.css new file mode 100644 index 0000000000000000000000000000000000000000..27e17f3396f8515eb10a02eeb56d1ba5e040ab6b --- /dev/null +++ b/docs/extra.css @@ -0,0 +1,9 @@ +body { + background: #f2f2f2; +} + +.md-content { + background: white; + border: 1px solid #dcd9d9; + margin-bottom: 2rem; +} \ No newline at end of file diff --git a/docs/features/index.md b/docs/features/index.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/docs/overview/index.md b/docs/overview/index.md index 1a94b35a66dbbd2cb3a23735a3cd20468abe72df..f407fc488cea40a740da9a3162f6bf90c8c1d89a 100644 --- a/docs/overview/index.md +++ b/docs/overview/index.md @@ -139,6 +139,7 @@ In alphabetical order: ID | Name | Repo | Doc | Usage | Deps --- | --- | --- | --- | --- | --- +<<<<<<< HEAD S1 | Authentication | [Link](https://forge.grandlyon.com/web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/services/authentication) | [Link](../components/services/authentication.md) | Allowing users to create accounts and to perform logins and logouts | A3, S5 S2 | Changelog | [Link](https://forge.grandlyon.com/web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/services/changelog) | [Link](../components/services/changelog.md) | Keeping track of the new features available to users throughout the developments| S3 | Credits | [Link](https://forge.grandlyon.com/web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/services/credits) | [Link](../components/services/credits.md) | Catalog of the Open Source initiatives powering the data.grandlyon.com project | | @@ -149,6 +150,29 @@ S7 | Organizations | [Link](https://forge.grandlyon.com/web-et-numerique/web-et- S8 | Resources Helper | [Link](https://forge.grandlyon.com/web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/services/resources-helper) | [Link](../components/services/resources-helper.md) | Assisting users in the composition of custom queries against the Core APIs | S9 | Reuses | [Link](https://forge.grandlyon.com/web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/services/reuses) | [Link](../components/services/reuses.md) | A catalog of the known reuses of the data shared through data.grandlyon.com | S6 S10 | Social Media Share Helper | [Link](https://forge.grandlyon.com/web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/services/social-media-share-helper) | [Link](../components/services/social-media-share-helper.md) | ... | ... +||||||| merged common ancestors +S1 | Authentication | ... | [Link](../components/services/authentication.md) | Allowing users to create accounts and to perform logins and logouts | A3, S5 +S2 | Changelog | [Link](https://gitlab.alpha.grandlyon.com/refonte-data/service-changelog) | [Link](../components/services/changelog.md) | Keeping track of the new features available to users throughout the developments| +S3 | Credits | ... | [Link](../components/services/credits.md) | Catalog of the Open Source initiatives powering the data.grandlyon.com project | | +S4 | CSV Catalog Downloader | ... | [Link](../components/services/csv-catalog-downloader.md) | Allowing users to download cached CSV exports of the metadata catalog | C3 | +S5 | Mailer | ... | [Link](../components/services/mail.md) | Sending e-mails to both end- and back-office users | A6 +S6 | Media Library | ... | ... | Managing the images shown across the various pages of the Web Portal (organizations, posts, ...) | +S7 | Organizations | ... | ... | A catalog of the partners of the data.grandlyon.com, typically Data Providers | S6 +S8 | Resources Helper | ... | ... | Assisting users in the composition of custom queries against the Core APIs | +S9 | Reuses | ... | ... | A catalog of the known reuses of the data shared through data.grandlyon.com | S6 +S10 | Social Media Share Helper +======= +S1 | Authentication | ... | [Link](../components/services/authentication.md) | Allowing users to create accounts and to perform logins and logouts | A3, S5 +S2 | Changelog | [Link](https://gitlab.alpha.grandlyon.com/refonte-data/service-changelog) | [Link](../components/services/changelog.md) | Keeping track of the new features available to users throughout the developments| +S3 | Credits | ... | [Link](../components/services/credits.md) | Catalog of the Open Source initiatives powering the data.grandlyon.com project | | +S4 | CSV Catalog Downloader | ... | [Link](../components/services/csv-catalog-downloader.md) | Allowing users to download cached CSV exports of the metadata catalog | C3 | +S5 | Mailer | ... | [Link](../components/services/mailer.md) | Sending e-mails to both end- and back-office users | A6 +S6 | Media Library | ... | ... | Managing the images shown across the various pages of the Web Portal (organizations, posts, ...) | +S7 | Organizations | ... | ... | A catalog of the partners of the data.grandlyon.com, typically Data Providers | S6 +S8 | Resources Helper | ... | ... | Assisting users in the composition of custom queries against the Core APIs | +S9 | Reuses | ... | ... | A catalog of the known reuses of the data shared through data.grandlyon.com | S6 +S10 | Social Media Share Helper +>>>>>>> doc-webapp ### Custom applications ID | Name | Repo | Doc | Usage | Deps diff --git a/mkdocs.yml b/mkdocs.yml index ac0c0b8243ad5a95fbbb711d240741a4cd7a6894..e17d3244cc24c12daa2b339d30a0bc5b5f99b730 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -17,6 +17,8 @@ theme: feature: tabs: false +extra_css: [extra.css] + markdown_extensions: - plantuml_markdown: server: http://www.plantuml.com/plantuml @@ -24,18 +26,42 @@ markdown_extensions: nav: - Home: index.md - Overview: overview/index.md - - Features: features/index.md - Architecture: architecture/index.md - Components: - Core Components: - Legacy AUTH: components/core/legacy-auth.md + - Custom apps: + - Web App: + - Overview: components/custom-apps/web-app/overview.md + - Homepage: components/custom-apps/web-app/homepage.md + - Changelog: components/custom-apps/web-app/changelog.md + - Feedback: components/custom-apps/web-app/feedback.md + - Reuses: components/custom-apps/web-app/reuses.md + - Partners: components/custom-apps/web-app/partners.md + - Credits: components/custom-apps/web-app/credits.md + - Static pages: components/custom-apps/web-app/static-pages.md + - Dataset: + - Data: components/custom-apps/web-app/dataset/data.md + - Information: components/custom-apps/web-app/dataset/info.md + - API \& Downloads: components/custom-apps/web-app/dataset/resources.md + - Header: components/custom-apps/web-app/header.md + - Footer: components/custom-apps/web-app/footer.md + - Drafts: components/custom-apps/web-app/drafts.md + - Side Menu: components/custom-apps/web-app/side-menu.md + - Sign Up, Sign In, Sign Out: components/custom-apps/web-app/sign-up-in-out.md + - Contact: components/custom-apps/web-app/contact.md + - Search: components/custom-apps/web-app/search.md + - Admin GUI: components/custom-apps/admin-gui.md - Off-the-shelf applications: - API Gateway: components/off-the-shelf-apps/api-gateway.md - Headless CMS: components/off-the-shelf-apps/cms.md - Search Engine: components/off-the-shelf-apps/elasticsearch.md - Middlewares: - - Legacy AUTH: components/middlewares/legacy-auth-middleware.md - # - Proxies: + - Legacy AUTH: components/middlewares/legacy-auth.md + - Proxies: + - Web mapping services: components/proxies/web-mapping-services.md + - Miscellaneous: + - Maintenance page: components/miscellaneous/maintenance-page.md - Indexers: - Metadata and Data: components/indexers/metadata-and-data.md - Editorial Content: components/indexers/editorial-content.md @@ -43,14 +69,15 @@ nav: - Authentication: components/services/authentication.md - Changelog: components/services/changelog.md - Credits: components/services/credits.md + - Reuses: components/services/reuses.md - CSV Catalog Downloader: components/services/csv-catalog-downloader.md - - Mail: components/services/mail.md + - Mailer: components/services/mailer.md - Media Library: components/services/media-library.md - Organizations: components/services/organizations.md - - Resources: components/services/resources.md - - Specific applications: - - Web App: components/specific-apps/web-app.md - - Admin GUI: components/specific-apps/admin-gui.md + - Resources helper: components/services/resources-helper.md + - Social media share helper: components/services/social-media-share-helper.md + - Tools: + - Minio master-slave mirror: components/tools/minio-master-slave-mirror.md - Administration: administration/admin-tools.md - Deployment: - 2019 deployment of the first public beta version: deployment/beta-deployment.md