Added angular-bootstrap and removed angular-material (still available…

… on angular-reservation-material branch). Changed module name to hm.reservation
hmartos · Mar 27, 2016 · b5ca68b · b5ca68b
1 parent d6db434
commit b5ca68b
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 41 deletions.
diff --git a/dist/angular-reservation.js b/dist/angular-reservation.js
diff --git a/dist/angular-reservation.min.css b/dist/angular-reservation.min.css
diff --git a/dist/angular-reservation.min.js b/dist/angular-reservation.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -14,7 +14,7 @@ var minCssFile = 'angular-reservation.min.css';
 //Generates templates
 gulp.task('templates', function () {
   return gulp.src('src/templates/*.html')
-    .pipe(templateCache(jsFile, {module: 'angular.reservation'}))
+    .pipe(templateCache(jsFile, {module: 'hm.reservation'}))
     .pipe(gulp.dest(dist));
 });
 
@@ -41,5 +41,10 @@ gulp.task('minify-css', function() {
     .pipe(gulp.dest(dist));
 });
 
+//Configure watch to execute build task on source changes
+gulp.task('watch', function() {
+    gulp.watch('src/**', ['build']);
+});
+
 gulp.task('default', ['concat-js', 'concat-uglify-js', 'minify-css']);
 gulp.task('build', ['default']);
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,20 +1,7 @@
-/* TABS */
-.tabs md-content {
-	background-color: transparent !important;
-}
+/*UI Bootstap fix @see https://angular-ui.github.io/bootstrap/#/getting_started */
+.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
 
