Add mime type, rename to DownloadPanel

This commit is contained in:
Pieter Vander Vennet 2021-07-26 21:03:27 +02:00
parent 13b2c1b572
commit c44db2a219
2 changed files with 17 additions and 15 deletions

View file

@ -10,41 +10,43 @@ import {GeoOperations} from "../../Logic/GeoOperations";
import Toggle from "../Input/Toggle"; import Toggle from "../Input/Toggle";
import Title from "../Base/Title"; import Title from "../Base/Title";
export class ExportDataButton extends Toggle { export class DownloadPanel extends Toggle {
constructor() { constructor() {
const t = Translations.t.general.download const t = Translations.t.general.download
const somethingLoaded = State.state.featurePipeline.features.map(features => features.length > 0); const somethingLoaded = State.state.featurePipeline.features.map(features => features.length > 0);
const includeMetaToggle = new CheckBoxes([t.includeMetaData.Clone()]) const includeMetaToggle = new CheckBoxes([t.includeMetaData.Clone()])
const metaisIncluded = includeMetaToggle.GetValue().map(selected => selected.length > 0) const metaisIncluded = includeMetaToggle.GetValue().map(selected => selected.length > 0)
const buttonGeoJson = new SubtleButton(Svg.floppy_ui(), const buttonGeoJson = new SubtleButton(Svg.floppy_ui(),
new Combine([t.downloadGeojson.Clone().SetClass("font-bold"), new Combine([t.downloadGeojson.Clone().SetClass("font-bold"),
t.downloadGeoJsonHelper.Clone()]).SetClass("flex flex-col")) t.downloadGeoJsonHelper.Clone()]).SetClass("flex flex-col"))
.onClick(() => { .onClick(() => {
const geojson = FeatureSourceUtils.extractGeoJson(State.state.featurePipeline, {metadata: metaisIncluded.data}) const geojson = FeatureSourceUtils.extractGeoJson(State.state.featurePipeline, {metadata: metaisIncluded.data})
const name = State.state.layoutToUse.data.id; const name = State.state.layoutToUse.data.id;
Utils.offerContentsAsDownloadableFile(JSON.stringify(geojson), Utils.offerContentsAsDownloadableFile(JSON.stringify(geojson),
`MapComplete_${name}_export_${new Date().toISOString().substr(0,19)}.geojson`); `MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.geojson`, {
mimetype: "application/vnd.geo+json"
});
}) })
const buttonCSV = new SubtleButton(Svg.floppy_ui(), new Combine( const buttonCSV = new SubtleButton(Svg.floppy_ui(), new Combine(
[t.downloadCSV.Clone().SetClass("font-bold"), [t.downloadCSV.Clone().SetClass("font-bold"),
t.downloadCSVHelper.Clone()]).SetClass("flex flex-col")) t.downloadCSVHelper.Clone()]).SetClass("flex flex-col"))
.onClick(() => { .onClick(() => {
const geojson = FeatureSourceUtils.extractGeoJson(State.state.featurePipeline, {metadata: metaisIncluded.data}) const geojson = FeatureSourceUtils.extractGeoJson(State.state.featurePipeline, {metadata: metaisIncluded.data})
const csv = GeoOperations.toCSV(geojson.features) const csv = GeoOperations.toCSV(geojson.features)
Utils.offerContentsAsDownloadableFile(csv, Utils.offerContentsAsDownloadableFile(csv,
`MapComplete_${name}_export_${new Date().toISOString().substr(0,19)}.csv`,{ `MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.csv`, {
mimetype:"text/csv" mimetype: "text/csv"
}); });
}) })
const downloadButtons = new Combine( const downloadButtons = new Combine(
[new Title(t.title), buttonGeoJson, buttonCSV, includeMetaToggle, t.licenseInfo.Clone().SetClass("link-underline")]) [new Title(t.title), buttonGeoJson, buttonCSV, includeMetaToggle, t.licenseInfo.Clone().SetClass("link-underline")])
.SetClass("w-full flex flex-col border-4 border-gray-300 rounded-3xl p-4") .SetClass("w-full flex flex-col border-4 border-gray-300 rounded-3xl p-4")
super( super(
downloadButtons, downloadButtons,
t.noDataLoaded.Clone(), t.noDataLoaded.Clone(),

View file

@ -7,7 +7,7 @@ import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource"; import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement"; import BaseUIElement from "../BaseUIElement";
import Toggle from "../Input/Toggle"; import Toggle from "../Input/Toggle";
import {ExportDataButton} from "./ExportDataButton"; import {DownloadPanel} from "./DownloadPanel";
export default class LayerControlPanel extends ScrollableFullScreen { export default class LayerControlPanel extends ScrollableFullScreen {
@ -37,7 +37,7 @@ export default class LayerControlPanel extends ScrollableFullScreen {
)) ))
elements.push(new Toggle( elements.push(new Toggle(
new ExportDataButton(), new DownloadPanel(),
undefined, undefined,
State.state.featureSwitchEnableExport State.state.featureSwitchEnableExport
)) ))