Add tariffs from the meter form via a modal

assets/javascripts/base.js

@@ -16,9 +16,7 @@ function format_currency(number) {
 }
 exports.format_currency = format_currency;
 
-function flash(msg, category, delay) {
-    var flash = $('<div></div>');
-    flash.html(msg);
+function showAlert(flash, category, delay) {
     flash.addClass('alert');
     flash.hide();
     if (category) {
@@ -30,8 +28,19 @@ function flash(msg, category, delay) {
         flash.delay(delay).fadeOut('slow');
     }
 }
+
+function flash(msg, category, delay) {
+    showAlert($('<div></div>').html(msg), category, delay);
+}
 exports.flash = flash;
 
+// Same alert as flash(), for a message that is not markup -- notably one that
+// came back from the server, which must not be able to inject elements.
+function flashText(msg, category, delay) {
+    showAlert($('<div></div>').text(msg), category, delay);
+}
+exports.flashText = flashText;
+
 var _pageLoaders = {};
 
 function registerPageLoader(pageName, loader) {

assets/javascripts/base.spec.js

@@ -45,6 +45,27 @@ describe('base', function() {
             base.flash("testing", "category", 1000);
             expect($(".alerts").html()).toMatchSnapshot();
         });
+        test('should render its message as markup', function() {
+            base.flash("<b>bold</b>");
+            expect($(".alerts b").length).toBe(1);
+        });
+    });
+
+    describe('flashText', function() {
+        test('should add a div to .alerts', function() {
+            base.flashText("testing");
+            expect($(".alerts").html()).toBe(
+                '<div class="alert" style="opacity: 0;">testing</div>');
+        });
+        test('should add an alert-category class', function() {
+            base.flashText("testing", "category", 1000);
+            expect($(".alerts div").hasClass('alert-category')).toBe(true);
+        });
+        test('should render its message as text', function() {
+            base.flashText("<b>bold</b>");
+            expect($(".alerts b").length).toBe(0);
+            expect($(".alerts").text()).toBe("<b>bold</b>");
+        });
     });
 
     describe('getMetaItemProps', function() {

assets/stylesheets/modal.scss

@@ -29,6 +29,47 @@
   border-bottom: 1px solid #CDCDCD;
 }
 
+// The tariff form is a horizontal form laid out for a full-width page. Inside
+// the tariff modal its Bootstrap column widths have to be narrowed to fit the
+// dialog.
+#meter-tariff-modal {
+  // Bootstrap's own dialog widths are 600px from 768px up and, with `.modal-lg`,
+  // 900px from 992px up. The tariff form needs the wider dialog at every
+  // viewport, clamped so it still fits a narrow one.
+  .modal-dialog {
+    width: 900px;
+    max-width: calc(100vw - 40px);
+  }
+
+  .control-label.col-lg-2 {
+    width: 18%;
+  }
+
+  .input-group.col-lg-3,
+  .col-md-5 {
+    width: 52%;
+  }
+
+  .input-group.col-lg-10,
+  .btn-group.col-lg-10 {
+    width: 70%;
+  }
+
+  .input-group .form-control {
+    min-width: 0;
+  }
+
+  @media (max-width: 991px) {
+    .control-label.col-lg-2,
+    .input-group.col-lg-3,
+    .input-group.col-lg-10,
+    .btn-group.col-lg-10,
+    .col-md-5 {
+      width: 100%;
+    }
+  }
+}
+
 .delete-text {
   span {
     text-align: center;

messages.pot

@@ -990,3 +990,39 @@ msgstr ""
 
 msgid "Saved custom settings file."
 msgstr ""
+
+msgid "<Add New>"
+msgstr ""
+
+msgid "Add a New Tariff"
+msgstr ""
+
+msgid "Loading tariff form..."
+msgstr ""
+
+msgid "Saving..."
+msgstr ""
+
+msgid "Cancel"
+msgstr ""
+
+msgid "Tariff created."
+msgstr ""
+
+msgid "Could not load the tariff form."
+msgstr ""
+
+msgid "Could not save the tariff."
+msgstr ""
+
+msgid "Your session has expired. Please reload the page and sign in again."
+msgstr ""
+
+msgid "Select a tariff"
+msgstr ""
+
+msgid "Please select a tariff or add a new one."
+msgstr ""
+
+msgid "No tariff was created. Please select a tariff or add a new one."
+msgstr ""

scripts/run_coverage.sh

@@ -8,11 +8,18 @@ compare_branch="${DIFF_COVER_COMPARE_BRANCH:-origin/main}"
 fail_under="${DIFF_COVER_FAIL_UNDER:-90}"
 
 # A git worktree's .git is a file, not a directory, and is unreadable inside the
-# build context, so hatch-vcs cannot derive the version. Supply a placeholder in
-# that case; a normal checkout leaves it empty and reads .git as usual.
+# build context, so hatch-vcs cannot derive the version. Build one from the
+# current commit in that case; a normal checkout leaves it empty and reads .git
+# as usual.
+#
+# The local segment (`+g<short hash>`) is not optional. `sparkmeter.__version__`
+# derives `git_version` from it and yields "" when it is absent, and the page
+# tests scrub `GIT_VERSION` out of every snapshot with `str.replace()`. Replacing
+# the empty string inserts the marker between every character of every snapshot,
+# which fails the whole page-test suite.
 version=""
 if [ -f .git ]; then
-    version="0.0.0"
+    version="0.0.0+g$(git rev-parse --short HEAD)"
 fi
 
 docker compose -f docker-compose.test.yml build \

sparkmeter/meter/js/meter-pages.js

@@ -10,6 +10,11 @@ base.registerPageLoader('meter-chart', function() {
     new MeterChart.MeterChart();
 });
 
+base.registerPageLoader('meter-form', function() {
+    var MeterTariffModal = require('meter/js/meter-tariff-modal.js');
+    new MeterTariffModal.MeterTariffModal();
+});
+
 base.registerPageLoader('meter-view', function() {
     var MeterView = require('meter/js/meter-view.js');
     new MeterView.MeterView();