added a save button to export JSON saved state of images

[leilayesufu]

Fixes #1139

i created a button in the archive.html, then i used font awesome to add a save icon in it and added it to the sidebar, then i created an array to push every image in, i then put added all the image to a collection then i ran the generateExportJson() on the collection

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!

[gitpod-io[bot]]

[leilayesufu]

@jywarren Kindly review and leave corrections, thank you

[leilayesufu]

@jywarren Hope you’re having a great day, I have made the corrections and it all made sense to me, I do believe that this PR is on the right path and if it doesn’t work, it’s minor errors we can fix! Thank youuu

[jywarren]

This looks great! Thank you for all the changes. Are you able to test it out and upload a video? I'm trying to right now but my connection isn't very good.

[jywarren]

To test it, I navigate to /examples/archive.html from the root URL it's already at.

[leilayesufu]

Thank youu

[jywarren]

Just repeating here:

OK, so what I found was that, for some reason, this doesn't work... the images array is empty. But! I also found that we actually already have an distortableImageCollection in this page -- on line 96!

So on this line, we can do:

      alert(JSON.stringify(map.imgGroup.generateExportJson())); // we'll do something better than alert in the next PR

And we can also remove the lines on 76 and 77, since we are just going to use the Collection that's already defined in the page. What do you think?

[jywarren]

Hmm. I can't seem to get this to work... it did work for a moment, but I'm not sure what I had changed.

Aha! Since there's a check on line 197:

https://github.com/publiclab/Leaflet.DistortableImage/blob/c80a7c69904694bdd50ca0f9e6e358abbdfb98af/src/DistortableCollection.js#L192-L197

...for whether the images have been selected, we actually have to go through and select the images. Hmm, how do we do that?

[jywarren]

Can we just add the "selected" class? We need to research how this is supposed to be done.

On Wed, Oct 19, 2022, 10:07 AM Leila Yesufu @.***> wrote:

Thank youu

— Reply to this email directly, view it on GitHub https://github.com/publiclab/Leaflet.DistortableImage/pull/1161#issuecomment-1284076861, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAF6J45BR66SJJA3S4UNODWD76A7ANCNFSM6AAAAAARFT547Y . You are receiving this because you were mentioned.Message ID: @.***>

[leilayesufu]

Hii @jywarren I’m sorry I haven’t been active the past day I don’t think we should use the collection that’s already defined on the page in our click listener cause we have to addlayer(image) on it

[leilayesufu]

Also about the line 197 I found that the is a function So I just thought how about we just pass that function into the generateExportJson function

[jywarren]

So I just thought how about we just pass that function into the generateExportJson function

Hi @leilayesufu i wonder... what if we make a parameter for generateExportJson() that is something like onlySelected and we only filter for isCollected if that is true, and we default it to true? That way we can use generateExportJson for this use case too, but just set onlySelected to false so we just get everything. What do you think?

[leilayesufu]

Hii @jywarren I was wondering how you were cause I hadn’t heard a review from you a while but I figured you were probably busy with other pull requests I’d get working on your suggestions and update you

[jywarren]

Thank you! Yes i had some big work commitments the past week but am catching up now!

[jywarren]

Just noting that I've linked here from https://github.com/publiclab/Leaflet.DistortableImage/pull/1225#discussion_r1032810521 where there was a parallel effort also requiring this modified generateExportJson(isCollected = true)

[jywarren]

Solved in https://github.com/publiclab/Leaflet.DistortableImage/pull/1237, thank you!!!