Skip to content

Commit

Permalink
added ability to edit shirt
Browse files Browse the repository at this point in the history
  • Loading branch information
@singharaj-usai
singharaj-usai committed Oct 6, 2024
1 parent 04582f7 commit 1f07e21
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 42 deletions.
72 changes: 59 additions & 13 deletions client/html/pages/my/create/create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,34 @@ <h3 class="panel-title">Create</h3>
</div>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">My Games</a>
<a href="#" class="list-group-item">My Shirts</a>
<a href="#" class="list-group-item">My T-Shirts</a>
<a href="#" class="list-group-item">My Pants</a>
<a href="#" class="list-group-item">My Models</a>
<a href="#" class="list-group-item">Building Games</a>
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-games-list" data-toggle="list" href="#my-games" role="tab" aria-controls="games">My Games</a>
<a class="list-group-item list-group-item-action" id="list-shirts-list" data-toggle="list" href="#my-shirts" role="tab" aria-controls="shirts">My Shirts</a>
</div>
</div>
<div class="col-md-10">
<!-- Games List -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">MY GAMES</h3>
<div class="tab-content">
<div id="my-games" class="tab-pane active">
<!-- Games List -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">MY GAMES</h3>
</div>
<div class="panel-body">
<div id="places-container" class="list-group"></div>
</div>
</div>
</div>
<div class="panel-body">
<div id="places-container" class="list-group"></div>
<div id="my-shirts" class="tab-pane">
<!-- Shirts List -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">MY SHIRTS</h3>
</div>
<div class="panel-body">
<div id="shirts-container" class="list-group"></div>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -247,11 +258,46 @@ <h4 class="modal-title" id="editGameModalLabel">Edit Game</h4>

</div>

<!-- Edit Shirt Modal -->
<div class="modal fade" id="editShirtModal" tabindex="-1" role="dialog" aria-labelledby="editShirtModalLabel">
<div class="modal-dialog" role="document">
<div id="shirt-error-message" class="alert alert-danger hidden"></div>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="editShirtModalLabel">Edit Shirt</h4>
</div>
<div class="modal-body">
<form id="edit-shirt-form">
<input type="hidden" id="edit-shirt-id">
<div class="form-group">
<label for="edit-shirt-title">Title:</label>
<input type="text" class="form-control" id="edit-shirt-title" required>
</div>
<div class="form-group">
<label for="edit-shirt-description">Description:</label>
<textarea class="form-control" id="edit-shirt-description" rows="3" required></textarea>
</div>
<div class="form-group">
<label>Shirt Image:</label>
<img id="current-shirt-thumbnail" src="" alt="Shirt Image" style="max-width: 100%; max-height: 200px;">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="save-shirt-changes">Save changes</button>
</div>
</div>
</div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/js/theme-loader.js"></script>
<script src="/js/auth/auth.js"></script>
<script src="/js/places.js"></script>
<script src="/js/shirts.js"></script>
</body>
</html>
122 changes: 122 additions & 0 deletions client/js/shirts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
function initializeShirts() {
loadShirts();
setupShirtToggler();
setupShirtEditModal();
}

function loadShirts() {
const token = localStorage.getItem('token');
$.ajax({
url: '/api/shirts/user',
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`
},
success: function(shirts) {
displayShirts(shirts);
},
error: function(xhr, status, error) {
console.error('Error fetching shirts:', error);
}
});
}

function displayShirts(shirts) {
const shirtsContainer = $('#shirts-container');
shirtsContainer.empty();

if (shirts.length === 0) {
shirtsContainer.append('<p>You have not created any shirts yet.</p>');
return;
}

shirts.forEach(shirt => {
const shirtElement = $(`
<div class="list-group-item">
<h4 class="list-group-item-heading">${shirt.title}</h4>
<p class="list-group-item-text">${shirt.description}</p>
<img src="${shirt.thumbnailUrl}" alt="${shirt.title}" style="max-width: 100px; max-height: 100px;">
<p>Asset ID: ${shirt.assetId}</p>
<button class="btn btn-primary edit-shirt" data-shirt-id="${shirt._id}">Edit</button>
</div>
`);
shirtsContainer.append(shirtElement);
});
}

function setupShirtToggler() {
$('#list-tab a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});

$('#list-shirts-list').on('shown.bs.tab', function (e) {
loadShirts();
});
}

function setupShirtEditModal() {
$(document).on('click', '.edit-shirt', function() {
const shirtId = $(this).data('shirt-id');
openShirtEditModal(shirtId);
});

$('#save-shirt-changes').on('click', function() {
saveShirtChanges();
});
}

function openShirtEditModal(shirtId) {
const token = localStorage.getItem('token');
$.ajax({
url: `/api/shirts/${shirtId}`,
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`
},
success: function(shirt) {
$('#edit-shirt-id').val(shirt._id);
$('#edit-shirt-title').val(shirt.title);
$('#edit-shirt-description').val(shirt.description);
$('#current-shirt-thumbnail').attr('src', shirt.thumbnailUrl);
$('#editShirtModal').modal('show');
},
error: function(xhr, status, error) {
console.error('Error fetching shirt details:', error);
}
});
}

