From ccae4c19f98a960da659e8eaff785ef3eebc5924 Mon Sep 17 00:00:00 2001
From: singharaj usai <djjd22938@gmail.com>
Date: Sat, 5 Oct 2024 11:26:59 -0400
Subject: [PATCH] new places layout, change this page into develop page work in
 progress

---
 client/html/pages/my/places/places.html | 30 ++++++--
 client/js/places.js                     | 92 +++++++++++++------------
 2 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/client/html/pages/my/places/places.html b/client/html/pages/my/places/places.html
index 1c4a2b1..62c55da 100644
--- a/client/html/pages/my/places/places.html
+++ b/client/html/pages/my/places/places.html
@@ -23,11 +23,34 @@
     <div id="navbar-container"></div>
    
     <!-- Main Content -->
-    <div class="container" style="margin-top: 70px;">
-        <h2>My Places</h2>
-        <div id="places-container" class="row"></div>
+    <div class="container-fluid" style="margin-top: 20px;">
+        <div class="row">
+            <div class="col-md-2">
+                <!-- Sidebar -->
+                <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>
+            </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>
+                    <div class="panel-body">
+                        <div id="places-container" class="list-group"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
+    
  <!-- Edit Game Modal -->
 <div class="modal fade" id="editGameModal" tabindex="-1" role="dialog" aria-labelledby="editGameModalLabel">
     <div class="modal-dialog" role="document">
@@ -194,7 +217,6 @@ <h4 class="modal-title" id="editGameModalLabel">Edit Game</h4>
     <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/theme-loader.js"></script>
     <script src="/js/places.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/client/js/places.js b/client/js/places.js
index 80cd79f..364f070 100644
--- a/client/js/places.js
+++ b/client/js/places.js
@@ -53,53 +53,59 @@ $(document).ready(function () {
     
         if (games.length === 0) {
             const noPlacesHtml = `
-                <div class="col-md-12">
-                    <div class="panel panel-primary">
-                        <div class="panel-heading">
-                            <h3 class="panel-title">My Places</h3>
-                        </div>
-                        <div class="panel-body text-center">
-                            <i class="bi bi-emoji-frown" style="font-size: 64px; color: #999; margin-bottom: 20px;"></i>
-                            <h3>No Places Yet</h3>
-                            <p class="lead">You haven't created any places yet. Start building your first game!</p>
-                            <a href="/upload" class="btn btn-primary btn-lg mt-3">
-                                <i class="bi bi-plus-circle"></i> Create Your First Place
-                            </a>
-                        </div>
-                    </div>
+                <div class="list-group-item text-center">
+                    <h4>No Places Yet</h4>
+                    <p>You haven't created any places yet. Start building your first game!</p>
+                    <a href="/upload" class="btn btn-primary">
+                        <i class="bi bi-plus-circle"></i> Create Your First Place
+                    </a>
                 </div>
             `;
             placesContainer.html(noPlacesHtml);
         } else {
+            const tableHtml = `
+                <table class="table table-striped table-hover">
+                    <thead>
+                        <tr>
+                            <th>Thumbnail</th>
+                            <th>Title</th>
+                            <th>Description</th>
+                            <th>Genre</th>
+                            <th>Max Players</th>
+                            <th>Last Updated</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="games-table-body">
+                    </tbody>
+                </table>
+            `;
+            placesContainer.html(tableHtml);
+            
+            const tableBody = $('#games-table-body');
             games.forEach(game => {
                 const lastUpdatedInfo = game.updatedAt && game.createdAt !== game.updatedAt
-                    ? `<p><strong>Last Updated:</strong> ${new Date(game.updatedAt).toLocaleString()}</p>`
-                    : '';
-        
-                    const gameElement = `
-                    <div class="col-md-4 col-sm-6 mb-4">
-                      <div class="panel panel-primary">
-                          <div class="panel-heading">
-                              <h3 class="panel-title">
-                                  <a href="/game?id=${game._id}" style="color: white;">${escapeHtml(game.title)}</a>
-                              </h3>
-                          </div>
-                          <div class="panel-body">
-                              <div style="position: relative; width: 100%; padding-top: 56.25%;">
-                                  ${game.year ? `<span class="badge" style="position: absolute; top: 10px; left: 10px; z-index: 1; background-color: #337ab7;">${game.year}</span>` : ''}
-                                  <img src="${game.thumbnailUrl}" alt="${escapeHtml(game.title)}" class="img-responsive" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
-                              </div>
-                              <p class="mt-2">${escapeHtml(game.description)}</p>
-                              <p><strong>Genre:</strong> ${escapeHtml(game.genre || 'Not specified')}</p>
-                              <p><strong>Max Players:</strong> ${game.maxPlayers || 'Not specified'}</p>
-                              ${lastUpdatedInfo}
-                              <button class="btn btn-primary btn-sm edit-game" data-game-id="${game._id}">Edit</button>
-                              <button class="btn btn-danger btn-sm delete-game" data-game-id="${game._id}">Delete</button>
-                          </div>
-                      </div>
-                    </div>
-                  `;
-                placesContainer.append(gameElement);
+                    ? new Date(game.updatedAt).toLocaleString()
+                    : 'N/A';
+                const gameRow = `
+                <tr>
+                    <td>
+                        <a href="/game?id=${game._id}">
+                            <img src="${game.thumbnailUrl}" alt="${escapeHtml(game.title)}" class="img-responsive" style="width: 100px; height: auto;">
+                        </a>
+                    </td>
+                    <td>${escapeHtml(game.title)}</td>
+                    <td>${escapeHtml(game.description)}</td>
+                    <td>${escapeHtml(game.genre || 'Not specified')}</td>
+                    <td>${game.maxPlayers || 'Not specified'}</td>
+                    <td>${lastUpdatedInfo}</td>
+                    <td>
+                        <button class="btn btn-primary btn-sm edit-game" data-game-id="${game._id}">Edit</button>
+                        <button class="btn btn-danger btn-sm delete-game" data-game-id="${game._id}">Delete</button>
+                    </td>
+                </tr>
+                `;
+                tableBody.append(gameRow);
             });
         }
     
@@ -121,8 +127,8 @@ $(document).ready(function () {
         });
     }
 
-       // Add this new event listener for the confirm delete button in the modal
-       $('#confirm-delete-game').on('click', function() {
+    // Add this new event listener for the confirm delete button in the modal
+    $('#confirm-delete-game').on('click', function() {
         if (gameToDelete) {
             deleteGame(gameToDelete._id);
             $('#deleteGameModal').modal('hide');