{% extends "base.html" %}
{% load i18n %}

{% block bodyargs %}{{block.super}} class="regie-home"{% endblock %}

{% block more-user-links %}{% endblock %}

{% block content %}
<div class="section">
{% if not request.user.is_authenticated %}
<form method="post" id="login-form" action="{% url 'auth_login' %}">
  {% csrf_token %}
  <label for="id_username">Identifiant : </label>
  {{ login_form.username }}
  <label for="id_password">Mot de passe : </label>
  {{ login_form.password }}
  <button>Se connecter</button>
  <input type="hidden" name="next" value="/regie/" />
  <p><a href="{% url 'auth_password_reset' %}">{% trans "Lost password?" %}</a></p>
</form>
{% else %}
<h3>Bonjour {% firstof request.user.first_name request.user %}
            <a class="icon-signout" href="{% url 'logout' %}?next=/regie/">Déconnexion</a>
</h3>
{% endif %}
</div>

{% if service_message.text %}
<div class="block {{service_message.style}}notice">
  {{service_message.text|safe}}
</div>
{% endif %}

<div id="clock">
        <div id="hour">{% now "H:i:s" %}</div>
        <div id="playing">
          <span class="text"></span>
          <span class="timer"><span class="remaining">--:--</span>/<span class="duration">--:--</span></span>
        </div>
</div>
<script>
var $playing_label = $("#playing");
var track_duration = null;
var track_t0 = null;
var track_elapsed = null;

function fmt00(t)
{
    t = parseInt(t);
    if (t < 10) {
        return "0" + t;
    } else {
        return "" + t;
    }
}

function update_clock()
{
    var d = new Date();
    $("#hour").html(fmt00(d.getHours()) + ":" + fmt00(d.getMinutes()) + ":" + fmt00(d.getSeconds()));
    if (! track_duration) return;
    var remaining = parseInt(track_duration - track_elapsed - (parseInt(new Date().getTime() / 1000) - track_t0));
    if (remaining < 0) remaining = 0;
    $playing_label.find(".remaining").text(fmt00(remaining/60) + ":" + fmt00(remaining % 60));
}

function update_playing()
{
    $.ajax("/regie/playing/").success(function(data) {
      if (! data.title) {
        $playing_label.css("visibility", "hidden");
        window.setTimeout(update_playing, 5000);
        return;
      }
      var text = data.title;
      if (data.title && data.artist) {
        text = data.title + " - " + data.artist;
      }
      $playing_label.find(".text").text(text);
      track_duration = data.duration;
      track_elapsed = data.elapsed;
      track_t0 = parseInt(new Date().getTime() / 1000);
      $playing_label.find(".duration").text(fmt00(data.duration/60) + ":" + fmt00(data.duration % 60));
      $playing_label.css("visibility", "visible");
      update_clock();
      remaining = (data.duration - data.elapsed) * 1000;
      if (remaining <= 1000) {
         window.setTimeout(update_playing, 500);
      } else if (remaining < 10000) {
         window.setTimeout(update_playing, remaining - 1000);
      } else {
         window.setTimeout(update_playing, 9000);
      }
    }).error(function() {
      window.setTimeout(update_playing, 1000);
    });
}

$(function () {
  window.setInterval(update_clock, 500);
  window.setTimeout(update_playing, 500);
});
</script>

{% if request.user.is_authenticated %}
<div id="tracks">
  <button id="get-tracks">{% trans "Get tracks automatically" %}</button>
  <button id="add-track">{% trans "Search and add a track" %}</button>
  <ul>
  </ul>
</div>

<form id="add-track-form" style="display: none">
        <div><input type="search"> <button>{% trans "search" %}</button></div>
        <ul>
        </ul>
</form>
{% endif %}

