smallnet/templates/ip.html

167 lines
5 KiB
HTML

{% extends "base.html" %}
{% block title %}Subir Circuito{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
<div class="row">
<h3>Asignación de {{ addr }}</h3>
</div>
{% if meta.locked %}
<div class="row">
<div class="alert alert-warning"><i class="fa fa-lock"></i> Esta dirección está reservada por <i>Ilúvatar</i></div>
</div>
{% endif %}
<div class="row">
<form class="form-horizontal" method="POST">
{% if meta.locked %}
<fieldset id="whole-fieldset" disabled>
{% endif %}
<div class="form-group">
<div class="col-xs-11">
<input type="checkbox" id="reserved" name="reserved"
{% if meta.reserved_by -%}
checked="checked"
{%- endif -%}>
<label for="reserved">Etiqueta:</label>
<fieldset id="label-fieldset" disabled>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control"
id="reserved-by" name="reserved-by"
{% if meta.reserved_by -%}
value="{{ meta.reserved_by }}"
{%- endif -%}
/>
</div>
<div class="col-xs-6">
{% set meta_color = "black" %}
{% if meta.color %}{% set meta_color = meta.color %}{% endif %}
{% for color in valid_colors %}
<span class="color-sample c-{{ color }}
{%- if color == meta_color %} selected{% endif -%}"
{%- if color != 'black' %} data-color="{{ color }}"{% endif %}
><i class="fa fa-square"></i></span>
{% endfor %}
<input type="hidden" id="label-color" name="label-color"
value="{{ meta.color if meta.color }}"/>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<input type="checkbox" id="dhcp" name="dhcp"
{% if meta.dhcp_pool or meta.macs %}checked="checked"{% endif %}/>
<label for="dhcp">Ofrecer por DHCP</label>
<fieldset id="dhcp-fieldset" disabled>
<div class="form-group">
<div class="col-sm-offset-1">
<input type="radio" id="dhcp-client-pool" name="dhcp-client" value="pool"
{% if meta.dhcp_pool %}checked="checked"{% endif %}/>
<label for="dhcp-client-pool">A cualquier dispositivo</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1">
<input type="radio" id="dhcp-client-specific" name="dhcp-client" value="mac"
{% if meta.macs %}checked="checked"{% endif %}/>
<label for="dhcp-client-specific">A un dispositivo específico</label>
<div class="form-group">
<fieldset id="dhcp-specific-fieldset" disabled>
<div>
<label for="dhcp-client-mac" class="col-sm-4 control-label">MAC:</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="dhcp-client-mac"
value="{{ meta.macs|join(",") }}"/>
</div>
</div>
<div>
<label for="dhcp-custom-gw" class="col-sm-4 control-label">
Gateway alternativo:
</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="dhcp-gw"
value="{{ meta.gw if meta.gw }}"/>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</fieldset>
</div>
</div>
{% if lease %}
<div class="form-group">
<div class="col-xs-12">
<div class="lease">
<i class="fa fa-circle"></i>
Otorgado a {{ lease[1] }}
{% if lease[3] != "*" %} ({{ lease[3] }}) {% endif %}<br>
<i class="fa fa-circle" style="visibility: hidden;"></i>
hasta {{ lease[0] }}
</div>
</div>
</div>
{% endif %}
{% if create_error %}
<center>
<p>Error: {{ errormsg }}</p>
</center>
{% endif %}
<div class="form-group">
<div class="col-xs-11">
<button type="submit" class="btn btn-default">Guardar</button>
</div>
</div>
{% if meta.locked %}
<fieldset disabled>
{% endif %}
</form>
</div>
<div class="row">
<a href="{{ url_for('ips') }}">Regresar</a>
</div>
<script>
$(function() {
$("#reserved").change(function() {
$("#label-fieldset").prop("disabled", !$(this).prop("checked"));
})
$("#dhcp").change(function() {
$("#dhcp-fieldset").prop("disabled", !$(this).prop("checked"));
})
$("input[type=radio]").change(function() {
$("#dhcp-specific-fieldset").prop("disabled", !$("#dhcp-client-specific").prop("checked"));
})
$(".color-sample").click(function() {
var disabled = false;
$(this).parents("fieldset").each(function() {
disabled = $(this).prop("disabled") || disabled;
});
if (disabled)
return;
$(".color-sample").removeClass("selected");
$(this).addClass("selected");
$("#label-color").val($(this).data().color);
});
$("input").change()
});
</script>
{% endblock %}