refactored settings to use boolean-setting directive

app/assets/javascripts/controllers/admin/settings.js.erb

@@ -88,31 +88,16 @@ Application.Controllers.controller('SettingsController', ['$scope', '$rootScope'
     $scope.customFavicon = faviconFile.custom_asset;
     $scope.profileImage = profileImageFile.custom_asset;
 
-    $scope.enableMove = {
-      name: 'booking_move_enable',
-      value: (settingsPromise.booking_move_enable === 'true')
-    };
-
     $scope.moveDelay = {
       name: 'booking_move_delay',
       value: parseInt(settingsPromise.booking_move_delay, 10)
     };
 
-    $scope.enableCancel = {
-      name: 'booking_cancel_enable',
-      value: (settingsPromise.booking_cancel_enable === 'true')
-    };
-
     $scope.cancelDelay = {
       name: 'booking_cancel_delay',
       value: parseInt(settingsPromise.booking_cancel_delay, 10)
     };
 
-    $scope.enableReminder = {
-      name: 'reminder_enable',
-      value: (settingsPromise.reminder_enable === 'true')
-    };
-
     $scope.reminderDelay = {
       name: 'reminder_delay',
       value: parseInt(settingsPromise.reminder_delay, 10)
@@ -128,26 +113,6 @@ Application.Controllers.controller('SettingsController', ['$scope', '$rootScope'
       value: parseInt(settingsPromise.visibility_others, 10)
     };
 
-    $scope.displayNameEnable = {
-      name: 'display_name_enable',
-      value: (settingsPromise.display_name_enable === 'true')
-    };
-
-    $scope.fabAnalytics = {
-      name: 'fab_analytics',
-      value: (settingsPromise.fab_analytics === 'true')
-    };
-
-    $scope.phoneRequired = {
-      name: 'phone_required',
-      value: (settingsPromise.phone_required === 'true')
-    };
-
-    $scope.bookOverlappingSlots = {
-      name: 'book_overlapping_slots',
-      value: (settingsPromise.book_overlapping_slots === 'true')
-    }
-
     // By default, we display the currently published privacy policy
     $scope.privacyPolicy = {
       version: null,

app/assets/javascripts/directives/settings/boolean-setting.js.erb

@@ -5,7 +5,10 @@ Application.Directives.directive('booleanSetting', ['Setting', 'growl', '_t',
       scope: {
         name: '@',
         label: '@',
-        settings: '='
+        settings: '=',
+        yesLabel: '@',
+        noLabel: '@',
+        classes: '@'
       },
       templateUrl: '<%= asset_path "admin/settings/boolean.html" %>',
       link ($scope, element, attributes) {
@@ -15,6 +18,10 @@ Application.Directives.directive('booleanSetting', ['Setting', 'growl', '_t',
           value: ($scope.settings[$scope.name] === 'true')
         };
 
+        // default values for the switch labels
+        $scope.yesLabel =  $scope.yesLabel || 'app.admin.settings.enabled';
+        $scope.noLabel = $scope.noLabel || 'app.admin.settings.disabled';
+
         /**
          * Callback to save the setting value to the database
          * @param setting {{value:*, name:string}} note that the value will be stringified

app/assets/templates/admin/settings/boolean.html

@@ -1,12 +1,12 @@
-<div class="form-group m-l">
+<div class="form-group {{classes}}">
   <label for="setting-{{setting.name}}" class="control-label m-r" translate>{{ label }}</label>
   <input bs-switch
          ng-model="setting.value"
          id="setting-{{setting.name}}"
          type="checkbox"
          class="form-control"
-         switch-on-text="{{ 'app.admin.settings.enabled' | translate }}"
+         switch-on-text="{{ yesLabel | translate }}"
-         switch-off-text="{{ 'app.admin.settings.disabled' | translate }}"
+         switch-off-text="{{ noLabel | translate }}"
          switch-animate="true"/>
   <button name="button" class="btn btn-warning m-l" ng-click="save(setting)" translate>{{ 'app.shared.buttons.save' }}</button>
 </div>

app/assets/templates/admin/settings/privacy.html

@@ -38,20 +38,17 @@
     <div class="panel-body">
       <div class="row">
         <div class="col-md-10 col-md-offset-1">
-          <label for="fab_analytics" translate>{{ 'app.admin.settings.fab_analytics' }}</label>
+          <boolean-setting
-          <input bs-switch
+              name="fab_analytics"
-                 ng-model="fabAnalytics.value"
+              settings="allSettings"
-                 id="fab_analytics"
+              label="app.admin.settings.fab_analytics"
-                 type="checkbox"
+              yes-label="app.shared.buttons.yes"
-                 class="form-control"
+              no-label="app.shared.buttons.no">
-                 switch-on-text="{{ 'app.shared.buttons.yes' | translate }}"
+          </boolean-setting>
-                 switch-off-text="{{ 'app.shared.buttons.no' | translate }}"
-                 switch-animate="true"/>
           <p>
             <span translate>{{ 'app.admin.settings.privacy.about_analytics' }}</span>
             <a ng-click="analyticsModal()" class="pointer" translate>{{ 'app.admin.settings.privacy.read_more' }}</a>
           </p>
-          <button name="button" class="btn btn-warning" ng-click="save(fabAnalytics)" translate>{{ 'app.shared.buttons.save' }}</button>
         </div>
       </div>
 
@@ -68,17 +65,13 @@
     </p>
     <div class="row">
       <div class="col-md-10 col-md-offset-1">
-        <label for="phone_required" translate>{{ 'app.admin.settings.privacy.phone_required' }}</label>
+        <boolean-setting
-        <input bs-switch
+            name="phone_required"
-               ng-model="phoneRequired.value"
+            settings="allSettings"
-               id="phone_required"
+            label="app.admin.settings.privacy.phone_required"
-               type="checkbox"
+            yes-label="app.shared.buttons.yes"
-               class="form-control"
+            no-label="app.shared.buttons.no">
-               switch-on-text="{{ 'app.shared.buttons.yes' | translate }}"
+        </boolean-setting>
-               switch-off-text="{{ 'app.shared.buttons.no' | translate }}"
-               switch-animate="true"/>
-
-        <button name="button" class="btn btn-warning m-l" ng-click="save(phoneRequired)" translate>{{ 'app.shared.buttons.save' }}</button>
       </div>
     </div>
     <p class="alert alert-warning m-t" ng-bind-html="'app.admin.settings.privacy.tracking_id_info_html' | translate"></p>
@@ -97,4 +90,4 @@
     </div>
 
   </div>
-</div>
+</div>

app/assets/templates/admin/settings/reservations.html

@@ -50,18 +50,7 @@
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_move_their_reservations' }}</h3>
-                <div class="form-group m-l">
+                <boolean-setting name="booking_move_enable" settings="allSettings" label="app.admin.settings.reservations_shifting" classes="m-l"></boolean-setting>
-                    <label for="enableMove" class="control-label m-r" translate>{{ 'app.admin.settings.reservations_shifting' }}</label>
-                    <input bs-switch
-                           ng-model="enableMove.value"
-                           id="enableMove"
-                           type="checkbox"
-                           class="form-control"
-                           switch-on-text="{{ 'app.admin.settings.enabled' | translate }}"
-                           switch-off-text="{{ 'app.admin.settings.disabled' | translate }}"
-                           switch-animate="true"/>
-                    <button name="button" class="btn btn-warning m-l" ng-click="save(enableMove)" translate>{{ 'app.shared.buttons.save' }}</button>
-                </div>
             </div>
             <div class="row" ng-show="enableMove.value">
                 <form class="col-md-4" name="moveDelayForm">
@@ -79,18 +68,7 @@
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_cancel_their_reservations' }}</h3>
-                <div class="form-group m-l">
+                <boolean-setting name="booking_cancel_enable" settings="allSettings" label="app.admin.settings.reservations_cancelling" classes="m-l"></boolean-setting>
-                    <label for="enableCancel" class="control-label m-r" translate>{{ 'app.admin.settings.reservations_cancelling' }}</label>
-                    <input bs-switch
-                           ng-model="enableCancel.value"
-                           id="enableCancel"
-                           type="checkbox"
-                           class="form-control"
-                           switch-on-text="{{ 'app.admin.settings.enabled' | translate }}"
-                           switch-off-text="{{ 'app.admin.settings.disabled' | translate }}"
-                           switch-animate="true"/>
-                    <button name="button" class="btn btn-warning m-l" ng-click="save(enableCancel)" translate>{{ 'app.shared.buttons.save' }}</button>
-                </div>
             </div>
             <div class="row" ng-show="enableCancel.value">
                 <form class="col-md-4" name="cancelDelayForm">
@@ -108,7 +86,7 @@
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.book_overlapping_slots_info' }}</h3>
-                <boolean-setting name="book_overlapping_slots" settings="allSettings" label="app.admin.settings.allow_booking"></boolean-setting>
+                <boolean-setting name="book_overlapping_slots" settings="allSettings" label="app.admin.settings.allow_booking" classes="m-l"></boolean-setting>
             </div>
         </div>
     </div>
@@ -121,18 +99,7 @@
     <div class="panel-body">
         <div class="row">
             <h3 class="m-l" translate>{{ 'app.admin.settings.notification_sending_before_the_reservation_occurs' }}</h3>
-            <div class="form-group m-l">
+            <boolean-setting name="reminder_enable" settings="allSettings" label="app.admin.settings.reservations_reminders" classes="m-l"></boolean-setting>
-                <label for="enableReminder" class="control-label m-r" translate>{{ 'app.admin.settings.reservations_reminders' }}</label>
-                <input bs-switch
-                       ng-model="enableReminder.value"
-                       id="enableReminder"
-                       type="checkbox"
-                       class="form-control"
-                       switch-on-text="{{ 'app.admin.settings.enabled' | translate }}"
-                       switch-off-text="{{ 'app.admin.settings.disabled' | translate }}"
-                       switch-animate="true"/>
-                <button name="button" class="btn btn-warning m-l" ng-click="save(enableReminder)" translate>{{ 'app.shared.buttons.save' }}</button>
-            </div>
         </div>
         <div class="row" ng-show="enableReminder.value">
             <form class="col-md-4" name="reminderDelayForm">
@@ -162,18 +129,7 @@
     <div class="panel-body">
         <div class="row">
             <h3 class="m-l" translate>{{ 'app.admin.settings.display_machine_reservation_user_name' }}</h3>
-            <div class="form-group m-l">
+            <boolean-setting name="display_name_enable" settings="allSettings" label="app.admin.settings.display_name" classes="m-l"></boolean-setting>
-                <label for="displayNameEnable" class="control-label m-r" translate>{{ 'app.admin.settings.display_name' }}</label>
-                <input bs-switch
-                       ng-model="displayNameEnable.value"
-                       id="displayNameEnable"
-                       type="checkbox"
-                       class="form-control"
-                       switch-on-text="{{ 'app.admin.settings.enabled' | translate }}"
-                       switch-off-text="{{ 'app.admin.settings.disabled' | translate }}"
-                       switch-animate="true"/>
-                <button name="button" class="btn btn-warning m-l" ng-click="save(displayNameEnable)" translate>{{ 'app.shared.buttons.save' }}</button>
-            </div>
         </div>
     </div>
 </div>