Commit 6dfa0c71 authored by lanpodder's avatar lanpodder

Datenexport vollständig

parent 8a304e7d
......@@ -24,6 +24,7 @@ import { ModalComponent } from './widgets/modals/modal/modal.component';
import { EditComponent } from './widgets/entry/edit/edit.component';
import { CreateComponent } from './widgets/entry/create/create.component';
import { LoginComponent } from './widgets/modals/login/login.component';
import { DatenexportSeiteComponent } from './datenexport-seite/datenexport-seite.component';
/// staging.
import { MarkdownComponent } from './staging/markdown/markdown.component';
......@@ -51,6 +52,7 @@ const routes: Routes = [
{ path: 'createEntry', component: CreateEntryComponent },
{ path: 'entryedit', component: EditComponent },
{ path: 'entrycreate', component: CreateComponent },
{ path: 'export', component: DatenexportSeiteComponent },
{
path: 'playground',
children: [
......
<div class="widget-wrap big-widget">
<div class="container contact pagecontainer">
<h1>Datenexport</h1>
<p>
Du möchtest Daten aus dem GeoPortal herunterladen, um Sie außerhalb unserer Plattform weiternutzen zu können? Dann
bist du hier richtig. Um den gesamten Datensatz herunterzuladen, gehe folgendermaßen vor:
</p>
<form [formGroup]="exportFormGroup" (ngSubmit)="exportUrl=apiService.apiURL; submitExportForm();">
<h2>1. Welche allgemeinen Information zu den jeweiligen Ort möchtest du herunterladen? (soweit verfügbar).</h2>
<br>
<div formArrayName="exportFields" class="btn-group-toggle">
<label *ngFor="let exportField of exportFields.controls; let i=index" class="btn btn-outline-secondary"
onchange="this.classList.toggle('active');" style="width: 100%; margin: 1px">
<input type="checkbox" [formControlName]="i" />
{{exportFieldItems[i].name}}
</label>
</div>
<h2 style="margin-top: 20px; margin-bottom: 20px">2. Wähle ein Dateiformat.</h2>
<div class="btn-group btn-group-toggle" style="width: 100%">
<label [ngClass]="csv.checked ? 'btn btn-outline-success active' : 'btn btn-outline-success'">
<input type="radio" #csv value="CSV" formControlName="formatFields">
CSV
</label>
<label [ngClass]="xls.checked ? 'btn btn-outline-success active' : 'btn btn-outline-success'" >
<input type="radio" #xls value="XLS" formControlName="formatFields">
XLS
</label>
<label [ngClass]="json.checked ? 'btn btn-outline-success active' : 'btn btn-outline-success'">
<input type="radio" #json value="JSON" formControlName="formatFields">
JSON
</label>
</div>
<br>
<label class="btn btn-outline-primary" style="width: 100%; margin-top: 10px">
<input type="checkbox" style="vertical-align: center;" formControlName="agreement"> Ich stimme den Lizenzvereinbarungen zu und möchte die ausgewählten Daten herunterladen.
</label>
<button type="submit" class="btn btn-info" style="width: 100%; margin-top:5px" [disabled]="!exportFormGroup.valid">Daten herunterladen</button>
</form>
<br>
<!--
Debug stuff:
Optionen: {{exportFormGroup.value | json}}
API: <a href="{{apiService.apiURL}}/GeoElements/EdgeList"> api </a>
-->
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatenexportSeiteComponent } from './datenexport-seite.component';
describe('DatenexportSeiteComponent', () => {
let component: DatenexportSeiteComponent;
let fixture: ComponentFixture<DatenexportSeiteComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DatenexportSeiteComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatenexportSeiteComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormArray } from '@angular/forms';
import { GeoportalApiService } from '../services/geoportal-api.service';
@Component({
selector: 'app-datenexport-seite',
templateUrl: './datenexport-seite.component.html',
styleUrls: ['./datenexport-seite.component.css']
})
export class DatenexportSeiteComponent implements OnInit {
formatForm = this.fb.control('', Validators.required);
exportUrl: string;
exportFieldItems: {
name: string
}[] = [
{ name: 'Bezeichnung des Ortes' },
{ name: 'Adresse (Straße, Hausnummer, PLZ, Ort, Land)' },
{ name: 'E-Mail' },
{ name: 'Homepage' },
{ name: 'Öffnungszeiten' },
{ name: 'Flächenbezeichnung' },
{ name: 'Ortsgrenzen' },
{ name: 'OSM-ID' },
];
exportFormGroup = this.fb.group({
formatFields: this.formatForm,
exportFields: this.fb.array([
this.fb.control(false),
this.fb.control(false),
this.fb.control(false),
this.fb.control(false),
this.fb.control(false),
this.fb.control(false),
this.fb.control(false),
this.fb.control(false),
]),
agreement: [false, Validators.requiredTrue],
});
constructor(private fb: FormBuilder, private apiService: GeoportalApiService) { }
ngOnInit() {
}
toggleButton(checkbox) {
if (checkbox.classList.contains("active")) {
checkbox.classList.remove("active");
return;
}
checkbox.classList.add("active");
}
get exportFields() {
return this.exportFormGroup.get('exportFields') as FormArray;
}
submitExportForm(){ //communication with service or api here
var exportVars = []
exportVars.push(this.exportFormGroup.get('formatFields').value);
this.exportFields.controls.forEach(
(item, index) => {
if(item.value === true){
exportVars.push(this.exportFieldItems[index].name);
}
}
);
console.log(exportVars.toString());
console.log(this.exportUrl);
var win = window.open(this.exportUrl+'/GeoElements/EdgeList', '_blank');
win.opener = null;
win.focus();
}
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand logo logosize" routerLink="home" href="#"> GEO<b>PORTAL</b> DES <b>GUTEN LEBENS</b> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" routerLink="search" routerLinkActive="active"
href="#">Karte<span class="caret"></span></a></li>
<li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active"
href="#">&Uuml;ber das Projekt<span class="caret"></span></a></li>
<!--<li class="nav-item"><a class="nav-link" routerLink="discover" routerLinkActive="active"
href="#">Entdecken<span class="caret"></span></a></li>-->
<!--<li class="nav-item"><a class="nav-link" routerLink="help" routerLinkActive="active"
href="#">Hilfe<span class="caret"></span></a></li>-->
<li class="nav-item"><a class="nav-link" routerLink="contribute" routerLinkActive="active"
href="#">Mitwirken<span class="caret"></span></a></li>
<li class="nav-item"><a class="nav-link"
href="{{apiService.apiURL}}/GeoElements/EdgeList">Datenexport<span class="caret"></span></a></li>
<li class="nav-item">
<a class="nav-link" routerLink="search" routerLinkActive="active" href="#">
Karte
<span class="caret"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="home" routerLinkActive="active" href="#">
&Uuml;ber das Projekt
<span class="caret"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contribute" routerLinkActive="active" href="#">
Mitwirken
<span class="caret"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/export"> <!--href="{{apiService.apiURL}}/GeoElements/EdgeList"-->
Datenexport
<span class="caret"></span>
</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<!--<li class="nav-item"><a class="nav-link" routerLink="messages" href="#">Messages</a></li>-->
<!-- <li *ngIf="!authService.loggedIn"><button class="btn btn-light buttonicon message" routerLink="messages" href="#" type="button">Messages</button></li> -->
<li *ngIf="!authService.loggedIn"><button type="button" (click)="modalService.open('login',true)" class="btn btn-light buttonicon login">Anmelden | Registrieren</button></li>
<div ngbDropdown class="dropdown" *ngIf="authService.loggedIn">
<button ngbDropdownToggle class="btn btn-light buttonicon profile" type="button" id="profilMenuButton">{{authService.currentUser.username}}</button>
<li *ngIf="!authService.loggedIn">
<button type="button" (click)="modalService.open('login',true)" class="btn btn-light buttonicon login">
Anmelden | Registrieren
</button>
</li>
<div ngbDropdown class="dropdown" *ngIf="authService.loggedIn">
<button ngbDropdownToggle class="btn btn-light buttonicon profile" type="button"
id="profilMenuButton">{{authService.currentUser.username}}</button>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="profilMenuButton">
<!-- <a class="dropdown-item" href="#" routerLink="userprofile">Mein Profil</a> -->
<!-- <a class="dropdown-item" href="#" routerLink="messages">Nachrichten</a> -->
<a class="dropdown-item" (click)="logout()">Logout</a>
<!-- <a class="dropdown-item" href="#" routerlink="">Abmelden</a>-->
</div>
</div>
<li *ngIf="authService.loggedIn"><button type="button" (click)="modalService.openLg('AddSomethingComponent',true)" class="btn btn-light buttonicon add_entry">Etwas Eintragen!</button></li>
<!--<li *ngIf="!authService.loggedIn" class="nav-item"><a class="nav-link" routerLink="login" href="#">Login</a></li>
<li *ngIf="authService.loggedIn" class="nav-item"><a class="nav-link" routerLink="userprofile" href="#">Profil ({{authService.currentUser.username}})</a></li>
<li *ngIf="authService.loggedIn" class="nav-item"><a class="nav-link" routerLink="createEntry" href="#">Eintragen</a></li>-->
<li *ngIf="authService.loggedIn">
<button type="button" (click)="modalService.openLg('AddSomethingComponent',true)"
class="btn btn-light buttonicon add_entry">Etwas Eintragen!</button>
</li>
</ul>
</div>
</nav>
</nav>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment