From 4279403183165768065f8d7a31b3776b31b0588d Mon Sep 17 00:00:00 2001
From: FrederikBaerentsen <frederik+gitea@baerentsen.net>
Date: Fri, 26 Apr 2024 16:57:26 +0200
Subject: [PATCH] Added modal to /misisng (fixed #11)

---
 templates/missing.html | 114 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 112 insertions(+), 2 deletions(-)
diff --git a/templates/missing.html b/templates/missing.html
index 81d02a4..116d619 100644
--- a/templates/missing.html
+++ b/templates/missing.html
@@ -8,6 +8,64 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<style>
+    /* Modal Styles */
+      #lightbox-modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  padding-top: 50px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+}
+.lightbox-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+
+
+.lightbox-content {
+  max-width: 90%;
+  max-height: 90%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#lightbox-text {
+  position: absolute;
+  bottom: 20px; /* Adjust as needed */
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.5); /* Adjust background color and opacity */
+  color: white;
+  text-align: center;
+}
+
+
+#lightbox-modal .close {
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  font-size: 50px;
+  color: white;
+  cursor: pointer;
+}
+
+#lightbox-modal img {
+  display: block;
+  margin: 0 auto;
+  max-width: 90%;
+  max-height: 90%;
+}
+</style>
   </head>
   <body>
 
@@ -54,9 +112,9 @@
 			  {% for brick in missing_list %}
 				<tr>
 					{% if brick[4] == 'nil' %}
-					<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
+					<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="{{ brick[0] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
 					{% else %}
-					<td><img src="{{ '/static/parts/' + brick[4] + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
+					<td><img src="{{ '/static/parts/' + brick[4] + '.jpg' }}" alt="{{ brick[0] }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
 					{% endif %}
 				  <td>{{ brick[0] }}</td>
 				  <td>{{ brick[1] }}</td>
@@ -69,7 +127,59 @@
 		  </table>
 		</div>
 	</center>
+
+
+<div id="lightbox-modal">
+  <div class="lightbox-wrapper">
+    <span class="close">&times;</span>
+    <img class="lightbox-content" id="lightbox-image">
+    <div class="text-container" id="lightbox-text"></div>
+  </div>
+</div>
+
+
+
 	<script>
+document.addEventListener('DOMContentLoaded', function () {
+  const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
+  const lightboxModal = document.getElementById('lightbox-modal');
+  const lightboxImage = document.getElementById('lightbox-image');
+  const lightboxText = document.getElementById('lightbox-text');
+  const closeModal = document.querySelector('.close');
+
+  lightboxTrigger.forEach(function (element) {
+    element.addEventListener('click', function () {
+	const imgSrc = element.getAttribute('src');
+	textContent = '';
+      console.log(element.getAttribute('alt'));
+      textContent = element.getAttribute('alt');
+	    //  textContent  = element.closest('tr').querySelector('td:nth-child(2)').textContent; // Adjust the index accordingly
+      lightboxText.textContent = textContent;
+
+
+      lightboxImage.setAttribute('src', imgSrc);
+      lightboxModal.style.display = 'block';
+    });
+  });
+
+  closeModal.addEventListener('click', function () {
+    lightboxModal.style.display = 'none';
+  });
+
+  lightboxModal.addEventListener('click', function (event) {
+    if (event.target === lightboxModal || event.target === lightboxImage || event.target === lightboxText) {
+      // Dismiss only if the clicked element is part of the content area
+      lightboxModal.style.display = 'none';
+    }
+  });
+
+  // Dismiss the lightbox when clicking outside the content area (i.e., the background)
+  lightboxModal.addEventListener('click', function (event) {
+    if (event.target != lightboxModal) {
+      lightboxModal.style.display = 'none';
+    }
+  });
+});
 	</script>
   </body>
 </html>
