04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/TODO.md

@@ -1,6 +1,6 @@
 ## Refactoring ProductManager
 
-- [ ] Aktualisierung der Produktpositionen nach Veränderung durch Drag n' Drop 
-- [ ] fetch Anfragen durch `api.request()` Methode zusammenfassen (DRY-Prinzip)
-- [ ] Anzahl an EventListener auf Zeilenebene durch Eventlistener auf Tabellenebene reduzieren.
+- [x] Aktualisierung der Produktpositionen nach Veränderung durch Drag n' Drop 
+- [x] fetch Anfragen durch `api.request()` Methode zusammenfassen (DRY-Prinzip)
+- [x] Anzahl an EventListener auf Zeilenebene durch Eventlistener auf Tabellenebene reduzieren.
 - [ ] HTML Elemente, die derzeit eine einmalige Zuweisung (z.B. `id`, `for`, `aria-labelledby` Attribut) im Produktmanager besitzen sollen über JS eine einmalige ID über `uuid` erhalten. 

04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/dev/scripts/utils/helpers.js

@@ -7,6 +7,17 @@ export function parents(el, selector) {
   return parents;
 }
 
+export const parent = (el, selector, boundary = document) => {
+  let current = el;
+  while (current && current !== document) {
+    if (current.matches(selector) && (!boundary || current.parentElement === boundary)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+
 export function addClass(el, className) {
   if (Array.isArray(className)) {
     el.classList.add(...className);

04_browser-api/unterricht/tag30/01_website-refactored/frontend-vite/src/html/pages/contact.html

@@ -1,14 +1,11 @@
 <!doctype html>
 <html lang="de">
-  {% set title = 'Contact' %}
-  {% set active = 'contact' %}
-  {% include "head.html" %}
+  {% set title = 'Contact' %} {% set active = 'contact' %} {% include "head.html" %}
   <body>
-    {% include "header-main.html" %}
-    {% include "menu-main.html" %}
+    {% include "header-main.html" %} {% include "menu-main.html" %}
     <main>
       <div class="container py-12">
-        <h1>Kontakt</h1>
+        <h1>Kontakt!</h1>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
         <form class="form-contact">
           <div class="row">

05_typescript/agenda.md

@@ -496,13 +496,14 @@ Projekte & optionale Übungen
 **Inhalt:**
 
 - Typescript literale
+- Projektvorstellung
 - **Exkurs: Vite vs Gulp**
 - **Produktmanager Refactoring mit Bootstrap 6**
 
 **Übungen:**
 
 Übungen 10 - 11
-
+Projekt 1: TaskManager
 
 ---
 
@@ -546,7 +547,8 @@ Projektarbeit
 
 - Einführung in REACT
 - VDOM von REACT
-- ES6 Module mit ohne ohne Bundler
+- ES6 Module mit ohne Bundler
+- Build Tools im Vergleich & Einführung in Vite
 
 **Übungen:**
 

05_typescript/uebungen/u10_assertions/src/main.ts

@@ -1,34 +1,73 @@
-// [ ] Step 1: Create an object 'mysteryObject' with a property 'info' that holds a string.
-// - The object should be of type 'unknown'.
+{
+  // [ ] Step 1: Create an object 'mysteryObject' with a property 'info' that holds a string.
+  // - The object should be of type 'unknown'.
+  const mysteryObject = (<unknown>{
+    info: 'string',
+  }) as { info: string };
 
-// [ ] Step 2: Use a type assertion to assert that 'mysteryObject' is of type '{ info: string }'.
+  // [ ] Step 2: Use a type assertion to assert that 'mysteryObject' is of type '{ info: string }'.
+  //  const typedMysteryObject = mysteryObject as { info: string }; // Die Aufgabe war NICHT eine neue Variable zu erstellen!
 
-// [ ] Step 3: Access the 'info' property and assign a new string to it.
+  // [ ] Step 3: Access the 'info' property and assign a new string to it.
+  mysteryObject.info = 'new string';
+  // typedMysteryObject.info = 'Updated Info';
 
-// [ ] Step 4: Define a custom type 'ComplexObject' with a method 'compute' that returns a string.
+  // [ ] Step 4: Define a custom type 'ComplexObject' with a method 'compute' that returns a string.
+  type ComplexObject = {
+    compute(): string;
+    // compute: () => string
+  };
 
-// [ ] Step 5: Create an object 'basicObject' with a method 'compute'.
-// - The method should return a string "Basic Computation".
+  // [ ] Step 5: Create an object 'basicObject' with a method 'compute'.
+  // - The method should return a string "Basic Computation".
+  const basicObject = {
+    compute() {
+      return 'Basic Computation';
+    },
+    // compute: () => 'Basic Computation'
+  } as unknown as ComplexObject;
 
-// [ ] Step 6: Use a two-step type assertion to assert that 'basicObject' is of type 'ComplexObject'.
+  // [ ] Step 6: Use a two-step type assertion to assert that 'basicObject' is of type 'ComplexObject'.
+  // const complexObject = basicObject as unknown as ComplexObject; // Die Aufgabe war NICHT eine neue Variable zu erstellen!
 
-// [ ] Step 7: Call the 'compute' method on 'basicObject' and log the result.
+  // [ ] Step 7: Call the 'compute' method on 'basicObject' and log the result.
+  console.log(basicObject.compute());
 
-// Test cases to verify your code implementation (comment out the code below to remove the initial errors)
+  // Test cases to verify your code implementation (comment out the code below to remove the initial errors)
 
-// Verify that 'info' was correctly accessed and modified
-console.log('Updated info:', typedMysteryObject.info); // => "Updated Info"
+  // Verify that 'info' was correctly accessed and modified
+  console.log('Updated info:', mysteryObject.info); // => "Updated Info"
 
-// Verify that 'compute' method of 'complexObject' returns the expected result
-if (complexObject.compute() === 'Basic Computation') {
-  console.log('compute method returned the expected result.');
-} else {
-  console.error('compute method did not return the expected result.');
-}
-
-// Verify 'info' type compatibility
-if (typeof typedMysteryObject.info === 'string') {
-  console.log('info property is of type string.');
-} else {
-  console.error('info property is not of type string.');
+  // Verify that 'compute' method of 'complexObject' returns the expected result
+  if (basicObject.compute() === 'Basic Computation') {
+    console.log('compute method returned the expected result.');
+  } else {
+    console.error('compute method did not return the expected result.');
+  }
+
+  // Verify 'info' type compatibility
+  if (typeof mysteryObject.info === 'string') {
+    console.log('info property is of type string.');
+  } else {
+    console.error('info property is not of type string.');
+  }
+
+  // Test cases to verify your code implementation (comment out the code below to remove the initial errors)
+
+  // Verify that 'info' was correctly accessed and modified
+  // console.log('Updated info:', typedMysteryObject.info); // => "Updated Info"
+
+  // Verify that 'compute' method of 'complexObject' returns the expected result
+  // if (complexObject.compute() === 'Basic Computation') {
+  //   console.log('compute method returned the expected result.');
+  // } else {
+  //   console.error('compute method did not return the expected result.');
+  // }
+
+  // Verify 'info' type compatibility
+  // if (typeof typedMysteryObject.info === 'string') {
+  //   console.log('info property is of type string.');
+  // } else {
+  //   console.error('info property is not of type string.');
+  // }
 }

05_typescript/uebungen/u11_literals/assets/js/bundle.js

@@ -0,0 +1,50 @@
+(() => {
+  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"() {
+      {
+        let rateExperience3 = function(rating) {
+          return `You rated the experience as ${rating}`;
+        };
+        rateExperience = rateExperience3;
+        const setStatus = (status) => {
+          console.log(status);
+        };
+        let Ratings;
+        ((Ratings2) => {
+          Ratings2[Ratings2["ONE"] = 1] = "ONE";
+          Ratings2[Ratings2["TWO"] = 2] = "TWO";
+          Ratings2[Ratings2["THREE"] = 3] = "THREE";
+          Ratings2[Ratings2["FOUR"] = 4] = "FOUR";
+          Ratings2[Ratings2["FIVE"] = 5] = "FIVE";
+        })(Ratings || (Ratings = {}));
+        const rateExperience2 = (rating) => {
+          return `You rated the experience as ${rating}`;
+        };
+        const togglePower = (state) => {
+          return state === true ? "Power is ON" : "Power is OFF";
+        };
+        setStatus("success");
+        setStatus("error");
+        setStatus("complete");
+        console.log(rateExperience3(5));
+        console.log(rateExperience3(3));
+        console.log(rateExperience3(5 /* FIVE */));
+        console.log(rateExperience3(3 /* THREE */));
+        console.log(togglePower(true));
+        console.log(togglePower(false));
+      }
+      var rateExperience;
+    }
+  });
+  require_main();
+})();

05_typescript/uebungen/u11_literals/package.json

@@ -4,7 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "ts": "npx esbuild src/main.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts"
+    "ts": "npx esbuild src/main.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts",
+    "ts:enum": "npx tsx src/main.ts",
+    "tse": "node --experimental-transform-types src/main.ts"
   },
   "keywords": [],
   "author": "",

05_typescript/uebungen/u11_literals/src/main.ts

@@ -1,30 +1,57 @@
-// [ ] Step 1: Create a function 'setStatus' that accepts a string literal type parameter 'status'.
-// - The 'status' can only be "success", "error", or "loading".
-// - The function should log the status to the console.
+{
+  // [ ] Step 1: Create a function 'setStatus' that accepts a string literal type parameter 'status'.
+  // - The 'status' can only be "success", "error", or "loading".
+  // - The function should log the status to the console.
 
-// [ ] Step 2: Create a function 'rateExperience' that accepts a numeric literal type parameter 'rating'.
-// - The 'rating' can only be 1, 2, 3, 4, or 5.
-// - The function should return a message indicating the rating.
+  const setStatus = (status: 'success' | 'error' | 'loading') => {
+    console.log(status);
+  };
 
-// [ ] Step 3: Create a function 'togglePower' that accepts a boolean literal type parameter 'state'.
-// - The 'state' can only be true or false.
-// - The function should return a message indicating whether the power is ON or OFF.
+  // [ ] Step 2: Create a function 'rateExperience' that accepts a numeric literal type parameter 'rating'.
+  // - The 'rating' can only be 1, 2, 3, 4, or 5.
+  // - The function should return a message indicating the rating.
 
-// [ ] Step 4: Test the functions with valid and invalid values to ensure the correct behavior and type safety.
+  enum Ratings {
+    ONE = 1,
+    TWO = 2,
+    THREE = 3,
+    FOUR = 4,
+    FIVE = 5,
+  }
+  const rateExperience2 = (rating: Ratings) => {
+    return `You rated the experience as ${rating}`;
+  };
+  function rateExperience(rating: 1 | 2 | 3 | 4 | 5) {
+    return `You rated the experience as ${rating}`;
+  }
 
-// Test cases (students should verify that these work as expected)
+  // [ ] Step 3: Create a function 'togglePower' that accepts a boolean literal type parameter 'state'.
+  // - The 'state' can only be true or false.
+  // - The function should return a message indicating whether the power is ON or OFF.
 
-// Test 'setStatus' function
-setStatus('success'); // OK
-setStatus('error'); // OK
-setStatus('complete'); // Error: Argument of type '"complete"' is not assignable to parameter of type '"success" | "error" | "loading"'.
+  const togglePower = (state: boolean) => {
+    return state === true ? 'Power is ON' : 'Power is OFF';
+  };
 
-// Test 'rateExperience' function
-console.log(rateExperience(5)); // => "You rated the experience as 5"
-console.log(rateExperience(3)); // => "You rated the experience as 3"
-console.log(rateExperience(6)); // Error: Argument of type '6' is not assignable to parameter of type '1 | 2 | 3 | 4 | 5'.
+  // [ ] Step 4: Test the functions with valid and invalid values to ensure the correct behavior and type safety.
 
-// Test 'togglePower' function
-console.log(togglePower(true)); // => "Power is ON"
-console.log(togglePower(false)); // => "Power is OFF"
-console.log(togglePower('on')); // Error: Argument of type '"on"' is not assignable to parameter of type 'true | false'.
+  // Test cases (students should verify that these work as expected)
+
+  // Test 'setStatus' function
+  setStatus('success'); // OK
+  setStatus('error'); // OK
+  // setStatus('complete'); // Error: Argument of type '"complete"' is not assignable to parameter of type '"success" | "error" | "loading"'.
+
+  // Test 'rateExperience' function
+  console.log(rateExperience(5)); // => "You rated the experience as 5"
+  console.log(rateExperience(3)); // => "You rated the experience as 3"
+  // console.log(rateExperience(6)); // Error: Argument of type '6' is not assignable to parameter of type '1 | 2 | 3 | 4 | 5'.
+
+  console.log(rateExperience(Ratings.FIVE)); // => "You rated the experience as 5"
+  console.log(rateExperience(Ratings.THREE)); // => "You rated the experience as 3"
+
+  // Test 'togglePower' function
+  console.log(togglePower(true)); // => "Power is ON"
+  console.log(togglePower(false)); // => "Power is OFF"
+  // console.log(togglePower('on')); // Error: Argument of type '"on"' is not assignable to parameter of type 'true | false'.
+}

05_typescript/unterricht/tag30/01_ts-types/src/01_type-literale.ts

@@ -94,7 +94,7 @@
     console.log(`Moving ${movement}`);
   };
 
-  setDirection2(Move.Up);
+  setDirection2(Move.Down);
   setDirection2(Move.Right);
   setDirection2(Move.Down);
   setDirection2(Move.Right);