File manager - Edit - /var/www/payraty/hris/resources/views/indicator/create.blade.php
Back
{{ Form::open(['url' => 'indicator', 'method' => 'post', 'id' => 'ratingForm', 'class' => 'needs-validation', 'novalidate']) }} <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="form-group"> {{ Form::label('branch_id', __('Select Branch'), ['class' => 'form-label']) }}<x-required></x-required> {{ Form::select('branch_id', $brances, null, ['class' => 'form-control ', 'required' => 'required', 'placeholder' => __('Select Branch')]) }} </div> </div> <div class="col-md-6"> <div class="form-group"> {{ Form::label('department_id', __('Select Department'), ['class' => 'form-label']) }}<x-required></x-required> {{ Form::select('department_id', [], null, ['class' => 'form-control ', 'id' => 'department_id', 'required' => 'required', 'placeholder' => __('Select Department')]) }} </div> </div> <div class="col-md-6"> <div class="form-group"> {{ Form::label('designation_id', __('Select Designation'), ['class' => 'form-label']) }}<x-required></x-required> {{ Form::select('designation_id', [], null, ['class' => 'form-control ', 'id' => 'designation_id', 'required' => 'required', 'placeholder' => __('Select Designation')]) }} </div> </div> </div> @if (empty($competencies->count())) <div class="alert alert-warning mt-3"> <i class="fas fa-exclamation-triangle"></i> <span class="text-danger">{{ __('Please first add competencies') }}<a href="{{ route('competencies.index') }}" target="_blank" class="text-primary">{{ __(' here') }}</a>.</span> </div> @endif <!-- Performance Type Selector Section --> <div class="row mt-3"> <div class="col-md-12"> <div class="form-group"> {{ Form::label('performance_type_selector', __('Add Performance Categories'), ['class' => 'form-label']) }} <select id="performanceTypeSelector" class="form-control"> <option value="">{{ __('Select Performance Type to Add') }}</option> @foreach ($performance_types as $performance_type) <option value="{{ $performance_type->id }}">{{ $performance_type->name }}</option> @endforeach </select> </div> </div> </div> <!-- Selected Performance Types Container --> <div class="row"> <div class="col-md-12"> <div id="selectedPerformanceTypes" data-performance-types="{{ base64_encode(json_encode($performance_types->toArray())) }}" data-has-performance-types="{{ (!empty($performance_types) && count($performance_types) > 0) ? '1' : '0' }}" data-has-competencies="{{ (!empty($competencies) && $competencies->count() > 0) ? '1' : '0' }}"> <!-- Selected performance types will be dynamically added here --> </div> </div> </div> </div> <div class="modal-footer"> <input type="button" value="Cancel" class="btn btn-light" data-bs-dismiss="modal"> <input type="submit" value="{{ __('Create') }}" class="btn btn-primary"> </div> {{ Form::close() }} <style> .performance-type-card { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 20px; background: #fff; padding: 15px; } .performance-type-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .rating-item { margin-bottom: 15px; padding: 10px; background-color: #f9f9f9; border-radius: 5px; } .rating-item h6 { margin-bottom: 10px; color: #333; } /* Simple Star Rating */ .star-rating { display: flex; flex-direction: row; /* Make stars go left to right */ justify-content: flex-start; direction: ltr !important; /* Force left-to-right */ gap: 5px; } .star-rating input { display: none; } .star-rating label { font-size: 30px; color: #ccc; cursor: pointer; } .star-rating input:checked~label { color: #ccc; /* Reset all unchecked to grey */ } .star-rating input:checked+label, .star-rating input:checked+label~label { color: #ffcc00; /* Highlight stars from left to the selected one */ } .star-rating label:hover, .star-rating label:hover~label { color: #ffcc00; } .btn-remove-type { background-color: #dc3545; border-color: #dc3545; color: white; border-radius: 20px; padding: 5px 12px; font-size: 12px; } .btn-remove-type:hover { background-color: #c82333; border-color: #bd2130; color: white; } .alert-warning { border-left: 4px solid #ffc107; } </style> <script> // Store selected performance types to avoid duplication let selectedPerformanceTypeIds = new Set(); // Get data from HTML data attributes const container = document.getElementById('selectedPerformanceTypes'); const performanceTypesData = JSON.parse(atob(container.getAttribute('data-performance-types'))); const hasPerformanceTypes = container.getAttribute('data-has-performance-types') === '1'; const hasCompetencies = container.getAttribute('data-has-competencies') === '1'; document.getElementById('performanceTypeSelector').addEventListener('change', function() { const selectedId = this.value; if (!selectedId) { return; } if (selectedPerformanceTypeIds.has(selectedId)) { alert('This performance type is already selected.'); this.value = ''; return; } console.log(performanceTypesData) // Find the selected performance type const selectedType = performanceTypesData.find(pt => pt.id == selectedId); if (selectedType) { addPerformanceTypeSection(selectedType); selectedPerformanceTypeIds.add(selectedId); } // Reset selector after successful addition this.value = ''; }); function addPerformanceTypeSection(performanceType) { const container = document.getElementById('selectedPerformanceTypes'); let html = ` <div class="performance-type-card" data-type-id="${performanceType.id}"> <div class="performance-type-header"> <h5>${performanceType.name}</h5> <button type="button" class="btn btn-remove-type" onclick="removePerformanceType(${performanceType.id})"> Remove </button> </div> <div class="performance-type-body"> `; // Loop through performanceType.types to get each individual type if (performanceType.types && performanceType.types.length > 0) { performanceType.types.forEach(type => { html += ` <div class="col-6"> <p>${type.name}</p> </div> <div class="col-6"> <div class="star-rating"> <input type="radio" id="star1-${type.id}" name="rating[${type.id}]" value="1"> <label for="star1-${type.id}">★</label> <input type="radio" id="star2-${type.id}" name="rating[${type.id}]" value="2"> <label for="star2-${type.id}">★</label> <input type="radio" id="star3-${type.id}" name="rating[${type.id}]" value="3"> <label for="star3-${type.id}">★</label> <input type="radio" id="star4-${type.id}" name="rating[${type.id}]" value="4"> <label for="star4-${type.id}">★</label> <input type="radio" id="star5-${type.id}" name="rating[${type.id}]" value="5"> <label for="star5-${type.id}">★</label> </div> </div> `; }); } html += ` </div> </div> `; container.insertAdjacentHTML('beforeend', html); } function removePerformanceType(typeId) { // Remove from selected set selectedPerformanceTypeIds.delete(typeId.toString()); // Remove from DOM const element = document.querySelector(`[data-type-id="${typeId}"]`); if (element) { element.remove(); } } // Form validation document.getElementById('ratingForm').addEventListener('submit', function(event) { let isValid = true; // Check if performance types and competencies exist if (!hasPerformanceTypes || !hasCompetencies) { isValid = false; alert('Performance types or competencies are missing. Please add them before submitting the form.'); event.preventDefault(); return false; } // Check if at least one performance type is selected if (selectedPerformanceTypeIds.size === 0) { isValid = false; alert('Please select at least one performance category.'); event.preventDefault(); return false; } // Validate that all rating fields are filled const ratingGroups = document.querySelectorAll('input[name^="rating["]'); const uniqueNames = new Set(); ratingGroups.forEach(input => { uniqueNames.add(input.name); }); let checkedCount = 0; uniqueNames.forEach(name => { const checkedInput = document.querySelector(`input[name="${name}"]:checked`); if (checkedInput) { checkedCount++; } }); if (checkedCount !== uniqueNames.size) { isValid = false; alert('Please provide ratings for all selected performance criteria.'); event.preventDefault(); return false; } }); // Handle department and designation dropdowns document.querySelector('select[name="branch_id"]').addEventListener('change', function() { const branchId = this.value; // Clear existing options document.getElementById('department_id').innerHTML = '<option value="">Select Department</option>'; document.getElementById('designation_id').innerHTML = '<option value="">Select Designation</option>'; if (branchId) { // Add AJAX calls here to fetch departments and designations based on branch } }); </script>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings