<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ url_for('static', filename='typeahead.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha256-azvvU9xKluwHFJ0Cpgtf0CYzK7zgtOznnzxV4924X1w=" crossorigin="anonymous">
<title>GWCelery Tools</title>

<div class=container>
    <div class=jumbotron>
        <h1>
            GWCelery
            <small><a href="https://git.ligo.org/emfollow/gwcelery/commit/{{versions['full-revisionid']}}">{{versions.version}}</a></small>
        </h1>
        {% if request.remote_user %}
        Welcome, {{request.remote_user}}
        {% endif %}
    </div>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    <div class="card text-white bg-danger mb-3">
        <div class=card-header>
            DANGER ZONE
        </div>
        <div class=card-body>
            <p>
                This page is a dashboard for sending LIGO/Virgo public alerts.
                You can view it because you have authenticated with LIGO.ORG credentials.
                However, submission of any of the forms on this page is protected and can only be done by authorized follow-up advocates.
                <a class="btn btn-sm btn-light" target=_blank href="https://grouper.ligo.org/grouper/populateGroupMembers.do?groupId=e5dc87b156284015960508d4f2dd0b6a">Am I authorized?</a>
            </p>
            <p>
                This page is <em>live</em> and your actions here have consequences.
                Please be careful.
                You have been warned!
            </p>
        </div>
        <div class=card-footer>
            <div class=form-row>
                <div class="form-group col-md">
                    <label for=gracedb-host>GraceDb Host</label>
                    <div class="input-group">
                        <input id=gracedb-host class=form-control readonly value="{{ conf.gracedb_host }}">
                    </div>
                </div>
                <div class="form-group col-md">
                    <label for=gracedb-host>LVAlert Host</label>
                    <div class="input-group">
                        <input id=gracedb-host class=form-control readonly value="{{ conf.lvalert_host }}">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <div class=card-header>
            Issue Preliminary GCN Notice
        </div>
        <div class=card-body>
            <form method=post action="{{ url_for('send_preliminary_gcn') }}">
                <div class=form-row>
                    <div class=form-group>
                        <div class=form-text>Update the preferred event of a superevent and send a preliminary GCN Notice if it passes thresholds.</div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md">
                        <label for=superevent_id>Superevent ID</label>
                        <input required name=superevent_id class="form-control typeahead">
                    </div>
                    <div class="form-group col-md">
                        <label for=event_id>Preferred event ID</label>
                        <input required name=event_id class="form-control typeahead">
                    </div>
                    <div class="form-group col-md">
                        <label for=submit-button class=w-100>&nbsp;</label>
                        <button type=submit id=submit-button name=submit-button class="btn btn-primary">Submit</button>
                    </div>
                </div>
                <div class="modal fade" tabindex=-1 role=dialog aria-labelledby=send-preliminary-gcn-confirm-label>
                    <div class=modal-dialog role=document>
                        <div class=modal-content>
                            <div class=modal-header>
                                <h5 class=modal-title id=send-preliminary-gcn-confirm-label>
                                    Really Issue Preliminary GCN Notice?
                                </h5>
                                <button type=button class=close data-dismiss=modal aria-label=Close>
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class=modal-body>
                                Are you sure that you want to issue a Preliminary GCN Notice?
                            </div>
                            <div class=modal-footer>
                                <button type=button class="btn btn-secondary" data-dismiss=modal>Cancel</button>
                                <button type=submit class="btn btn-danger">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card mb-3">
        <div class=card-header>
            Issue Update GCN Notice
        </div>
        <div class=card-body>
            <form method=post action="{{ url_for('send_update_gcn') }}">
                <div class="form-row">
                    <div class="form-group col-md">
                        <label for=superevent_id>Superevent ID</label>
                        <input required name=superevent_id class="form-control typeahead">
                    </div>
                    <div class="form-group col-md">
                        <label for=skymap_filename>Sky Map File</label>
                        <input required name=skymap_filename class="form-control superevent-dependent typeahead" data-typeahead-url-template="{{ url_for('typeahead_skymap_filename', superevent_id='SUPEREVENT_ID', filename='TERM') }}">
                    </div>
                    <div class="form-group col-md">
                        <label for=em_bright_filename>Classification</label>
                        <input required name=em_bright_filename class="form-control superevent-dependent typeahead" data-typeahead-url-template="{{ url_for('typeahead_em_bright_filename', superevent_id='SUPEREVENT_ID', filename='TERM') }}">
                    </div>
                    <div class="form-group col-md">
                        <label for=p_astro_filename>P_Astro</label>
                        <input required name=p_astro_filename class="form-control superevent-dependent typeahead" data-typeahead-url-template="{{ url_for('typeahead_p_astro_filename', superevent_id='SUPEREVENT_ID', filename='TERM') }}">
                    </div>
                    <div class="form-group col-md">
                        <label for=submit-button class=w-100>&nbsp;</label>
                        <button type=submit id=submit-button name=submit-button class="btn btn-primary">Submit</button>
                    </div>
                </div>
                <div class="modal fade" tabindex=-1 role=dialog aria-labelledby=send-update-gcn-confirm-label>
                    <div class=modal-dialog role=document>
                        <div class=modal-content>
                            <div class=modal-header>
                                <h5 class=modal-title id=send-update-gcn-confirm-label>
                                    Really Issue Update GCN Notice?
                                </h5>
                                <button type=button class=close data-dismiss=modal aria-label=Close>
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class=modal-body>
                                Are you sure that you want to issue an Update GCN Notice?
                            </div>
                            <div class=modal-footer>
                                <button type=button class="btn btn-secondary" data-dismiss=modal>Cancel</button>
                                <button type=submit class="btn btn-danger">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card mb-3">
        <div class=card-header>
            Issue Mock Event
        </div>
        <div class=card-body>
            <form method=post action="{{ url_for('send_mock_event') }}">
                <div class=form-row>
                    <div class=form-group>
                        <div class=form-text>Issue a mock event selected at random from <a href="https://www.ligo.org/scientists/first2years/">First Two Years</a>.</div>
                        <small class="form-text text-muted">Mock events are created at fixed times of day by finding the event with the most recent sidereal time. If another mock event has recently been sent, then a manually issued mock event may be grouped with an existing superevent and not trigger any new GCNs.</small>
                    </div>
                </div>
                <div class=form-row>
                    <div class=form-group>
                        <button type=submit class="btn btn-primary">Submit</button>
                    </div>
                </div>
                <div class="modal fade" tabindex=-1 role=dialog aria-labelledby=send-mock-event-confirm-label>
                    <div class=modal-dialog role=document>
                        <div class=modal-content>
                            <div class=modal-header>
                                <h5 class=modal-title id=send-mock-event-confirm-label>
                                    Really Issue Mock Event?
                                </h5>
                                <button type=button class=close data-dismiss=modal aria-label=Close>
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class=modal-body>
                                Are you sure that you want to issue a mock event?
                            </div>
                            <div class=modal-footer>
                                <button type=button class="btn btn-secondary" data-dismiss=modal>Cancel</button>
                                <button type=submit class="btn btn-danger">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha256-63ld7aiYP6UxBifJWEzz87ldJyVnETUABZAYs5Qcsmc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js" integrity="sha256-RWiU4omUU7tQ2M3wmRQNW9UL50MB4CucbRPCbsQv+X0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.0/anchor.min.js" integrity="sha256-m1eTvwEHwmsw4+XKF7BshClVJEPwTVycveNl0CS0Mkk=" crossorigin="anonymous"></script>
<script>
    (function() {
        /* Add hover anchor links for individual forms. */
        anchors.add('.card-header');

        /* Show a spinner whenever a typeahead completion is loading. */
        $('.typeahead')
            .wrap('<div class=text-nowrap></div>')
            .after('<div style="position: relative; left: -32px" class="invisible position-relative spinner-border spinner-border-sm text-primary" role="status"></div>')
            .on('typeahead:asyncrequest', ev => {
                $(ev.target).parent().next('.spinner-border').removeClass('invisible');
            }).on('typeahead:asynccancel typeahead:asyncreceive', ev => {
                $(ev.target).parent().next('.spinner-border').addClass('invisible');
            });

        /* Enable typeahead completion for superevent ID fields. */
        $("[name='superevent_id']").typeahead({
            highlight: true,
            minLength: 0
        }, {
            source: new Bloodhound({
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '{{ url_for('typeahead_superevent_id', superevent_id='TERM') }}',
                    wildcard: 'TERM'
                }
            })
        });

        /* Enable typeahead completion for event ID fields. */
        $("[name='event_id']").typeahead({
            highlight: true,
            minLength: 0
        }, {
            source: new Bloodhound({
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '{{ url_for('typeahead_event_id', event_id='TERM') }}',
                    wildcard: 'TERM'
                }
            })
        });

        /* Enable typeahead completion for fields whose options depend on the
         * superevent ID. */
        $('.typeahead.superevent-dependent').each(function() {
            const url = $(this).data('typeahead-url-template');

            const bloodhound = new Bloodhound({
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: url.replace('TERM', ''),
                remote: {
                    url: url,
                    wildcard: 'TERM'
                }
            });

            const stringify = bloodhound.identify;

            $(this).typeahead({
                highlight: true,
                minLength: 0
            }, {
                source: bloodhound
            });

            $(this).closest('form').find("input[name='superevent_id']").on('typeahead:change typeahead:select', ev => {
                const superevent_id = $(ev.target).val();
                bloodhound.prefetch.url = url.replace('SUPEREVENT_ID', superevent_id);
                bloodhound.remote.url = url.replace('SUPEREVENT_ID', superevent_id);
                bloodhound.identify = (datum => stringify({superevent_id: superevent_id, datum: datum}));
                bloodhound.initialize();
            });
        });

        /* For forms that contain a <div class=modal> element to provide a
         * confirmation dialog box, capture any form submission event and
         * display the dialog box instead.*/
        $('form:has(.modal)').on('submit', function(event) {
            $(this).find('.modal').modal();
            return false;
        });

        /* Capture clicks of the submit button inside the dialog box and
         * REALLY submit the form this time. */
        $("form .modal button[type='submit']").on('click', function(event) {
            $(this).closest('form')[0].submit();
        });
    })();
</script>
