Introduction
a combination of HTML, CSS, and JavaScript that creates a user interface for managing deposit bank information with toggle switches representing various deposit methods. It also includes functionality for updating the UI based on user interactions and server responses. Here’s a detailed description of the different parts.
Code
@Code
ViewData("Title") = "AgentTypeBankDeposit"
End Code
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/DepositBanks.js"></script>
<style>
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 18px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
height: 26px;
margin-bottom: 0px !important;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.on {
display: none;
}
.on, .off {
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked + .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<div class="row">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="jarviswidget">
<div class="container-fluid pgCnt">
<div class="row">
<div class="col-md-12">
<span class="lbl-large">
<span class="widget-icon"><i class="fa fa-comments"></i></span>
Agent Type Bank Deposit
</span>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<div class="row mtop20">
<div class="col-md-9">
<div class="row mtop">
<div class="col-md-1 control-label text-right text-left-xs Labelcolor" style="margin-top:5px;">
<span>Status<span class="Spancolor"> *</span></span>
</div>
<div class="col-md-7">
@*<div class="row">
<div class="col-md-4"><input type="radio" id="Chk-Active" name="chkStatus" value="1" onchange="showAlert(this)" checked/> Master Distributor</div>
<div class="col-md-4"><input type="radio" id="Chk-InActive" name="chkStatus" value="0" onchange="showAlert(this)" /> Distributor</div>
<div class="col-md-4"><input type="radio" id="Chk-InActive" name="chkStatus" value="0" onchange="showAlert(this)" /> Retailer</div>
</div>*@
<div class="row">
<div class="col-md-4">
<input type="radio" id="Chk-MasterDistributor" name="chkStatus" value="1" onchange="showAlert(this)" checked> Master Distributor
</div>
<div class="col-md-4">
<input type="radio" id="Chk-Distributor" name="chkStatus" value="0" onchange="showAlert(this)"> Distributor
</div>
<div class="col-md-4">
<input type="radio" id="Chk-Retailer" name="chkStatus" value="2" onchange="showAlert(this)"> Retailer
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row mtop20">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="IDGetdeposit">
<thead>
<tr>
<th>Bank Name</th>
<th>NEFT/RTGS</th>
<th>IMPS/UPI</th>
<th>CDM</th>
<th>CASH DEPOSIT</th>
<th>CHEQUE</th>
</tr>
</thead>
<tbody>
<tr>
<td>StateBank</td>
<td>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round" onclick="getdeposit()">
<!--ADDED HTML -->
<span class="on">ON</span>
<span class="off">OFF</span>
<!--END-->
</div>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML -->
<span class="on">ON</span>
<span class="off">OFF</span>
<!--END-->
</div>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML -->
<span class="on">ON</span>
<span class="off">OFF</span>
<!--END-->
</div>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML -->
<span class="on">ON</span>
<span class="off">OFF</span>
<!--END-->
</div>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML -->
<span class="on">ON</span>
<span class="off">OFF</span>
<!--END-->
</div>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12 pull-right" style="padding-right: 0; display:none">
<button type="button" class="button btn_blue pull-right">
Update
</button>
</div>
<div class="row mtop">
<hr class="gray" />
</div>
<div class="row mbot" id="basebtn" style="display:none">
<div class="col-md-12">
<div id="dvbtnInsert" class="pull-right">
<input type="button" value="Create ✔" name="btnInsert" id="btnInsert" onclick="return fnCreateBank();" class="button btn_green">
</div>
<div style="display: none;" id="dvbtnUpdate" class="pull-right">
<input type="button" value="Submit ✔" name="btnUpdate" id="btnUpdate" onclick="return fnUpdateBank();" class="button btn_green">
</div>
<input type="button" value="← Back" id="btnBack" name="add_CPartner" class="button btn_add pull-right" onclick="fnExitBank();">
</div>
<input type="hidden" id="hdnBankId" value="" />
</div>
</div>
</div>
</div>
</article>
</div>
Script
$(document).ready(function () {
debugger;
var getobj = document.getElementById('Chk-MasterDistributor');
showAlert(getobj);
// GetfnDepositBanks();
});
function showAlert(radio) {
debugger;
console.log(radio);
if (radio && radio instanceof HTMLInputElement) {
const value = radio.value;
console.log('Value:', value);
let status = '';
// Determine status based on the value
switch (value) {
case '1':
status = 'Master Distributor';
break;
case '0':
status = 'Distributor';
break;
case '2':
status = 'Retailer';
break;
default:
status = 'Unknown Status';
}
// Display the status in an alert
alert('Selected status: ' + status);
var getstatusval = status.charAt(0);
GetfnDepositBanks(getstatusval);
console.log(getstatusval);
} else {
console.error('The parameter is not a valid HTMLInputElement');
}
}
// GET ID PROOF LIST
function GetfnDepositBanks(getstatusval) {
debugger;
try {
Progstart();
const element = document.querySelector('#Chk-Active + label'); // Adjust selector if needed
const text = element ? element.textContent : null;
console.log(text);
var lobjIDProof = {
AgentType: getstatusval,
};
$.ajax({
type: "POST",
url: getpath() + "Controller/Method",
data: JSON.stringify(lobjIDProof),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: GetPackageExclusionListResponse,
error: OnFailure
});
} catch (e) { }
}
function getdeposit() {
alert("tst");
}
function OnFailure(lobjresponse) {
if (lobjresponse != '') {
alert(lobjresponse);
}
}
function handleCheckboxChange(checkboxId, jsonString, value, id) {
debugger;
var checkbox = document.getElementById('btnEdit_' + id + "_" + checkboxId);
var datakey = $("#btnEdit_" + checkboxId).attr("data_attr");
var statusId = "0";
if (checkbox.checked) {
statusId = "1";
alert('Checked');
} else {
alert('Unchecked');
}
datakey = $("#btnEdit_" + id + "_" + checkboxId).attr("data_attr");
var lstrIdentitydesc = datakey.split("$")[0];
var lstrIdentitydesc1 = datakey.split("$")[3];
// var lstrIdentitydesc2 = datakey.split("$")[4];
var lobjIDProof = {
BankID: lstrIdentitydesc,
AgentType: lstrIdentitydesc1,
// BankID: lstrIdentitydesc,
Status: statusId,
TopupMode: value,
};
$.ajax({
type: "POST",
url: getpath() + "controller/method",
data: JSON.stringify(lobjIDProof),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: fnCreateResponse
});
}
function fnCreateResponse(fnCreateResponse) {
alert("Successfully updated");
console.log(fnCreateResponse);
}
function GetDemo(lobjresponse) {
debugger;
try {
Progstop();
var lstrResponse = JSON.parse(lobjresponse);
lstrResponse = lstrResponse[0];
localStorage.setItem('packageExclusionList', JSON.stringify(lstrResponse));
var jsonStringsd = localStorage.getItem('packageExclusionList');
if (lstrResponse.Status == "1") {
var lobjtable = lstrResponse.Data.Table;
var tableLength = document.getElementById("IDGetdeposit").rows.length;
if (tableLength > 1) {
$('#IDGetdeposit tbody').empty();
}
if (lobjtable.length > 0) {
var valarray = ["NEFT/RTGS", "IMPS/UPI", "CDM", "CASHDEPOSIT", "CHEQUE"];
for (var i = 0; i < lobjtable.length; i++) {
// strData = lobjtable[i].BankID + "$" + lobjtable[i].BankName + "$" + lobjtable[i].AccountNumber + "$" + lobjtable[i].AgentType + "$" + lobjtable[i].NEFT / RTGS + "$" + lobjtable[i].AccountNumber + IMPS / UPI + "$" + lobjtable[i].CDM + "$" + lobjtable[i].CASHDEPOSIT + "$" + lobjtable[i].CHEQUE;
const strData = lobjtable[i].BankID + "$" +
lobjtable[i].BankName + "$" +
lobjtable[i].AccountNumber + "$" +
lobjtable[i].AgentType + "$" +
lobjtable[i]['NEFT/RTGS'] + "$" + // Use bracket notation
lobjtable[i]['IMPS/UPI'] + "$" + // Use bracket notation
lobjtable[i].CDM + "$" +
lobjtable[i].CHEQUE;
tr = $('<tr/>');
tr.append("<td>" + lobjtable[i].BankName + "</td>");
var checkboxId = lobjtable[i].BankID;
var escapedJsonString = encodeURIComponent(jsonStringsd);
for (var j = 0; j < 5; j++) {
tr.append("<td>" +
"<label class='switch'>" +
"<input type='checkbox' class='checkbox-toggle' id='btnEdit_" + j + "_" + checkboxId + "' data_attr='" + strData + "' value=" + valarray[j] + " onchange='handleCheckboxChange(\"" + checkboxId + "\", decodeURIComponent(\"" + escapedJsonString + "\"), this.value,\"" + j + "\")'>" +
"<div class='slider round'>" +
"<!-- ADDED HTML -->" +
"<span class='on'>ON</span>" +
"<span class='off'>OFF</span>" +
"<!-- END -->" +
"</div>" +
"</label>" +
"</td>");
}
// tr.append("<td ><span><i class='fa fa-edit' title='Edit' style='color:#EB6724;font-size:16px;cursor:pointer;' id='btnEdit_" + lobjtable[i].CarPackageID + "' data_attr='" + strData + "' onclick=fnEdit(\"" + lobjtable[i].CarPackageID + "\")></i></span></td>");
$('#IDGetdeposit tbody').append(tr);
// $("#dvBtnAdd").show();
}
} else {
tr = $('<tr/>');
tr.append("<td colspan='3'> NO RECORD FOUND </td>");
$('#IDExclusionlist tbody').append(tr);
$("#dvBtnAdd").show();
}
} else if (lstrResponse.Status == "2") {
fnSessionTimeOut();
} else {
alert(lstrResponse.statusdesc);
}
} catch (e) {
// Handle error
}
}
HTML Structure
- A form section with radio buttons to select the agent type (Master Distributor, Distributor, Retailer).
- A table that displays various deposit methods for a bank, with checkboxes that can be toggled on or off.
- Buttons for creating, submitting, and navigating back.
CSS Styling
- Custom styles for a toggle switch with a slider.
- Use of media queries and styling adjustments to ensure the switch and table layout are visually appealing.
JavaScript Functionality
- Event listeners for changes in radio button selection and checkbox toggles.
- Functions to handle AJAX requests to update or fetch deposit bank details based on user selections.
- Error handling and response parsing from AJAX calls.
To create an article based on this code, consider focusing on the following aspects:
1. Introduction to the Interface
Explain the purpose of the web interface and how it allows users to manage deposit settings for different agent types. Mention the key features, such as the ability to toggle various deposit methods on or off and how these settings can be saved or updated.
2. Detailed Walkthrough
HTML Structure
- Describe the layout and organization of the HTML elements. Explain the role of each section, such as the form for selecting the agent type and the table for managing bank deposit methods.
- Include screenshots or code snippets to illustrate how the HTML is structured.
CSS Styling
- Explain the custom styles applied to the toggle switches, including the CSS for the slider and its active/inactive states.
- Discuss how these styles contribute to the user interface’s look and feel, and how they enhance usability.
JavaScript Functionality
- Provide an overview of the JavaScript functions used to handle user interactions. Explain how the showAlert function provides feedback based on the selected radio button and how AJAX requests are used to fetch or update data.
- Detail the AJAX functions (GetfnDepositBanks, handleCheckboxChange, etc.), explaining their purpose, how they process data, and how they interact with the backend.
3. Code Example
Include the complete code snippet (or a simplified version) in your article, with comments explaining each part. This helps readers understand the implementation and how they can adapt it for their own use.
4. Practical Applications
Discuss potential use cases for this interface, such as managing banking details for financial applications or customizing deposit settings based on user roles. Highlight any customization options or potential improvements.
5. Conclusion
Summarize the key points covered in the article and how the code can be leveraged or modified for different applications. Encourage readers to experiment with the code and adapt it to their needs.