{% extends "otree/BaseAdminRegular.html" %}

{% block head_title %}Export data{% endblock %}
{% block title %}Export data{% endblock %}

{% block content %}

  {% if db_is_empty %}
    <p>No sessions have taken place yet.</p>
  {% else %}

    <div class="card">
      <h4 class="card-header">
        Citation requirement
      </h4>
      <div class="card-body">
        <p>
          If you publish research conducted using oTree,
          you are required by the oTree license to cite <a
            href="http://dx.doi.org/10.1016/j.jbef.2015.12.001">this
          paper</a>.
        </p>
        <p>
          Citation:
        </p>
        <p>
          Chen, D.L., Schonger, M., Wickens, C., 2016. oTree - An
          open-source
          platform for laboratory, online and field experiments.
          Journal of Behavioral and Experimental Finance, vol 9:
          88-97
        </p>

      </div>
    </div>
    <br>

    <h3>All apps (wide format)</h3>
    <p>
      Data for all apps in one file. There is one row per participant; different apps and rounds are stacked horizontally.
      This format is useful if you want to correlate participants' behavior in one app with their behavior in another app.
    </p>
    <table class="table table-sm">
        {% for row in wide_table %}
          <tr>
            <td>{{ row.name }}</td>
            <td>
              <a href="javascript:void(0)" class="download-link" id="wide-csv">CSV</a>
            </td>
            <td>
              <a href="javascript:void(0)" class="download-link" id="wide-excel" data-excel="1">Excel CSV</a>
            </td>
            <td>
              <details>
                <summary>Show API URLs</summary>
                <table class="table table-sm mb-0 mt-2">
                  <tr>
                    <td>CSV</td>
                    <td><code>{{ row.csv_url }}</code></td>
                  </tr>
                  <tr>
                    <td>Excel CSV</td>
                    <td><code>{{ row.excel_url }}</code></td>
                  </tr>
                  <tr>
                    <td>One session only</td>
                    <td><code>{{ row.example_session_url }}</code></td>
                  </tr>
                </table>
              </details>
            </td>
          </tr>
        {% endfor %}
    </table>

    <h3>Per-app data</h3>
    <p>
      One row per player in the given app. If there are multiple rounds, there will be multiple rows for the same participant.
    </p>
    <table class="table table-sm">
        {% for row in app_table %}
          <tr>
            <td>{{ row.name }}</td>
            <td>
              <a href="javascript:void(0)" class="download-link" id="app-{{ row.app_name }}" data-app="{{ row.app_name }}">CSV</a>
            </td>
            <td>
              <a href="javascript:void(0)" class="download-link" id="app-{{ row.app_name }}-excel" data-app="{{ row.app_name }}" data-excel="1">Excel CSV</a>
            </td>
            <td>
              <details>
                <summary>Show API URLs</summary>
                <table class="table table-sm mb-0 mt-2">
                  <tr>
                    <td>CSV</td>
                    <td><code>{{ row.csv_url }}</code></td>
                  </tr>
                  <tr>
                    <td>Excel CSV</td>
                    <td><code>{{ row.excel_url }}</code></td>
                  </tr>
                  <tr>
                    <td>One session only</td>
                    <td><code>{{ row.example_session_url }}</code></td>
                  </tr>
                </table>
              </details>
            </td>
          </tr>
        {% endfor %}
    </table>

    <h3>Custom exports</h3>
    {% if custom_export_table %}
    <table class="table table-sm">
        {% for row in custom_export_table %}
          <tr>
            <td>{{ row.name }}</td>
            <td>
              <a href="javascript:void(0)" class="download-link" id="app-{{ row.app_name }}-{{ row.function_name }}" data-app="{{ row.app_name }}" data-custom="1" data-export-name="{{ row.function_name }}">CSV</a>
            </td>
            <td>
              <a href="javascript:void(0)" class="download-link" id="app-{{ row.app_name }}-{{ row.function_name }}-excel" data-app="{{ row.app_name }}" data-excel="1" data-custom="1" data-export-name="{{ row.function_name }}">Excel CSV</a>
            </td>
            <td>
              <details>
                <summary>Show API URLs</summary>
                <table class="table table-sm mb-0 mt-2">
                  <tr>
                    <td>CSV</td>
                    <td><code>{{ row.csv_url }}</code></td>
                  </tr>
                  <tr>
                    <td>Excel CSV</td>
                    <td><code>{{ row.excel_url }}</code></td>
                  </tr>
                  <tr>
                    <td>One session only</td>
                    <td><code>{{ row.example_session_url }}</code></td>
                  </tr>
                </table>
              </details>
            </td>
          </tr>
        {% endfor %}
      </table>
      {% else %}
      <p>No custom exports found.</p>
    {% endif %}


    <h3>Other exports</h3>
    <table class="table table-sm">
        {% for row in other_exports %}
          <tr>
            <td>{{ row.name }}</td>
            <td>
              <a href="{{ row.csv_url }}">CSV</a>
            </td>
            <td>
              <a href="{{ row.excel_url }}">Excel CSV</a>
            </td>
            <td>
              <details>
                <summary>Show API URLs</summary>
                <table class="table table-sm mb-0 mt-2">
                  <tr>
                    <td>CSV</td>
                    <td><code>{{ row.api_csv_url }}</code></td>
                  </tr>
                  <tr>
                    <td>Excel CSV</td>
                    <td><code>{{ row.api_excel_url }}</code></td>
                  </tr>
                  {% if row.example_session_url %}
                    <tr>
                      <td>One session only</td>
                      <td><code>{{ row.example_session_url }}</code></td>
                    </tr>
                  {% endif %}
                </table>
              </details>
            </td>
          </tr>
        {% endfor %}
    </table>

  {% endif %}

  <br/>
  <h3>Notes</h3>
  <ul>
    <li>
      The difference between CSV and Excel CSV is that the Excel CSV has a BOM (byte order mark).
    </li>
    <li>
      If you're using the REST API URLs on a password-protected server,
      you need to add the <code>otree-rest-key</code> header to your request.
      See the oTree docs for more details.
  </ul>


