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">
	$("#lookup_btn").click(function(event) {
		event.preventDefault();
		$.getJSON(
			url="/lookup/",
			data={
				country: $("#id_country").val(),
				q: $("#id_ressource").val(),
				operator: $("#id_operator").val(),
				contract: $("#id_contract").val(),
				media: $("#id_media").val(),
			},
			success=function(data){
				console.log(data);
				$('#similar_modal').modal('show');
			}
		);
	});

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

{%block content%}
{% if messages %}
<ul class="messages">
	{% for message in messages %}
	<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|safe }}</li>
	{% endfor %}
</ul>
{% endif %}
<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>Not anymore!</i>" %}</h2>
		<p>{% trans "Large telecommunication providers want 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 and applications." %}</p>
		<p>{% trans "Now is the time to fight back!" %}</p>
		<p>{% trans "Help us chart all the ways that internet providers are violating our online freedom. Tell us about how your landline or mobile operator Internet provider restricts your connection. You can do so in less than two minutes!" %}
		<p>{% trans "We will report these violations to the European Commission and national authorities and demand action to address them." %}</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 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="info-validate">
							<form method="get" id="{{ violation.pk }}" class="confirm_form" >
								<label>{% trans "In order to <strong>confirm</strong> this report, please enter your email address" %}</label>
								<br/><input type="text" name="email" />
								<input type="submit" value="{% trans "OK" %}" />
								<input type="button" value="{% trans "Cancel" %}" class="cancel-button" />
								<input type="hidden" value="{{ violation.pk }}" />
							</form>
						</div>
					</td>
					<td class='align-right'>{{ violation.confirmations }}</td>
					<td class='align-right'><input type="button" class="confirm button" value="{% trans "Me too!" %}" />
					</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">
				<p>{% trans "Please report cases of operators restricting or throttling access to content, services or applications. For a more precise description of what to report, check our <a href='/about/#guidelines'>guidelines</a>." %}
				<form name="addForm" enctype="multipart/form-data" action="{% root_url %}/add/" method="post" class="form">
					{% csrf_token %}
					{% bootstrap_field form.resource_name %}
					{% bootstrap_field form.country %}
					{% bootstrap_field form.operator %}
					{% bootstrap_field form.contract %}
					{% bootstrap_field form.media %}
					{% bootstrap_field form.contractual %}
					<div class="collapse" id="collapseField">
						{% bootstrap_field form.temporary %}
						{% bootstrap_field form.loophole %}
						{% bootstrap_field form.type %}
						{% bootstrap_field form.resource %}
						{% bootstrap_field form.contract_excerpt %}
						{% bootstrap_field form.attachments %}
						{% bootstrap_field form.comment %}
						{% bootstrap_field form.consent %}
						{% bootstrap_field form.email %}
						{% bootstrap_field form.nick %}
						{% bootstrap_field form.email %}
						{% buttons %}
							<button type="submit" class="btn btn-primary">{% trans "save" %}</button>
						{% endbuttons %}
					</div>
				</form>
				{% buttons %}
					<button id="lookup_btn" class="btn btn-default" type="button">...</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>
			</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%}