Skip to content

AngularJS configurable module to set up an appointment on a calendar. It can be used to make a reservation in a restaurant, clinic, barber shop, or any kind of service provided in time slots

License

Notifications You must be signed in to change notification settings

hmartos/angular-reservation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a4b143f · Mar 15, 2021

History

78 Commits
Aug 20, 2017
Mar 15, 2021
Mar 15, 2021
Nov 12, 2017
Aug 20, 2017
Mar 15, 2021
Sep 15, 2017
Nov 12, 2017
Sep 9, 2017
Mar 13, 2016
Mar 15, 2021
Sep 23, 2017
Mar 27, 2016
Aug 20, 2017
Mar 15, 2021
Mar 15, 2021

Repository files navigation

angular-reservation

Build Status

AngularJS configurable module to set up an appointment on a calendar. It can be used to make a reservation in a restaurant, clinic, barber shop, or any kind of service provided in time slots.

Requirements

How to use it in your existing project

Install module with bower

Execute bower install --save angular-reservation

Load scripts

Load AngularJS, dependencies script files and the script file angular-reservation.min.js in your index.html.

<!-- Angular reservation dependencies -->
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<!-- Angular reservation minified -->
<script type="text/javascript" src="bower_components/angular-reservation/dist/angular-reservation.min.js"></script>

Load styles

Load bootstrap css and angular-reservation.min.css in your index.html.

<!-- Compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="components/bootstrap/bootstrap.min.css">
<!-- Angular reservation minified css -->
<link rel="stylesheet" href="bower_components/angular-reservation/dist/angular-reservation.min.css">

Add module dependency

Add 'hm.reservation' to the list of module dependencies.

angular.module('myApp', [
    'hm.reservation'
])

HTML Markup

Add angular-reservation directive in an html page.

<!-- angular-reservation directive -->
<reservation></reservation>

Setup

Configure module.

//Minimal configuration of reservation module
angular.module('myApp').config(function (reservationConfigProvider) {
    var config = {
        getAvailableHoursAPIUrl: "http://API-URL/availableHours", //API url endpoint to load list of available hours
        reserveAPIUrl: "http://API-URL/reserve", //API url endpoint to do a reserve
    };

    reservationConfigProvider.set(config);
});

You can also extend the module configuration from a controller

<!-- angular-reservation directive -->
<reservation config="myCtrl.config"></reservation>

Build

When there is any change on the sources of this module, you should build the module again to generate dist folder with minified files. To build the module just use the following command:

gulp build

There is also a watch task to watch for any change on sources files and automatically generate dist files. Just use the following command:

gulp watch

Running tests

angular-reservation has in`tegration tests that allows developer to check if new features breaks functionality. You can run tests on a single run or watch for source code to change and execute tests each time source code changes.

Single run test

Execute npm run test-single-run

Watch for source code and execute tests each time source code changes

Execute npm run test

About

AngularJS configurable module to set up an appointment on a calendar. It can be used to make a reservation in a restaurant, clinic, barber shop, or any kind of service provided in time slots

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published