04_browser-api/unterricht/tag27/01_website-api/frontend/assets/js/build.js

@@ -879,10 +879,10 @@
   var toastifyExports = requireToastify();
   var Toastify = /*@__PURE__*/getDefaultExportFromCjs(toastifyExports);
 
-  const Toast=(text='',variant='primary')=>{const getColorByName=(variant='')=>{let color;switch(variant.trim().toLowerCase()){case 'primary':color='#0d6efd';break;case 'secondary':color='#6c757d';break;case 'warning':color='#ffc720';break;case 'success':color='#13653f';break;case 'info':color='#25cff2';break;case 'error':case 'danger':color='#a52834';break;case 'light':color='#babbbc';break;case 'dark':color='#373b3e';break;default:console.warn('variant not found');color='white';}return color;};const show=()=>{Toastify({text,duration:2000,className:variant,gravity:'top',// 'top' or 'bottom'
+  const Toast=(text='',variantOrOptions='primary')=>{// Entweder string oder Objekt
-  position:'center',// `left`, `center` or `right`
+  const userOptions=typeof variantOrOptions==='string'?{variant:variantOrOptions}//
-  stopOnFocus:true,// Prevents dismissing of toast on hover
+  :{...variantOrOptions};const defaultOptions={variant:'primary',duration:2000,gravity:'top',position:'center',stopOnFocus:true};const options={...defaultOptions,...userOptions};const getColorByName=(variant='')=>{let color;switch(variant.trim().toLowerCase()){case 'primary':color='#0d6efd';break;case 'secondary':color='#6c757d';break;case 'warning':color='#ffc720';break;case 'success':color='#13653f';break;case 'info':color='#25cff2';break;case 'error':case 'danger':color='#a52834';break;case 'light':color='#babbbc';break;case 'dark':color='#373b3e';break;default:console.warn('variant not found');color='white';}return color;};const show=()=>{const{variant,style,...restProps}=options;Toastify({text,className:variant,...restProps,style:{background:getColorByName(variant),...style// Ermöglicht bei Bedarf auch individuelle CSS-Overrides
-  style:{background:getColorByName(variant)}}).showToast();};return {show};};
+  }}).showToast();};return {show};};
 
   // import 'bootstrap';
   // Factory Function
