Dallinger/Dallinger

{% extends "base/dashboard.html" %}

{% block stylesheets %}
    <style>
        .dev-tools-section {
            margin-top: 30px;
            margin-bottom: 30px;
        }
    </style>
{% endblock %}

{% block body %}
    <h1>Development Mode Tools</h1>

    <div class="dev-tools-section">
        <p>
            You can update your experiment code while the experiment is running;
            if you refresh the browser, you should be able to see your changes.
        </p>
        <p>
            <strong>Note:</strong>
            Certain files (in particular, JS scripts) are cached by the browser,
            and so might not be updated by an ordinary refresh.
            In such cases you may need to force the browser to do a non-cached refresh.
            The shortcut for this is typically Cmd-Shift-R (Mac) or Ctrl-Shift-R (Linux, Windows).
        </p>
    </div>

    <div class="dev-tools-section">
        <button id="new-participant" class="btn btn-primary" onclick="handleNewParticipant()">New participant</button>
        {% if mode == "debug" %}
            <button id="init-db" class="btn btn-danger" onclick="handleInitDB()">Reset database</button>
        {% endif %}
    </div>

    <div class="dev-tools-section">
        <h2>Messages</h2>

        <pre id="messages"></pre>
    </div>

{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        function log(data) {
            let messages = $("#messages");
            let time = new Date().toLocaleTimeString();
            let text = JSON.stringify(data, null, 4)
            messages.append("\n" + time + " - " + text);
        }

        function handleNewParticipant() {
            let url = "/ad?generate_tokens=true&recruiter=hotair&source=dashboard";
            log("Recruiting new participant...");
            window.open(url, "_blank").focus();
        }

        function handleInitDB() {
            if (confirm("Are you sure you want to reset the database? All existing data will be lost.")) {
                log("Initializing database reset...");
                $.ajax({
                    type: "POST",
                    url: "/dashboard/init_db",
                    success: log
                });
            }
        }
    </script>
{% endblock %}