[web] Support settings

Feature: The user can now change and store settings applied throughout the application.
forfuturellc · Nov 28, 2016 · 167fed0 · 167fed0
1 parent 8391097
commit 167fed0
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased][Unreleased]
 
+Added:
 
+* Support settings
 
 
 ## [0.8.0][0.8.0] - 2016-11-19

diff --git a/bower.json b/bower.json
@@ -19,7 +19,9 @@
     "font-awesome": "^4.6.3",
     "jquery": "^3.1.0",
     "bootstrap": "^3.3.7",
-    "animate.css": "^3.5.2"
+    "animate.css": "^3.5.2",
+    "bootstrap-switch": "^3.3.2",
+    "store-js": "^1.3.20"
   },
   "resolutions": {
     "jquery": "1.9.1 - 3"

diff --git a/web/_includes/head.html b/web/_includes/head.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="{{ site.baseurl }}/static/bootstrap-themes/superhero.min.css">
   <link rel="stylesheet" href="{{ site.baseurl }}/vendor/animate.css/animate.min.css">
   <link rel="stylesheet" href="{{ site.baseurl }}/vendor/font-awesome/css/font-awesome.min.css">
+  <link rel="stylesheet" href="{{ site.baseurl }}/vendor/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
 
   {% set defaultCssURL = '/css/main.css' %}
   <link rel="stylesheet" href="{{ site.baseurl }}{{ cssURL or defaultCssURL }}">

diff --git a/web/js/network.js b/web/js/network.js
@@ -5,6 +5,7 @@
  *
  * Functionality on the networks page.
  */
+/* global store:false */
 
 
 $(document).ready(function() {
@@ -15,6 +16,44 @@ $(document).ready(function() {
   $notification.$textError = $notification.find('.text-error');
   $notification.$textCost = $notification.find('.text-cost');
   var $select = $('.select-class');
+  var settings = {};
+
+  if (!store.enabled) {
+    $('#alert-store').show();
+  }
+
+  $('#panel-settings input[type="checkbox"]').each(function() {
+    var $this = $(this);
+    var settingKey = $this.data('setting');
+    var storeSettingKey = 'settings.' + settingKey;
+    var defaultState = $this.is(':checked');
+    var updateState = function(state) {
+      settings[settingKey] = state;
+    };
+
+    updateState(defaultState);
+
+    if (store.enabled) {
+      var state = store.get(storeSettingKey);
+      if (typeof state === 'boolean') {
+        updateState(state);
+      }
+    }
+
+    $this.bootstrapSwitch({
+      size: 'mini',
+      onText: 'YES',
+      offText: 'NO',
+      state: settings[settingKey]
+    });
+
+    $this.on('switchChange.bootstrapSwitch', function(evt, state) {
+      if (store.enabled) {
+        store.set(storeSettingKey, state);
+      }
+      updateState(state);
+    });
+  });
 
   $select.on('change', function() {
     return tableActivate(this);
@@ -37,6 +76,10 @@ $(document).ready(function() {
 
     // add a 'submit' handler that calculates the cost
     $form.submit(function(evt) {
+      if (!settings.onclient) {
+        return true;
+      }
+
       evt.preventDefault();
       var parameterArray = $form.serializeArray();
       var parameters = {};

diff --git a/web/networks/index.html b/web/networks/index.html
@@ -3,7 +3,12 @@
  #}
 {% extends '_layouts/default.html' %}
 {% set cssURL = '/css/network.css' %}
-{% set scripts = ['/js/engine.js', '/js/network.js'] %}
+{% set scripts = [
+  '/vendor/bootstrap-switch/dist/js/bootstrap-switch.min.js',
+  '/js/engine.js',
+  '/js/network.js',
+  '/vendor/store-js/store.min.js'
+] %}
 
 
 {% block content %}
@@ -68,8 +73,10 @@ <h1>Calculate Cost of <span class="network-name">{{ network.name | capitalize }}
     {% endfor %}
 
     {% if network.ussd_codes %}
-    <li role="presentation" class="USSD Codes"><a href="#panel-ussd_codes" aria-controls="home" role="tab" data-toggle="tab">USSD Codes</a></li>
+    <li role="presentation"><a href="#panel-ussd_codes" aria-controls="home" role="tab" data-toggle="tab">USSD Codes</a></li>
     {% endif %}
+
+    <li role="presentation" class="pull-right"><a href="#panel-settings" aria-controls="home" role="tab" data-toggle="tab">Settings</a></li>
   </ul>
 
   <!-- Tab panes -->
@@ -85,6 +92,23 @@ <h1>Calculate Cost of <span class="network-name">{{ network.name | capitalize }}
       {% include "_includes/ussd_codes.html" %}
     </div>
 
+    <div role="tabpanel" class="tab-pane" id="panel-settings">
+      <!-- Alert messages for settings -->
+      <div id="alert-store" class="alert alert-danger no-display" role="alert">
+        <small><strong>Sorry!</strong> Your settings will <strong>not</strong> be saved by your browser.</small>
+      </div>
+      <!-- The settings' switches -->
+      <div class="row">
+        <!-- setting: onclient -->
+        <div class="col-xs-2 col-xs-offset-1">
+          <input type="checkbox" data-setting="onclient" checked>
+        </div>
+        <div class="col-xs-8 col-xs-push-1">
+          <p>Calculate on my browser</p>
+        </div>
+      </div>
+    </div>
+
   </div>
 
 </div></div>