diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html index d0df352c878900a6b82fc1b1391615be36de6156..d370f14b43618df24d4201c1609a173078d06285 100644 --- a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html @@ -21,7 +21,7 @@ <span>Carte</span> </a> </li> - <li> + <li [routerLink]="['export']" [routerLinkActive]="'is-active'"> <a> <span class="icon is-small"> <i class="fas fa-external-link-alt" aria-hidden="true"></i> diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.html new file mode 100644 index 0000000000000000000000000000000000000000..c8d23cea6cf5c25e996602acfcfa33729dd881c3 --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.html @@ -0,0 +1,35 @@ +<div class="columns"> + <div class="column"> + <div class="card"> + <header class="card-header"> + <p class="card-header-title">Ressources à télécharger</p> + </header> + <div class="card-content"> + <div class="license-link"> + <a (click)="toggleLicenseModal()">Licence ouverte</a> + </div> + <div class="table-container"> + <table class="table"> + <thead> + <tr> + <th>Format</th> + <th>Date d'envoi</th> + <th>Téléchargement</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let protocol of metadata?.uri"> + <td>{{ protocol.protocol}}</td> + <td>-</td> + <td> + <a [href]="protocol.url" target="_blank">{{ protocol.url }}</a> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> +</div> +<app-license-modal (close)="toggleLicenseModal()" [isOpen]="displayLicenseModal"></app-license-modal> \ No newline at end of file diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..4862cdc82601c40d361872203428f69c72e5094b --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.scss @@ -0,0 +1,28 @@ +@import "../../../../../scss/variables"; + +.underlined { + text-decoration: underline; +} + +.columns { + margin-top: 0px; +} + +.license-link { + margin-bottom: 1rem; + a { + text-decoration: underline; + color: $black; + } +} + +.table-container { + overflow-x: auto; + table { + tbody { + td { + word-break: break-all; + } + } + } +} diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.spec.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..082532c05c7e189bd1f33f0980d8265176d2c7a2 --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatasetExportComponent } from './dataset-export.component'; + +describe('DatasetExportComponent', () => { + let component: DatasetExportComponent; + let fixture: ComponentFixture<DatasetExportComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DatasetExportComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatasetExportComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..79d8995d586de089c3a690b1d7561f80f79ff725 --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.ts @@ -0,0 +1,33 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, ParamMap } from '@angular/router'; +import { DatasetService } from '../../../services'; +import { Metadata } from '../../../models'; + +@Component({ + selector: 'app-dataset-export', + templateUrl: './dataset-export.component.html', + styleUrls: ['./dataset-export.component.scss'] +}) +export class DatasetExportComponent implements OnInit { + + metadata: Metadata; + displayLicenseModal = false; + + constructor( + private _route: ActivatedRoute, + private _datasetService: DatasetService, + ) { } + + ngOnInit() { + this._route.parent.paramMap + .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id'))) + .subscribe((metadata: Metadata) => { + this.metadata = metadata; + }); + } + + toggleLicenseModal() { + this.displayLicenseModal = !this.displayLicenseModal; + } + +} diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.html new file mode 100644 index 0000000000000000000000000000000000000000..0c5e05eda94e070952ac4b7dc5d1cd7de7bc04dc --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.html @@ -0,0 +1,88 @@ +<div class="modal" [ngClass]="{'is-active': isOpen}"> + <div class="modal-background" (click)="closeSelf()"></div> + <div class="modal-card"> + <header class="modal-card-head"> + <p class="modal-card-title">Présentation de la licence ouverte</p> + <button class="delete" aria-label="close" (click)="closeSelf()"></button> + </header> + <section class="modal-card-body"> + <p> + Vous pouvez réutiliser « l’Information » rendue disponible par le « Producteur » dans les libertés et les conditions prévues + par la présente licence. + </p> + <p> + La réutilisation de l’Information diffusée sous cette licence. + </p> + <p> + Le « Producteur » garantit au « Réutilisateur » le droit personnel, non exclusif et gratuit, de réutilisation de « l’Information + » soumise à la présente licence, dans le monde entier et pour une durée illimitée, dans les libertés et les conditions + exprimées ci-dessous. + </p> + <p> + Vous êtes libre de réutiliser « l’Information » : + </p> + <ul> + <li>Reproduire, copier, publier et transmettre « l’Information »</li> + <li>Diffuser et redistribuer « l’Information »</li> + <li>Adapter, modifier, extraire et transformer à partir de « l’Information », notamment pour créer des « Informations + dérivées »</li> + <li>Exploiter « l’Information » à titre commercial, par exemple en la combinant avec d’autres « Informations », ou en + l’incluant dans votre propre produit ou application</li> + </ul> + + <p>Sous réserve de :</p> + <ul> + <li> + Mentionner la paternité de « l’Information » : sa source (a minima le nom du « Producteur ») et la date de sa dernière mise + à jour. Le « Réutilisateur » peut notamment s’acquitter de cette condition en indiquant un ou des liens hypertextes + (URL) renvoyant vers « l’Information » et assurant une mention effective de sa paternité. + </li> + </ul> + <p> + Cette mention de paternité ne doit ni conférer un caractère officiel à la réutilisation de « l’Information », ni suggérer + une quelconque reconnaissance ou caution par le « Producteur », ou par toute autre entité publique, du « Réutilisateur + » ou de sa réutilisation. + </p> + + <h2>Responsabilité</h2> + <p> + « L’Information » est mise à disposition telle que produite ou reçue par le « Producteur », sans autre garantie expresse + ou tacite qui n’est pas prévue par la présente licence. + </p> + <p> + Le « Producteur » garantit qu’il met à disposition gratuitement « l’Information » dans les libertés et les conditions définies + par la présente licence. Il ne peut garantir l’absence de défauts ou d’irrégularités éventuellement contenues dans + « l’Information ». Il ne garantit pas la fourniture continue de « l’Information ». Il ne peut être tenu pour responsable + de toute perte, préjudice ou dommage de quelque sorte causé à des tiers du fait de la réutilisation. + </p> + <p> + Le « Réutilisateur » est le seul responsable de la réutilisation de « l’Information ». La réutilisation ne doit pas induire + en erreur des tiers quant au contenu de « l’Information », sa source et sa date de mise à jour. + </p> + <h2>Droits de propriété intellectuelle</h2> + <p> + Le « Producteur » garantit que « l’Information » ne contient pas de droits de propriété intellectuelle appartenant à des + tiers. + </p> + <p> + Les éventuels « Droits de propriété intellectuelle » détenus par le « Producteur » sur des documents contenant « l’Information + » ne font pas obstacle à la libre réutilisation de « l’Information ». Lorsque le « Producteur » détient des « Droits + de propriété intellectuelle » sur des documents qui contiennent « l’Information », il les cède de façon non exclusive, + à titre gracieux, pour le monde entier et pour toute la durée des « Droits de propriété intellectuelle », au « Réutilisateur + » qui peut en faire tout usage conformément aux libertés et aux conditions définies par la présente licence. + </p> + <h2>Compatibilité de la présente licence</h2> + <p> + Pour faciliter la réutilisation des « Informations », cette licence a été conçue pour être compatible avec toute licence + libre qui exige a minima la mention de paternité. Elle est notamment compatible avec les licences « Open Government + Licence » (OGL) du Royaume-Uni, « Creative Commons Attribution 2.0 » (CC-BY 2.0) de Creative Commons et « Open Data + Commons Attribution » (ODC-BY) de l’Open Knowledge Foundation. + </p> + <p>Droit applicable</p> + <p>La présente licence est régie par le droit français.</p> + </section> + <footer class="modal-card-foot"> + <button class="button" (click)="closeSelf()">Retour aux téléchargements</button> + </footer> + </div> +</div> \ No newline at end of file diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..68dc57979aade3dca65f6681431828e673c3fafc --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.scss @@ -0,0 +1,23 @@ +.modal-card { + .modal-card-body { + p { + margin-bottom: 1rem; + } + + ul { + margin-bottom: 1rem; + padding-left: 2.5rem; + list-style: disc; + } + + h2 { + margin-bottom: 1rem; + font-size:2,5rem; + font-weight: 600; + } + } + + .modal-card-foot { + justify-content: center; + } +} \ No newline at end of file diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.spec.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..a1e7b3c34b6f7522197cb686c02b32cefa728f47 --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LicenseModalComponent } from './license-modal.component'; + +describe('LicenseModalComponent', () => { + let component: LicenseModalComponent; + let fixture: ComponentFixture<LicenseModalComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LicenseModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LicenseModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..3d13f07a0523224fa7bcdb621f02213bafb1a732 --- /dev/null +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core'; + +@Component({ + selector: 'app-license-modal', + templateUrl: './license-modal.component.html', + styleUrls: ['./license-modal.component.scss'] +}) +export class LicenseModalComponent implements OnInit { + + @Input() isOpen: boolean; + @Output() close = new EventEmitter<boolean>(); + + constructor() { } + + ngOnInit() { + } + + closeSelf() { + this.close.emit(true); + } + +} diff --git a/webapp/src/app/geosource/components/index.ts b/webapp/src/app/geosource/components/index.ts index 6c601ec146dbc6181378cb1e54e6fc7efad860c2..78fdc7f6d3eda3983bffbf00fa283956a2091f2f 100644 --- a/webapp/src/app/geosource/components/index.ts +++ b/webapp/src/app/geosource/components/index.ts @@ -1,8 +1,12 @@ import { DatasetListComponent } from './dataset-list/dataset-list.component'; import { DatasetDetailComponent } from './dataset-detail/dataset-detail.component'; + +import { DatasetExportComponent } from './dataset-detail/dataset-export/dataset-export.component'; +import { LicenseModalComponent } from './dataset-detail/dataset-export/license-modal/license-modal.component'; import { DatasetMapComponent } from './dataset-detail/dataset-map/dataset-map.component'; import { DatasetInfoComponent } from './dataset-detail/dataset-info/dataset-info.component'; import { DatasetDescriptionComponent } from './dataset-detail/dataset-info/dataset-description/dataset-description.component'; + import { SearchBarComponent } from './search-bar/search-bar.component'; import { ResearchComponent } from './research/research.component'; import { SortComponent } from './sort/sort.component'; @@ -10,6 +14,8 @@ import { FilterListComponent } from './filter-list/filter-list.component'; import { FilterDetailComponent } from './filter-list/filter-detail/filter-detail.component'; export * from './dataset-detail/dataset-detail.component'; +export * from './dataset-detail/dataset-export/dataset-export.component'; +export * from './dataset-detail/dataset-export/license-modal/license-modal.component'; export * from './dataset-detail/dataset-map/dataset-map.component'; export * from './dataset-detail/dataset-info/dataset-info.component'; export * from './dataset-detail/dataset-info/dataset-description/dataset-description.component'; @@ -21,6 +27,8 @@ export * from './sort/sort.component'; export const GeosourceComponents = [ DatasetDetailComponent, + DatasetExportComponent, + LicenseModalComponent, DatasetMapComponent, DatasetInfoComponent, DatasetDescriptionComponent, diff --git a/webapp/src/app/geosource/geosource-routing.module.ts b/webapp/src/app/geosource/geosource-routing.module.ts index f6b582700a32fe5fd1aa313e84e6ce96480a91a0..1e086e1be1e0d7c788b50ab5ade9113a8dc985db 100644 --- a/webapp/src/app/geosource/geosource-routing.module.ts +++ b/webapp/src/app/geosource/geosource-routing.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { DatasetListComponent, DatasetDetailComponent, ResearchComponent, DatasetInfoComponent, DatasetMapComponent } from './components'; +import { DatasetListComponent, DatasetDetailComponent, ResearchComponent, DatasetInfoComponent, DatasetMapComponent, DatasetExportComponent } from './components'; export const routes: Routes = [ { @@ -32,6 +32,10 @@ export const routes: Routes = [ { path: 'map', component: DatasetMapComponent + }, + { + path: 'export', + component: DatasetExportComponent } ] } diff --git a/webapp/src/scss/variables.scss b/webapp/src/scss/variables.scss index 5b70ea2cfe96a970c0165a19926408d0f1275045..b8264b5f6872cac544987c3fce93a70c70c17f3e 100644 --- a/webapp/src/scss/variables.scss +++ b/webapp/src/scss/variables.scss @@ -20,7 +20,7 @@ $tabs-boxed-link-active-border-color: black; // Font size settings based on 16px (default browser font-size) $size-1: 3rem; -$size-2: 2.5rem; +$size-2: 2.5rem;// 40px $size-3: 2rem; $size-4: 1.25rem; //20px $size-5: 1rem; //16px @@ -37,6 +37,8 @@ $primary: $main; $family-primary: $family-sans-serif; $pagination-current-background-color: $yellow; $pagination-current-border-color: $yellow; + +$modal-background-background-color: rgba($black, 0.4); // 6. Import the rest of Bulma @import "../../node_modules/bulma/sass/utilities/_all"; @import "../../node_modules/bulma/sass/base/_all"; diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss index 289da6c85b41db97b6487b1690a1c4f47b69f7de..62694fdb0bced1dbd7ff91288ba7f60c2ac089b4 100644 --- a/webapp/src/styles.scss +++ b/webapp/src/styles.scss @@ -17,7 +17,7 @@ h1, h2, h3, h4, h5, h6, .card-header-title, .navbar { font-size: $size-6; } -span, p, select, input { +span, p, select, input, ul, tbody { font-size: $size-6; }