npm package: @menucloudapp/mc-menu-widget
Description: ## How to install:
Latest version: 0.0.61

# 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:

```html
<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