Commit 0b430617 authored by TheRealAsj's avatar TheRealAsj

Datenexport Seite hinzugefügt

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: [
......
This diff is collapsed.
<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();
}
}
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