203 lines
5.9 KiB
PHP
203 lines
5.9 KiB
PHP
<?php
|
|
session_start();
|
|
$activePage = 'configuration';
|
|
$activeSubPage = 'connection_profile';
|
|
include("../elements/master.php");
|
|
?>
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="../css/style.css" type="text/css">
|
|
<link rel="stylesheet" href="../css/new_connection_profile.css" type="text/css">
|
|
<link rel="stylesheet" href="../css/create_user.css" type="text/css">
|
|
</head>
|
|
<body>
|
|
<div class="user_container">
|
|
<maincontent>
|
|
<div class="usertable">
|
|
|
|
<h3>Connection Profile <?php echo $value ?></h3>
|
|
<div class="userdetails">
|
|
<form action="" class="form" id="createUserForm" method="POST">
|
|
<?php $value="hell"; ?>
|
|
<div>
|
|
<div class="col-10">
|
|
<label>Profile Name</label>
|
|
</div>
|
|
<div class="col-40">
|
|
<input type="text" name="pid" placeholder="Enter the profile name" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="col-10">
|
|
<label>Description</label>
|
|
</div>
|
|
<div class="col-40">
|
|
<input type="text" name="description" placeholder="Enter the Description" required />
|
|
</div>
|
|
</div>
|
|
|
|
<!-------------SOURCES SECTION STARTED ---------------->
|
|
|
|
<div>
|
|
<div class="col-10">
|
|
<label>Sources</label>
|
|
</div>
|
|
<div class="col-40">
|
|
<div class="multiselect">
|
|
<div class="selectBox" onclick="toggleDropdown()">
|
|
<select>
|
|
<option>Select Sources</option>
|
|
</select>
|
|
<div class="overSelect"></div>
|
|
</div>
|
|
<div id="checkboxes" class="checkboxes">
|
|
<label for="source1">
|
|
<input type="checkbox" id="source1" name="access[]" value="local" /> local
|
|
</label>
|
|
<label for="source2">
|
|
<input type="checkbox" id="source2" name="access[]" value="file1" /> file1
|
|
</label>
|
|
<label for="source3">
|
|
<input type="checkbox" id="source3" name="access[]" value="email" /> ldap
|
|
</label>
|
|
<label for="source4">
|
|
<input type="checkbox" id="source4" name="access[]" value="Node Manager" /> Active Directory
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-------------SOURCES SECTION ENDEDED ---------------->
|
|
|
|
|
|
<div class="second_sec">
|
|
<div class="options">
|
|
<div class="check">
|
|
<input type="checkbox" name="register_devices">
|
|
<label for="">Automatically Register Devices</label>
|
|
</div>
|
|
<div class="check">
|
|
<input type="checkbox" name="dot1x_recompute">
|
|
<label for="">Dot 1X recompute role from portal</label>
|
|
</div>
|
|
<div class="check">
|
|
<input type="checkbox" name="enable">
|
|
<label for="">Enable Profile</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="filter_section">
|
|
<div class="dynamic_dropdown">
|
|
<label>Filter</label>
|
|
</div>
|
|
<div class="dynamic">
|
|
<div class="filter">
|
|
<select name="access" id="access">
|
|
<option value="">Select Filter</option>
|
|
<option value="Connectiontype">Connection type</option>
|
|
<option value="Subtype">Connection Sub Type</option>
|
|
<option value="Switch">Switch</option>
|
|
<option value="Port">Port</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter hidden" id="portInputDiv">
|
|
<input type="text" name="port" placeholder="Enter port number" />
|
|
</div>
|
|
|
|
<!-- Dynamic dropdown (shown for other selections) -->
|
|
<div class="filter hidden" id="dynamicDropdownDiv">
|
|
<select name="dynamicDropdown" id="dynamicDropdown">
|
|
<!-- Options will be populated based on the selection -->
|
|
</select>
|
|
</div>
|
|
<div class="image">
|
|
<img src="../images/add_hover.png" class="plus" alt="Add Field">
|
|
<img src="../images/minus_hover.png" class="minus" alt="Remove Field">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="button">
|
|
<button type="submit">Submit</button>
|
|
</div>
|
|
|
|
<!--<div class="add_sec">
|
|
<div class="image">
|
|
<img src="../images/add_hover.png" class="plus" alt="Add Field">
|
|
<img src="../images/minus_hover.png" class="minus" alt="Remove Field">
|
|
</div>
|
|
</div> -->
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</maincontent>
|
|
</div>
|
|
|
|
<script src="../js/new_connection_profile.js"></script>
|
|
<!--<script src="../js/demo.js"></script>-->
|
|
<script src="../js/clones.js"></script>
|
|
<script>
|
|
let expanded = false;
|
|
|
|
function toggleDropdown() {
|
|
const checkboxes = document.getElementById('checkboxes');
|
|
checkboxes.style.display = expanded ? 'none' : 'block';
|
|
expanded = !expanded;
|
|
}
|
|
|
|
const checkboxElements = document.querySelectorAll('.checkboxes input[type="checkbox"]');
|
|
const selectBox = document.querySelector('.selectBox select');
|
|
const defaultOptionText = 'Select Sources';
|
|
|
|
function updateDropdownText() {
|
|
// Get all selected checkboxes
|
|
const selectedValues = Array.from(checkboxElements)
|
|
.filter(checkbox => checkbox.checked)
|
|
.map(checkbox => checkbox.value);
|
|
|
|
// Update the display in the select box based on selected checkboxes
|
|
if (selectedValues.length === checkboxElements.length) {
|
|
selectBox.options[0].textContent = "All selected"; // Update to "All selected" if all checkboxes are selected
|
|
} else if (selectedValues.length > 3) {
|
|
selectBox.options[0].textContent = `${selectedValues.length} of ${checkboxElements.length} selected`; // Show count of selected
|
|
} else {
|
|
selectBox.options[0].textContent = selectedValues.length
|
|
? selectedValues.join(', ') // Join the selected values for display
|
|
: defaultOptionText; // Reset to default text if no selection
|
|
}
|
|
}
|
|
|
|
// Add event listener to each checkbox
|
|
checkboxElements.forEach((checkbox) => {
|
|
checkbox.addEventListener('change', updateDropdownText);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|