index.html

{% extends "base.html" %}
{% load bt %}
{% load i18n %}
{% load bootstrap3 %}
{% block active_tab_home %}class="active"{% endblock %}
{% block styles %}
<link rel="stylesheet" type="text/css" media="all" href="/static/css/jquery-ui.css" />
{% endblock %}

{% block scripts %}
<script type="text/javascript">
$('.metoo').submit(function(event) {
	event.preventDefault();
	var form = $(this);
	var pk = form.attr("id").split("-")[1];
	var email = form.find("#email-" + pk).val();
	console.log("pk: " + pk + "email: " + email);

	$.ajax({
		url: "/confirm/" + pk + "/" + email,
		success: function(data) {
			form.find("div").html(data);
		}
	});
}
$("#lookup_btn").click(function(event) {
	event.preventDefault();
	$.ajax({
		dataType: "json",
		url: "/lookup/",
		data: {
			country: $("#id_country").val(),
			operator: $("#id_operator").val(),
			contract: $("#id_contract").val(),
			media: $("#id_media").val(),
			type: $("#id_type").val(),
		},
		success: function(data) {
			var filtered = data.filter(function(data) {
				return data.fields.state in ["ooscope", "duplicate"]
			});
			if (filtered.length == 0) {
				$("#lookup_btn").parent().parent().hide();
				$("#collapseField").collapse('show');
				return;
			}

			filtered = filtered.slice(0, 10);
			$.each(filtered, function(key, obj) {
				if (obj.fields.state in ["ooscope", "duplicate"]) {
					return;
				};
				$("#modal-list").append(
						"<dt>" + obj.fields.resource + "</dt>" +
						"<dd><p>" + obj.fields.editorial + "</p>" +
						"<div class=\"confirm\"><a class=\"btn btn-default\">{% trans "Me too!" %}</a>" +
						"<div class=\"info-validate float-confirm\">" +
						"<form method=\"get\" action=\"\" id=\"i" + obj.pk + "\" class=\"confirm_form\">" +
						"<div>" +
						"<label>{% trans "In order to <strong>confirm</strong> this report, please enter your email address" %}</label>" +
						"<input type=\"text\" name=\"email\" />" +
						"<input type=\"hidden\" value=\"{{obj.pk}}\" />" +
						"<input type=\"submit\" value=\"{% trans "Ok" %}\" />" +
						"</div>" +
						"</form>" +
						"</div>" +
						"</dd>"
						);
			});
			$('#similar_modal').modal('show');
			console.log("Modal displayed");
		},
		error: function(xhr, status, err) {
			console.log(err, xhr);
		}
	});
});

$("#btn_dismiss").click(function(event) {
	event.preventDefault();
	$("#similar_modal").modal('hide');
	$("#lookup_btn").parent().parent().hide();
	$("#collapseField").collapse('show');
});
</script>
{% endblock %}

{%block content%}
<div class="row">
	<div class="col-xs-12 col-md-8" id="content">
		<h2>{% trans "On the Internet, <strong>you</strong> decide what you do, right? <i>Maybe not!</i>" %}</h2>
		<p>{% trans "Telecommunication providers and Internet companies are trying to control what you do online. They want to block and throttle some of your communications, and charge you to use certain online services, content or applications. The main aim of RespectMyNet is to bring attention to these Net Neutrality violations and demand that regulators take action to stop this. " %}</p>
		<p>{% trans "The EU law recently adopted on Net Neutrality is ambiguous and the telecom regulators have the job of deciding how it should be implemented." %}
		<p>{% trans "You can help. You can report Net Neutrality violations and help the regulators protect the open Internet in Europe!" %}</p>
		<p>{% trans "Help us keep track of all the ways that Internet providers are violating our online freedoms. Tell us about how your landline or mobile Internet operator restricts your Internet connection. It will take less than two minutes!" %}</p>
		<p>{% trans "Don't hesitate to give us feedback on this application by reporting any idea or issue with RespectMyNet.eu here: <a href='https://nnmon.quadpad.lqdn.fr/feedback'>Feedback pad page</a>" %}</p>
		<h2 id="stats-title">{% trans "Statistics" %}</h2>
		<div id="stats_graph" ></div>
		<ul id="stats">
			{% for t, n in stats %}
			<li class="stat">
				<dl>
					<dt class="inline">{{t}}</dt>
					<dd class="inline"><strong>{{n}}</strong></dd>
				</dl>
			</li>
			{% endfor %}
		</ul>
		<h2 id="featured-title">{% trans "Featured Cases" %}</h2>
		<table class="table table-stripped" id="featured_cases">
			<thead>
				<tr>
					<th style="width: 70%;">{% trans "Infringing offering" %}</th>
					<th>{% trans "Confirmed" %}</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				{% for violation in violations %}
				<tr>
					<td><a href="{{ violation.get_absolute_url }}">{{ violation.operator }} ({{ violation.country|country }}) {{ violation.contract }}</a>
						<div class="well collapse" id="info-{{ violation.pk }}">
							<form method="post" class="metoo" action="/confirm/{{ violation.pk }}" id="{{ violation.pk }}">
								<div class="form-group form-inline">
									<label for"email-{{ violation.pk }}">{% trans "In order to <strong>confirm</strong> this report, please enter your email address" %}</label>
									{% csrf_token %}
									<input type="email" id="email-{{ violation.pk }}" class="form-control" name="email" placeholder="Email"/>
									<input type="hidden" id="id-{{ violation.pk }}" value="{{ violation.pk }}" />
									<div class="btn-group" role="group" aria-label="confirm-deny">
										<button class="btn btn-success">{% trans "OK" %}</ button>
											<button data-toggle="collapse" data-target="#info-{{ violation.pk}}" aria-expanded="false" aria-controls="info-{{ volation.pk }}" type="button" class="btn btn-danger" >{% trans "Cancel" %}</button>
									</div>
								</div>
							</form>
						</div>
					</td>
					<td class='align-right'>{{ violation.confirmations }}</td>
					<td class='align-right'><button type="button" class="btn btn-default" data-toggle="collapse" data-target="#info-{{ violation.pk}}" aria-expanded="false" aria-controls="info-{{ volation.pk }}">{% trans "Me too!" %}</button>
					</td>
				</tr>
				<tr>
					<td colspan="3">
						<div id="description" class='round-box'>
							<strong>{% trans "Affected Resource" %}:</strong> {{violation.resource_name}}
							{%for c in violation.comment_set.all%}
							<div class="description">{{c.comment|safe}}</div>
							<span class="submitter">{%if c.submitter_name%}{{c.submitter_name}}{%else%}{{c.submitter_email}}{%endif%}</span> - <span class="comment_date">{{c.timestamp|date:"SHORT_DATE_FORMAT" }}</span>
						</div>
						{%endfor%}
					</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
	<div id="add-case" class="col-xs-12 col-md-4">
		<div class="panel panel-info">
			<div class="panel-heading">
				<h2>{% trans "Add New Case" %}</h2>
			</div>
			<div class="panel-body">
				{% if forms.error %}
				{% for field in form %}
				{% for error in field.error %}
				<div class="alert alert-error">
					{{ error|escape }}
				</div>
				{% endfor %}
				{% endfor %}
				{% endif %}
				<p>{% trans "Please report cases of zero-rating (services which are excluded from your download limit), specialised services or the blocking, throttling or prioritisation of online services. For a more detailed description of what to report, check our <a href='/about/#guidelines'>guidelines</a>." %}
				<form name="addForm" enctype="multipart/form-data" action="/" method="post" class="form">
					{% csrf_token %}
					{% bootstrap_field form.country %}
					{% bootstrap_field form.operator %}
					{% bootstrap_field form.contract %}
					{% bootstrap_field form.media %}
					{% bootstrap_field form.type %}
					<div class="collapse" id="collapseField">
						<hr />
						{% bootstrap_field form.temporary %}
						{% bootstrap_field form.loophole %}
						{% bootstrap_field form.contractual %}
						{% bootstrap_field form.resource_name %}
						{% bootstrap_field form.resource %}
						{% bootstrap_field form.contract_excerpt %}
						{% bootstrap_field form.attachments %}
						{% bootstrap_field form.comment %}
						<hr />
						{% bootstrap_field form.consent %}
						{% bootstrap_field form.email %}
						{% bootstrap_field form.nick %}
						{% bootstrap_field form.captcha %}
						{% buttons %}
						<button type="submit" class="btn btn-primary">{% trans "save" %}</button>
						{% endbuttons %}
					</div>
				</form>
			</div>
			<div class="panel-footer">
				{% buttons %}
				<button id="lookup_btn" class="btn btn-default" type="button">{% trans "Continue" %}</button>
				{% endbuttons %}
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="similar_modal" tabindex="-1" role="dialog" aria-labelledby="SimilarModalLabel">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="SimilarModalLabel">{% trans "Similar cases" %}</h4>
			</div>
			<div class="modal-body">
				<p>{% trans "Those are cases that might be similar to yours, please feel free to add your input on those cases instead of adding yours if they overlap." %}</p>
				<dl id="modal-list">
				</dl>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" id="btn_dismiss" class="btn btn-default" data-dismiss="modal">{% trans "Dismiss" %}</button>
			</div>
		</div>
	</div>
</div>
{%endblock%}