populate with actual API data for mockup imgs

Author: dustinusey

frontend/dist/scripts/app.js

@@ -525,9 +525,25 @@ function loadProjectRequirements(data) {
 
         let li = document.createElement('li');
         li.classList.add('disabled');
-        li.textContent = 'There are no mockups for this project 😢';
+        li.textContent = 'There are no mockups for this project.';
         mockupIconContainer.append(li)
     }
+
+    let mockupIcons = document.querySelectorAll('li.mockup-type');
+    const gallery = document.getElementById('galleryContainer');
+    mockupIcons.forEach((icon, index) => {
+        icon.setAttribute('data-mockup-index', index);
+
+        icon.addEventListener('click', e => {
+            gallery.innerHTML = '';
+            let currentIndex = e.target.getAttribute('data-mockup-index');
+            let currentMock = projectFileData.currentMocks[currentIndex];
+            let img = document.createElement('img');
+            img.src = currentMock;
+            gallery.appendChild(img);
+        })
+    });
+
 
 
 }

frontend/dist/styles/app.css

@@ -525,9 +525,25 @@ function loadProjectRequirements(data) {
 
         let li = document.createElement('li');
         li.classList.add('disabled');
-        li.textContent = 'There are no mockups for this project 😢';
+        li.textContent = 'There are no mockups for this project.';
         mockupIconContainer.append(li)
     }
+
+    let mockupIcons = document.querySelectorAll('li.mockup-type');
+    const gallery = document.getElementById('galleryContainer');
+    mockupIcons.forEach((icon, index) => {
+        icon.setAttribute('data-mockup-index', index);
+
+        icon.addEventListener('click', e => {
+            gallery.innerHTML = '';
+            let currentIndex = e.target.getAttribute('data-mockup-index');
+            let currentMock = projectFileData.currentMocks[currentIndex];
+            let img = document.createElement('img');
+            img.src = currentMock;
+            gallery.appendChild(img);
+        })
+    });
+
 
 
 }

frontend/src/scripts/app.js

@@ -15,6 +15,11 @@
       transition: transform 0.2s;
       &.disabled {
         pointer-events: none;
+        font-size: 0.8rem;
+      }
+      span,
+      i {
+        pointer-events: none;
       }
       span {
         font-size: 0.8rem;

frontend/src/styles/components/utility-panel/_project-files.scss

@@ -204,8 +204,8 @@ <h1 data-project-name></h1>
                 <i class="fa-solid fa-angle-left" data-prev-image></i>
                 <i class="fa-solid fa-angle-right" data-next-image></i>
             </div>
-            <div class="gallery-container">
-                <img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3820&q=80" alt="">
+            <div class="gallery-container" id="galleryContainer">
+                <!-- dynamic -->
             </div>
         </div>