Skip to content
Snippets Groups Projects
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>