mc-menu-widget

How to install:

Using npm

This is the recommended way. To install, just do this:

npm i --save @menucloud/mc-menu-widget

Out of the box, what can I do?

Just add the dependency here and usage here:

<script src="node_modules/@menucloud/mc-menu-widget/dist/mc-menu-widget.js"></script>

<mc-menu-widget
  secret="secret-key"
  key="api-key"></mc-menu-widget>

The parameters:

• secret: secret key
• key: api key

Todo: Because this is a test, It needs to define more parameters (like booking-type or menu-id).

How to build (for developing)

Out of the box, what do I see

- demo - for manual testing and demo purposes
  - index.html - a demo on how to use the file
  - published.json - created using the command `npm run create-simulation`. This simulates the JSON response of the menucloud API
- dist - distribution purposes when installed on npm
  - vendor - this is for demo purposes only, polyfills folder to make it work on IE11, Safari 9, and 10, Edge and Firefox
  - mc-menu-widget.html - when you want to use `<link rel="import">`
  - mc-menu-widget.js - the bundled version
- simulation - folder that houses the necessary templates and styles to be transformed into the published.json.
  - components - houses all component templates that can be modified
  - data - houses the data component of the simulated json
    - menu.json - mimics a collection of menus to be loaded to the menu widget
  - style - houses all styles in (currently) scss format
    - components - all component styles that can be modifed
    - menu.scss - example definition the global default style of all menus
    - child-theme.scss - example definition of a child theme
    - theme.json - links menu.scss and child-theme.scss to the global theme and a specifc menu theme respectively.
  - index.js - simulation compiler. Run when `npm run create-simulation` is called
- src - contains all code for the widget to work
  - components - all component logic
  - mixins - contains reusable methods as extensions for the components
    - mc-menu - contains the methods for getting and updating the mc-menu-widget state
  - styles - contains the default style of the mc-menu-widget
  - utils - extra libraries the needed by the widget
- mc-menu-widget.js - main source file
- webpack.config.js - bundler

Install dependencies...

npm i

Once the dependencies have be installed, You need to run 3 terminals (for now) to bundle/watch, serve it on localhost, and update the published.json.

1st terminal would bundle/watch the project

npm run watch

2nd terminal would run the http-server on root project

http-server .

And then you can go to localhost:8080/demo to see a working widget

If you made changes inside the simulation folder, you need to run

npm run create-simulation

Menu widget Attributes

• no-fixed-price - Boolean, if set to true, the fixed price won't show up
• key - String, is the key assigned to the client
• secret - String, the secret string to access the server
• business-id - String, client business id
• published-id - String, the id of the published menus
• menus - Array, an array of menus ids that will show up inside the widget
• dev - Boolean, if true the widget will fetch data from the dev server
• local - Boolean, if true, the widget will fetch data from the local server
• test - Boolean, if true the widget will use the simulation files
• menuid - String, the id of the menu that needs to be printed
• print - Boolean, if true, it will fetch the menu specified in the menuid attribute in order to print it
• print-local - Boolean, if true will fetch the menu specified in the menuid attribute in order to print it from the local server

Todo

• Use some form of watching mechanism to change published.json when there are changes in simulation folder
  • can use gulp but don't use flatten the node_modules.
• If it is possible, transform this to using rollup instead of webpack