Spaces:
Sleeping
Sleeping
Create templates/index.html
Browse files- templates/index.html +66 -0
templates/index.html
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Create Pole Record</title>
|
| 7 |
+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
| 8 |
+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
| 9 |
+
</head>
|
| 10 |
+
<body>
|
| 11 |
+
<div class="container mt-5">
|
| 12 |
+
<h2>Create Pole Record</h2>
|
| 13 |
+
<form id="createPoleForm">
|
| 14 |
+
<div class="form-group">
|
| 15 |
+
<label for="name">Pole Name:</label>
|
| 16 |
+
<input type="text" class="form-control" id="name" required>
|
| 17 |
+
</div>
|
| 18 |
+
<div class="form-group">
|
| 19 |
+
<label for="powerRequired">Power Required:</label>
|
| 20 |
+
<input type="number" class="form-control" id="powerRequired" required>
|
| 21 |
+
</div>
|
| 22 |
+
<div class="form-group">
|
| 23 |
+
<label for="rfidTag">RFID Tag:</label>
|
| 24 |
+
<input type="text" class="form-control" id="rfidTag" required>
|
| 25 |
+
</div>
|
| 26 |
+
<div class="form-group">
|
| 27 |
+
<label for="locationLat">Location Latitude:</label>
|
| 28 |
+
<input type="number" step="any" class="form-control" id="locationLat" required>
|
| 29 |
+
</div>
|
| 30 |
+
<div class="form-group">
|
| 31 |
+
<label for="locationLong">Location Longitude:</label>
|
| 32 |
+
<input type="number" step="any" class="form-control" id="locationLong" required>
|
| 33 |
+
</div>
|
| 34 |
+
<button type="submit" class="btn btn-primary">Create Pole</button>
|
| 35 |
+
</form>
|
| 36 |
+
<div id="responseMessage" class="mt-3"></div>
|
| 37 |
+
</div>
|
| 38 |
+
|
| 39 |
+
<script>
|
| 40 |
+
$('#createPoleForm').on('submit', function(e) {
|
| 41 |
+
e.preventDefault();
|
| 42 |
+
|
| 43 |
+
const poleData = {
|
| 44 |
+
name: $('#name').val(),
|
| 45 |
+
powerRequired: $('#powerRequired').val(),
|
| 46 |
+
rfidTag: $('#rfidTag').val(),
|
| 47 |
+
locationLat: $('#locationLat').val(),
|
| 48 |
+
locationLong: $('#locationLong').val(),
|
| 49 |
+
};
|
| 50 |
+
|
| 51 |
+
$.ajax({
|
| 52 |
+
url: 'http://localhost:5000/create_pole', // Flask API endpoint
|
| 53 |
+
type: 'POST',
|
| 54 |
+
contentType: 'application/json',
|
| 55 |
+
data: JSON.stringify(poleData),
|
| 56 |
+
success: function(response) {
|
| 57 |
+
$('#responseMessage').html('<div class="alert alert-success">Pole record created successfully!</div>');
|
| 58 |
+
},
|
| 59 |
+
error: function(error) {
|
| 60 |
+
$('#responseMessage').html('<div class="alert alert-danger">Failed to create pole record!</div>');
|
| 61 |
+
}
|
| 62 |
+
});
|
| 63 |
+
});
|
| 64 |
+
</script>
|
| 65 |
+
</body>
|
| 66 |
+
</html>
|