cqtu/templates/contest/log.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;
					}
					#id_call {
						width: 100px;
					}

				</style>

					{% crispy 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();
		var band = $("#id_band :selected").text();

		var dupe = false;
		for(var i=0; i<log.length; i++) {
			if(call == log[i].call && band == log[i].band) {
				dupe = true;
				break;
			}
		}

		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');

		}
	}

	function filterTableCalls(e) {
		var call = $("#id_call").val();
		//var band = $("#id_band :selected").text();

		for(var i=0; i<log.length; i++) {
			console.log(log[i].call.substr(0, call.length));
			if(log[i].call.substr(0, call.length) != call) {
				$("#qso-row-" + i).hide();
			} else {
				$("#qso-row-" + i).show();
			}
		}
	}

	$("#id_call").on("input", checkForDupes);
	$("#id_call").on("input", filterTableCalls);
	$("#id_band").change(checkForDupes);
});

</script>

{% endblock %}