LyricsPicker/lyricsnode/views/index.html

{% extends "base.html" %}

{% macro other %}
	<form action='/round/others/' method='POST' id='others'>
		<!-- just to avoid bouncing around with the messages -->
		<div data-alert class='alert-box secondary'>
			Awaiting input...
		</div>

		<div class='row'>
			<div class='large-12 columns'>
				<label for='others-artist'>
					Artist
				</label>
				<input type='text' placeholder='Artist' name='artist'>
			</div>

			<div class='large-12 columns'>
				<label for='others-song'>
					Song
				</label>
				<input type='text' placeholder='Song' name='song'>
			</div>

			<div class='large-12 columns'>
				<input type='submit' class='button secondary radius small' value='Add' disabled>
			</div>
		</div>
	</form>
{% endmacro %}

{% block content %}
	<div class='row'>
		<div class='large-6 columns'>
			<h3 class='subheader'>Your song</h3>
		</div>

		<div class='large-6 columns'>
			<h3 class='subheader'>Other's picks</h3>
		</div>
	</div>

	<div class='row'>
		<div class='large-6 columns' id='song'>
			<pre>{{ lyrics }}</pre>
		</div>

		<div class='large-6 columns' id='quick-add'>
			<div class='panel radius'>
				{{ other() }}
			</div>
		</div>
	</div>

	<div class='row'>
		<div class='large-6 columns'>
			<h3 class='subheader'>Tip</h3>
		</div>

		<div class='large-6 columns'>
			<h3 class='subheader'>Solution</h3>
		</div>
	</div>

	<div class='row'>
		<div class='large-6 columns' id='pick'>
			Artist: <span class='artist'>{{ acronym_artist }}</span><br/>
			Song: <span class='song'>{{ acronym_title }}</span>
		</div>

		<div class='large-6 columns' id='solution'>
			Artist: <span class='artist'>{{ song_artist }}</span><br/>
			Song: <span class='song'>{{ song_title }}</span>
		</div>
	</div>

	<div class='row'>
		<div class='large-12 columns form-close'>
			<form method='POST' action='/song/played/'>
				<input type='hidden' name='id' value='{{ id }}'>
				<a href='/' class='button radius secondary small'>Skip</a>
				<button class='button radius small'>Next</button>
			</form>
		</div>
	</div>
{% endblock %}

{% block styles %}
<style>
#song textarea {
	width: 100%;
}

#solution {
	color: black;
	background: black
}

#solution:hover {
	color: white;
	background: black;
}

.form-close {
	margin-top: 15px;
	text-align: center;
}
</style>
{% endblock %}

{% block scripts %}
<script>
$('#others').on('submit', function() {
	$('#others .alert-box').remove();

	$.ajax({
		url: '/round/others/',
		type: 'POST',
		data: $(this).serialize(),
		dataType: 'json',
		success: function (response) {
			console.log(response);
			$('#others input[name="artist"]').val('').change();
			$('#others input[name="song"]').val('').change();

			var message = [
				'<div data-alert class="alert-box ',
				response.status == 'OK'? '': 'alert',
				' radius">',
				response.message,
				'</div>'
			];
			$('#others').prepend(message.join(''));
		}
	});
	return false;
});

$('#others input[name="artist"], #others input[name="song"]').on('change', function() {
	if ($(this).val().length > 0) {
		$('#others input[type="submit"]').removeAttr('disabled');
	} else {
		$('#others input[type="submit"]').attr('disabled', true);
	}
});
</script>
{% endblock scripts %}