193 lines
8.7 KiB
HTML
193 lines
8.7 KiB
HTML
{% extends 'navbar/navbar.html' %}
|
|
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="{% static '/device/css/add_device.css' %}">
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet" />
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
|
|
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" />
|
|
<title>Add Device</title>
|
|
</head>
|
|
|
|
{% block AddDevice %}
|
|
|
|
<body>
|
|
<h2 class='add-device-tittle'>Add Device</h2>
|
|
<div class="device-add-form">
|
|
{% comment %} <form method="post" class="device-form"> {% endcomment %}
|
|
<form method="post" action="{% url 'add_device' %}" class="device-form" id="formDevice">
|
|
{% csrf_token %}
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Identifier name</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="identifier_name" value="{{ form.identifier_name.value|default_if_none:'' }}" maxlength="50" id="id_identifier_name">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Device name</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="device_name" value="{{ form.device_name.value|default_if_none:'' }}" maxlength="50" id="id_device_name">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Operating system</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="operating_system" maxlength="50" value="{{ form.operating_system.value|default_if_none:'' }}" id="id_operating_system">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Department</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="department" value="{{ form.department.value|default_if_none:'' }}" maxlength="50" id="id_department">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span for="id_used_by">>. Used by</span>
|
|
<span>...</span>
|
|
</div>
|
|
{{ form.used_by }}
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Zone</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="zone" value="{{ form.zone.value|default_if_none:'' }}" maxlength="50" id="id_zone">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Continents</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="continents" value="{{ form.continents.value|default_if_none:'' }}" maxlength="50" id="id_continents">
|
|
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Region</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="region" value="{{ form.region.value|default_if_none:'' }}" maxlength="50" id="id_region">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Cluster</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="cluster" value="{{ form.cluster.value|default_if_none:'' }}" maxlength="50" id="id_cluster">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>
|
|
<span>>. Pod</span>
|
|
<span>...</span>
|
|
</div>
|
|
<input type="text" name="pod" id="id_pod" class="podTextInput">
|
|
<div id="geocoder-container"></div>
|
|
</div>
|
|
<div class="buttonSection">
|
|
<button type="button" id="btnSubmit" class="submit-btn">>. Submit</button>
|
|
{% for field in form %}
|
|
{% if field.name == "used_by" %}
|
|
{% if field.errors %}
|
|
<div class="field-errors">
|
|
<ul class="errorlist">
|
|
{% for error in field.errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% comment %} <script src="{% static '/device/js/devices1.js' %}"></script> {% endcomment %}
|
|
<script>
|
|
mapboxgl.accessToken = '{{ mapbox_access_token }}';
|
|
var geocoder = new MapboxGeocoder({
|
|
accessToken: mapboxgl.accessToken,
|
|
types: 'address,neighborhood,locality,place,region,postcode',
|
|
placeholder: ' ',
|
|
});
|
|
geocoder.addTo('#geocoder-container');
|
|
geocoder.on('result', function(event) {
|
|
var address = event.result.place_name;
|
|
document.getElementById('id_pod').value = address;
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
attachValidationHandlers()
|
|
});
|
|
function attachValidationHandlers() {
|
|
$('#btnSubmit').click(function(){
|
|
$("#id_identifier_name").parent().removeClass("error-class");
|
|
$("#id_device_name").parent().removeClass("error-class");
|
|
$("#id_operating_system").parent().removeClass("error-class");
|
|
$("#id_department").parent().removeClass("error-class");
|
|
$("#id_used_by").parent().removeClass("error-class");
|
|
$("#id_zone").parent().removeClass("error-class");
|
|
$("#id_continents").parent().removeClass("error-class");
|
|
$("#id_region").parent().removeClass("error-class");
|
|
$("#id_cluster").parent().removeClass("error-class");
|
|
$("#id_pod").parent().removeClass("error-class");
|
|
checkValidation()
|
|
|
|
var errorCount = $(".error-class").length;
|
|
if(errorCount == 0){
|
|
$('#btnSubmit').attr('type','submit')
|
|
$("#formDevice").submit()
|
|
}else{
|
|
$('#btnSubmit').attr('type','button')
|
|
}
|
|
});
|
|
}
|
|
|
|
function checkValidation(){
|
|
let id_identifier_name=$("#id_identifier_name").val();
|
|
let id_device_name=$("#id_device_name").val();
|
|
let id_operating_system=$("#id_operating_system").val();
|
|
let id_department=$("#id_department").val();
|
|
let id_used_by=$("#id_used_by").val();
|
|
let id_zone=$("#id_zone").val();
|
|
let id_continents=$("#id_continents").val();
|
|
let id_region=$("#id_region").val();
|
|
let id_cluster=$("#id_cluster").val();
|
|
let id_pod=$("#id_pod").val();
|
|
|
|
if(id_identifier_name.length <= 0){
|
|
$("#id_identifier_name").parent().addClass("error-class");
|
|
}else if(id_device_name.length <= 0){
|
|
$("#id_device_name").parent().addClass("error-class");
|
|
}else if(id_operating_system.length <= 0){
|
|
$("#id_operating_system").parent().addClass("error-class");
|
|
}else if(id_department.length <= 0){
|
|
$("#id_department").parent().addClass("error-class");
|
|
}else if(id_used_by.length <= 0){
|
|
$("#id_used_by").parent().addClass("error-class");
|
|
}else if(id_zone.length <= 0){
|
|
$("#id_zone").parent().addClass("error-class");
|
|
}else if(id_continents.length <= 0){
|
|
$("#id_continents").parent().addClass("error-class");
|
|
}else if(id_region.length <= 0){
|
|
$("#id_region").parent().addClass("error-class");
|
|
}else if(id_cluster.length <= 0){
|
|
$("#id_cluster").parent().addClass("error-class");
|
|
}else if(id_pod.length <= 0){
|
|
$("#id_pod").parent().addClass("error-class");
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
{% endblock %}
|
|
</html>
|