MMM-MealViewer

kazanjig

.@cowboysdude was exceptionally helpful last night.
thumbs up

sdetweil

Behave boys! Lol

cowboysdude

@sdetweil said in MMM-MealViewer:

Behave boys! Lol

@sdetweil said in MMM-MealViewer:

Behave boys! Lol

We try VERY hard LOL

kazanjig

But now I seem to have gotten myself into a pickle. I tried expanding the functionality to add a date range and multiple schools and, of course, I broke it. It’s doing the same thing as before where the ‘cafeteriaLineList’ property is stripped out of the helper results…

EDIT:
LOL, it’s the weekend and I had it pulling just for today, Sunday. Of course there’s no data. Dumb da dumb dumb…

cowboysdude

@kazanjig said in MMM-MealViewer:

cafeteriaLineList

Probably not stripped out just buried like many of the other things were LOL If you don’t get it we can look at it later if you want.

sdetweil

@cowboysdude you did convert the XML to json, right?

cowboysdude

@sdetweil Yes I did … it’s all coming back as json but it has a TON of data…

kazanjig

MAJOR EDIT, MAJOR DUMMIE: helps if you append the rows to the table… Success! Now for some CSS.

@cowboysdude I edited my earlier post… minor detail about it being the weekend and not being able to pull lunch data for a day with no school. Now just having getting the data to show up in the table…

It will display the “loading” message, but then it’s blank when this.loaded = true. I outputted the innerHTML values to console and they’re all there. Not sure why they won’t show up in the DOM.

  getDom: function() {
    // Set up the local wrapper
    var wrapper = null;

    // If we have some data to display then build the results table
    if (this.loaded) {
      wrapper = document.createElement("table");

      // Iterate through the schools
      for (var i = 0; i < this.results.length; i++) {

        // Set up header row with the school name
        schoolRow = document.createElement("tr");

        schoolName = document.createElement("td");
        schoolName.innerHTML = this.results[i].physicalLocation.name;

        schoolRow.appendChild(schoolName);

        // Iterate through the cafeteria lines for the school
        for (var j = 0; j < this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data.length; j++) {

          // Set up header row with the cafeteria line name
          cafeteriaLineRow = document.createElement("tr");

          cafeteriaLineName = document.createElement("td");
          cafeteriaLineName.innerHTML = this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].name;

          cafeteriaLineRow.appendChild(cafeteriaLineName);

          // Iterate through the menu items for the cafeteria line
          for (var k = 0; k < this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].foodItemList.data.length; k++) {

            foodItemRow = document.createElement("tr");

            foodItemType = document.createElement("td");
            foodItemType.innerHTML = this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].foodItemList.data[k].item_Type;

            foodItemName = document.createElement("td");
            foodItemName.innerHTML = this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].foodItemList.data[k].item_Name;

            foodItemRow.appendChild(foodItemType);
            foodItemRow.appendChild(foodItemName);
          }
        }
      }
    }

    else {
      // Otherwise lets just use a simple div
      wrapper = document.createElement('div');
      wrapper.innerHTML = 'Loading menu data...';
    }

    return wrapper;
  },

kazanjig

So I now get the following table:

Elementary Lunch
Entree “Bold” Cheese Pizza
Entree “Bold” Pepperoni Pizza
Vegetable Parmesan Butternut Gratin
Vegetable Seasoned Green Beans
Elementary Alternative
Entree Chef Salad
Entree Bologna & Cheese Sandwich

The foodItemType in the first column and the foodItemName in the second column are siblings in the data array.

I’d like turn the first occurrence of foodItemType into a category so the table looks like this (ignore the spacing hyphens):

Elementary Lunch
Entree “Bold” Cheese Pizza
--------------“Bold” Pepperoni Pizza
Vegetable Parmesan Butternut Gratin
-------------------Seasoned Green Beans
Elementary Alternative
Entree Chef Salad
-------------Bologna & Cheese Sandwich

