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

@@ -1,4 +1,4 @@
-(function (uuid) {
+(function () {
   'use strict';
 
   // Helper
@@ -884,13 +884,21 @@
   :{...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
   }}).showToast();};return {show};};
 
+  const byteToHex=[];for(let i=0;i<256;++i){byteToHex.push((i+0x100).toString(16).slice(1));}function unsafeStringify(arr,offset=0){return (byteToHex[arr[offset+0]]+byteToHex[arr[offset+1]]+byteToHex[arr[offset+2]]+byteToHex[arr[offset+3]]+'-'+byteToHex[arr[offset+4]]+byteToHex[arr[offset+5]]+'-'+byteToHex[arr[offset+6]]+byteToHex[arr[offset+7]]+'-'+byteToHex[arr[offset+8]]+byteToHex[arr[offset+9]]+'-'+byteToHex[arr[offset+10]]+byteToHex[arr[offset+11]]+byteToHex[arr[offset+12]]+byteToHex[arr[offset+13]]+byteToHex[arr[offset+14]]+byteToHex[arr[offset+15]]).toLowerCase();}
+
+  const rnds8=new Uint8Array(16);function rng(){return crypto.getRandomValues(rnds8);}
+
+  function v4(options,buf,offset){if(crypto.randomUUID){return crypto.randomUUID();}return _v4(options);}function _v4(options,buf,offset){options=options||{};const rnds=options.random??options.rng?.()??rng();if(rnds.length<16){throw new Error('Random bytes length must be >= 16');}rnds[6]=rnds[6]&0x0f|0x40;rnds[8]=rnds[8]&0x3f|0x80;return unsafeStringify(rnds);}
+
   // import 'bootstrap';
   // Factory Function
   const ProductManager=(target='.product-manager',options={})=>{// === Selektor or Element  ===
   if(typeof target==='string'){const elements=document.querySelectorAll(target);if(elements.length===0){console.warn('Product Manager not found',target);return null;}if(elements.length>1){return [...elements].map(el=>ProductManager(el,options));// Rekursion
   }target=elements[0];}else if(target instanceof NodeList||Array.isArray(target)){if(target.length===0)return null;if(target.length===1){target=target[0];}else {return [...target].map(el=>ProductManager(el,options));// Rekursion
   }}// === DOM & VARS =======
-  const uId=uuid.v4();const module=target;if(!module)return;const DOM={module,table:module.querySelector('.table-products'),tbody:module.querySelector('tbody'),inputName:module.querySelector('.input-product-name'),inputPrice:module.querySelector('.input-product-price'),btnAdd:module.querySelector('.button-product-add'),templateRow:module.querySelector('.template-row'),// Nav Actions
+  const uId=v4();// 'b18794e8-5d0d-417c-b361-ba38e78411b4'
+  // console.log('uId: ', uId);
+  const module=target;if(!module)return;const DOM={module,table:module.querySelector('.table-products'),tbody:module.querySelector('tbody'),inputName:module.querySelector('.input-product-name'),inputPrice:module.querySelector('.input-product-price'),btnAdd:module.querySelector('.button-product-add'),templateRow:module.querySelector('.template-row'),// Nav Actions
   navActions:module.querySelector('.nav-products-actions'),btnReset:module.querySelector('.button-products-reset'),btnSave:module.querySelector('.button-products-save'),// Modal Edit
   modalEdit:module.querySelector('.modal-edit'),formEdit:module.querySelector('.form-product-edit'),inputEditName:module.querySelector('.input-edit-name'),inputEditPrice:module.querySelector('.input-edit-price'),inputEditId:module.querySelector('.input-edit-id'),inputEditPosition:module.querySelector('.input-edit-position'),btnUpdate:module.querySelector('.button-product-update'),// Modal Delete
   modalDelete:module.querySelector('.modal-delete'),productName:module.querySelector('strong.product-name'),btnConfirmDelete:module.querySelector('.button-confirm-delete')};const SERVER_BASE_URL='http://127.0.0.1:8000';const bsModalEdit=new Modal(DOM.modalEdit,{backdrop:'static',keyboard:true});const bsModalDelete=new Modal(DOM.modalDelete,{backdrop:true,keyboard:true});// console.log(DOM);
@@ -981,7 +989,7 @@
   btnDragEl.addEventListener('mousedown',onMouseDownDrag);btnDragEl.addEventListener('mouseup',onMouseUpDrag);// Id vom Produkt auf HTML data-Attribut ablegen
   trEl.dataset.id=id;// <tr data-id="..."></tr>
   trEl.addEventListener('dragstart',onDragStart);trEl.addEventListener('dragover',onDragOver);trEl.addEventListener('drop',onDrop);tdNameEl.textContent=name;tdPriceEl.textContent=Number(price).toFixed(2);btnEditEl.dataset.bsTarget+=`-${uId}`;btnEditEl.addEventListener('click',onClickEdit);btnRemoveEl.addEventListener('click',onClickRemove);btnRemoveEl.dataset.bsTarget+=`-${uId}`;btnMoveUpEl.addEventListener('click',onClickMoveUp);btnMoveDownEl.addEventListener('click',onClickMoveDown);DOM.tbody.appendChild(trEl);};const showModalEdit=product=>{const{name='',price=0,_id:id,position}=product;DOM.inputEditName.value=name;DOM.inputEditPrice.value=price;DOM.inputEditId.value=id;DOM.inputEditPosition.value=position;};const disableNonFunctionalButtons=()=>{DOM.tbody.querySelectorAll('tr').forEach(tr=>{tr.querySelector('.button-product-move-up').disabled=!tr.previousElementSibling;tr.querySelector('.button-product-move-down').disabled=!tr.nextElementSibling;});};const resetInputFields=()=>{DOM.inputName.value=DOM.inputPrice.value='';DOM.btnAdd.disabled=true;DOM.formEdit.reset();// Modal Formular leeren
-  };const setUIds=()=>{DOM.modalEdit.id+=`-${uId}`;DOM.modalEdit.querySelector('.modal-title').id+=`-${uId}`;DOM.modalDelete.id+=`-${uId}`;DOM.modalDelete.querySelector('.modal-title').id+=`-${uId}`;DOM.inputEditName.id+=`-${uId}`;DOM.inputEditPrice.id+=`-${uId}`;};// Helper
+  };const setUIds=()=>{DOM.modalEdit.id+=`-${uId}`;const labedEditId=DOM.modalEdit.querySelector('.modal-title').id+=`-${uId}`;DOM.modalEdit.setAttribute('aria-labelledby',labedEditId);DOM.modalDelete.id+=`-${uId}`;const labedDeleteId=DOM.modalDelete.querySelector('.modal-title').id+=`-${uId}`;DOM.modalDelete.setAttribute('aria-labelledby',labedDeleteId);DOM.inputEditName.id+=`-${uId}`;DOM.inputEditPrice.id+=`-${uId}`;};// Helper
   // function parents(el, selector) {
   //   const parents = [];
   //   while ((el = el.parentNode) && el !== document) {
