feat: category form visible for all players, autosave

but without functionality for normal users
resolve #14 #15

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "~11.0.3",
     "@angular/router": "~11.0.3",
     "@ngneat/tailwind": "^3.0.6",
+    "@tailwindcss/forms": "^0.2.1",
     "firebase": "^7.0 || ^8.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

src/app/stadtland/categories-form/categories-form.component.html

@@ -9,6 +9,7 @@ <h2 class="sub-headline">Kategorien festlegen</h2>
         type="button"
         class="category-pill"
         [class.added]="c.added"
+        [disabled]="!(gameCreatedByMe$ | async)"
         (click)="c.added ? removeFieldByValue(c.value) : addField(c.value)"
         *ngFor="let c of categoriesListTagged$ | async"
       >
@@ -17,23 +18,33 @@ <h2 class="sub-headline">Kategorien festlegen</h2>
     </div>
   </div>
 
-  <form [formGroup]="form" (ngSubmit)="save()">
-    <div class="mb-2">
-      <button class="primary inline-flex items-center mr-2 mb-2" type="submit">
-        <svg
-          class="m-0 -ml-1 mr-2 h-5 w-5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-        >
-          <path
-            d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z"
-          />
-        </svg>
+  <form [formGroup]="form">
+    <button
+      class="primary inline-flex items-center mr-2 mb-2"
+      type="button"
+      routerLink="../landing"
+    >
+      <svg
+        class="m-0 -ml-1 mr-2 h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
 
-        Speichern
-      </button>
+      Zurück zur Übersicht
+    </button>
+
+    <span class="font-bold text-green-700 mb-3" *ngIf="saveMessage$ | async">
+      Gespeichert
+    </span>
 
+    <div class="mb-2" *ngIf="gameCreatedByMe$ | async">
       <button
         type="button"
         class="inline-flex items-center secondary mr-2 mb-2"
@@ -105,12 +116,16 @@ <h2 class="sub-headline">Kategorien festlegen</h2>
           type="text"
           [formControlName]="i"
           autocomplete="off"
-          class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-12 sm:text-sm border-gray-300 rounded-md"
+          [readonly]="!(gameCreatedByMe$ | async)"
+          class="focus:ring-green-500 focus:border-green-500 block w-full pl-3 pr-12 py-2 sm:text-sm border-gray-300 rounded-md"
         />
-        <div class="absolute inset-y-0 right-0 flex items-center">
+        <div
+          class="absolute inset-y-0 right-0 flex items-center"
+          *ngIf="gameCreatedByMe$ | async"
+        >
           <button
             type="button"
-            class="focus:ring-indigo-500 focus:border-indigo-500 h-full py-0 px-3 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"
+            class="focus:ring-green-500 h-full py-0 px-3 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"
             (click)="removeField(i)"
           >
             <svg

src/app/stadtland/categories-form/categories-form.component.ts

@@ -6,15 +6,20 @@ import {
 } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { interval, Observable, Subject, timer } from 'rxjs';
+import { interval, Observable, of, Subject, timer } from 'rxjs';
 import {
+  concatMap,
+  debounceTime,
   filter,
   map,
+  mapTo,
   shareReplay,
   startWith,
+  switchMap,
   take,
   takeUntil,
   tap,
+  withLatestFrom,
 } from 'rxjs/operators';
 import { slfConfig } from '../shared/config';
 import { StadtlandService } from '../shared/stadtland.service';
@@ -37,8 +42,10 @@ export class CategoriesFormComponent implements OnInit, OnDestroy {
     { updateOn: 'blur' }
   );
 
+  saveMessage$: Observable<boolean>;
+
   categoriesListTagged$ = this.form.valueChanges.pipe(
-    tap((e) => console.log(e)),
+    // tap((e) => console.log(e)),
     map((value) => value.categories),
     startWith(this.categoriesFormArray.value),
     filter((e) => !!e),
@@ -62,8 +69,28 @@ export class CategoriesFormComponent implements OnInit, OnDestroy {
 
     // write values from game to the form
     this.categoriesFromGame$
-      .pipe(takeUntil(this.destroy$))
+      .pipe(
+        filter(
+          (gameCats) =>
+            !this.categoryListsEqual(
+              gameCats,
+              this.categoriesFormArray.value.filter((e) => !!e)
+            )
+        ),
+        takeUntil(this.destroy$)
+      )
       .subscribe((categories) => this.replaceCategoryFields(categories));
+
+    this.saveMessage$ = this.form.valueChanges.pipe(
+      debounceTime(500),
+      map((value) => value.categories.filter((e) => !!e)),
+      withLatestFrom(this.categoriesFromGame$),
+      filter(
+        ([formCats, gameCats]) => !this.categoryListsEqual(formCats, gameCats)
+      ),
+      switchMap(([categories]) => this.sls.setCategories(categories)),
+      switchMap(() => timer(1000).pipe(mapTo(false), startWith(true)))
+    );
   }
 
   private replaceCategoryFields(categories: string[]) {
@@ -118,10 +145,15 @@ export class CategoriesFormComponent implements OnInit, OnDestroy {
 
   save(): void {
     this.sls.setCategories(this.getCategoryValuesFiltered()).subscribe(() => {
-      this.router.navigate(['../landing'], { relativeTo: this.route });
+      console.log('saved');
+      // this.router.navigate(['../landing'], { relativeTo: this.route });
     });
   }
 
+  private categoryListsEqual(a: string[], b: string[]) {
+    return JSON.stringify(a) == JSON.stringify(b);
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
   }

src/app/stadtland/shared/stadtland.service.ts

@@ -110,7 +110,8 @@ export class StadtlandService {
   gameCreatedByMe$ = this.game$.pipe(
     map((g) => g.client),
     distinctUntilChanged(),
-    map((cid) => this.cis.isMyClientId(cid))
+    map((cid) => this.cis.isMyClientId(cid)),
+    shareReplay(1)
   );
 
   /** **********

src/app/stadtland/stadtland-routing.module.ts

@@ -24,7 +24,6 @@ const routes: Routes = [
       {
         path: 'categories',
         component: CategoriesFormComponent,
-        canActivate: [OnlyCreatedByMeGuard],
       },
       {
         path: 'dice',

tailwind.config.js

@@ -18,5 +18,7 @@ module.exports = (isProd) => ({
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms')
+  ],
 });