167 lines
7.6 KiB
HTML
167 lines
7.6 KiB
HTML
<!-- edit_device.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">
|
|
<title>Edit Device</title>
|
|
</head>
|
|
{% block edit_device %}
|
|
<body>
|
|
<h2 class='title-text'>Edit Device</h2>
|
|
<form method="post" class='edit-form'>
|
|
{% csrf_token %}
|
|
<table>
|
|
<div calss="edit-section">
|
|
<div class="first-raw">
|
|
<div class="input-raw">
|
|
<span>Identifier name:</span>
|
|
<input type="text" name="identifier_name" value="liphydevice112" maxlength="50" required="" id="id_identifier_name" />
|
|
</div>
|
|
<div class="input-raw">
|
|
<span for="id_device_name">Device name:</span>
|
|
<input type="text" name="device_name" value="li-phy board" maxlength="50" required="" id="id_device_name">
|
|
</div>
|
|
</div>
|
|
<div class="first-raw">
|
|
<div class="input-raw">
|
|
<span for="id_operating_system">Operating system:</span>
|
|
<input type="text" name="operating_system" value="mac os" maxlength="50" required="" id="id_operating_system">
|
|
</div>
|
|
<div class="input-raw">
|
|
<span for="id_department">Department:</span>
|
|
<input type="text" name="department" value="main" maxlength="50" required="" id="id_department">
|
|
</div>
|
|
</div>
|
|
<div class="first-raw">
|
|
<div class="input-raw">
|
|
<span for="id_used_by">Used by:</span>
|
|
{{ form.used_by }}
|
|
</div>
|
|
<div class="input-raw">
|
|
<span for="id_zone">Zone:</span>
|
|
<input type="text" name="zone" value="usa" maxlength="50" required="" id="id_zone">
|
|
</div>
|
|
</div>
|
|
<div class="first-raw">
|
|
<div class="input-raw">
|
|
<span for="id_continents">Continents:</span>
|
|
<input type="text" name="continents" value="New York" maxlength="50" required="" id="id_continents">
|
|
</div>
|
|
<div class="input-raw">
|
|
<span for="id_region">Region:</span>
|
|
<input type="text" name="region" value="New York" maxlength="50" required="" id="id_region">
|
|
</div>
|
|
</div>
|
|
<div class="first-raw">
|
|
<div class="input-raw">
|
|
<span for="id_cluster">Cluster:</span>
|
|
<input type="text" name="cluster" value="Ithaca" maxlength="50" required="" id="id_cluster">
|
|
</div>
|
|
<div class="input-raw">
|
|
<span for="id_pod">Pod:</span>
|
|
{% comment %} <input type="text" name="pod" value="4498 Norma Avenue" maxlength="50" required="" id="id_pod"> {% endcomment %}
|
|
<input type="text" name="pod" id="id_pod" class="podTextInput">
|
|
<div id="geocoder-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</table>
|
|
|
|
{% comment %} <button class="edit-device-btn" type="submit">Save</button> {% endcomment %}
|
|
<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 %}
|
|
</form>
|
|
<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>
|