cqtu/templates/contest/log.html

162 lines
4.1 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;
}
</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">noot</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>Nr-S</th>
<th>Band</th>
<th>UTC</th>
<th>Call</th>
<th class="hidden-xs">RST-S</th>
<th class="hidden-xs">RST-R</th>
<th class="hidden-xs">Nr-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 }}</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.getHours()) + ":" + zeropad(d.getMinutes()) + ":" + zeropad(d.getSeconds());
$("#id_curr_time").text(dstr);
}
window.setInterval(displayTimeInForm, 200);
});
</script>
{% endblock %}