index.html

{% extends "base.html" %}
{% block content %}

{% if cfg.test %}
  <div class="alert alert-warning" role="alert">
    <strong>Versión de prueba:</strong> No se enviará ningún e-mail.
  </div>
{% endif %}

<p class="lead">
Cada entrega quedará registrada.
</p>

<form class="form-horizontal" role="form" method="post" enctype="multipart/form-data">
  {% if alert %}<div class="alert alert-danger">{{ alert }}</div>{% endif %}

  <div class="form-group" id="fg_legajo">
    <label for="legajo" class="col-xs-2 control-label">Legajo:</label>
    <div class="col-xs-4">
      <div class="input-group">
        <input type="text" class="form-control" name="legajo" id="legajo" value="" placeholder="Legajo o padrón">
        <span class="input-group-addon"></span>
      </div>
      <p class="help-block">
      </p>
    </div>
  </div>
  <div class="form-group" id="fg_tp">
    <label for="tp" class="col-xs-2 control-label">Trabajo:</label>
    <div class="col-xs-4">
      <select class="form-control" name="tp" id="tp" value="">
        <option style="display:none" selected value></option>
        {% for tp in entregas|reverse %}
          <option value="{{tp}}">{{tp}}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="form-group" id="fg_modalidad">
    <label for="modalidad" class="col-xs-2 control-label">Modalidad:</label>
    <div class="col-xs-4">
      <div class="input-group">
        <div class="radio">
          <label><input type="radio" name="modalidad" value="individual">Entrega individual</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="modalidad" value="grupal">Entrega para el grupo:
            <select class="form-inline" placeholder="Grupo" name="grupo_id" id="grupo_id">
              <!-- De momento este select es informacional, y main.py nunca lo lee. -->
              <option value="" disabled selected>--</option>
            </select>
            <label for="grupo_id" class="sr-only">Grupo</label></label>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group" id="fg_tipo">
    <label for="tipo" class="col-xs-2 control-label">Tipo de entrega:</label>
    <div class="col-xs-4">
      <div class="input-group">
        <div class="radio">
          <label><input type="radio" name="tipo" value="entrega" checked>Entrega de código</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="tipo" value="ausencia">Notificación de ausencia</label>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group" id="fg_adjuntos">
    <label for="file" class="col-xs-2 control-label">Adjunto:</label>
    <div class="col-xs-4">
      <div class="input-group">
        <label class="input-group-btn">
          <span class="btn btn-default">
          <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
          <input type="file" id="file" style="display: none;" name="files" accept=".zip, application/zip">
          </span>
        </label>
        <input type="text" id="filename" class="form-control filename" readonly>
      </div>
      <p class="help-block">
        Formatos aceptados: <code>.zip</code>
      </p>
    </div>
  </div>
  <div class="form-group" id="fg_body">
    <label for="body" class="col-xs-2 control-label">Cambios realizados:</label>
    <div class="col-xs-4">
      <textarea class="form-control" name="body" id="body"></textarea>
      <span class="help-block">(O cualquier otra aclaración.)</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-2"></div>
    <div class="col-xs-4">
      <div class="g-recaptcha" data-sitekey="{{ cfg.recaptcha_site_id }}"></div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-2"></div>
    <div class="col-xs-4">
      <button disabled type="submit" id="submit" class="btn btn-primary btn-lg">Enviar entrega</button>
    </div>
  </div>
</form>

<script>
document.addEventListener("DOMContentLoaded", function() {
  $('#tp').on('input', validate);
  $('#legajo').on('input', validate);
  $('input[name=tipo]:radio', '#fg_tipo').change(validate);
  $('#file').change(function() {
    $('#filename').val(this.files[0].name);
    validate();
  });
  $('#body').change(validate);  // Verifica solo al perder focus.
});

var entregas = {{ entregas | tojson }};
var correctores = {{ correctores | tojson }};

function validate() {
  var tp = validateTP();
  var legajo = validateLegajo();
  var filesValid = validateFiles();
  var ausenciaValid = validateAusencia();
  var valid = !!tp && !!legajo && (filesValid || ausenciaValid);
  var grupo = "--";

  if (tp && legajo && correctores[legajo]) {
    // Mostrar nombre de docente y, si aplica, número de grupo.
    let data = correctores[legajo];
    var corrector = null;

    if (entregas[tp] === 'i' && data[0]) {
      corrector = data[0];
    } else if (entregas[tp] === 'g' && data[1]) {
      grupo = data[2];
      corrector = data[1];
    }

    if (corrector) {
      let input = $('#legajo');
      input.parent().find('span').html('<b>Corrector:</b> ' + corrector);
    }
  }

  $('#grupo_id option:selected').text(grupo);
  $('#submit').prop('disabled', !valid);
}

function validateAusencia() {
  var value = $('input[name=tipo]:checked', '#fg_tipo').val();
  var isAusencia = value == 'ausencia';
  $('#file').prop('disabled', isAusencia);
  $('span.btn', '#fg_adjuntos').toggleClass('disabled', isAusencia);
  $('#fg_body label').html(isAusencia ? 'Justificación:' : 'Cambios realizados:');
  return isAusencia && $('#body').val().trim().length > 0;
}

function validateTP() {
  var tp = validateAlNum($('#tp'));
  var valid = tp in entregas;
  $('#tp').parent().toggleClass('has-success', valid);

  if (!valid) {
    return null;
  }

  let es_grupal = entregas[tp] === 'g';

  $('[name="modalidad"]').prop('disabled', !es_grupal);
  $('[name="modalidad"]').val([es_grupal ? 'grupal' : 'individual']);

  return tp;
}

function validateLegajo() {
  let input = $('#legajo');
  let legajo = validateAlNum(input);
  let is_valid = legajo && legajo in correctores;
  let message = is_valid ? '<b>Padrón válido</b>' : '';

  input.parent().find('span').html(message);
  input.parent().toggleClass('has-success', is_valid);

  return is_valid ? legajo : null;
}

function validateFiles() {
  var valid = !!($('#file').val());
  $('#file').closest('.input-group').toggleClass('has-success', valid);
  return valid;
}

function validateAlNum(el) {
  if (el.length === 0) {
    return false;
  }
  var value = el.val().trim();
  var valid = /^[\d\w]+$/.test(value);
  return valid ? value : false;
}
</script>
{% endblock %}