Add download button to import helper

UI/ImportFlow/ConfirmProcess.ts

@@ -5,13 +5,17 @@ import Link from "../Base/Link";
 import {FixedUiElement} from "../Base/FixedUiElement";
 import CheckBoxes from "../Input/Checkboxes";
 import Title from "../Base/Title";
+import {SubtleButton} from "../Base/SubtleButton";
+import Svg from "../../Svg";
+import {Utils} from "../../Utils";
+import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
 
-export class ConfirmProcess<T> extends Combine implements FlowStep<T> {
+export class ConfirmProcess extends Combine implements FlowStep<{ features: any[], layer: LayerConfig }> {
 
     public IsValid: UIEventSource<boolean>
-    public Value: UIEventSource<T>
+    public Value: UIEventSource<{ features: any[], layer: LayerConfig }>
 
-    constructor(v: T) {
+    constructor(v: { features: any[], layer: LayerConfig }) {
 
         const toConfirm = [
             new Combine(["I have read the ", new Link("import guidelines on the OSM wiki", "https://wiki.openstreetmap.org/wiki/Import_guidelines", true)]),
@@ -23,10 +27,21 @@ export class ConfirmProcess<T> extends Combine implements FlowStep<T> {
         const licenseClear = new CheckBoxes(toConfirm)
         super([
             new Title("Did you go through the import process?"),
-            licenseClear
+            licenseClear,
+            new FixedUiElement("Alternatively, you can download the dataset to import directly"),
+            new SubtleButton(Svg.download_svg(), "Download geojson").OnClickWithLoading("Preparing your download", 
+                async ( ) => {
+                const geojson = {
+                    type:"FeatureCollection",
+                    features: v.features
+                }
+                Utils.offerContentsAsDownloadableFile(JSON.stringify(geojson), "prepared_import_"+v.layer.id+".geojson",{
+                    mimetype: "application/vnd.geo+json"
+                })
+            })
         ]);
         this.SetClass("link-underline")
         this.IsValid = licenseClear.GetValue().map(selected => toConfirm.length == selected.length)
-        this.Value = new UIEventSource<T>(v)
+        this.Value = new UIEventSource<{ features: any[], layer: LayerConfig }>(v)
     }
 }

Utils.ts

@@ -646,7 +646,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
      * Triggers a 'download file' popup which will download the contents
      */
     public static offerContentsAsDownloadableFile(contents: string | Blob, fileName: string = "download.txt",
-                                                  options?: { mimetype: string }) {
+                                                  options?: { mimetype: string | "text/plain" | "text/csv" | "application/vnd.geo+json" | "{gpx=application/gpx+xml}"}) {
         const element = document.createElement("a");
         let file;
         if (typeof (contents) === "string") {

package.json

@@ -42,7 +42,8 @@
     "prepare-deploy": "./scripts/build.sh",
     "gittag": "ts-node scripts/printVersion.ts | bash",
     "lint": "tslint --project . -c tslint.json '**.ts' ",
-    "clean": "rm -rf .cache/ && (find . -type f -name \"*.doctest.ts\" | xargs rm) && (find *.html | grep -v \"\\(404\\|index\\|land\\|test\\|preferences\\|customGenerator\\|professional\\|automaton\\|import_helper\\|import_viewer\\|theme\\).html\" | xargs rm) && (ls | grep \"^index_[a-zA-Z_]\\+\\.ts$\" | xargs rm) && (ls | grep \".*.webmanifest$\" | xargs rm)",
+    "clean:tests": "(find . -type f -name \"*.doctest.ts\" | xargs rm)",
+    "clean": "rm -rf .cache/ && (find *.html | grep -v \"\\(404\\|index\\|land\\|test\\|preferences\\|customGenerator\\|professional\\|automaton\\|import_helper\\|import_viewer\\|theme\\).html\" | xargs rm) && (ls | grep \"^index_[a-zA-Z_]\\+\\.ts$\" | xargs rm) && (ls | grep \".*.webmanifest$\" | xargs rm)",
     "generate:dependency-graph": "node_modules/.bin/depcruise --exclude \"^node_modules\" --output-type dot Logic/State/MapState.ts > dependencies.dot && dot dependencies.dot -T svg -o dependencies.svg && rm dependencies.dot",
     "script": "ts-node"
   },