summaryrefslogtreecommitdiff
path: root/app/views/layouts/_elevation_banner.html.erb
blob: a7d15a2e0d2710e4e2f934d05aed6b8df54c502c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<% if elevated? %>
  <div id="elevation_banner"
       data-expires-at="<%= elevation_expires_at.to_i %>"
       data-label-minutes="<%= t(".minutes_short") %>"
       data-label-less-than-a-minute="<%= t(".less_than_a_minute") %>"
       data-label-expired="<%= t(".expired") %>">
    <span class="elevation_state">
      <%= icon("shield-check", library: "tabler", "aria-hidden": true) %>
      <%= t(".active") %>
      <span id="elevation_remaining"></span>
    </span>
    <span class="elevation_actions">
      <% if elevation_extensions_left > 0 %>
        <%= button_to t(".renew"), renew_elevation_path, method: :post,
              form: { class: "button_to state_changing" } %>
      <% end %>
      <%= button_to t(".drop"), elevation_path, method: :delete,
            form: { class: "button_to destructive" } %>
    </span>
  </div>

  <%= javascript_tag nonce: true do %>
    (function () {
      var banner = document.getElementById("elevation_banner");
      if (!banner) return;
      var out = document.getElementById("elevation_remaining");
      var expires = parseInt(banner.dataset.expiresAt, 10) * 1000;

      function tick() {
        var ms = expires - Date.now();
        if (ms <= 0) {
          out.textContent = banner.dataset.labelExpired;
          banner.classList.remove("elevation_soon");
          banner.classList.add("elevation_expired");
          return;
        }
        var mins = Math.floor(ms / 60000);
        out.textContent = mins < 1
          ? banner.dataset.labelLessThanAMinute
          : banner.dataset.labelMinutes.replace("%{count}", mins);
        if (mins < 5) banner.classList.add("elevation_soon");
        setTimeout(tick, 15000);
      }
      tick();
    })();
  <% end %>
<% end %>