chess/application/views/api_view.php

340 lines
12 KiB
PHP

<html>
<head>
<title>CURD REST API in Codeigniter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Create CRUD REST API in Codeigniter - 4</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
<h3 class="panel-title">CRUD REST API in Codeigniter</h3>
</div>
<div class="col-md-6" align="right">
<button type="button" id="add_button" class="btn btn-info btn-xs">Add</button>
</div>
</div>
</div>
<div class="panel-body">
<span id="success_message"></span>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Sr no</th>
<th>tournament Name</th>
<th>Entry Fee</th>
<th>Srart Date</th>
<th>End Date</th>
<th>Win Amount</th>
<th>Time Slot</th>
<th>Round</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<div id="userModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="user_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add User</h4>
</div>
<div class="modal-body">
<label>Enter Tournament Name</label>
<input type="text" name="tname" id="tname" class="form-control" />
<span id="tname_error" class="text-danger"></span>
<br />
<label>Enter Tournament Entry Fee</label>
<input type="text" name="entry_fee" id="entry_fee" class="form-control" />
<span id="entry_fee_error" class="text-danger"></span>
<br />
<label>Enter Tournament Start Date</label>
<input type="date" name="start_date" id="start_date" class="form-control" />
<span id="start_date_error" class="text-danger"></span>
<br />
<label>Enter Tournament End Date</label>
<input type="date" name="end_date" id="end_date" class="form-control" />
<span id="end_date_error" class="text-danger"></span>
<br />
<label>Enter Tournament Win Amount</label>
<input type="text" name="win_amount" id="win_amount" class="form-control" />
<span id="win_amount_error" class="text-danger"></span>
<br />
<label>Enter Tournament Time Slot</label>
<?php
// Assuming you have fetched data from 'tbl_time_slot' and stored it in $time_slots
$time_slots = $this->db->get('tbl_time_slot')->result_array();
?>
<select class="form-select mb-3" name="time_slot" aria-label="Default select example">
<option selected>Select Time Slot</option>
<?php foreach ($time_slots as $time_slot) { ?>
<option value="<?php echo $time_slot['id']; ?>"><?php echo $time_slot['time_slot']; ?></option>
<?php } ?>
</select>
<div class="mb-3 col-md-6 form-group">
<label class="form-label">Round</label>
<div class="input-group">
<input type="text" class="form-control" name="round[]" placeholder=""
required="" value="">
<button type="button" id="btnAdd1" class="btn btn-sm btn-primary"><i
class="ri-add-line"></i>Add Round</button>
</div>
</div>
<!-- <label for="rounds">Number of Rounds:</label>
<input type="number" id="round" name="round[]" min="1" required>-->
<div id="TextBoxContainer1"></div>
<span id="entry_fee_error" class="text-danger"></span>
<br />
</div>
<div class="modal-footer">
<input type="hidden" name="tid" id="user_id" />
<input type="hidden" name="data_action" id="data_action" value="Insert" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"<?php echo base_url(); ?>test_api/action",
method:"POST",
data:{data_action:'fetch_all'},
success:function(data)
{
$('tbody').html(data);
}
});
}
fetch_data();
$('#add_button').click(function(){
$('#user_form')[0].reset();
$('.modal-title').text("Add User");
$('#action').val('Add');
$('#data_action').val("Insert");
$('#userModal').modal('show');
});
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
var formData = new FormData(this);
// Log form data to console for debugging
for (var pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
$.ajax({
url:"<?php echo base_url() . 'test_api/action' ?>",
method:"POST",
data:$(this).serialize(),
dataType:"json",
success:function(data)
{
if(data.success)
{
$('#user_form')[0].reset();
$('#userModal').modal('hide');
fetch_data();
if($('#data_action').val() == "Insert")
{
$('#success_message').html('<div class="alert alert-success">Data Inserted</div>');
}
}
if(data.error)
{
$('#first_name_error').html(data.first_name_error);
$('#last_name_error').html(data.last_name_error);
}
}
})
});
$(document).on('click', '.edit', function(){
var user_id = $(this).attr('id');
$.ajax({
url: "<?php echo base_url(); ?>test_api/action",
method: "POST",
data: { tid: user_id, data_action: 'fetch_single' },
dataType: "json",
success: function(data) {
if (data.success) {
$('#tname').val(data.data.tname);
$('#entry_fee').val(data.data.entry_fee);
$('#start_date').val(data.data.start_date);
$('#end_date').val(data.data.end_date);
$('#win_amount').val(data.data.win_amount);
$('#time_slot').val(data.data.time_slot);
$('.modal-title').text('Edit User');
$('#user_id').val(user_id);
$('#action').val('Edit');
$('#data_action').val('Edit');
$('#userModal').modal('show');
} else {
console.log("Error: " + data.message);
}
}
});
});
$(document).on('click', '.round', function(){
var user_id = $(this).attr('tid');
$.ajax({
url: "<?php echo base_url(); ?>test_api/action",
method: "POST",
data: { tid: user_id, data_action: 'fetch_single' },
dataType: "json",
success: function(data) {
if (data.success) {
$('#tname').val(data.data.tname);
$('#entry_fee').val(data.data.entry_fee);
$('#start_date').val(data.data.start_date);
$('#end_date').val(data.data.end_date);
$('#win_amount').val(data.data.win_amount);
$('#time_slot').val(data.data.time_slot);
$('.modal-title').text('Edit User');
$('#user_id').val(user_id);
$('#action').val('Edit');
$('#data_action').val('Edit');
$('#userModal').modal('show');
} else {
console.log("Error: " + data.message);
}
}
});
});
$(document).on('click', '.delete', function(){
var user_id = $(this).attr('id');
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
url:"<?php echo base_url(); ?>test_api/action",
method:"POST",
data:{user_id:user_id, data_action:'Delete'},
dataType:"JSON",
success:function(data)
{
if(data.success)
{
$('#success_message').html('<div class="alert alert-success">Data Deleted</div>');
fetch_data();
}
}
})
}
});
});
</script>
<script>
$(document).ready(function () {
// Add Round Button
$("#btnAdd1").on("click", function () {
var div = $("<div class='row'/>");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer1").append(div);
});
// Remove Round Button
$("#TextBoxContainer1").on("click", ".remove", function () {
$(this).closest(".row").remove();
});
// Other existing code...
});
function GetDynamicTextBox(value) {
var uniqueId = Date.now(); // Generate a unique ID
return '<div class="mb-3 col-md-6 form-group">' +
'<label class="form-label">round</label>' +
'<div class="input-group">' +
'<input type="text" class="form-control" name="round[]" placeholder="" required="">' +
'<button type="button" class="remove btn btn-danger btn-sm" data-id="' + uniqueId + '"><i class="ri-close-fill"></i></button>' +
'</div>' +
'</div>';
}
</script>
<script>
$(function() {
$("#btnAdd2").bind("click", function() {
var div = $("<div class=''/>");
div.html(GetDynamicTextBox2(""));
$("#TextBoxContainer2").append(div);
});
$("body").on("click", "#DeleteRow1", function() {
$(this).parents("#row").remove();
})
});
function GetDynamicTextBox2(value) {
// console.log(i);
return ' <div id="row" class="row">' +
'<div class="mb-3 col-md-6 form-group">' +
'<label class="form-label">round</label>' +
'<div class="input-group">' +
'<input type="text" class="form-control" placeholder="" required="">' +
'<button type="button" value="Remove" id="DeleteRow1" class="remove btn btn-danger btn-sm">' +
'<i class="ri-close-fill"></i></button></div></div>'
}
</script>