Download json file of saved positions

[vanithaak]

Fixes #998 (<=== Add issue number here)

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• PR is descriptively titled 📑 and links the original issue above 🔗
• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with grunt test
• code is in uniquely-named feature branch and has no merge conflicts 📁
• screenshots/GIFs are attached 📎 in case of UI updates
• @mention the original creator of the issue in a comment below for help or for a review

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

GIF

MapKnitter.Lite.-.Google.Chrome.2022-10-26.01-34-40.1.mp4

Screenshot

[gitpod-io]

[vanithaak]

@jywarren, please review my pr! For now I'm trying to make the downloaded file more readable.

[vanithaak]

hi @jywarren , I was trying to make the JSON pretty, with JSON.stringify( obj, undefined, "\t")(Also, tried null instead of undefined). Usually this works but it's not showing any tabs in downloaded file, rather it's showing "\t" . Is their anything else I can try?

[jywarren]

Per our conversation, after generateExportJson() is changed, we can just do this!

Suggested change

	var obj = localStorage.getItem('locations');
	var obj = generateExportJson(true);

[jywarren]

OK, resuming here, we want to add a default generateExportJson(allImages = false) { parameter, and a conditional (referencing this conversation: #1161 (comment)):

     if (allImages || this.isCollected(layer)) {

Leaflet.DistortableImage/src/DistortableCollection.js

Lines 192 to 197 in c80a7c6

	generateExportJson() {
	const json = {};
	json.images = [];
	this.eachLayer(function(layer) {
	if (this.isCollected(layer)) {

[jywarren]

From here down is what you want. Let's just connect it to a button! And we can probably skip the prettyJson below - could do it later with a library!

[jywarren]

Referencing this function could work like:

document.getElementById('export').onclick = function() { map.imgGroup.generateExportJson(true); }

[7malikk]

Hello @jywarren, I've been able to integrate the downloadJSON trigger in the Export Images button
Kindly review and let me know what you think.

UI Changes

[jywarren]

Exciting to see this function get completed!!

[7malikk]

Hello @jywarren, per our discussion here are the changes
Let me know what you think, thank you!

UI Changes

[jywarren]

This looks super. Great work!!