<script>
$(function() {
  const track_language_labels = {
    'na': 'instru',
    'fr': 'french',
    'en': 'english',
    'nl': 'dutch',
    'other': 'other',
  };
  $('#tracks ul').sortable({handle: '.handle'});

  function add_track(track) {  /* to playlist */
    var $line = $('<li></li>')
    $line.append('<span class="handle">⣿</span>');
    var $remove_button = $('<button>×</button>');
    $remove_button.on('click', function() {
      $(this).parent().remove();
    });
    $line.append($remove_button);
    $line.append('<audio preload controls src="/nonstop/tracks/' + track.id + '/sound/"></audio>')
    $line.append($('<span></span>', {'class': 'title', 'text': track.title}));
    if (track.artist) {
      $line.append($('<span class="sep"> - </span>'));
      $line.append($('<span></span>', {'class': 'artist', 'text': track.artist}));
    }
    if (track.language) {
      $line.append(' ');
      $line.append($('<span></span>', {'class': 'type', 'text': '(' + track_language_labels[track.language] + ')'}));
    }
    $('#tracks').find('ul').append($line);
  }

  $('button#get-tracks').on('click', function() {
    $.ajax('/regie/tracks/').success(function(data) {
      for (const track of data.data) {
        add_track(track);
      }
    });
  });
  $('#add-track-form').on('submit', function() {
    var q = $('#add-track-form input[type=search]').val();
    $('#add-track-form ul').empty();
    if (q) {
      $.ajax('/regie/tracks/search/', {'data': {'q': q}}).success(function(data) {
        for (const track of data.data) {
                        console.log('track:', track);
          var $line = $('<li></li>')
          var $add_button = $('<button>+</button>');
          $add_button.on('click', function() {
            add_track(track);
            $('#add-track-form').dialog('destroy');
            return false;
          });
          $line.append($add_button);
          $line.append($('<span></span>', {'class': 'title', 'text': track.title}));
          if (track.artist) {
            $line.append($('<span class="sep"> - </span>'));
            $line.append($('<span></span>', {'class': 'artist', 'text': track.artist}));
          }
          if (track.language) {
            $line.append(' ');
            $line.append($('<span></span>', {'class': 'type', 'text': '(' + track_language_labels[track.language] + ')'}));
          }
          if (track.duration) {
            $line.append(' ');
            $line.append($('<span></span>', {'class': 'type', 'text': '(' + track.duration + ')'}));
          }
          $('#add-track-form ul').append($line);
        }
      });
    }
    return false;
  });
  $('button#add-track').on('click', function() {
    $('#add-track-form input').val('');
    $('#add-track-form').dialog({modal: true, width: 'auto'});
  });
});
</script>

{% endblock %}

{% block sidebar %}
<aside id="sidebar">

<div class="block program" data-url="{% url 'nonstop-ajax-program' date='' %}">
<h3>Au programme</h3>
<div></div>
<script>
$(function() {
  $('.block.program').each(function() {
    var url = $(this).data('url');
    $(this).find('> div').load(url, function() {
      {% if not perms.emissions.change_emission and website_url %}
        $(this).find('a').each(function(idx, link) {
          $(link).attr('href', "{{website_url}}" + $(link).attr('href'));
        });
      {% endif %}
    });
  });
});
</script>
</div>

{% if internal_ip or request.user.is_authenticated %}
<div class="block" id="pige">
<h3>Enregistrement</h3>

<form method="post" action="{% url 'regie-pige' %}">{% csrf_token %}
<div class="row">
<select name="src" id="src">
  <option value="pige">Pige d’antenne</option>
  <option value="studio1">Studio 1</option>
  <option value="studio2">Studio 2</option>
</select>
</div>

<div class="row">
<label for="date">Date</label>
<input name="date" id="date" maxlength="10" type="date"
   value="{% now "Y-m-d" %}"
   max="{% now "Y-m-d" %}"
   min="{{ pige_minimum_date|date:"Y-m-d" }}"/>
</div>

<div class="row">
<label for="start_start">Heure de début</label>
<span>
<select name="start_hour" id="start_hour">
{% for hour in pige_hours %}<option value="{{hour}}">{{hour}}</option>{% endfor %}
</select>
:
<select name="start_min" id="start_min">
{% for minute in pige_minutes %}<option value="{{minute}}">{{minute}}</option>{% endfor %}
</select>
</span>
</div>

<div class="row">
<label for="end_hour">Heure de fin</label>
<span>
<select name="end_hour" id="end_hour">
{% for hour in pige_hours %}<option value="{{hour}}">{{hour}}</option>{% endfor %}
</select>
:
<select name="end_min" id="end_min">
{% for minute in pige_minutes %}<option value="{{minute}}">{{minute}}</option>{% endfor %}
</select>
</span>
</div>

<div class="row">
<button name="download" {% if not internal_ip %}style="visibility: hidden"{% endif %}>Télécharger</button>
{% if user.email %}
<input type="hidden" name="email" value="{{ user.email }}">
<button name="sendmail">Envoyer lien par email</button>
{% endif %}
</div>

</div>
{% endif %}


</aside>
{% endblock %}