Skip to content

Commit

Permalink
wearing shirts now works
Browse files Browse the repository at this point in the history
  • Loading branch information
@singharaj-usai
singharaj-usai committed Oct 18, 2024
1 parent e37efa8 commit b56f2a0
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 73 deletions.
2 changes: 1 addition & 1 deletion client/html/pages/catalog/catalog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
<!-- Main Content -->
<div class="container" style="margin-top: 70px">
<div class="page-header">
<h1>Shirt Catalog</h1>
<h2>Catalog</h2>
</div>
<div id="shirts-container" class="row"></div>
</div>
Expand Down
181 changes: 132 additions & 49 deletions client/js/avatar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ function loadAvatarsItems() {

let currentPage = 1;
let totalPages = 1;

function loadShirts(page = 1) {
const token = localStorage.getItem('token');
console.log('Loading shirts for user, page:', page);
Expand All @@ -31,7 +30,7 @@ function loadShirts(page = 1) {
Authorization: `Bearer ${token}`,
},
success: function (res) {
console.log('Shirts loaded successfully:', res.shirts.length);
console.log('Shirts loaded successfully:', res.shirts);
displayUserShirts(res.shirts);
updatePagination(res.currentPage, res.totalPages);
totalPages = res.totalPages;
Expand All @@ -55,26 +54,38 @@ function displayUserShirts(shirts) {
return;
}

// Get the user ID from local storage
const token = localStorage.getItem('token');
let currentUserId = null;
if (token) {
try {
const payload = JSON.parse(atob(token.split('.')[1]));
currentUserId = payload.userId;
} catch (error) {
console.error('Error decoding token:', error);
}
}

console.log('Displaying shirts:', shirts.length);
shirts.forEach((shirt) => {
if (!shirt || !shirt.Name || !shirt.ThumbnailLocation) {
if (!shirt || !shirt.Name || !shirt.FileLocation) {
console.error('Invalid shirt object:', shirt);
return;
}
const shirtHtml = generateItemHtml(
shirt.Name,
shirt.ThumbnailLocation,
shirt.creator ? shirt.creator.username : 'Unknown',
shirt.Price,
shirt._id,
'shirt'
'shirt',
shirt.creator && shirt.creator._id === currentUserId ? 'Created' : 'Owned'

);
container.append(shirtHtml);
});
}



function updatePagination(currentPage, totalPages) {
const paginationContainer = $('#pagination-container');
paginationContainer.empty();
Expand Down Expand Up @@ -134,7 +145,7 @@ function Pagination() {
});
}

function generateItemHtml(name, imageSrc, creator, id, type) {
function generateItemHtml(name, imageSrc, creator, id, type, ownership) {
return `
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center mb-3">
<div class="item-card center-block" data-id="${id}" data-type="${type}">
Expand All @@ -144,6 +155,7 @@ function generateItemHtml(name, imageSrc, creator, id, type) {
<div class="caption">
<h4 class="text-center">${name}</h4>
<p class="text-center"><b>Creator:</b> ${creator}</p>
<p class="text-center"><b>Status:</b> ${ownership}</p>
<button class="btn btn-primary wear-item" data-id="${id}" data-type="${type}">Wear</button>
</div>
</div>
Expand All @@ -152,47 +164,65 @@ function generateItemHtml(name, imageSrc, creator, id, type) {
}

function setupItemSelection() {
$(document).on('click', '.select-item', function () {
$(document).on('click', '.wear-item', function () {
const type = $(this).data('type');
const itemId = $(this).data('id');
wearItem(type, itemId);
saveAvatarSelection(type, itemId);
const isWearing = $(this).hasClass('btn-success');

if (isWearing) {
removeItem(type);
} else {
wearItem(type, itemId);
}
});

$(document).on('click', '.remove-item', function () {
const type = $(this).data('type');
removeItem(type);
});
}

function wearItem(type, itemId) {
const token = localStorage.getItem('token');
let apiUrl = '';

switch (type) {
case 'shirt':
apiUrl = `/api/shirts/${itemId}`;
break;
// Add cases for 'pants' and 'hat' when made
default:
return;
}
console.log(`Attempting to wear ${type} with ID: ${itemId}`);

$.ajax({
url: apiUrl,
method: 'GET',
url: '/api/avatar',
method: 'PUT',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
success: function (item) {
updateAvatarDisplay(type, item.thumbnailUrl); // item.ThumbnailLocation
updateCurrentlyWearing(type, item);
data: JSON.stringify({ type, itemId }),
success: function (response) {
console.log('Avatar updated successfully:', response);
updateAvatarDisplay(type, response.avatar[type]);
updateCurrentlyWearing(type, response.avatar[type]);
updateWearButton(type, itemId, true);
showAlert('success', `Wore your ${type} successfully.`);
},
error: function (xhr, status, error) {
console.error(`Error fetching ${type}:`, error);
console.error(`Error wearing ${type}:`, error);
console.error('Status:', status);
console.error('Response:', xhr.responseText);
let errorMessage = `Error wearing ${type}. Please try again later.`;
if (xhr.responseJSON && xhr.responseJSON.error) {
errorMessage = xhr.responseJSON.error;
}
showAlert('danger', errorMessage);
},
});
}

function updateAvatarDisplay(type, imageUrl) {
function updateAvatarDisplay(type, item) {
switch (type) {
case 'shirt':
$('#avatar-shirt').attr('src', imageUrl);
if (item && item.ThumbnailLocation) {
$('#avatar-shirt').attr('src', item.ThumbnailLocation);
} else {
$('#avatar-shirt').attr('src', '');
}
break;
// Add cases for 'pants' and 'hat' when i makethem
default:
Expand All @@ -203,19 +233,18 @@ function updateAvatarDisplay(type, imageUrl) {

function updateCurrentlyWearing(type, item) {
const container = $('#currently-wearing');
const existingItem = container.find(`[data-type="${type}"]`);

if (existingItem.length) {
existingItem.remove();
}
container.find(`[data-type="${type}"]`).remove();

const itemHtml = `
<div class="col-xs-6 col-sm-3" data-type="${type}">
<div class="thumbnail">
<img src="${item.ThumbnailLocation}" alt="${item.Name}" class="img-responsive">
<div class="caption">
<h5>${item.Name}</h5>
<button class="btn btn-danger btn-sm remove-item" data-type="${type}">Remove</button>
<div class="col-xs-12 col-sm-6 col-md-4" data-type="${type}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">${type.charAt(0).toUpperCase() + type.slice(1)}</h4>
</div>
<div class="panel-body">
<img src="${item.ThumbnailLocation}" alt="${item.Name}" class="img-responsive center-block" style="max-height: 100px;">
<h5 class="text-center">${item.Name}</h5>
<button class="btn btn-danger btn-block remove-item" data-type="${type}">Remove</button>
</div>
</div>
</div>
Expand All @@ -224,6 +253,40 @@ function updateCurrentlyWearing(type, item) {
container.append(itemHtml);
}

function removeItem(type) {
const token = localStorage.getItem('token');

$.ajax({
url: '/api/avatar',
method: 'PUT',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
data: JSON.stringify({ type: type, itemId: null }), // Indicate unwearing
success: function (response) {
console.log('Avatar updated successfully.');
$(`#avatar-${type}`).attr('src', '');
$(`#currently-wearing [data-type="${type}"]`).remove();
updateWearButton(type, null, false);
showAlert('info', `Unwore your ${type}.`);
},
error: function (xhr, status, error) {
console.error('Error unwearing item:', error);
showAlert('danger', 'Error unwearing the item. Please try again later.');
},
});
}

function updateWearButton(type, itemId, isWearing) {
const wearButton = $(`.wear-item[data-type="${type}"]`);
wearButton.removeClass('btn-success').addClass('btn-primary').text('Wear');

if (isWearing && itemId) {
wearButton.removeClass('btn-primary').addClass('btn-success').text('Wearing');
}
}

function loadUserAvatar() {
const token = localStorage.getItem('token');
$.ajax({
Expand All @@ -246,29 +309,37 @@ function loadUserAvatar() {

function saveAvatarSelection(type, itemId) {
const token = localStorage.getItem('token');
const avatarData = {};

switch (type) {
case 'shirt':
avatarData.shirtId = itemId;
break;
default:
return;
}
const avatarData = { type, itemId };
console.log(`Saving avatar selection: ${type}, ID: ${itemId}`);

$.ajax({
url: '/api/avatar',
method: 'PUT',
data: JSON.stringify(avatarData),
contentType: 'application/json',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
data: JSON.stringify(avatarData),
success: function (response) {
console.log('Avatar updated successfully.');
console.log('Avatar updated successfully:', response);
if (itemId) {
updateAvatarDisplay(type, response.avatar[`${type}Id`]);
updateCurrentlyWearing(type, response.avatar);
updateWearButton(type, itemId, true);
showAlert('success', `Wore your ${type} successfully.`);
} else {
$(`#avatar-${type}`).attr('src', '');
$(`#currently-wearing [data-type="${type}"]`).remove();
updateWearButton(type, null, false);
showAlert('info', `Unwore your ${type}.`);
}
},
error: function (xhr, status, error) {
console.error('Error updating avatar:', error);
console.error('Status:', status);
console.error('Response:', xhr.responseText);
showAlert('danger', `Error wearing ${type}. Please try again later.`);
},
});
}
Expand Down Expand Up @@ -303,6 +374,18 @@ function updateBodyColor(part, color) {
// to do
}

function showAlert(type, message) {
const alertHtml = `
<div class="alert alert-${type} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
${message}
</div>
`;
$('#avatar-container').prepend(alertHtml);
}

$(document).on('click', '.remove-item', function() {
const type = $(this).data('type');
removeItem(type);
Expand Down
12 changes: 6 additions & 6 deletions client/js/user-profile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -550,10 +550,9 @@ $(document).ready(function () {
// Load user's shirts
loadUserShirts(user._id);

// Initialize Bootstrap tabs
// Bootstrap tabs
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// You can add logic here to load items dynamically if needed
// console.log('Tab switched to: ' + $(e.target).attr('href'));

});
}

Expand All @@ -565,7 +564,7 @@ $(document).ready(function () {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
success: function (shirts) {
displayUserShirts(shirts);
displayUserShirts(shirts, userId);
},
error: function (xhr, status, error) {
console.error('Error fetching user shirts:', error);
Expand All @@ -576,7 +575,7 @@ $(document).ready(function () {
});
}

function displayUserShirts(shirts) {
function displayUserShirts(shirts, userId) {
const shirtsContainer = $('#user-shirts');
shirtsContainer.empty();

Expand All @@ -590,7 +589,8 @@ $(document).ready(function () {
shirt.Name,
shirt.ThumbnailLocation,
shirt.creator ? shirt.creator.username : 'Unknown',
shirt.Price
shirt.Price,
shirt.creator && shirt.creator._id === userId ? 'Created' : 'Owned'
);
shirtsContainer.append(shirtHtml);
});
Expand Down
Loading

0 comments on commit b56f2a0

Please sign in to comment.