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"
   }
 }

05_typescript/uebungen/u01_erkennung-typenfehlern/src/main.ts

@@ -1,5 +1,5 @@
-function calculateDiscount(price: number, discount: string): number {
+function calculateDiscount(price: number, discount: number): number {
-  return price - parseFloat(discount);
+  return price - discount;
 }
 
 const finalPrice = calculateDiscount(100, 10);

05_typescript/uebungen/u02_user-email/src/main.ts

@@ -1,6 +1,25 @@
-const user = {
+{
-  name: 'John Doe',
+  interface User {
-  age: 30,
+    name: string;
-};
+    age: number;
+    email?: string; // optional property ?
+  }
 
-console.log(user.email.toLowerCase());
+  const user: User = {
+    name: 'John Doe',
+    age: 30,
+    email: 'john@example.com',
+  };
+
+  const trainer: User = {
+    name: 'Philippe Torrel',
+    age: 42,
+  };
+
+  // 'trainer.email' is possibly 'undefined'.
+  // trainer.email.toLowerCase();
+  trainer.email?.toLowerCase();
+  console.log(user.email?.toLowerCase());
+
+  console.log(user.email ? user.email.toLowerCase() : 'No existing mail');
+}

05_typescript/uebungen/u03_vehicle-interface/assets/js/bundle.js

@@ -0,0 +1,34 @@
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    try {
+      return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+    } catch (e) {
+      throw mod = 0, e;
+    }
+  };
+
+  // src/main.ts
+  var require_main = __commonJS({
+    "src/main.ts"() {
+      var myCar = {
+        startEngine: (key) => {
+          console.log(`Engine started with key: ${key}`);
+          return true;
+        },
+        drive: (speed) => {
+          return `Driving at ${speed} km/h`;
+        }
+      };
+      function operateVehicle(vehicle) {
+        if (vehicle.startEngine("car-key")) {
+          return vehicle.drive(60);
+        } else {
+          return "Engine failed to start.";
+        }
+      }
+      console.log(operateVehicle(myCar));
+    }
+  });
+  require_main();
+})();

05_typescript/uebungen/u03_vehicle-interface/src/main-christian.ts

@@ -0,0 +1,24 @@
+interface Vehicle {
+  startEngine: (key: string) => boolean;
+  drive: (speed: number) => string;
+}
+
+const myCar = {
+  startEngine: (key: string) => {
+    console.log(`Engine started with key: ${key}`);
+    return true;
+  },
+  drive: (speed: number) => {
+    return `Driving at ${speed} km/h`;
+  },
+};
+
+function operateVehicle(vehicle: Vehicle): string {
+  if (vehicle.startEngine('car-key')) {
+    return vehicle.drive(60);
+  } else {
+    return 'Engine failed to start.';
+  }
+}
+
+console.log(operateVehicle(myCar));

05_typescript/uebungen/u03_vehicle-interface/src/main.ts

@@ -1,24 +1,40 @@
-interface Vehicle {
+{
-  startEngine: (key: string) => boolean;
+  interface Vehicle {
-  drive: (speed: number) => string;
+    startEngine: (key: string) => boolean;
-}
+    drive: (speed: number) => string;
-
-const myCar = {
-  startEngine: () => {
-    console.log('Engine started');
-    return true;
-  },
-  drive: () => {
-    return 'Driving at default speed';
-  },
-};
-
-function operateVehicle(vehicle: Vehicle): string {
-  if (vehicle.startEngine('car-key')) {
-    return vehicle.drive(60);
-  } else {
-    return 'Engine failed to start.';
   }
-}
 
-console.log(operateVehicle(myCar));
+  const myCar = {
+    startEngine: (key: string) => {
+      let returnBoolean = false;
+
+      if (key === 'car-key') {
+        console.log('Engine started');
+        returnBoolean = true;
+      }
+
+      return returnBoolean;
+    },
+    drive: (speed: number) => {
+      let returnString = 'Driving at default speed';
+
+      if (speed < 60) {
+        returnString = "You're an old man and way too slow";
+      } else if (speed > 60) {
+        returnString = 'You are an racer! Careful, the police is already watching you!';
+      }
+
+      return returnString;
+    },
+  };
+
+  function operateVehicle(vehicle: Vehicle): string {
+    if (vehicle.startEngine('car-key')) {
+      return vehicle.drive(60);
+    } else {
+      return 'Engine failed to start.';
+    }
+  }
+
+  console.log(operateVehicle(myCar));
+}

05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/06b_optional-exception-js.js

@@ -24,5 +24,7 @@
 
   const weather = [{ main: [{ icon: '10dn', description: 'Clouds' }] }];
 
-  console.log(weather[0]?.test[0]?.test);
+  // seit 2020
+  console.log(weather[0].test); // undefined
+  console.log(weather[0]?.main?.[0]?.test); // undefined
 }

05_typescript/unterricht/tag28/01_ts-fundamentals/src/02_unions.ts

@@ -17,6 +17,7 @@
   function getResult(): string | number {
     return Math.random() > 0.5 ? 'Success' : 404;
   }
+
   function getResult2(): string {
     return Math.random() > 0.5 ? 'success' : 'error';
   }

05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.ts

@@ -3,6 +3,7 @@
   interface Vehicle {
     make: string;
     model: string;
+    color?: string;
     startEngine: () => string;
     stopEngine?: () => string; // ?: optional Property
   }

05_typescript/unterricht/tag28/01_ts-fundamentals/src/06b_optional-exception-js.js

@@ -0,0 +1,30 @@
+// Optional Exception Parameter in JS
+{
+  const vehicle = {
+    make: 'Toyota',
+    model: 'Corolla',
+
+    startEngine: function () {
+      return `${this.make} engine startet`;
+    },
+
+    // Methode - Kurzschreibweise ES6
+    startEngine2() {
+      return `${this.make} engine startet`;
+    },
+
+    stopEngine: () => {
+      console.log(this); // => window (browser) | undefined (node)
+      return `${vehicle.make} engine gestoppt`;
+    },
+  };
+
+  console.log(vehicle.startEngine()); // => 'Toyota engine startet'
+  console.log(vehicle.stopEngine()); // => 'Toyota engine startet'
+
+  const weather = [{ main: [{ icon: '10dn', description: 'Clouds' }] }];
+
+  // seit 2020
+  console.log(weather[0].test); // undefined
+  console.log(weather[0]?.main?.[0]?.test); // undefined
+}