progress

docs/general.structure.md

@@ -56,70 +56,30 @@ Following episode details are assumed:
 
 ```
 libs
-└───episode-one
-│   │   README.md
-│   │   ...
-│   └───src
-│       └───lib
-│          │         index.ts
-│          │         episode-one.routes.ts
-│          │         episode-one.module.ts
-│          │         episode-one.menu.ts
-│          │         …
-│          └───exercise
-│          │            episode-one.theory.md
-│          │            episode-one.exercise.md
-│          │            episode-one.solution.md
-│          │            episode-one.exercise.component.ts
-│          │            episode-one.solution.component.ts
-│          │            …
-│          └───assets
-│                    │    slides.pdf
-│                    │    episode-one.theory.mp4
-│                    │    episode-one.exercise.mp4
-│                    │    episode-one.solution.mp4 
-│                    │    …
-│                    └───images
-│                                 image-one.png
-│                                 image-two.png
-│                                 …
-└───episode-two
-└───episode-three
-└───...
-```
-
-## `exercise` folder
-
-### `episode-one.theory.ts`
-
-# Course/Series Structure:
-
-Following course/series details are assumed:
-
-**course-one structure**
-
-```
-apps
-└───course-one
-│   │   README.md
-│   │   ...
-│   └───src
-│       └───app
-│          │   app.module.ts
-│          │   app.routes.ts
-│          │   app.menu.ts
-│          │   app.component.ts
-│          │   ...
-│          └───assets
-│             course-one.heading.png
-│             …
-└───course-two
-└───course-three
+└───projects
+    ├── episode-1
+    │   ├── src
+    │   │   ├── lib
+    │   │   ├── docs
+    │   │   │   ├── assets
+    │   │   │   │   └── images
+    │   │   │   │        ├── img1.png    
+    │   │   │   │        └── img2.png    
+    │   │   │   └── episode-1.overview.md
+    │   │   ├── exercises
+    │   │   │   ├── session-1
+    │   │   │   │   ├── docs
+    │   │   │   │   │   ├── assets
+    │   │   │   │   │   │   └── images
+    │   │   │   │   │   │       ├── img1.png    
+    │   │   │   │   │   │       └── img2.png    
+    │   │   │   │   │   ├── session-1.tyeory.md
+    │   │   │   │   │   ├── session-1.exercise.md
+    │   │   │   │   │   └── session-1.solution.md
+    │   │   │   └── session-[n]
+    │   │   ├── episode-1.component.ts  
+    │   │   ├── episode-1.menu.ts    
+    │   │   ├── episode-1.routes.ts 
+    │   │   └── episode-1.module.ts  
 └───...
 ```
-
-TODO:
-Content für ersten 3 Kapitel (bis einschließlich Top 10 Operatoren)
-
-
-

projects/combining-streams/src/lib/exercises/comparison/docs/comparison.exercise.md

-Operators:
+# Combination operators comparison - Exercise
+
+## Intro
+
+In the start component you will find a screen split into 2 sections.
+Left and right. In the center 
+we have 3 boxed displaying the result of the named strategies combine, withLatest and zip.
+
+```html
+<h1>Comparison combination operators</h1>
+
+<div #box class="box">
+  <div class="click-area"></div>
+  <div class="separation"></div>
+  <div class="click-pos">&nbsp;</div>
+
+  <div class="click-result">
+    combine
+    {{clickResultCombine$ | async}}
+  </div>
+  <div class="click-result">
+    withLatest
+    {{clickResultWithLatest$ | async}}
+  </div>
+  <div class="click-result">
+    zip
+    {{clickResultZip$ | async}}
+  </div>
+</div>
+```
+
+Also, 2 Observables are already setup in the `ngAfterViewInit` hook, `clickPosX$` and `elemWith$`. 
+
+```typescript
+  ngAfterViewInit(): void {
+    const clickPosX$ = fromEvent(this.boxViewChild.nativeElement, 'click').pipe(
+      tap((e: any) => {
+        const elem = this.elemRef.nativeElement.querySelector('.click-pos');
+        elem.style.top = `${e.offsetY - 15}px`;
+        elem.style.left = `${e.offsetX - 15}px`;
+        elem.style.display = 'block';
+      }),
+      map((e) => e['offsetX'])
+    );
+    this.subscription.add(
+      clickPosX$.subscribe(cPX => console.log('clickPosX', cPX))
+    );
+
+
+    const elemWith$ = fromEvent(window, 'resize').pipe(
+      map(() => this.boxViewChild.nativeElement.getBoundingClientRect().width)
+    );
+    this.subscription.add(
+      elemWith$.subscribe(w => console.log('elemWith', w))
+    );
+
+  }
+```
+
+They are already subscribed to and will forward the with of our click container, and the other Observable logs the  the click position.
+
+A small helper function `getSideOfClick` is provided. 
+
+```typescript
+  getSideOfClick(posX: number, width: number): string {
+    return (width / 2) < posX ? 'Right' : 'Left';
+  }
+```
+
+It takes the click position and the with of the element and calculates if the click happend ant the right or left section of the container.
+
+## Exercise
+
+Create an Observable with that calculates the side of the click.
+
+Use the listed operators:
 
 - `combineLatest`
 - `combineLatestWith`
 - `zip`
 - `zipWith`
 - `withLatestFrom`
+
+Resize and click and see how the different operators behave.

projects/combining-streams/src/lib/exercises/comparison/docs/comparison.solution.md

-Explain the different behaviours
+# Combination Operators Comparison - Solution
+
+
+**Component**
+```Typescript
+
+```
+

projects/combining-streams/src/lib/exercises/comparison/docs/comparison.theory.md

@@ -25,3 +25,64 @@ In version `7` of RxJS there was a refactoring.
 The operator versions of `zip` and `combineLatest` got deprecated and the 
 new operators `zipWith` and `combineLatestWith` got introduced.
 
+Let's have a look at their usage.
+
+**combineLatest and combineLatestWith**
+```typescript
+import {combineLatest, interval} from 'rxjs';
+import {combineLatestWith} from 'rxjs/operators';
+
+const source1$ = interval(1000);
+const source2$ = interval(500);
+
+const result1$ = combineLatest([source1$,source2$]);
+
+const result2$ = source1$.pipe(
+    combineLatestWith(source2$)
+);
+```
+
+This 2 operators are siblings, one of them, `combineLates` is the creation function. 
+The other, `combineLatestWith` is the operator. 
+
+
+**zip and zipWith**
+```typescript
+// rxjs version 7
+import {zip, interval} from 'rxjs';
+import {zipWith} from 'rxjs/operators';
+
+const source1$ = interval(1000);
+const source2$ = interval(500);
+
+const result1$ = zip([source1$,source2$]);
+
+const result2$ = source1$.pipe(
+    zipWith(source2$)
+);
+```
+
+This 2 operators are similar to `combineLatest` siblings, 
+The creation function is `zip` and the operator is `zipWith`.
+
+**withLatestFrom**
+```typescript
+// rxjs version 7
+import {interval} from 'rxjs';
+import {withLatestFrom} from 'rxjs/operators';
+
+const source1$ = interval(1000);
+const source2$ = interval(500);
+
+const result1$ = source1$.pipe(
+    withLatestFrom(source2$)
+);
+```
+
+For this behaviour we only have the operator. 
+This creation function would not be that intuitive to use.
+
+To get some more overview of the behaviour lets start a small exercise.
+
+
+