Update nutri_call.html

nutri_call.html

@@ -813,59 +813,45 @@ function showCalculationStatus(response) {
   }
 </style>  
 <script type="module">
-  import { alert, defaultModules } from 'https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/PNotify.js';
-  import * as PNotifyMobile from 'https://cdn.jsdelivr.net/npm/@pnotify/mobile@5.2.0/dist/PNotifyMobile.js';
-  import 'https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/BrightTheme.css';
-  import 'https://cdn.jsdelivr.net/npm/@pnotify/bootstrap4@5.2.0/dist/PNotifyBootstrap4.css';
+  import PNotify from 'https://cdn.jsdelivr.net/npm/@pnotify/core@5/dist/PNotify.js';
+  import PNotifyMobile from 'https://cdn.jsdelivr.net/npm/@pnotify/mobile@5/dist/PNotifyMobile.js';
+  import PNotifyBootstrap4 from 'https://cdn.jsdelivr.net/npm/@pnotify/bootstrap4@5/dist/PNotifyBootstrap4.js';
 
-  defaultModules.set(PNotifyMobile, {});
+  PNotify.defaultModules.set(PNotifyMobile);
+  PNotify.defaultModules.set(PNotifyBootstrap4);
 
   window.showCalculationStatus = function(response) {
-    const successTemplate = `
-      <div class="pnotify-card">
-        <div class="card-header success">
-          <svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></svg>
-          <h3>Расчёт успешен</h3>
-        </div>
-        <div class="card-body">
-          <p>Все элементы идеально сбалансированы</p>
-          <small>Общая концентрация: ${response.total_ppm.toFixed(2)} ppm</small>
-        </div>
-      </div>
-    `;
-
-    const errorTemplate = `
-      <div class="pnotify-card">
-        <div class="card-header error">
-          <svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
-          <h3>Обнаружены дефициты</h3>
-        </div>
-        <div class="card-body">
-          <ul>
-            ${Object.entries(response.deficits).map(([el, val]) => `
-              <li><strong>${el}:</strong> ${val.toFixed(2)} ppm</li>
-            `).join('')}
-          </ul>
-        </div>
-      </div>
-    `;
-
-    alert({
-      type: Object.keys(response.deficits || {}).length === 0 ? 'success' : 'error',
-      text: Object.keys(response.deficits || {}).length === 0 ? successTemplate : errorTemplate,
-      delay: 4000,
-      width: '320px',
+    const defaults = {
       modules: {
-        Desktop: {
-          desktop: true
-        },
-        Animate: {
-          animate: true,
-          inClass: 'zoomIn',
-          outClass: 'zoomOut'
+        Mobile: {
+          swipeDismiss: true
         }
       }
-    });
+    };
+
+    if (Object.keys(response.deficits || {}).length === 0) {
+      new PNotify({
+        ...defaults,
+        title: 'Успешный расчёт',
+        text: 'Все элементы сбалансированы!',
+        type: 'success',
+        icon: 'fas fa-check-circle',
+        delay: 3000,
+        width: '300px'
+      });
+    } else {
+      new PNotify({
+        ...defaults,
+        title: 'Обнаружены отклонения',
+        text: Object.entries(response.deficits)
+          .map(([el, val]) => `${el}: ${val.toFixed(2)} ppm`)
+          .join('<br>'),
+        type: 'error',
+        icon: 'fas fa-exclamation-triangle',
+        delay: 5000,
+        width: '300px'
+      });
+    }
   };
 </script>