Add ability to import items into food list from JSON

[user234683]

See #388 (comment)

Import happens from the import/export section of settings. It expects JSON with the following format:

{
    "version": 1,
    "foodList": [
        {
            "brand": "DeNeve Flex Bar Dinner",
            "name": "Grilled Tri-color Carrots w/ Peruvian Salsa Verde",
            "nutrition": {
                "calcium": 26.0,
                "calories": 57.0,
                "carbohydrates": "4.8",
                "cholesterol": "0.2",
                "fat": "4.2",
                "fiber": "1.8",
                "iron": 0.54,
                "proteins": "0.5",
                "saturated-fat": "0.4",
                "sodium": "256.8",
                "sugars": "2.6",
                "trans-fat": "0",
                "vitamin-a": 2196.0,
                "vitamin-c": 5.3999999999999995
            },
            "portion": 2.0,
            "uniqueId": "177068",
            "unit": "oz"
        },
        {
            "brand": "DeNeve Flex Bar Dinner",
            "name": "Grilled Yellow Squash",
            "nutrition": {
                "calcium": 39.0,
                "calories": 26.0,
                "carbohydrates": "3.6",
                "cholesterol": "1.5",
                "fat": "1",
                "fiber": "1.3",
                "iron": 0.72,
                "proteins": "1.7",
                "saturated-fat": "0.5",
                "sodium": "99.2",
                "sugars": "2",
                "trans-fat": "0",
                "vitamin-a": 207.0,
                "vitamin-c": 12.600000000000001
            },
            "portion": 2.0,
            "uniqueId": "175110",
            "unit": "oz"
        }
    ]
}

This example is pulled from the script I wrote to scrape the UCLA dining hall menus here. The nutrient names and units are those that waistline uses internally, which are found here.

The version field is there to allow for future changes to the expected import format, because ideally there would also be an export feature that exports to a certain format, to allow backing up the food items.

Notice the uniqueId field in each food item. This is highly recommended to be included in these JSON files because it will prevent duplicate items if the same food items are imported more than once. To accomplish this, the script will take this unique id and prepend "custom_" in front of it (so there will be no collisions with real product bar codes), and use that as the item's barcode.

When importing items, you can select a category to be applied to each item. So in this example, to keep these imported dining hall food items separate from my own entries, I created the category "UCLA" and applied that when importing them.

If the same food item(s) are imported twice (based on the uniqueId), they will be overwritten with the data from the latest import. So for example, if you forget to include a category when importing, or some piece of data is incorrect in your JSON, you can import again to fix it.

Screenshots

Testing

Since file import isn't working when running from the browser, I used the following shim to test it:

let file = {
    data: new TextEncoder("utf-8").encode(`multi-line JSON here`)
}

Limitations

I couldn't figure out a good way to incorporate the category selection into the UI in a clear way, since I am very unfamiliar with the UI framework. I'm not sure of the idiomatic way to style the category selection for this code base, so it's pretty faint and hard to see this aspect of the feature. I tried putting it into modal dialog box upon clicking the import button, but was not successful. Open to ideas and help.

Importing 40 items from the menus works fine and appears manageable. As a strategy for using custom databases, I'm not sure how well it will work with thousands of foods such as from government databases. Hopefully someone will eventually make a pull request to allow importing custom databases and search from them so we don't have to pollute our food list with entries we don't use.

[davidhealey]

Hey this looks good. I'll need to take some time to do a proper review.

Hopefully someone will eventually make a pull request to allow importing custom databases and search from them so we don't have to pollute our food list with entries we don't use.

Maybe we could add an option so that imported foods are hidden by default, but show in search results and once "added" from a search result they are unhidden in the food list.

[EmilJunker]

This looks good to me. I would like to propose some minor changes, but I can't push to this branch because I'm not a maintainer. So I forked my own branch and pushed the changes there, see the commits in https://github.com/davidhealey/waistline/pull/529/commits.

Maybe we could add an option so that imported foods are hidden by default, but show in search results and once "added" from a search result they are unhidden in the food list.

Great idea! I also implemented that, see the latest commit in my forked branch.

[davidhealey]

@EmilJunker If I merge this pull request and then you can make a pull request from your fork with the additional changes, does that work for you?

[EmilJunker]

Sure, that'll work 👍