<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="panel panel-default"> <div class="panel-heading panel-heading-sm"> <h3 class="panel-title">Query</h3> <div class="pull-right" style="cursor:pointer; cursor:hand; margin-top:-15px;" id="query-box-dropdown" onClick="showHideQueryBox()" aria-label="query"> <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span> </div> </div> <div class="panel-body" id="query-box" style="display: block"> <form class="form-horizontal " action="{{-script_root-}}/search" method="POST"> <div class="form-group"> <label for="source_name" class="col-md-2 control-label">Source name</label> <div class="col-md-8"> <input type="text" class="form-control" id="source_name" name="source_name" placeholder="default: get all if blank"> </div> <div class="col-md-2"> <label class="checkbox-inline"> <input type="checkbox" id="source_name_exact" name="source_name_exact" checked="checked"> Exact match </label> </div> </div> <div class="form-group"> <label for="ra" class="col-md-2 control-label">RA</label> <div class="col-md-2"> <input type="text" class="form-control radec" id="ra" name="ra" placeholder="get all if blank" data-toggle="tooltip" data-placement="top" title="H:M:S or HhMmSs or rad"> </div> <label for="dec" class="col-md-1 control-label">Dec</label> <div class="col-md-2"> <input type="text" class="form-control radec" id="dec" name="dec" placeholder="get all if blank" data-toggle="tooltip" data-placement="top" title="D:M:S or DdMmSs or rad"> </div> <label for="cone_search_radius" class="col-md-2 control-label"> Cone search radius </label> <div class="col-md-3"> <div class="row"> <div class="col-xs-4"> <input type="text" class="form-control" id="cone_search_radius" name="cone_search_radius" placeholder=""> </div> <div class="col-xs-8"> <select class="form-control" id="cone_search_unit" name="cone_search_unit"> <option>arcsec</option> <option>arcmin</option> <option>deg</option> <option>rad</option> </select> </div> </div> </div> </div> <div class="form-group"> <label for="program_id" class="col-md-2 control-label">Program ID</label> <div class="col-md-2"> <select class="form-control" id="program_id" name="program_id"> <option>all</option> {% for program_id in program_ids|sort %} <option>{{ program_id }}</option> {% endfor %} </select> </div> <label for="program_id" class="col-md-2 control-label">Time range, UTC</label> <div class="col-md-6"> <div class="input-group"> <input type="text" name="daterange" id="daterange" class="form-control" style="cursor: pointer"/> <span class="input-group-addon" style="cursor: pointer" onclick="$('#daterange').click();"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> {# advanced search options #} <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#filter-panel" id="advanced_search" style="margin-top:10px; margin-bottom:10px;"> <span class="glyphicon glyphicon-cog"></span> Advanced search options </button> </div> </div> <div id="filter-panel" class="collapse filter-panel"> <div class="form-group"> <label for="source_id" class="col-md-2 control-label">Source ID</label> <div class="col-md-8"> <input type="text" class="form-control" id="source_id" name="source_id" placeholder="get all if blank"> </div> <div class="col-md-2"> <label class="checkbox-inline"> <input type="checkbox" id="source_id_exact" name="source_id_exact" checked="checked"> Exact match </label> </div> </div> <div class="form-group"> <label for="filter" class="col-md-2 control-label">Filter</label> <div class="col-md-4"> <select class="form-control" id="filter" name="filter"> <option>any</option> <option>Sloan g</option> <option>Sloan r</option> <option>Sloan i</option> <option>Sloan z</option> <option>Longpass 600nm</option> <option>Clear</option> {# <option>H</option>#} <option>J</option> </select> </div> </div> <div class="form-group"> <div class="col-md-6"> <p> <label for="seeing_median" class="control-label" style="width: 200px;"> Median seeing, "    </label> <input id="seeing_median" name="seeing_median" type="text" data-provide="slider" data-slider-min="0.1" data-slider-max="3" data-slider-step="0.1" data-slider-value="[0.1,3]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <div class="col-md-6"> <p> <label for="seeing_nearest" class="control-label" style="width: 200px;"> Nearest seeing, "    </label> <input id="seeing_nearest" name="seeing_nearest" type="text" data-provide="slider" data-slider-min="0.1" data-slider-max="3" data-slider-step="0.1" data-slider-value="[0.1,3]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <div class="col-md-6"> <p> <label for="exposure" class="control-label" style="width: 200px;"> Exposure, s    </label> <input id="exposure" name="exposure" type="text" data-provide="slider" data-slider-min="0" data-slider-max="600" data-slider-step="1" data-slider-value="[0,600]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <div class="col-md-6"> <p> <label for="magnitude" class="control-label" style="width: 200px;"> Magnitude    </label> <input id="magnitude" name="magnitude" type="text" data-provide="slider" data-slider-min="-6" data-slider-max="23" data-slider-step="0.1" data-slider-value="[-6,23]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <div class="col-md-6"> <p> <label for="azimuth" class="control-label" style="width: 200px;"> Azimuth, °    </label> <input id="azimuth" name="azimuth" type="text" data-provide="slider" data-slider-min="0" data-slider-max="360" data-slider-step="1" data-slider-value="[0,360]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <div class="col-md-6"> <p> <label for="elevation" class="control-label" style="width: 200px;"> Elevation, °    </label> <input id="elevation" name="elevation" type="text" data-provide="slider" data-slider-min="0" data-slider-max="90" data-slider-step="1" data-slider-value="[0,90]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <div class="col-md-6"> <p> <label for="lucky_strehl" class="control-label" style="width: 200px;"> Lucky Strehl, %    </label> <input id="lucky_strehl" name="lucky_strehl" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="[0,100]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <div class="col-md-6"> <p> <label for="faint_strehl" class="control-label" style="width: 200px;"> Faint Strehl, %    </label> <input id="faint_strehl" name="faint_strehl" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="[0,100]" data-slider-range="true" data-slider-tooltip="show"/> </p> </div> <label for="lucky_strehl_label" class="col-md-2 control-label">Lucky Strehl label</label> <div class="col-md-4"> <select class="col-md-2 form-control" id="lucky_strehl_label" name="lucky_strehl_label"> <option>any</option> <option>OK</option> <option>BAD?</option> </select> </div> <label for="faint_strehl_label" class="col-md-2 control-label">Faint Strehl label</label> <div class="col-md-4"> <select class="col-md-2 form-control" id="faint_strehl_label" name="faint_strehl_label"> <option>any</option> <option>OK</option> <option>BAD?</option> </select> </div> </div> <div class="form-group"> <label for="pipelines" class="col-md-2 control-label">Pipelines</label> <div class="col-md-10"> <label class="checkbox-inline"> <input type="checkbox" id="pipe_lucky" name="pipe_lucky" data-toggle="tooltip" data-placement="top" title="strictly done if checked"> Lucky </label> <label class="checkbox-inline"> <input type="checkbox" id="pipe_lucky_pca" name="pipe_lucky_pca" data-toggle="tooltip" data-placement="top" title="strictly done if checked"> PCA for lucky </label> <label class="checkbox-inline"> <input type="checkbox" id="pipe_faint" name="pipe_faint" data-toggle="tooltip" data-placement="top" title="strictly done if checked"> Faint </label> <label class="checkbox-inline"> <input type="checkbox" id="pipe_faint_pca" name="pipe_faint_pca" data-toggle="tooltip" data-placement="top" title="strictly done if checked"> PCA for faint </label> <label class="checkbox-inline"> <input type="checkbox" id="pipe_planetary" name="pipe_planetary" data-toggle="tooltip" data-placement="top" title="strictly done if checked"> Planetary </label> </div> </div> </div> {# output formatting #} <div class="form-group"> <label for="output_formatting" class="col-md-2 control-label">Output formatting</label> <div class="col-md-10" id="output_formatting"> <label class="checkbox-inline"> <input type="checkbox" id="output_table" name="output_table" checked="checked"> table </label> <label class="checkbox-inline"> <input type="checkbox" id="output_thumbnail" name="output_thumbnail"> thumbnail gallery </label> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-success">Search</button> </div> </div> </form> </div> </div> </div> </div>