166 lines
4.2 KiB
HTML
166 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% load crispy_forms_tags %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Log a QSO!</div>
|
|
<div class="panel-body">
|
|
<style scoped>
|
|
#id_call {
|
|
text-transform: uppercase;
|
|
}
|
|
#id_reportRX, #id_reportTX {
|
|
width: 50px;
|
|
}
|
|
#id_ownNo, #id_otherNo {
|
|
width: 75px;
|
|
}
|
|
#id_refStr {
|
|
width: 100px;
|
|
text-transform: uppercase;
|
|
}
|
|
#id_call {
|
|
width: 100px;
|
|
}
|
|
|
|
#qso-log-form .form-group:last-child {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
</style>
|
|
|
|
<form method="post" id="qso-log-form" class="form-inline" action="{% url "contest:log" %}">
|
|
<div class="form-group">
|
|
<label class="control-label">Time</label>
|
|
<div class="controls">
|
|
<p id="id_curr_time" class="form-control-static">{% now "H:i:s" %}</p>
|
|
</div>
|
|
</div>
|
|
{% crispy form %}
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Your QSO log</div>
|
|
<div class="panel-body">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>NroS</th>
|
|
<th>Band</th>
|
|
<th>UTC</th>
|
|
<th>Call</th>
|
|
<th class="hidden-xs">RS-S</th>
|
|
<th class="hidden-xs">RS-R</th>
|
|
<th class="hidden-xs">No-R</th>
|
|
<th>EXC</th>
|
|
<th class="hidden-xs">Remarks</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for qso in qsos %}
|
|
<tr id="qso-row-{{ forloop.counter0 }}">
|
|
<td>{{ qso.ownNo }}</td>
|
|
<td>{{ qso.band }}</td>
|
|
<td>{{ qso.time|date:"H:i" }}</td>
|
|
<td>{{ qso.call }}</td>
|
|
<td class="hidden-xs">{{ qso.reportTX }}</td>
|
|
<td class="hidden-xs">{{ qso.reportRX }}</td>
|
|
<td class="hidden-xs">{{ qso.otherNo|default:"  ---" }}</td>
|
|
<td>{{ qso.refStr }}</td>
|
|
<td class="hidden-xs">{{ qso.remarks }}</td>
|
|
<td><a href="{% url "contest:logEdit" qso.id %}"><span class="glyphicon glyphicon-pencil"></span></a> <a href="{% url "contest:logDelete" qso.id %}"><span class="glyphicon glyphicon-trash"></span></a></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// set focus to fucking call field
|
|
// ...i hate javascript so much.
|
|
$('#id_call').focus();
|
|
|
|
var log = [{% for qso in qsos %}{call: "{{ qso.call }}", band: "{{ qso.band }}"}{% if not forloop.last %}, {% endif %}{% endfor %}];
|
|
|
|
function checkForDupes(e) {
|
|
var call = $("#id_call").val().toUpperCase();
|
|
var band = $("#id_band :selected").text();
|
|
|
|
var dupe = false;
|
|
for(var i=0; i<log.length; i++) {
|
|
// hide non-matching QSOs
|
|
if(log[i].call.substr(0, call.length) != call) {
|
|
$("#qso-row-" + i).hide();
|
|
} else {
|
|
$("#qso-row-" + i).show();
|
|
}
|
|
|
|
// check if dupe
|
|
if(call == log[i].call && band == log[i].band) {
|
|
dupe = true;
|
|
}
|
|
}
|
|
|
|
if(dupe) {
|
|
console.log("DUPE");
|
|
$("#id_call").css('background-color', 'red');
|
|
$("#id_band").css('background-color', 'red');
|
|
} else {
|
|
$("#id_call").css('background-color', 'white');
|
|
$("#id_band").css('background-color', 'white');
|
|
|
|
}
|
|
}
|
|
|
|
$("#id_call").on("input", checkForDupes);
|
|
$("#id_band").change(checkForDupes);
|
|
|
|
// use space to get to the next field for certain fields
|
|
function mvFocusOnSpace(e, newFocusId) {
|
|
if(e.keyCode == 32) {
|
|
$(newFocusId).focus()
|
|
return false;
|
|
}
|
|
}
|
|
|
|
$("#id_call").on("keydown", function(e) { return mvFocusOnSpace(e, "#id_otherNo"); });
|
|
$("#id_otherNo").on("keydown", function(e) { return mvFocusOnSpace(e, "#id_refStr"); });
|
|
$("#id_refStr").on("keydown", function(e) { return mvFocusOnSpace(e, "#id_call"); });
|
|
|
|
// display current time in log form
|
|
function zeropad(n) {
|
|
// srsly, how can javascript not have a printf/zeropad function?
|
|
if(n < 10)
|
|
return "0" + n;
|
|
else
|
|
return "" + n;
|
|
}
|
|
|
|
function displayTimeInForm() {
|
|
var d = new Date();
|
|
dstr = zeropad(d.getUTCHours()) + ":" + zeropad(d.getUTCMinutes()) + ":" + zeropad(d.getUTCSeconds());
|
|
$("#id_curr_time").text(dstr);
|
|
}
|
|
window.setInterval(displayTimeInForm, 200);
|
|
});
|
|
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|