@@ -901,7 +901,9 @@
   //   DOM.btnAdd.disabled = true;
   // }
   };const onClickReset=e=>{const btnEl=e.currentTarget;const icon=btnEl.querySelector('i');icon.classList.add('fa-jello');// async API request
-  resetProducts().then(data=>{if(data.success){Toast(data.msg,'success').show();loadProducts();}else {Toast(data.msg,'error').show();}setTimeout(()=>{icon.classList.remove('fa-jello');},500);});};const onClickSave=e=>{const btnEl=e.currentTarget;const icon=btnEl.querySelector('i');icon.classList.add('fa-jello');// async API request
+  resetProducts().then(data=>{if(data.success){// Toast(data.msg, 'success').show();
+  // Toast(data.msg, { variant: 'primary', duration: 5000, stopOnFocus: false }).show();
+  Toast(data.msg,{variant:'primary',duration:3000,stopOnFocus:false,style:{borderRadius:'1rem'}}).show();loadProducts();}else {Toast(data.msg,'error').show();}setTimeout(()=>{icon.classList.remove('fa-jello');},500);});};const onClickSave=e=>{const btnEl=e.currentTarget;const icon=btnEl.querySelector('i');icon.classList.add('fa-jello');// async API request
   saveProducts().then(data=>{if(data.success){Toast(data.msg,'success').show();}else {Toast(data.msg,'error').show();}setTimeout(()=>{icon.classList.remove('fa-jello');},500);});};const onClickAdd=e=>{const product={name:DOM.inputName.value,//
   price:Number(DOM.inputPrice.valueAsNumber)};// async API request
   createProduct(product).then(data=>{console.log(data);if(data.success){Toast(data.msg,'success').show();loadProducts();resetInputFields();disableNonFunctionalButtons();}else {Toast(data.msg,'error').show();}});// addProduct(product);

04_browser-api/unterricht/tag27/01_website-api/frontend/dev/scripts/modules/ProductManager.js

@@ -90,7 +90,14 @@ const ProductManager = (el = null, options = {}) => {
     // async API request
     resetProducts().then((data) => {
       if (data.success) {
-        Toast(data.msg, 'success').show();
+        // Toast(data.msg, 'success').show();
+        // Toast(data.msg, { variant: 'primary', duration: 5000, stopOnFocus: false }).show();
+        Toast(data.msg, {
+          variant: 'primary',
+          duration: 3000,
+          stopOnFocus: false,
+          style: { borderRadius: '1rem' },
+        }).show();
         loadProducts();
       } else {
         Toast(data.msg, 'error').show();

04_browser-api/unterricht/tag27/01_website-api/frontend/dev/scripts/modules/Toast-stefan.js

@@ -0,0 +1,86 @@
+import Toastify from 'toastify-js';
+const Toast = (text = '', options = 'primary') => {
+  let optionsObj = {
+    text,
+    duration: 2000,
+    gravity: 'top',
+    position: 'center',
+    stopOnFocus: true,
+  };
+
+  const getColorByName = (variant = '') => {
+    let color;
+
+    switch (variant.trim().toLowerCase()) {
+      case 'primary':
+        color = '#0d6efd';
+        break;
+      case 'secondary':
+        color = '#6c757d';
+        break;
+      case 'warning':
+        color = '#ffc720';
+        break;
+      case 'success':
+        color = '#13653f';
+        break;
+      case 'info':
+        color = '#25cff2';
+        break;
+      case 'error':
+      case 'danger':
+        color = '#a52834';
+        break;
+      case 'light':
+        color = '#babbbc';
+        break;
+      case 'dark':
+        color = '#373b3e';
+        break;
+
+      default:
+        console.warn('variant not found');
+        color = 'white';
+    }
+
+    return color;
+  };
+
+  const show = () => {
+    Toastify(optionsObj).showToast();
+  };
+
+  if (typeof options === 'string') {
+    optionsObj.className = options;
+  } else {
+    if (Object.hasOwn(options, 'variant')) {
+      optionsObj.className = options.variant;
+    }
+
+    if (Object.hasOwn(options, 'duration')) {
+      optionsObj.duration = options.duration;
+    }
+
+    if (Object.hasOwn(options, 'gravity')) {
+      optionsObj.gravity = options.gravity;
+    }
+
+    if (Object.hasOwn(options, 'position')) {
+      optionsObj.position = options.position;
+    }
+
+    if (Object.hasOwn(options, 'stopOnFocus')) {
+      optionsObj.stopOnFocus = options.stopOnFocus;
+    }
+  }
+
+  optionsObj.style = {
+    background: getColorByName(optionsObj.className),
+  };
+
+  return {
+    show,
+  };
+};
+
+export default Toast;

04_browser-api/unterricht/tag27/01_website-api/frontend/dev/scripts/modules/Toast.js

@@ -1,6 +1,22 @@
 import Toastify from 'toastify-js'; // das Modul wird vom node_modules Ordner ausgelesen und gebundlet. Funktioniert nur mit JS-Bundler (rollup/esbuild)
 
-const Toast = (text = '', variant = 'primary') => {
+const Toast = (text = '', variantOrOptions = 'primary') => {
+  // Entweder string oder Objekt
+  const userOptions =
+    typeof variantOrOptions === 'string'
+      ? { variant: variantOrOptions } //
+      : { ...variantOrOptions };
+
+  const defaultOptions = {
+    variant: 'primary',
+    duration: 2000,
+    gravity: 'top',
+    position: 'center',
+    stopOnFocus: true,
+  };
+
+  const options = { ...defaultOptions, ...userOptions };
+
   const getColorByName = (variant = '') => {
     let color;
     switch (variant.trim().toLowerCase()) {
@@ -38,15 +54,15 @@ const Toast = (text = '', variant = 'primary') => {
   };
 
   const show = () => {
+    const { variant, style, ...restProps } = options;
+
     Toastify({
       text,
-      duration: 2000,
       className: variant,
-      gravity: 'top', // 'top' or 'bottom'
+      ...restProps,
-      position: 'center', // `left`, `center` or `right`
-      stopOnFocus: true, // Prevents dismissing of toast on hover
       style: {
         background: getColorByName(variant),
+        ...style, // Ermöglicht bei Bedarf auch individuelle CSS-Overrides
       },
     }).showToast();
   };