{% endblock %}

{% block scripts %}
  <script>

      var socket;

      function removeProgressElement(link_id) {
          $(`#${link_id} > progress`).remove();
      }

      function initWebSocket() {
          socket = makeReconnectingWebSocket('/export');
          socket.onmessage = function (e) {
              var content = JSON.parse(e.data);
              if (content.error) {
                  window.alert(content.error);
                  removeProgressElement(content.link_id);
              } else {
                  saveReceivedFile(content);
              }
          };
      }

      initWebSocket();

      $(function () {
          $('.download-link').click(function () {
              $this = $(this);
              var linkId = $this.attr('id');
              var content = {
                  // link_id is just roundtripped so we can use it client-side later.
                  'link_id': linkId,
                  'for_excel': $this.data('excel')
              };
              var appName = $this.data('app');
              if (appName) {
                  content['app_name'] = appName;
              }
              content['is_custom'] = Boolean($this.data('custom'));
              var exportFunctionName = $this.data('export-name');
              if (exportFunctionName) {
                  content['function_name'] = exportFunctionName;
              }
              socket.send(JSON.stringify(content));
              $this.append('<progress></progress>');
          })
      });

      function saveReceivedFile(content) {
          var c = content;
          var data = c.data;
          var file = new Blob([data], {type: c.mime_type});
          if (window.navigator.msSaveOrOpenBlob) // IE10+
              window.navigator.msSaveOrOpenBlob(file, c.file_name);
          else { // Others
              var a = document.createElement("a"),
                  url = URL.createObjectURL(file);
              a.href = url;
              a.download = c.file_name;
              document.body.appendChild(a);
              a.click();
              setTimeout(function () {
                  document.body.removeChild(a);
                  window.URL.revokeObjectURL(url);
              }, 0);
          }
          removeProgressElement(c.link_id);
      }
  </script>


{% endblock %}