Выбор образа при создании машины карточками: название системы, размер, дата загрузки и поиск, когда образов много

web/static/panel.js

@@ -435,7 +435,8 @@
     const field = (name) => form.elements[name];
     const value = (name) => { const el = field(name); if (!el) return ''; if (el instanceof RadioNodeList) return el.value; return el.value; };
     const setSummary = (key, text) => $$(`[data-summary="${key}"]`).forEach((el) => { el.textContent = text || '—'; });
-    const optionText = (select) => select && select.selectedIndex >= 0 ? select.options[select.selectedIndex].dataset.label || select.options[select.selectedIndex].text : '';
+    // Образы выбираются карточками (радиокнопки): берём отмеченную.
+    const picked = (name) => $(`input[name="${name}"]:checked`, form);
 
     function sync() {
       const source = value('source_type');
@@ -454,9 +455,7 @@
       // Default login of the chosen cloud image (ubuntu, debian, …) until the user types a name.
       const login = field('ci_user');
       if (login && login.dataset.autoLogin === '1') {
-        const image = field('disk_image_path');
-        const option = image && image.selectedIndex >= 0 ? image.options[image.selectedIndex] : null;
-        login.value = option?.dataset.login || 'admin';
+        login.value = picked('disk_image_path')?.dataset.login || 'admin';
       }
       const preset = value('preset');
       const custom = preset === 'custom';
@@ -469,7 +468,7 @@
       $$('[data-custom-resources] input', form).forEach((input) => { input.readOnly = !custom; });
       const memory = Number(value('memory')) || 0;
       setSummary('name', value('name'));
-      setSummary('source', source === 'disk_image' ? optionText(field('disk_image_path')) : optionText(field('iso_path')));
+      setSummary('source', picked(source === 'disk_image' ? 'disk_image_path' : 'iso_path')?.dataset.label || '');
       setSummary('cpu', `${value('vcpus')} ${Number(value('vcpus')) === 1 ? 'ядро' : 'ядра'}`);
       setSummary('memory', memory >= 1024 ? `${+(memory / 1024).toFixed(1)} ГБ` : `${memory} МБ`);
       setSummary('disk', `${value('disk_size')} ГБ`);
@@ -480,9 +479,7 @@
     }
     // Установщик Windows панель узнаёт по ISO (data-os) и сама выбирает тип, пока пользователь не выбрал его руками.
     const guessOs = () => {
-      const select = field('iso_path');
-      const option = select && select.selectedIndex >= 0 ? select.options[select.selectedIndex] : null;
-      const guess = option?.dataset.os || '';
+      const guess = picked('iso_path')?.dataset.os || '';
       const hint = $('[data-os-hint]', form);
       if (form.dataset.osManual) return;
       const radio = $(`input[name=os_type][value="${guess || 'linux'}"]`, form);
@@ -495,6 +492,17 @@
       if (event.target.name === 'iso_path') guessOs();
       sync();
     });
+    // Поиск по образам, когда их много.
+    $$('[data-image-picker]', form).forEach((picker) => {
+      const search = $('[data-image-search]', picker);
+      if (!search) return;
+      search.addEventListener('input', () => {
+        const query = search.value.trim().toLowerCase();
+        let shown = 0;
+        $$('.image-option', picker).forEach((item) => { item.hidden = Boolean(query) && !item.dataset.search.includes(query); shown += item.hidden ? 0 : 1; });
+        $('[data-image-empty]', picker).hidden = shown > 0;
+      });
+    });
     guessOs();
     sync();
   }