-
Matthieu Benoist authoredMatthieu Benoist authored
resource-queryable.component.html 12.15 KiB
<div class="full-line-resource resource-item">
<div class="layer-name">
<span>{{ resource.metadataLink.name }}</span>
</div>
<div class="root-url">
<div class="root-url-label title-label">
<span i18n="@@dataset.resources.url.root">
Root URL
</span>
</div>
<div class="root-url-input">
<app-link-copy-icon
[linkUrl]="resource.metadataLink.url"
[isRoot]="true"
[fileName]="resource.metadataLink.name"
></app-link-copy-icon>
</div>
</div>
<div class="create-request" *ngIf="allSettingsOK">
<span i18n="@@dataset.resources.createRequest">
Create a request
</span>
</div>
<div class="no-custom-url" *ngIf="!allSettingsOK">
<span i18n="@@dataset.resources.impossibleCreate">
Impossible de créer une requête personnalisée pour ce jeu de données
</span>
</div>
<ng-container *ngIf="allSettingsOK">
<div class="format-item">
<div class="label-dropdown title-label">
<span i18n="@@dataset.resources.format">
Output format
</span>
</div>
<!-- Dropdow for formats -->
<div class="dropdown" [ngClass]="{'is-active': dropDownFormatsToggle}" *ngIf="resource.formats.length > 1"
(click)="dropDownFormatsToggle=!dropDownFormatsToggle" (clickOutside)="dropDownFormatsToggle = false;">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ selectedFormat.name }}</span>
<svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
</svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" *ngFor="let format of resource.formats" (click)="setFormat(format)">
<ng-container *ngFor="let linkformat of resource.metadataLink.formats">
<ng-container *ngIf="linkformat==format.name">
{{ format.name }}
</ng-container>
</ng-container>
</a>
</div>
</div> </div>
<div *ngIf="resource.formats.length < 2">
<span>{{ selectedFormat.name }}</span>
</div>
</div>
<div class="format-item" *ngIf="selectedFormat.name === 'CSV' ">
<div class="label-dropdown title-label">
<span i18n="@@dataset.resources.csvFieldsSeparator">
CSV's Fields separator
</span>
</div>
<div>
<!-- Dropdow for projections -->
<div class="dropdown" [ngClass]="{'is-active': csvFormatToggle}"
(click)="csvFormatToggle=!csvFormatToggle"
(clickOutside)="csvFormatToggle = false;">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ selectedFieldsSeparator }}</span>
<svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
</svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" *ngFor="let csvFieldsSeparator of csvFieldsSeparatorList" (click)="setFieldsSeparator(csvFieldsSeparator)">
<span i18n="@@dataset.resources.csvFieldsSeparator.semicolon" *ngIf="csvFieldsSeparator === ';' " >
{{ csvFieldsSeparator }}
</span>
<span i18n="@@dataset.resources.csvDecimalSeparator.comma" *ngIf="csvFieldsSeparator === ',' ">
{{ csvFieldsSeparator }}
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="projection-item" *ngIf="selectedFormat.name === 'CSV' ">
<div class="label-dropdown title-label">
<span i18n="@@dataset.resources.csvDecimalSeparator">
CSV's decimal separator
</span>
</div>
<div>
<!-- Dropdow for projections -->
<div class="dropdown" [ngClass]="{'is-active': csvDecimalFormatToggle}"
(click)="csvDecimalFormatToggle=!csvDecimalFormatToggle"
(clickOutside)="csvDecimalFormatToggle = false;">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ selectedDecimalseparator }}</span>
<svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
</svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content"> <a class="dropdown-item" *ngFor="let csvDecimalSeparator of csvDecimalSeparatorList" (click)="setDecimalSeparator(csvDecimalSeparator)">
<span i18n="@@dataset.resources.csvDecimalSeparator.dot" *ngIf="csvDecimalSeparator === '.' " >
{{ csvDecimalSeparator }}
</span>
<span i18n="@@dataset.resources.csvDecimalSeparator.comma" *ngIf="csvDecimalSeparator === ',' ">
{{ csvDecimalSeparator }}
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="projection-item" *ngIf="selectedFormat.isProjectable">
<div class="label-dropdown title-label">
<span i18n="@@dataset.resources.projectionsystem">
Projection system
</span>
</div>
<div>
<!-- Dropdow for projections -->
<div class="dropdown" [ngClass]="{'is-active': dropDownProjectionToggle}"
(click)="dropDownProjectionToggle=!dropDownProjectionToggle"
(clickOutside)="dropDownProjectionToggle = false;">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ getProjectionLabel(selectedProjection.name) }}</span>
<svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
</svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" *ngFor="let projection of projectionList" (click)="setProjection(projection)">
{{ getProjectionLabel(projection.name) }}
</a>
</div>
</div>
</div>
</div>
</div>
<div class="division-item" *ngIf="selectedFormat.isCuttable && inseeLabel">
<div class="label-dropdown title-label">
<span i18n="@@dataset.resources.divisionbycommune">
Division by municipality
</span>
</div>
<div>
<!-- Dropdown for insee when needed -->
<div class="dropdown dropdown-insee" [ngClass]="{'is-active': dropDownInseeToggle}"
(click)="dropDownInseeToggle=!dropDownInseeToggle" (clickOutside)="dropDownInseeToggle = false;">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span
*ngIf="selectedInsee">{{ selectedInsee ? selectedInsee.commune + ' - ' + selectedInsee.insee : ''}}</span>
<span *ngIf="!selectedInsee" i18n="@@dataset.resources.commune">All</span>
<svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" />
<path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z" class="brandcolor" />
</svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" (click)="setInsee(null)" i18n="@@global.all.commune">All</a>
<a class="dropdown-item" *ngFor="let zone of communeInseeList" (click)="setInsee(zone)">
{{ zone.commune }} - {{ zone.insee }}
</a>
</div>
</div>
</div>
</div>
</div>
<ng-container *ngIf="resource.type === linkFormats.wfs || resource.type === linkFormats.ws">
<div class="maxFeatures-item">
<div class="title-label">
<label for="countFeatures"> Nombre d'enregistrements</label>
</div>
<div class="countFeatures">
<div>
<input class="input" id="countFeatures" [value]="inputCountFeatures" type="number" min="1" max="10000"
[(ngModel)]="inputCountFeatures" (change)="setActiveCountFeatures()" [disabled]="isAllFeaturesChecked">
</div>
<div class="allFeatures">
<input [id]="'allFeatures_' + resource.type" class="is-checkradio is-small" type="checkbox"
(change)="checkAllFeatures()" [(ngModel)]="isAllFeaturesChecked" [value]="isAllFeaturesChecked">
<label [for]="'allFeatures_' + resource.type" class="label checkbox-label">Tous</label>
</div>
</div>
<div class="warning" *ngIf="numberFeatures > 1000">
<span>à partir de 1000 enregistrements, le temps de chargement peut devenir
important</span>
</div>
</div>
<div class="fromFeature-item">
<div class="title-label">
<label [for]="'fromFeature_' + resource.type"> Numéro du 1er enregistrement</label>
</div>
<div>
<input class="input" [id]="'fromFeature_' + resource.type" type="number" [value]="fromFeature"
[min]="minFromFeature" [max]="totalData" [(ngModel)]="fromFeature" (change)="setActiveFromFeature()">
</div>
</div>
</ng-container>
<div class="personnalized-url">
<div class="title-label">
<span i18n="@@dataset.resources.url.personalized">
URL personnalisée
</span>
</div>
<app-link-copy-icon [linkUrl]="queryableUrl" [linkToDisplay]="queryableUrlToDisplay" [fileName]="fileName">
<div class="resource-download-icon">
<app-download-button [url]="downloadUrl" [fileName]="fileName">
</app-download-button>
</div>
</app-link-copy-icon>
</div>
</ng-container>
</div>