Here’s the current loop that creates the table. Any help would be appreciated.

        // Iterate through the cafeteria lines for the school
        for (var j = 0; j < this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data.length; j++) {

          if (this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].name !== 'Elmwood Vegetarian Hot Entree') {

            // Set up header row with the cafeteria line name
            cafeteriaLineRow = document.createElement("tr");

            cafeteriaLineName = document.createElement("td");
            cafeteriaLineName.innerHTML = this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].name.replace("Elmwood Elementary", "Elementary Lunch").replace("Elmwood Alternative", "Elementary Alternative");
            cafeteriaLineRow.appendChild(cafeteriaLineName);
            wrapper.appendChild(cafeteriaLineRow);

            // Iterate through the menu items for the cafeteria line
            for (var k = 0; k < this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].foodItemList.data.length; k++) {

              if (this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].foodItemList.data[k].item_Name !== 'Choice Of:') {

                foodItemTypeRow = documen t.createElement("tr");

                foodItemType = document.createElement("td");
                foodItemType.innerHTML = this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].foodItemList.data[k].item_Type;

                foodItemName = document.createElement("td");
                foodItemName.innerHTML = this.results[i].menuSchedules[0].menuBlocks[0].cafeteriaLineList.data[j].foodItemList.data[k].item_Name;

                foodItemTypeRow.appendChild(foodItemType);
                wrapper.appendChild(foodItemTypeRow);
                foodItemTypeRow.appendChild(foodItemName);
                wrapper.appendChild(foodItemTypeRow);
              }
            }
          }
        }

gonzonia

@kazanjig I know this post is old, but I’m trying to accomplish this in a different way. I was trying to do it with PHP instead and the XML coming back from the Mealviewer API isn’t recognized but when I load it directly in my browser all looks good. Would you be willing to share all the code you’re using to load this? I’m not as familiar with how the MM code works and how you’re plugging this into the whole thing. My implementation is just a shared home calendar view that I rolled myself (I may have to look into implementing MM though now that I’ve stumbled upon all this).

cowboysdude

@gonzonia PHP won’t work in this software. If he doesn’t answer you I will be happy to help you get this going…

gonzonia

@cowboysdude Thanks. I’m happy to use a JS implementation as well. The family calendar I created is just hitting a wordpress site I’m hosting on a mac mini. PHP was just so that it could load pre-render but the main thing is just to get the meal list populated on the calendar screen instead of having a separate tab open in the browser. I haven’t had a lot of time to try to look into this or switching to MM. I hate to be hijacking a MM thread but this is literally the only discussion I’ve found of anyone accessing the MealViewer data like this.

gonzonia

This post is deleted!

gonzonia

This post is deleted!

gonzonia

Okay. I’ve decided to build a MagicMirror to replace my homegrown and now I’m trying to implement this module. I’ve downloaded the repository for this from GitHub and ran npm install.
I’ve added some config info to set the school and position. It’s showing breakfast and “Tomorrow’s Undefined”. I’d like it to show lunch. Help?

sdetweil

Open the developers window, ctrl-shift-i on the keyboard. Select the console tab and scroll up to see any errors. Usually red text

gonzonia

@sdetweil Thank you. That’s helpful (I’m still learning the ins and outs of Magic Mirror) but there’s no errors. The “Undefined” is coming up while it’s loading the data. There’s no documentation for the module, I’m thinking there’s something that’s missing in the setup.

sdetweil

@gonzonia can u should your config info?

looking at the code, these are the options that are configurable

  defaults: {
    schools: [],
    maxWidth: "300px",
    updateInterval: 5 * 60 * 1000,
    interval: 1000 * 60 * 15,
  }

where schools is an array of names
[ ‘school1’,school2’, ‘school3’]

used to call the api

https://api.mealviewer.com/api/v4/school/’ + this.config.schools[i]

school names can be found here
https://schools.mealviewer.com/

comment says only for one day
// Currently set to only pull one day’s data so endDayFormatted = todayFormatted

gonzonia

@sdetweil
Thanks. I actually went in to the code and tweaked it. It was pulling the data fine, I think the issue was that the original developer’s usage only had a single meal (Lunch) available at the school and so it worked as is. Our school has Breakfast and Lunch I added an additional iteration to show all the meals or just what was placed in the config. The header now also reflects that. I’m not sure what that was supposed to do before because I couldn’t figure out where it was expecting the data.header to come from since nothing was loaded.

My changes can be found here.

https://github.com/gonzonia/MMM-MealViewer/tree/patch-1
added shortName to config to replace text based on config option instead of hardcoded
changed className to menuWrapper to allow for style control without interfering with other modules
added config option for showing single or multiple meals based on name, default is All

Still need to add some documentation but it might be a couple of weeks.