Skip to content

Instantly share code, notes, and snippets.

@pradeepmurugan

pradeepmurugan/index.html

Created January 8, 2018 11:14
Show Gist options
  • Save pradeepmurugan/575c845d18ce475979d9e1493f5b5b85 to your computer and use it in GitHub Desktop.
Save pradeepmurugan/575c845d18ce475979d9e1493f5b5b85 to your computer and use it in GitHub Desktop.
Download ZIP
django app
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>Manage Users</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
</head>
</head>
<body>
<div class="container-fluid">
<center>
<div class="col-sm-5 col-md-5 col-xs-12">
<h3>Manage users</h3>
</center>
</div>
<hr style="BORDER-RIGHT: medium none; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; HEIGHT: 1px">
<div class="row-fluid">
<div class="col-sm-1 col-md-1">
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-success " id="create">Create</button>
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-danger " id="remove">Remove</button>
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-info ">Update</button>
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-primary" id="display">Display</button>
</div>
<div class="col-sm-7 ">
</div>
</div>
</div>
<br>
<div class="container-fluid">
<form id="createform" name="createform" action="/api/user/" method="POST">
<br>
<br>
<div class="col-md-1 col-sm-1"></div>
<div class="col-xs-6 col-md-3 col-sm-3">
<div class="row">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
</div>
<div class="row">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password">
</div>
<div class="row">
<label for="fullname">Full name:</label>
<input type="text" class="form-control" id="fullname" placeholder="Enter fullname" name="fullname">
</div>
<div class="row">
<label for="active">Is Active</label>
<select id="IsActive" name="IsActive">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="temp">Is Temp</label>
<select id="IsTemp" name="IsTemp">&nbsp;&nbsp;Is Temp&nbsp;&nbsp;&nbsp;
<option value="1">1</option>
<option value="2">2</option>&nbsp;&nbsp;
</select>
</div>
<div class="row">
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
<div class="container-fluid">
<form id="removeform" name="removeform" action="/deleteuser/" method="post">
<div class="col-md-1 col-sm-1"></div>
<div class="col-xs-6 col-md-3 col-sm-3">
<div class="row">
<br>
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
</div>
<div class="row">
<br>
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
<div class="container-fluid">
<form id="displayform" name="displayform" action="/api/user/" method="GET">
<div class="col-md-1 col-sm-1"></div>
<div class="col-xs-6 col-md-3 col-sm-3">
<div class="row">
<br>
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
</div>
<br>
<div class="row">
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
<div class="container">
<table id="table" class="table table-striped">
<thead>
<tr class="clickable-row" data-href="url://resource_uri">
<th data-field="id">Item ID</th>
<th data-field="username">Username</th>
<th data-field="password">Password</th>
<th data-field="IsActive">Is Active</th>
<th data-field="IsTemp">Is Temp</th>
<th input type="button" value="remove" id="rowbutton" class="btn btn-danger" data-field="resource_uri"on data-ng-click="resource_uri">R</th>
</tr>
</thead>
</table>
</div>
<script>
$(document).ready(function () {
$("#createform").hide();
$("#removeform").hide();
$("#displayform").hide();
$("#create").click(function () {
$("#removeform").hide();
$("#displayform").hide();
$("#createform").show();
});
$("#createform").submit(function (e) {
e.preventDefault();
var alpha = /^[a-zA-Z]+$/;
var form = $(this);
var action = form.attr("action");
var data = form.serializeArray();
if ((document.createform.username.value.match(alpha)) && (document.createform.pwd.value.match(alpha))) {
$.ajax({
url: '/api/user/',
dataType: 'json',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(getFormData(data)),
success: function (data) {
console.log("DATA POSTED SUCCESSFULLY" + data);
},
error: function (jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
else {
window.alert("Please enter only alphabets");
}
});
$("#remove").click(function () {
$("#createform").hide();
$("#displayform").hide();
$("#removeform").show();
});
$("#removeform").submit(function (e) {
e.preventDefault();
var form = $(this);
var action = form.attr("action");
var data = form.serializeArray();
$.ajax({
url: '/api/user',
dataType: 'json',
type: 'DELETE',
contentType: 'application/json',
data: JSON.stringify(getFormData(data)),
success: function (data) {
console.log("DATA POSTED SUCCESSFULLY" + data);
},
error: function (jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
$("#display").click(function () {
$("#createform").hide();
$("#removeform").hide();
$.getJSON("/api/user/", function (jsonFromFile) {
$('#table').bootstrapTable({
data: jsonFromFile.objects
});
});
});
});
//utility function
function getFormData(data) {
var unindexed_array = data;
var indexed_array = {};
$.map(unindexed_array, function (n, i) {
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment