Sayli.Parab/cheerstothe_season_2.0
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

Merge pull request #138 from WDI-Ideas/sayaliP

Browse Source 
Sayali p
This commit is contained in:
CodewithSayali
2024-06-13 16:00:36 +05:30
committed by GitHub
parent ca337cbc68 2e454db0f6
commit 9a00294272
1 changed files with 171 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
resources/views/Admin/pages/manage_profile/manage_profile.blade.php
View File

@@ -9,24 +9,24 @@ $currentPage = 'manage_profile';
<!-- BEGIN LOADER -->
<div class="layout-px-spacing">
<div class="middle-content container-xxl p-0">
<div class="row layout-top-spacing ">
<div class="top-tabel">
<div class="row">
<div class="col-md-4">
<h6 class="card-title">Profile</h6>
</div>
<div class="col-md-8">
<div class="layout-px-spacing">
<div class="middle-content container-xxl p-0">
<div class="row layout-top-spacing ">
<div class="top-tabel">
<div class="row">
<div class="col-md-4">
<h6 class="card-title">Profile</h6>
</div>
<div class="col-md-8">
</div>
</div>
</div>
</div>
<div class="row widget-content widget-content-area br-8 position-btn m-auto py-3" style="overflow: auto;">
<div class="row m-0 p-0 w-100">
<div class="col-md-6 d-flex align-items-center justify-content-start mb-4" style="gap: 25px;">
<!-- <div>
</div>
</div>
<div class="row widget-content widget-content-area br-8 position-btn m-auto py-3" style="overflow: auto;">
<div class="row m-0 p-0 w-100">
<div class="col-md-6 d-flex align-items-center justify-content-start mb-4" style="gap: 25px;">
<!-- <div>
<label id="image-upload-button" for="profileImage">
<i class="fa fa-camera" aria-hidden="true"></i>
</label>
@@ -34,74 +34,80 @@ $currentPage = 'manage_profile';
<div id="imagePreview" style="background-image: url('../src/assets/img/mahima.jpg')">
</div>
</div> -->
<!-- <div class="col-md-6 mb-3">
<label id="image-upload-button" for="profileImage">
<i class="fa fa-camera" aria-hidden="true"></i>
</label>
<input class="d-none" type="file" id="profileImage" name="profile_photo" accept="image/*" onchange="previewImage(event)"> -->
<!-- <div id="imagePreview" name="imagePreview" style="background-image: url('{{ $user->profile_photo ? asset('storage/app/public/uploads/admin_images/' . $user->profile_photo) : asset('storage/app/public/uploads/admin_images/user.png') }}')">
</div>
</div> -->
<div>
@if(isset($user))
<h5 class="mb-1" style="font-weight: 700;">{{ $user->first_name }}</h5>
<p class="m-0">{{ $user->phone_number }}</p>
<p class="m-0">{{ $user->address_line1 }}</p>
@else
<p>No user found with ID 1.</p>
@endif
</div>
</div>
<div class="col-md-6 d-flex justify-content-end">
<a class="download-btn-custom mt-3 custom-width-15 m-0" href="{{route('logout')}}" style="height: fit-content;">
<span>Logout</span>
</a>
</div>
</div>
<form method="post" action="" id="updateProfileForm" enctype="multipart/form-data">
@csrf
<div class="row m-0 p-0 w-75 mx-auto">
<div class="col-md-6 mb-3">
<label id="image-upload-button" for="profileImage">
<i class="fa fa-camera" aria-hidden="true"></i>
</label>
<input class="d-none" type="file" id="profileImage" name="profile_photo" accept="image/*" onchange="previewImage(event)">
<!-- <input class="d-none" type="file" id="profileImage" name="profile_photo" accept="image/*"> -->
<div id="imagePreview" name="imagePreview" style="background-image: url('{{ $user->profile_photo ? asset('storage/app/public/uploads/admin_images/' . $user->profile_photo) : asset('storage/app/public/uploads/admin_images/user.png') }}')">
</div>
</div>
<!-- <div>
<h5 class="mb-1" style="font-weight: 700;">Akanksha Surve</h5>
<p class="m-0">12345678</p>
<p class="m-0">Mumbai, Maharashtra</p>
</div> -->
<div>
@if(isset($user))
<h5 class="mb-1" style="font-weight: 700;">{{ $user->first_name }}</h5>
<p class="m-0">{{ $user->phone_number }}</p>
<p class="m-0">{{ $user->address_line1 }}</p>
@else
<p>No user found with ID 1.</p>
@endif
</div>
</div>
<div class="col-md-6 d-flex justify-content-end">
<a class="download-btn-custom mt-3 custom-width-15 m-0" href="{{route('logout')}}" style="height: fit-content;">
<span>Logout</span>
</a>
</div>
<div class="col-md-6 mb-3">
</div>
<form method="post" action="" id="updateProfileForm" enctype="multipart/form-data">
@csrf
<div class="row m-0 p-0 w-75 mx-auto">
<div class="col-md-6 mb-3">
<label for="">First Name</label>
<input class="form-control" type="text" value="{{ $user->first_name }}" id="first_name"
name="first_name" maxlength="15" required>
</div>
<div class="col-md-6 mb-3">
<label for="">Last Name</label>
<input class="form-control" type="text" value="{{ $user->last_name }}" id="last_name"
name="last_name" maxlength="15" required>
</div>
<div class="col-md-6">
<label for="">Phone Number</label>
<input class="form-control" type="tel" value="{{ $user->phone_number }}" id="phone_number"
name="phone_number" maxlength="10" required>
</div>
<div class="col-md-6">
<label for="">Email Address</label>
<input class="form-control" type="email" value="{{ $user->email_address }}"
id="email_address" name="email_address" required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
</div>
<div class="col-md-12 mt-3">
<button type="submit" class="download-btn-custom mt-3 custom-width-10 mx-auto update_profile"
id="updates_profile">Save</button>
</div>
</div>
</form>
<div class="col-md-6 mb-3">
<label for="">First Name</label>
<input class="form-control" type="text" value="{{ $user->first_name }}" id="first_name" name="first_name" maxlength="15" required>
</div>
<div class="col-md-6 mb-3">
<label for="">Last Name</label>
<input class="form-control" type="text" value="{{ $user->last_name }}" id="last_name" name="last_name" maxlength="15" required>
</div>
<div class="col-md-6">
<label for="">Phone Number</label>
<input class="form-control" type="tel" value="{{ $user->phone_number }}" id="phone_number" name="phone_number" maxlength="10" required>
</div>
<div class="col-md-6">
<label for="">Email Address</label>
<input class="form-control" type="email" value="{{ $user->email_address }}" id="email_address" name="email_address" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
</div>
<div class="col-md-12 mt-3">
<button type="submit" class="download-btn-custom mt-3 custom-width-10 mx-auto update_profile" id="updates_profile">Save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@endsection
@@ -149,106 +155,107 @@ $currentPage = 'manage_profile';
}
</script>
<script>
$(document).ready(function() {
let base_url = url_path;
// Initialize form validation
$(document).ready(function() {
let base_url = url_path;
// Initialize form validation
$.validator.addMethod("lettersOnly", function(value, element) {
return this.optional(element) || /^[a-zA-Z]+$/.test(value);
}, "Please enter alphabetic characters only and spaces are not allowed");
$.validator.addMethod("lettersOnly", function(value, element) {
return this.optional(element) || /^[a-zA-Z]+$/.test(value);
}, "Please enter alphabetic characters only and spaces are not allowed");
$('#updateProfileForm').validate({
rules: {
first_name: {
required: true,
lettersOnly: true
},
last_name: {
required: true,
lettersOnly: true
},
phone_number: {
required: true,
minlength: 10,
maxlength: 10,
digits: true // Ensure only digits are entered
},
email_address: {
required: true,
email: true // Ensure valid email format
},
profileImage: {
required: true,
accept: 'image/*' // Ensure only image files are accepted
}
$('#updateProfileForm').validate({
rules: {
first_name: {
required: true,
lettersOnly: true
},
messages: {
// Custom error messages for each field if needed
first_name: {
required: 'Please enter your first name',
},
last_name: {
required: 'Please enter your last name',
},
phone_number: {
required: 'Please enter your phone number',
minlength: 'Phone number must be 10 digits long',
maxlength: 'Phone number must be 10 digits long',
digits: 'Please enter only digits'
},
email_address: {
required: 'Please enter your email address',
email: 'Please enter a valid email address'
},
profileImage: {
required: 'Please select a profile photo',
accept: 'Only image files are allowed'
}
last_name: {
required: true,
lettersOnly: true
},
errorClass: 'error-message',
submitHandler: function(form) {
// Form is valid, proceed with form submission
var formData = new FormData(form);
// Get the selected image file
var profileImage = $('#profileImage')[0].files[0];
// Append the image file to the FormData object
formData.append('profile_photo', profileImage);
$.ajax({
type: 'POST',
url: '{{ route('update.profile') }}',
data: formData,
beforeSend:function(){
$('#updates_profile').html('Please wait...');
$('#updates_profile').attr('disabled', true);
},
processData: false,
contentType: false,
success: function(response) {
if (response.status === 200) {
toastr.success("Profile Updated Successfully");
window.location.href = base_url + "/profile";
} else {
toastr.error("Error updating profile");
}
},
error: function(xhr, status, error) {
if (xhr.responseJSON && xhr.responseJSON.error) {
toastr.error(xhr.responseJSON.error);
} else {
toastr.error('Error updating profile');
}
console.log(xhr.responseText);
}
});
$('#updates_profile').attr('disabled', false);
$('#updates_profile').text('Submit');
phone_number: {
required: true,
minlength: 10,
maxlength: 10,
digits: true // Ensure only digits are entered
},
email_address: {
required: true,
email: true // Ensure valid email format
},
profileImage: {
required: true,
accept: 'image/*' // Ensure only image files are accepted
}
},
messages: {
// Custom error messages for each field if needed
first_name: {
required: 'Please enter your first name',
},
last_name: {
required: 'Please enter your last name',
},
phone_number: {
required: 'Please enter your phone number',
minlength: 'Phone number must be 10 digits long',
maxlength: 'Phone number must be 10 digits long',
digits: 'Please enter only digits'
},
email_address: {
required: 'Please enter your email address',
email: 'Please enter a valid email address'
},
profileImage: {
required: 'Please select a profile photo',
accept: 'Only image files are allowed'
}
},
errorClass: 'error-message',
submitHandler: function(form) {
// Form is valid, proceed with form submission
var formData = new FormData(form);
// Get the selected image file
var profileImage = $('#profileImage')[0].files[0];
// Append the image file to the FormData object
formData.append('profile_photo', profileImage);
$.ajax({
type: 'POST',
url: '{{ route('
update.profile ') }}',
data: formData,
beforeSend: function() {
$('#updates_profile').html('Please wait...');
$('#updates_profile').attr('disabled', true);
},
processData: false,
contentType: false,
success: function(response) {
if (response.status === 200) {
toastr.success("Profile Updated Successfully");
window.location.href = base_url + "/profile";
} else {
toastr.error("Error updating profile");
}
},
error: function(xhr, status, error) {
if (xhr.responseJSON && xhr.responseJSON.error) {
toastr.error(xhr.responseJSON.error);
} else {
toastr.error('Error updating profile');
}
console.log(xhr.responseText);
}
});
$('#updates_profile').attr('disabled', false);
$('#updates_profile').text('Submit');
}
});
});
</script>
});
</script>
@endsection
@endsection