Open Meal Information : Widget

This is a Javascript widget that makes it easy to show the menu for any distributor on a HTML page.

Basics

The widget consists of two HTML tags - one div and one script. It calls the Open Meal API to get the menu from a distributor and displays it in a table. It can be configured in several ways (se Configuration below) and it is possible to include several widgets showing the menu for different distributors on one page.

Example:

<div id="openMealWidget" class="openMealWidget" data-openmealurl="https://skolmaten.se/api/openmeal/v2/meals.json?distributorID=5323089923538944"></div>
<script src="https://orebrokommun.github.io/Open-Meal-Information/js/widget.js" id="openMealWidgetScript" data-widgets="openMealWidget"></script>

The code above results in this table:

Wizard

With the following wizard you can get the HTML tags needed to be included on your site to show the menu for a specific distributor.

Include this in your HTML where you want to show the menu:

This wizard is built on the Open Meal API, just as the wiget itself is. Unfourtunatly we are having some problems with Mashies implementation of the Open Meal API at the moment, which we are working on.

Configuration

The wizard above produces the bare minimum code needed to display the menu widget. It is possible to add several different attributes to the div tag...

id - the id of the div, must be listed in the data-widgets comma separated list of the script tag so that the widgets javascript can find this div
data-ical - true/false (defaults to false if not included), if the widget should include a button with a link to the menus iCalendar feed
data-language - en/sv (defaults to en), the language to be used in the table headers
data-days - integer (defaults to 5), the number of days to show the menu for. Note that the maximum is the number of days returned for that distributors menu.
data-openmealurl - the URL to the Open Meal API for the distributor in question. The easiest way to find this is using the wizard above.

The script tag also have some attributes...

id - the id of the script tag must be set to openMealWidgetScript for the widgets javascript to be able to find it.
data-widgets - a comma separated list of the id's of the widget divs on the page

Example: Two widgets on the same page

<div id="openMealWidget1" class="openMealWidget" data-language="en" data-openmealurl="http://meny.dinskolmat.se/api/openmeal/v2/meals.json?distributorID=5419206728220672"></div>

<div id="openMealWidget2" class="openMealWidget" data-ical="true" data-days="3" data-language="sv" data-openmealurl="http://meny.dinskolmat.se/api/openmeal/v2/meals.json?distributorID=5323089923538944"></div>

<script src="https://orebrokommun.github.io/Open-Meal-Information/js/widget.js" id="openMealWidgetScript" data-widgets="openMealWidget1, openMealWidget2"></script>

Style

The styling of the widget is based on Bootstrap classes, but it is easy to style even if you are not using Bootstrap. The widget is just a table within a div with the class openMealWidget and can be styled in any way needed using CSS.

License and customization

This widget and it's code is available under Creative Commons Zero license and has no guarantees. Use it, copy it and customize it as needed.

The widgets code is available here.