-.tabs md-content md-tabs {
-	background: #f6f6f6;
-	border: 1px solid #e1e1e1;
-	min-height: 400px;
-	max-height: 500px !important;
-	max-width: 340px;
-}
-
-.tabs md-content md-tabs md-tabs-wrapper {
-	background: white;
-}
-
-.tabs md-content h1:first-child {
-	margin-top: 0;
+.selected {
+    color: #fff !important;
+    background-color: #5cb85c;
 }
diff --git a/src/js/app.js b/src/js/app.js
@@ -4,6 +4,6 @@
  */
 (function() {
 	//Module definition with dependencies
-	angular.module('angular.reservation', ['ngMaterial', 'pascalprecht.translate']);
+	angular.module('hm.reservation', ['ui.bootstrap', 'pascalprecht.translate']);
 
 })();
diff --git a/src/js/config.js b/src/js/config.js
@@ -3,7 +3,7 @@
  * @author hmartos
  */
 (function() {
-    angular.module('angular.reservation').provider('reservationConfig', [reservationConfigProvider]);
+    angular.module('hm.reservation').provider('reservationConfig', [reservationConfigProvider]);
 
     function reservationConfigProvider() {
 

diff --git a/src/js/controller.js b/src/js/controller.js
@@ -4,9 +4,9 @@
  */
 (function () {
     //Controller
-    angular.module('angular.reservation').controller('ReservationCtrl', ['$filter', '$mdDialog', 'reservationAPIFactory', reservationCtrl]);
+    angular.module('hm.reservation').controller('ReservationCtrl', ['$filter', 'reservationAPIFactory', reservationCtrl]);
 
-    function reservationCtrl($filter, $mdDialog, reservationAPIFactory) {
+    function reservationCtrl($filter, reservationAPIFactory) {
         //Capture the this context of the Controller using vm, standing for procedureModel
         var vm = this;
 
@@ -22,6 +22,12 @@
 
         vm.showLoader = false;
 
+        //Calendar options
+        vm.calendarOptions = {
+            minDate: new Date(),
+            showWeeks: false
+        };
+
 
         //METHODS
         vm.onSelectDate = function() {
@@ -38,7 +44,7 @@
         }
 
         vm.showConfirm = function(event) {
-            var confirm = $mdDialog.confirm()
+            /*var confirm = $mdDialog.confirm()
                 .title($filter('translate')('confirmTitle'))
                 .textContent($filter('translate')('confirmText', {name: vm.userData.name, selectedDate: $filter('date')(vm.selectedDate, 'dd/MM/yyyy'), selectedHour:vm.selectedHour}))
                 .ariaLabel($filter('translate')('confirmTitle'))
@@ -53,7 +59,7 @@
             }, function() {
                 //Cancel handler
                 console.log("Reservation cancelled");
-            });
+            });*/
         }
 
 

diff --git a/src/js/directive.js b/src/js/directive.js
@@ -4,7 +4,7 @@
  */
 (function() {
     //Directive
-    angular.module('angular.reservation').directive('reservation', ['$document', '$compile', function($document, $compile) {
+    angular.module('hm.reservation').directive('reservation', [function() {
         return {
             restrict: 'E',
             controller: 'ReservationCtrl',

diff --git a/src/js/factory.js b/src/js/factory.js
@@ -67,5 +67,5 @@
 
         return reservationAPI;
     }
-    angular.module('angular.reservation').factory('reservationAPIFactory', ['$http', 'reservationConfig', reservationAPIFactory]);
+    angular.module('hm.reservation').factory('reservationAPIFactory', ['$http', 'reservationConfig', reservationAPIFactory]);
 })();
diff --git a/src/js/translations.js b/src/js/translations.js
@@ -4,8 +4,11 @@
  */
 (function() {
     "use strict";
-    angular.module('angular.reservation').config(['$translateProvider', function($translateProvider) {
+    angular.module('hm.reservation').config(['$translateProvider', function($translateProvider) {
         $translateProvider.translations('es', {
+            date: "Fecha",
+            time: "Hora",
+            client: "Cliente",
             name: "Nombre",
             save: "Guardar",
             cancel: "Cancelar",
@@ -20,6 +23,9 @@
         });
 
         $translateProvider.translations('en', {
+            date: "Date",
+            time: "Time",
+            client: "Client",
             name: "Name",
             save: "Save",
             cancel: "Cancel",

diff --git a/src/templates/index.html b/src/templates/index.html
@@ -1,3 +1,86 @@
+<div>
+    <uib-tabset active="reservationCtrl.selectedTab" justified="true" style="border: 2px dotted gainsboro">
+        <uib-tab index="0">
+            <uib-tab-heading>
+                <span class="glyphicon glyphicon-calendar" aria-hidden="true" style="font-size: 18px"></span>
+                <h5>{{"date" | translate}}</h5>
+            </uib-tab-heading>
+
+            <uib-datepicker ng-model="reservationCtrl.selectedDate" ng-change="reservationCtrl.onSelectDate()" datepicker-options="reservationCtrl.calendarOptions"></uib-datepicker>
+        </uib-tab>
+
+        <uib-tab index="1">
+            <uib-tab-heading>
+                <span class="glyphicon glyphicon-time" aria-hidden="true" style="font-size: 18px"></span>
+                <h5>{{"time" | translate}}</h5>
+            </uib-tab-heading>
+
+            <div class="list-group">
+                <a class="list-group-item" href="" ng-repeat="item in reservationCtrl.availableHours" ng-click="reservationCtrl.selectHour(item)" ng-class="{'selected': reservationCtrl.selectedHour == item}">
+                    {{item}}
+                </a>
+            </div>
+        </uib-tab>
+
+        <uib-tab index="2">
+            <uib-tab-heading>
+                <span class="glyphicon glyphicon-user" aria-hidden="true" style="font-size: 18px"></span>
+                <h5>{{"client" | translate}}</h5>
+            </uib-tab-heading>
+
+            <form class="form-horizontal" name="reservationCtrl.reserveForm" novalidate>
+                <fieldset>
+                    <div class="form-group col-md-12">
+                        <label class="col-md-4 control-label" for="name">{{"name" | translate}}</label>
+                        <div class="col-md-8">
+                            <div class="input-group">
+                                <span class="input-group-addon">
+                                    <span class="glyphicon glyphicon-user" aria-hidden="true" style="font-size: 14px"></span>
+                                </span>
+                                <input id="name" name="name" class="form-control" placeholder="{{'name' | translate}}" type="text" required>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <div class="form-group col-md-12">
+                        <label class="col-md-4 control-label" for="phone">{{"phone" | translate}}</label>
+                        <div class="col-md-8">
+                            <div class="input-group">
+                                <span class="input-group-addon">
+                                    <span class="glyphicon glyphicon-earphone" aria-hidden="true" style="font-size: 14px"></span>
+                                </span>
+                                <input id="phone" name="phone" class="form-control" placeholder="{{'phone' | translate}}" type="text" required>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <div class="form-group col-md-12">
+                        <label class="col-md-4 control-label" for="email">{{"email" | translate}}</label>
+                        <div class="col-md-8">
+                            <div class="input-group">
+                                <span class="input-group-addon">
+                                    <span class="glyphicon glyphicon-envelope" aria-hidden="true" style="font-size: 14px"></span>
+                                </span>
+                                <input id="email" name="email" class="form-control" placeholder="{{'email' | translate}}" type="text" required>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="col-md-12">
+                            <button id="reserve" name="reserve" class="btn btn-success">{{"reserve" | translate}}</button>
+                        </div>
+                    </div>
+                </fieldset>
+            </form>
+        </uib-tab>
+    </uib-tabset>
+</div>
+
+<!--
 <div class="tabs">
     <md-content>
         <md-tabs md-selected="reservationCtrl.selectedTab" md-center-tabs md-swipe-content md-dynamic-height md-border-bottom>
@@ -72,4 +155,4 @@ <h3>{{item}}</h3>
             </md-tab>
         </md-tabs>
     </md-content>
-</div>
+</div>-->