uptime_widget-8.x-1.x-dev/templates/uptime-widget--input--range.html.twig

{#
/**
 * @file
 * Theme override for an 'input' #type form element.
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the input element.
 * - children: Optional additional rendered elements.
 * - name: The name of field.
 * - default_value: The latest saved interval value.
 *
 * @see template_preprocess_input()
 */
#}
{{ attach_library('uptime_widget/uptime-widget-admin') }}
{% set function_sub_name = name|title|replace({'_': ''}) %}
{% set attributes = attributes.setAttribute('oninput', ['showValue', function_sub_name, '(this.value)']|join) %}
<input{{ attributes }} />
<div class='range-value'>
  {{ 'Monitoring interval'|t }}
  <span id={{ name }}>
    {% if default_value > 120 %}
      {# The text to be translated with "trans" can only contain references to simple variables. #}
      {% set default_value = default_value - 118 %}
      {% trans %}
        {{ default_value }} hour
      {% plural range_value %}
        {{ default_value }} hours
      {% endtrans %}
    {% else %}
      {% trans %}
        {{ default_value }} minute
      {% plural default_value %}
        {{ default_value }} minutes
      {% endtrans %}
    {% endif %}
</span>
</div>
<script type="text/javascript">
  function showValue{{ function_sub_name }}(range) {
    var count;
    if (range > 120) {
      range = range - 118;
      count = range;
      range = Drupal.formatPlural(count, '@count hour', '@count hours');
    }
    else {
      count = range;
      range = Drupal.formatPlural(count, '@count minute', '@count minutes');
    }
    jQuery('#{{ name }}').html(range);
  }
</script>
{{ children }}