Add a form to set priority of top 2 providers

Their priority should always add up to 100%. Currently we have to ensure
this by hand. Adding this form means there’s no way to not set their
combined priorities to 100%. And it’s a bit more of an intuitive UI than
two textboxes on separate pages.

app/assets/javascripts/radioSlider.js

@@ -0,0 +1,26 @@
+(function(global) {
+
+  "use strict";
+
+  global.GOVUK.Modules.RadioSlider = function() {
+
+    this.start = function(component) {
+
+      $(component)
+        .on('click', function() {
+
+          leftRight = $(this).find(':checked').next('label').text().split('/');
+
+          if (leftRight.length === 2) {
+            $(this).find('.radio-slider-left-value').html(leftRight[0]);
+            $(this).find('.radio-slider-right-value').html(leftRight[1]);
+          }
+
+        })
+        .trigger('click');
+
+    };
+
+  };
+
+})(window);

app/assets/stylesheets/components/page-footer.scss

@@ -65,6 +65,15 @@
     margin: 0;
   }
 
+  &-centered-button {
+
+    .button {
+      display: block;
+      margin: 0 auto;
+    }
+
+  }
+
 }
 
 .align-button-with-textbox {

app/assets/stylesheets/components/radios.scss

@@ -117,3 +117,60 @@
     margin-right: 15px;
   }
 }
+
+.inline-stacked-label {
+
+}
+
+.radio-slider {
+
+  border-bottom: 2px solid $black;
+  height: 18px;
+  margin-bottom: 18px + 30px;
+  margin-right: -18px;
+  margin-left: -18px;
+  white-space: nowrap;
+
+  legend {
+    display: none;
+  }
+
+  .multiple-choice {
+
+    display: inline-block;
+    margin-right: 0;
+    padding: 0;
+    width: 38px;
+    margin-right: calc((100% - (38px * 11)) / 10);
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    label {
+
+      font-size: 0;
+      padding: 0;
+
+      &:before {
+        background: $white;
+      }
+
+    }
+
+  }
+
+  &-left-value {
+    position: absolute;
+    bottom: 30px;
+    left: 0;
+  }
+
+  &-right-value {
+    position: absolute;
+    bottom: 30px;
+    right: 0;
+    text-align: right;
+  }
+
+}

app/assets/stylesheets/views/history.scss

@@ -15,6 +15,10 @@ $item-top-padding: $gutter-half;
       border-bottom: 1px solid $border-colour;
     }
 
+    .page-footer {
+      margin-bottom: 5px;
+    }
+
   }
 
   &-user {
@@ -31,7 +35,7 @@ $item-top-padding: $gutter-half;
     $axis-thickness: 2px;
     border-bottom: $axis-thickness solid $black;
     position: relative;
-    margin-bottom: 30px;
+    margin-bottom: 35px;
     height: 35px;
 
     &:before,
@@ -50,6 +54,11 @@ $item-top-padding: $gutter-half;
       right: 0;
     }
 
+    &-without-border {
+      position: relative;
+      padding-top: 35px;
+    }
+
     &-marker {
       $size: 20px;
       $border-thickness: 7px;

app/main/forms.py

@@ -952,6 +952,22 @@ class ProviderForm(StripWhitespaceForm):
     priority = IntegerField('Priority', [validators.NumberRange(min=1, max=100, message="Must be between 1 and 100")])
 
 
+class ProviderRatioForm(StripWhitespaceForm):
+
+    ratio = RadioField(choices=[
+        (str(value), '{}% / {}%'.format(value, 100 - value))
+        for value in range(100, -10, -10)
+    ])
+
+    @property
+    def percentage_left(self):
+        return int(self.ratio.data)
+
+    @property
+    def percentage_right(self):
+        return 100 - self.percentage_left
+
+
 class ServiceContactDetailsForm(StripWhitespaceForm):
     contact_details_type = RadioField(
         'Type of contact details',

app/main/views/providers.py

@@ -7,7 +7,7 @@ from werkzeug.utils import redirect
 
 from app import format_date_numeric, provider_client
 from app.main import main
-from app.main.forms import ProviderForm
+from app.main.forms import ProviderForm, ProviderRatioForm
 from app.utils import user_is_platform_admin
 
 PROVIDER_PRIORITY_MEANING_SWITCHOVER = datetime(2019, 11, 29, 11, 0)
@@ -67,12 +67,19 @@ def edit_sms_provider_ratio():
         if provider['notification_type'] == 'sms'
     ], key=itemgetter('identifier'), reverse=True)
 
+    form = ProviderRatioForm(ratio=providers[0]['priority'])
+
+    if form.validate_on_submit():
+        provider_client.update_provider(providers[0]['id'], form.percentage_left)
+        provider_client.update_provider(providers[1]['id'], form.percentage_right)
+
     if len(providers) < 2:
         abort(400)
 
     return render_template(
         'views/providers/edit-sms-provider-ratio.html',
         versions=_chunk_versions_by_day(_get_versions(providers[0], providers[1])),
+        form=form,
     )
 
 

app/templates/components/page-footer.html

@@ -6,9 +6,10 @@
   secondary_link=False,
   secondary_link_text=None,
   delete_link=False,
-  delete_link_text="delete"
+  delete_link_text="delete",
+  centered_button=False
 ) %}
-  <div class="page-footer">
+  <div class="page-footer {% if centered_button %}page-footer-centered-button{% endif %}">
     {% if button_text %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
       <button

app/templates/views/providers/edit-sms-provider-ratio.html

@@ -3,6 +3,7 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/radios.html" import radios %}
 
 {% block per_page_title %}
   Text message providers
@@ -12,8 +13,39 @@
 
   {{ page_header('Text message providers') }}
 
-  {% call form_wrapper() %}
-  {% endcall %}
+
+  <h2 class="heading-small top-gutter">
+    Now
+  </h2>
+  <div class="bottom-gutter">
+    <div class="history-list-item">
+      <div class="grid-row">
+        <div class="column-one-third">&nbsp;</div>
+        <div class="column-two-thirds">
+          <div class="history-list-percentage-without-border">
+            <div class="history-list-percentage-left-label">
+              MMG
+            </div>
+            <div class="history-list-percentage-right-label">
+              Firetext
+            </div>
+            {% call form_wrapper() %}
+              <div class="radio-slider" data-module="radio-slider">
+                {{ radios(form.ratio, inline=True, hide_legend=True) }}
+                <div class="radio-slider-left-value">
+                  —
+                </div>
+                <div class="radio-slider-right-value">
+                  —
+                </div>
+              </div>
+              {{ page_footer('Update', centered_button=True) }}
+            {% endcall %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
 
   {% for day, versions in versions %}

gulpfile.js

@@ -159,6 +159,7 @@ const javascripts = () => {
     paths.src + 'javascripts/colourPreview.js',
     paths.src + 'javascripts/templateFolderForm.js',
     paths.src + 'javascripts/collapsibleCheckboxes.js',
+    paths.src + 'javascripts/radioSlider.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.prettyerror())