@@ -1005,5 +1013,5 @@
   // === FUNCTIONS ========
   const router=()=>{const path=window.location.pathname;console.log(path);switch(path){case '/':case '/index.html':console.log('HOME');new Splide('.splide',{cover:false,autoHeight:true,height:'100%',fixedHeight:'100%'}).mount();break;case '/projects/02_product-manager.html':console.log('PRODUCT_MANAGER');ProductManager();break;default:console.log('no scripts found');}};init();})();
 
-})(uuid);
+})();
 //# sourceMappingURL=../map/build.js.map

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

@@ -32,7 +32,8 @@ const ProductManager = (target = '.product-manager', options = {}) => {
   }
 
   // === DOM & VARS =======
-  const uId = id();
+  const uId = id(); // 'b18794e8-5d0d-417c-b361-ba38e78411b4'
+  // console.log('uId: ', uId);
   const module = target;
   if (!module) return;
 
@@ -566,9 +567,11 @@ const ProductManager = (target = '.product-manager', options = {}) => {
 
   const setUIds = () => {
     DOM.modalEdit.id += `-${uId}`;
-    DOM.modalEdit.querySelector('.modal-title').id += `-${uId}`;
+    const labedEditId = (DOM.modalEdit.querySelector('.modal-title').id += `-${uId}`);
+    DOM.modalEdit.setAttribute('aria-labelledby', labedEditId);
     DOM.modalDelete.id += `-${uId}`;
-    DOM.modalDelete.querySelector('.modal-title').id += `-${uId}`;
+    const labedDeleteId = (DOM.modalDelete.querySelector('.modal-title').id += `-${uId}`);
+    DOM.modalDelete.setAttribute('aria-labelledby', labedDeleteId);
     DOM.inputEditName.id += `-${uId}`;
     DOM.inputEditPrice.id += `-${uId}`;
   };

04_browser-api/unterricht/tag27/01_website-api/frontend/package-lock.json

@@ -11,7 +11,8 @@
       "dependencies": {
         "@splidejs/splide": "^4.1.4",
         "bootstrap": "^5.3.8",
-        "toastify-js": "^1.12.0"
+        "toastify-js": "^1.12.0",
+        "uuid": "^14.0.3"
       },
       "devDependencies": {
         "@babel/core": "^8.0.7",
@@ -9937,6 +9938,19 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.3.tgz",
+      "integrity": "sha512-Sc5u1VVln93y1Xnz4R+CunOZc7R9LUcTmhj7Rc7Eg3HVcf7rVn2FOoa812fe0W8p3jD7xeoGSYbfqCGGH2B6xw==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
     "node_modules/v8flags": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-4.0.1.tgz",

04_browser-api/unterricht/tag27/01_website-api/frontend/package.json

@@ -10,7 +10,8 @@
   "scripts": {
     "css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q",
     "js": "npx esbuild dev/js/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
-    "dev": "npx gulp dev"
+    "dev": "npx gulp dev",
+    "build": "npx gulp build"
   },
   "devDependencies": {
     "@babel/core": "^8.0.7",
@@ -43,6 +44,7 @@
   "dependencies": {
     "@splidejs/splide": "^4.1.4",
     "bootstrap": "^5.3.8",
-    "toastify-js": "^1.12.0"
+    "toastify-js": "^1.12.0",
+    "uuid": "^14.0.3"
   }
 }