🍱 Added script

web/static/scripts.js

@@ -0,0 +1,83 @@
+const amount = document.querySelector('input[name="amount" i]');
+const period = document.querySelector('select[name="period" i]');
+const inRussia = document.querySelector('input[name="inRussia" i]');
+const buttons = document.querySelectorAll('.js-button');
+
+let form = {
+  amount: 0.00,
+  period: 0,
+  inRussia: false,
+};
+
+amount?.addEventListener('input', () => {
+  let value = +amount.value;
+  if (value < 0) {
+    value = 0;
+  }
+
+  form.amount = value * 100;
+
+  updateButtons();
+});
+
+period.addEventListener('change', () => {
+  form.period = +period.value;
+
+  updateButtons();
+});
+
+inRussia.addEventListener('change', () => {
+  form.inRussia = inRussia.checked;
+
+  updateButtons();
+});
+
+async function updateButtons() {
+  buttons.forEach(el => {
+    let inAmount = (!el.dataset.amountMin || el.dataset.amountMin <= form.amount) &&
+      (!el.dataset.amountMax || form.amount <= +el.dataset.amountMax);
+    let inPeriod = (!el.dataset.periodMin || +el.dataset.periodMin <= form.period) &&
+      (!el.dataset.periodMax || form.period <= +el.dataset.periodMax);
+    let inRegion = Boolean(el.dataset.inRussia) == form.inRussia;
+    console.debug('button', el.textContext, inRegion);
+
+    if (form.amount == 0.0 || inAmount && inPeriod && inRegion) {
+      el.href = el.dataset.pattern.
+        replace('%f', form.amount / 100).
+        replace('%d', form.amount).
+        replace('%p', getPeriodString(form.period));
+    } else if (el.hasAttribute('href')) {
+      el.removeAttribute('href');
+    }
+  });
+}
+
+function getPeriodString(period) {
+  switch (period) {
+    default:
+      return 'weekly';
+    case 7:
+      return 'weekly';
+    case 30:
+      return 'monthly';
+    case 365:
+      return 'yearly';
+  }
+}
+
+function setup() {
+  let value = +amount.value;
+  if (value < 0) {
+    value = 0;
+  }
+
+  form = {
+    amount: value * 100,
+    period: +period.value,
+    inRussia: inRussia.checked,
+  };
+
+  updateButtons();
+}
+
+setup();