Beobachtungsvorschlaege um Objektbilder und Namen erweitern

public/js/observation_suggestions.js

@@ -9,6 +9,10 @@
     const tbody = document.getElementById('observation-rows');
     const previous = document.getElementById('observation-previous');
     const next = document.getElementById('observation-next');
+    const imageDialog = document.getElementById('observation-image-dialog');
+    const imageDialogImage = document.getElementById('observation-image-dialog-image');
+    const imageDialogTitle = document.getElementById('observation-image-dialog-title');
+    const imageDialogClose = document.getElementById('observation-image-dialog-close');
     const pageSize = 50;
     let data = null;
     let displayedRows = [];
@@ -117,16 +121,66 @@
         }
         row.append(td);
     }
+    function closeImageDialog() {
+        if (imageDialog?.open) imageDialog.close();
+    }
+    function openImageDialog(url, title) {
+        if (!imageDialog || !imageDialogImage || !imageDialogTitle || typeof imageDialog.showModal !== 'function') {
+            window.open(url, '_blank', 'noopener');
+            return;
+        }
+        imageDialogTitle.textContent = title;
+        imageDialogImage.src = url;
+        imageDialogImage.alt = `Bild von ${title}`;
+        imageDialog.showModal();
+        imageDialogClose?.focus();
+    }
+    imageDialogClose?.addEventListener('click', closeImageDialog);
+    imageDialog?.addEventListener('click', event => {
+        if (event.target === imageDialog) closeImageDialog();
+    });
     function render() {
         tbody.replaceChildren();
         const fragment = document.createDocumentFragment();
         for (const item of displayedRows.slice(page * pageSize, (page + 1) * pageSize)) {
             const row = document.createElement('tr');
             row.dataset.objectId = item.id;
-            cell(row, item.name, item.note);
+            const imageCell = document.createElement('td');
+            if (item.image) {
+                const link = document.createElement('a');
+                link.href = item.image;
+                link.title = `Bild von ${item.name} vergrößern`;
+                link.addEventListener('click', event => {
+                    event.preventDefault();
+                    openImageDialog(item.image, item.name);
+                });
+                const image = document.createElement('img');
+                image.src = item.image;
+                image.alt = `Bild von ${item.name}`;
+                image.loading = 'lazy';
+                image.className = 'observation-object-image';
+                link.append(image);
+                imageCell.append(link);
+            } else {
+                imageCell.textContent = '—';
+            }
+            row.append(imageCell);
+            const nameCell = document.createElement('td');
+            nameCell.textContent = item.name;
+            if (item.common_name) {
+                const commonName = document.createElement('small');
+                commonName.textContent = item.common_name;
+                nameCell.append(commonName);
+            }
+            if (item.note) {
+                const note = document.createElement('small');
+                note.textContent = item.note;
+                nameCell.append(note);
+            }
+            row.append(nameCell);
             cell(row, item.type);
             cell(row, item.best.magnitude === null ? 'Helligkeit unbekannt' : `${number(item.best.magnitude)} mag`, item.magnitude_note);
-            cell(row, item.size_arcsec === null ? '—' : `${number(item.size_arcsec)}″`);
+            cell(row, item.size_arcsec === null ? '—' : `${number(item.size_arcsec / 60, 2)}′`);
             const windows = document.createElement('td');
             for (const interval of item.intervals) {
                 const line = document.createElement('div');