function saveShirtChanges() {
const token = localStorage.getItem('token');
const shirtId = $('#edit-shirt-id').val();
const title = $('#edit-shirt-title').val();
const description = $('#edit-shirt-description').val();

const formData = new FormData();
formData.append('title', title);
formData.append('description', description);

$.ajax({
url: `/api/shirts/${shirtId}`,
method: 'PUT',
data: formData,
processData: false,
contentType: false,
headers: {
'Authorization': `Bearer ${token}`
},
success: function(updatedShirt) {
$('#editShirtModal').modal('hide');
loadShirts();
},
error: function(xhr, status, error) {
console.error('Error updating shirt:', error);
$('#shirt-error-message').text('Error updating shirt: ' + error).removeClass('hidden');
}
});
}

$(document).ready(function() {
initializeShirts();
});
45 changes: 16 additions & 29 deletions server/functions/api/routes/shirt.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,12 +164,12 @@ router.post('/upload', authenticateToken, (req, res, next) => {
});

// New route to update a game
router.put('/:id', authenticateToken, upload.single('thumbnail'), async (req, res) => {
router.put('/:id', authenticateToken, async (req, res) => {
try {
const { id } = req.params;
const { title, description } = req.body;

// Check if the game exists and belongs to the current user
// Check if the shirt exists and belongs to the current user
const shirt = await Shirt.findOne({ _id: id, creator: req.user.userId });
if (!shirt) {
return res.status(404).json({ error: 'Shirt not found or you do not have permission to edit it' });
Expand All @@ -178,44 +178,31 @@ router.post('/upload', authenticateToken, (req, res, next) => {
// Update shirt details
shirt.title = filter.clean(title);
shirt.description = filter.clean(description);
shirt.updatedAt = new Date(); // Explicitly set the updatedAt field
shirt.updatedAt = new Date();

// If a new thumbnail is uploaded, update it
if (req.file) {
// Delete the old thumbnail file
if (shirt.thumbnailUrl) {
const oldThumbnailPath = path.join(__dirname, '../../../../uploads', path.basename(shirt.thumbnailUrl));
fs.unlink(oldThumbnailPath, (err) => {
if (err) console.error('Error deleting old thumbnail:', err);
});
}

// Set the new thumbnail URL
shirt.thumbnailUrl = `/uploads/${req.file.filename}`;
}

// Save the updated game
await game.save();
// Save the updated shirt
await shirt.save();

res.json(shirt);
} catch (error) {
console.error('Error updating shirt:', error);
res.status(500).json({ error: 'Error updating shirt', details: error.message, stack: error.stack });
res.status(500).json({ error: 'Error updating shirt', details: error.message });
}
});

router.get('/:id', authenticateToken, async (req, res) => {
router.get('/:id', authenticateToken, async (req, res) => {
try {
const shirt = await Shirt.findById(req.params.id).populate('creator', 'username');
if (!shirt) {
return res.status(404).json({ error: 'Shirt not found' });
}
res.json(shirt);
const { id } = req.params;
const shirt = await Shirt.findOne({ _id: id, creator: req.user.userId });
if (!shirt) {
return res.status(404).json({ error: 'Shirt not found or you do not have permission to view it' });
}
res.json(shirt);
} catch (error) {
console.error('Error fetching shirt:', error);
res.status(500).json({ error: 'Error fetching shirt', details: error.message });
console.error('Error fetching shirt:', error);
res.status(500).json({ error: 'Error fetching shirt', details: error.message });
}
});
});

router.get('/user/:username', authenticateToken, async (req, res) => {
try {
Expand Down
Binary file added uploads/1728183299927-89437201_10216152954596170_8517994551216963584_n.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1f07e21

Please sign in to comment.