LaOtraRed-gestor-nodos/gestor/templates/agregar_nodo.html

{% extends "base.html" %}

{% macro comprobar_error(tipo) -%}
	{% if errors is defined and errors[tipo] %} 
		<img src="/static/imgs/aviso.png" width="24" heigth="24">
		<span class="text-warning">
			({{ errors[tipo]|e }})
		</span>
	{% endif %}
{%- endmacro %}

{% block content %}

	<!-- Algo de codigo javascript -->
	<script src="/static/js/validaciones.js"></script>

	<h3>Agregar un nodo a la Red</h3>

	{% if errors is defined %}
		<div class="panel panel-warning">
			<div class="panel-body">
				<a href="#ingredientes">Errores</a> detectados, marcados con <img src="/static/imgs/aviso.png" width="24" height="24"> 
				{% if errors['excepcion'] != "" %}
					<br>
					<b>{{ errors['excepcion'] }}</b>
				{% endif %}
				
				{% if errors['nodo_similar'] != "" %}
					<br>
					<b>{{ errors['nodo_similar'] }}</b>
				{% endif %}
			</div>
		</div>
	{% endif %}

	<p>
	  Esta herramienta te permite <b>obtener</b> el software necesario para instalarlo en tu enrutador, encenderlo, conectarte a LaOtraRed y ayudar a expandirla.
	</p>

	<p>
		Únete en tres pasos:
		<ol>
			<li><a href="#cocinar_firmware">Cocinar el firmware</a></li>
			<li><a href="#instalar_firmware">Instalar el firmware generado en el enrutador</a></li>
			<li><a href="#montar_nodo">Montar tu nodo</a></li>
		</ol>
	</p>

	<h4 id="cocinar_firmware">Paso 1</h4>
	<h4>Cocinar el firmware</h4>
	<p>
		Llena el siguiente formulario y haz click en "generar imagen" para generar la imagen de firmware necesaria, se le asignará un bloque de direcciones IP exclusivo a tu nodo y se mantendrá este registro como público para que quienes quieran unirse a la red, sepan donde están los nodos más cercanos. Asegúrate de tener en cuenta <a href="#">¿qué es un nodo en la red distribuida?</a>, recuerda que al generar la imagen de firmware aceptas seguir los <a href="#">principios de convivencia</a> en LaOtraRed.
	</p>

	<p class="panel panel-warning">
		<b>Aviso:</b> La imagen de firmware se genera utilizando la herramienta de construcción del proyecto <a href="#">lede</a> y <a href="https://git.laotrared.net/LaOtraRed-dev/generador-firmwares-script">este script</a>, <b>no damos ninguna garantía</b> o nos hacemos responsables si el equipo se daña, el firmware que descargues es software libre, salvo quizás algunas pequeñas partes (<a href="#">más información</a>).
	</p>

	<p>
		Si estás de acuerdo sigamos adelante.
	</p>
	
	<!-- Formulario Nuevo nodo -->
	<h4 id="ingredientes">Ingredientes</h4>

	{% if errors is defined %}
		<div class="panel panel-warning">
			<div class="panel-body">
				<a href="#ingredientes">Errores</a> detectados, marcados con <img src="/static/imgs/aviso.png" width="24" height="24"> 
				{% if errors['excepcion'] != "" %}
					<br>
					<b>{{ errors['excepcion'] }}</b>
				{% endif %}
				
				{% if errors['nodo_similar'] is defined %}
					<br>
					<b>{{ errors['nodo_similar'] }}</b>
					<a href="/nodos/"{{ errors['id_nodo_similar'] }}>
						Este el nodo
					</a>
				{% endif %}
			</div>
		</div>
	{% endif %}

	<small>Los campos con (<b>*</b>) son obligatorios</small>
	<form name="agregar_nodo_form" id="id_agregar_nodo_form" action="/nuevo" method="POST">
		<div class="panel panel-primary">
			<div class="panel-body">
		<!-- agregar proteccion contra csrf -->
		<!-- <input name="csrfmiddlewaretoken" value="QMLnfWAR0GGoOHCddXXAUTzeU0NkyXlrdxX4Bsqd3Ijwp0hziqDhqcM8R91a9nuD" type="hidden"> -->
				<p>
					<a href="#ref_modelo" id="campo_modelo">
						<img src="../static/imgs/pregunta.png"  width="24" height="24"
							title="haz click para ver detalles"">
					</a>
					<b>Modelo de enrutador</b>:

					<br>
					<span class="text-danger">Escoge con cuidado</span> <b>*</b> 
					<span style="padding:7px; background-color:#EFE79E">
					<select id="id_modelos" name="modelos" required="" style="font-family: mono"> 
						{# modelos 2.4Ghz #}
						<option value="-">----------2.4 Ghz--------</option>
						{% for router in contexto['modelos_posibles'][0] %}
							<option value="{{ router }}">{{ router }}</option>
						{% endfor %}
							<option value="-">----------DUAL BAND (2.4 y 5 Ghz)--------</option>
						{% for router in contexto['modelos_posibles'][1] %}
							<option value="{{ router }}">{{ router }}</option>
						{% endfor %}
						<!-- <option value="generic ar71xx">generic AR71xx (no recomendado)</option> -->
					</select>
					</span>
					{# <button onclick="validarAgregarNodo()">comprobar</button> #}
					<span id="res_modelos"> </span>
					{{ comprobar_error('modelo') }}
				</p>
				<p>
					<a href="#ref_ips_publicas" id="campo_ips_publicas">
						<img src="../static/imgs/pregunta.png"  width="24" height="24"
							title="¿cúantos servidores con IP publica requieres?"">
					</a>
					<b>Número de direcciones IP públicas que necesitas:</b> <b>*</b>
					<select id="id_ips_publicas" name="ips_publicas" required="">
						<option value="14">14  máximo</option>
						<option value="30">30  máximo</option>
						<option value="62">62  máximo</option>
						<option value="126">126  máximo (condicionado)</option>
						<option value="254">254  máximo (condicionado)</option>
					</select>
					{{ comprobar_error(tipo='ips_publicas') }}
					<span id="res_ips_publicas"> </span>
				</p>
				<p>
					<a href="#ref_ips_privadas" id="campo_ips_privadas">
						<img src="../static/imgs/pregunta.png"  width="24" height="24"
							title="¿cúantos clientes esperas conecten a tu nodo?"">
					</a>
					<b>Número de direcciones IP privadas que necesitas:</b>
					<select id="id_ips_privadas" name="ips_privadas">
						<option value="30">30  máximo</option>
						<option value="62">62  máximo</option>
						<option value="126">126  máximo</option>
					</select>
					{{ comprobar_error(tipo='ips_privadas') }}
					<span id="res_ips_privadas"></span>
				</p>
				
				<h3>Datos del responsable</h3>
				<p>
					<b>Nombre(s):</b> <input id="id_nombres" name="nombres" max_length="200" type="text" required="" > <b>*</b>
					{{ comprobar_error('nombres') }}
					<span id="res_nombres"></span>
				</p>

				<p>
					<b>Apellido(s):</b> <input id="id_apellidos" name="apellidos" max_length="200" type="text" required="" > <b>*</b>
					{{ comprobar_error('apellidos') }}
					<span id="res_apellidos"></span>
				</p>
				
				<p>
					<b>Correo electrónico:</b> <input id="id_email" name="email" max_length="254" type="email" required="" > <b>*</b>
					<br>
					(<span class="text-warning">Se necesita tu <b>email</b></span> para enviarte notificaciones)
					<span id="res_email"></span>
				</p>

				<p>
					<b>Teléfono:</b> <input id="id_telf" name="telf" max_length="20" type="text"> 
					{{ comprobar_error('telf') }}
				</p>
				
				<h3>Información del nodo</h3>
				<p>
					<b>Nombre del nodo:</b> <input id="id_nombre_nodo" name="nombre_nodo" max_length="200" type="text">  *
					{{ comprobar_error('nombre_nodo') }}
					<span id="res_nombre_nodo"></span>
				</p>

				<p>
					<b>Información adicional del nodo:</b>
					<br>
					<textarea id="id_descripcion" name="descripcion" rows="4" cols="40" max_length="2599" type="text-area" placeholder="Si quieres, comenta algo de tus planes para este nodo"></textarea>
					{{ comprobar_error('descripcion') }}
				</p>

				<p>
					<b>¿Deseas compartir tu ubicación?:</b>
					SI<input type="radio" id="id_ubicacion" name="compartir_ubicacion" value="SI" checked > &nbsp;&nbsp;&nbsp;
					NO<input type="radio" id="id_ubicacion" name="compartir_ubicacion" value="NO" > 
					<br>
					<span class="text-warning">Si marcas "<b>SI</b>", permites que otros puedan ver la ubicación que proporciones de este nodo. Esto ayudará planificar enlaces con tu nodo.</span>

				</p>

				<p>
					<b>Clave de edición:</b> <input id="id_clave" name="clave" max_length="100" type="password" required="" > <b>*</b>
					<br>
					(Con esta clave podrás ajustar detalles de tu nodo a futuro, si la olvidas puedes restaurarla con tu email)
					{{ comprobar_error('clave') }}
					<span id="res_clave"></span>
				</p>
				<!-- Notas -->
				<hr>
				<h4>Detalles importantes</h4>
				<b>Modelo enrutador:</b>
				<p id="ref_modelo">
					Debes especificar el modelo de tu enrutador para que se genere la imagen de firmware correcta, esta aplicación generará una imagen de firmware para el modelo que escojas. <span class="text-danger">Si instalas la imagen de firmware en un modelo de enrutador diferente, este podría quedar inutilizable</span>.
				</p>
				<p>
					Si tu modelo de enrutador no está en la lista, puedes escojer <b>bajo tu propio riesgo</b> el modelo genérico para la arquitectura ar71xx, <code>este paso no es recomendable</code> a menos que sepas lo que haces. <a href="#campo_modelo">&#8593;</a>.
				</p>
				
				<b> IPs públicas: </b> 
				<p id="ref_ips_publicas">
					Se refiere al número de servidores públicos con direcciones IP propias que necesitas en tu nodo, típicamente no necesitarás mas de 5. (revisa <a href="#">poner servicios en la red</a> para más información) <a href="#campo_ips_publicas">&#8593;</a>.
				</p>
				
				<b> IPs privadas: </b> 
				<p id="ref_ips_privadas">
					Se refiere al número de <a href="#">dispositivos clientes</a> o consumidores de servicios que esperas se conecten a tu nodo, por defecto se asignará <b>hasta 30</b>. <a href="#campo_ips_privadas">&#8593;</a>.
				</p>

				<hr>
				<div class="row">
					<div class="col-md-4">
						<button onclick="validarAgregarNodo()"
						class="btn btn-lg btn-primary btn-block">
							generar Firmware
						</button>
						<br>
						<input type="submit" id="construccion" 
							{#class="btn btn-lg btn-primary btn-block"#}
							value="Enviar" 
							style="background-color: #FFFFD; font-size:2px; color:#FFDDFD"
							{# onclick="getEstado()" #} > 
					</div>
					<div class="col-md-8">
						Esto puede tomar algunos minutos o algunos segundos.
					</div>
				</div>

				<!-- ajax actualizaciones -->
				<div class="row" id="proceso_construccion">
					
					<script>
					
					function getEstado(){

					var request = new XMLHttpRequest();
					request.open("GET", "/nuevo/_construccion");
					request.onreadystatechange = function(){
						var div = document.getElementById("resultado");
						var cont = JSON.parse(this.responseText)
						if (this.readyState == this.DONE && this.status == 200){
							if(this.responseText != null){
								if (cont.estado == "No")
									div.innerHTML = '<span class="label label-danger">' + cont.estado + "</span>"; 
								else if(cont.estado == "construyendo")
									div.innerHTML = '<span class="label label-warning">' + cont.estado + "</span>"; 
								else if(cont.estado == "terminado")
									div.innerHTML = '<span class="label label-warning">' + cont.estado + "</span><br> <b>En 10 segundos</b> podrás descargar el firmware."; 

							}
							else {
								div.innerHTML = "Error: no data";
							}
						}
					};
					request.send();
					}
				</script>
					
					<div class="col-md-6">
						Firmware construido?
						<span id="resultado">
							<!-- controlado por ajax -->
						</span>
					</div>
					<div class="col-md-6">
						<span id="url_descarga">
							...
						</span>
					</div>
					
				</div>

			</div>
			
		</div>
		<br> 

	</form>
	<!-- --------------------- -->

	<!-- javascripts --->


	{# <script src="{{ url_for('static', filename='js/jquery.js') }}" type="text/javascript"> </script> #}
	<!-- <script src="../static/js/signals1.js'"></script> -->


	
{% endblock %}