From a7ec8f8aa15525ff9b17480b5dedf24c304d3fab Mon Sep 17 00:00:00 2001
From: _Bastler <git@bstly.de>
Date: Wed, 6 Oct 2021 11:13:46 +0200
Subject: [PATCH] user settings

---
 src/app/pages/settings/settings.page.html     | 72 ++++++++++------
 src/app/pages/settings/settings.page.scss     | 19 +++-
 src/app/pages/settings/settings.page.ts       | 23 +++++
 src/app/pages/submission/submission.page.html | 86 ++++++++++---------
 src/app/pages/submission/submission.page.scss | 17 ++++
 src/app/pages/user/user.page.html             |  4 +
 src/styles.scss                               |  5 --
 7 files changed, 151 insertions(+), 75 deletions(-)

diff --git a/src/app/pages/settings/settings.page.html b/src/app/pages/settings/settings.page.html
index 3ba2b6f..88ddb6a 100644
--- a/src/app/pages/settings/settings.page.html
+++ b/src/app/pages/settings/settings.page.html
@@ -1,28 +1,44 @@
-<form [formGroup]="form" (ngSubmit)="save()" #formDirective="ngForm" *ngIf="user">
-  <mat-card>
-    <mat-card-content>
-      <mat-form-field>
-        <input matInput formControlName="username" type="text">
-      </mat-form-field>
-      <mat-form-field>
-        <input matInput placeholder="{{'settings.email' | i18n}}" formControlName="email" type="email">
-        <mat-error *ngIf="hasError('email')">
-          {{'settings.email.error' | i18n}}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field>
-        <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'settings.about' | i18n}}" formControlName="about"></textarea>
-        <mat-error>
-          {{'settings.about.error' | i18n}}
-        </mat-error>
-      </mat-form-field>
-    </mat-card-content>
-    <mat-card-actions>
-      <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
-        {{'settings.update' | i18n}}
-      </button>
-      <a *ngIf="success" mat-button color="primary">{{'settings.success' | i18n}}</a>
-    </mat-card-actions>
-  </mat-card>
-
-</form>
\ No newline at end of file
+<div class="container">
+  <form [formGroup]="form" (ngSubmit)="save()" #formDirective="ngForm" *ngIf="user">
+    <mat-card>
+      <mat-card-content>
+        <mat-card-title><a routerLink="/u/{{user.username}}">{{user.username}}</a></mat-card-title>
+        <mat-form-field>
+          <input matInput placeholder="{{'settings.email' | i18n}}" formControlName="email" type="email">
+          <mat-error *ngIf="hasError('email')">
+            {{'settings.email.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'settings.about' | i18n}}"
+            formControlName="about"></textarea>
+          <mat-error>
+            {{'settings.about.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+        <mat-divider></mat-divider>
+        <p>{{'settings.pagesettings' | i18n}}</p>
+        <mat-form-field>
+          <button *ngIf="user.settings.gravity || form.get('gravity').value != user.metadata.defaultGravity" matPrefix
+            mat-icon-button (click)="resetGravity()">
+            <mat-icon>cancel</mat-icon>
+          </button>
+          <input type="number" min="0" max="2" step="0.1" matInput placeholder="{{'settings.gravity' | i18n}}"
+            formControlName="gravity">
+            <mat-hint *ngIf="form.get('gravity').value != 0">
+              {{'settings.gravity.hint' | i18n}}
+            </mat-hint>
+            <mat-hint *ngIf="form.get('gravity').value == 0">
+              {{'settings.gravity.zero' | i18n}}
+            </mat-hint>
+        </mat-form-field>
+      </mat-card-content>
+      <mat-card-actions>
+        <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+          {{'settings.update' | i18n}}
+        </button>
+        <a *ngIf="success" mat-button color="primary">{{'settings.success' | i18n}}</a>
+      </mat-card-actions>
+    </mat-card>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/settings/settings.page.scss b/src/app/pages/settings/settings.page.scss
index 9ee20ad..ebacda2 100644
--- a/src/app/pages/settings/settings.page.scss
+++ b/src/app/pages/settings/settings.page.scss
@@ -1,3 +1,20 @@
-mat-form-field {
+mat-form-field, mat-slider {
   display: block;
 }
+
+form {
+  margin-left: 15px;
+  margin-bottom: 15px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/settings/settings.page.ts b/src/app/pages/settings/settings.page.ts
index 352e6d7..fb754f8 100644
--- a/src/app/pages/settings/settings.page.ts
+++ b/src/app/pages/settings/settings.page.ts
@@ -26,15 +26,20 @@ export class PageSettings implements OnInit {
       username: [ { disabled: true }, Validators.nullValidator ],
       email: [ '', Validators.nullValidator ],
       about: [ '', Validators.nullValidator ],
+      gravity: [ '', Validators.nullValidator ],
     });
 
     this.form.get('username').disable();
 
     this.userService.get().subscribe(user => {
       this.user = user;
+      if (!this.user.settings) {
+        this.user.settings = {};
+      }
       this.form.get('username').setValue(this.user.username);
       this.form.get('email').setValue(this.user.email);
       this.form.get('about').setValue(this.user.about);
+      this.form.get('gravity').setValue(this.user.settings.gravity || this.user.metadata.defaultGravity);
     })
   }
 
@@ -42,6 +47,11 @@ export class PageSettings implements OnInit {
     return this.form.controls[ controlName ].errors != null;
   }
 
+  resetGravity(): void {
+    this.user.settings.gravity = null;
+    this.form.get('gravity').setValue(this.user.metadata.defaultGravity);
+  }
+
   save(): void {
     if (this.working) {
       return;
@@ -53,8 +63,21 @@ export class PageSettings implements OnInit {
     this.user.about = this.form.get('about').value;
     this.user.email = this.form.get('email').value;
 
+    if (!this.user.settings) {
+      this.user.settings = {};
+    }
+
+    if (this.form.get('gravity').value != this.user.metadata.defaultGravity && !this.user.settings.gravity) {
+      this.user.settings.gravity = this.form.get('gravity').value;
+    } else if (this.user.settings.gravity) {
+      this.user.settings.gravity = this.form.get('gravity').value;
+    }
+
     this.userService.update(this.user).subscribe((data) => {
       this.user = data;
+      if (!this.user.settings) {
+        this.user.settings = {};
+      }
       this.working = false;
       this.success = true;
     }, (error) => {
diff --git a/src/app/pages/submission/submission.page.html b/src/app/pages/submission/submission.page.html
index 3bdd329..3da82c0 100644
--- a/src/app/pages/submission/submission.page.html
+++ b/src/app/pages/submission/submission.page.html
@@ -1,44 +1,48 @@
-<form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
-  <mat-card>
-    <mat-card-content>
-      <p>{{'submission.info' | i18n}}</p>
+<div class="container">
+  <form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
+    <mat-card>
+      <mat-card-content>
+        <p>{{'submission.info' | i18n}}</p>
 
-      <mat-form-field>
-        <mat-select placeholder="{{'submission.entryType' | i18n}}" formControlName="entryType">
-          <mat-select-trigger>
-            <mat-icon>{{'entryType.' + entryType + '.icon' | i18n}}</mat-icon> {{'entryType.' + entryType | i18n}}
-          </mat-select-trigger>
-          <mat-option *ngFor="let entryType of entryTypes" [value]="entryType" >
-            <mat-icon>{{'entryType.' + entryType + '.icon' | i18n}}</mat-icon> {{'entryType.' + entryType | i18n}}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+        <mat-form-field>
+          <mat-select placeholder="{{'submission.entryType' | i18n}}" formControlName="entryType">
+            <mat-select-trigger>
+              <mat-icon>{{'entryType.' + entryType + '.icon' | i18n}}</mat-icon> {{'entryType.' + entryType | i18n}}
+            </mat-select-trigger>
+            <mat-option *ngFor="let entryType of entryTypes" [value]="entryType">
+              <mat-icon>{{'entryType.' + entryType + '.icon' | i18n}}</mat-icon> {{'entryType.' + entryType | i18n}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
 
-      <mat-form-field>
-        <input matInput placeholder="{{'submission.url' | i18n}}" formControlName="url" type="url" [required]="entryType == 'LINK'" matAutofocus>
-        <mat-error *ngIf="hasError('url')">
-          {{'submission.url.error' | i18n}}
-        </mat-error>
-      </mat-form-field>
+        <mat-form-field>
+          <input matInput placeholder="{{'submission.url' | i18n}}" formControlName="url" type="url"
+            [required]="entryType == 'LINK'" matAutofocus>
+          <mat-error *ngIf="hasError('url')">
+            {{'submission.url.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
 
-      <mat-form-field>
-        <input matInput placeholder="{{'submission.title' | i18n}}" formControlName="title" type="text" required (focus)="onTitleFocus($event)">
-        <mat-error>
-          {{'submission.title.error' | i18n}}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field>
-        <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'submission.text' | i18n}}" formControlName="text"></textarea>
-        <mat-error>
-          {{'submission.text.error' | i18n}}
-        </mat-error>
-      </mat-form-field>
-    </mat-card-content>
-    <mat-card-actions>
-      <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
-        {{'submission.create' | i18n}}
-      </button>
-    </mat-card-actions>
-  </mat-card>
-
-</form>
\ No newline at end of file
+        <mat-form-field>
+          <input matInput placeholder="{{'submission.title' | i18n}}" formControlName="title" type="text" required
+            (focus)="onTitleFocus($event)">
+          <mat-error>
+            {{'submission.title.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'submission.text' | i18n}}"
+            formControlName="text"></textarea>
+          <mat-error>
+            {{'submission.text.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+      </mat-card-content>
+      <mat-card-actions>
+        <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+          {{'submission.create' | i18n}}
+        </button>
+      </mat-card-actions>
+    </mat-card>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/submission/submission.page.scss b/src/app/pages/submission/submission.page.scss
index 9ee20ad..0c0ddc6 100644
--- a/src/app/pages/submission/submission.page.scss
+++ b/src/app/pages/submission/submission.page.scss
@@ -1,3 +1,20 @@
 mat-form-field {
   display: block;
 }
+
+form {
+  margin-left: 15px;
+  margin-bottom: 15px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/user/user.page.html b/src/app/pages/user/user.page.html
index 7436bfa..63c5917 100644
--- a/src/app/pages/user/user.page.html
+++ b/src/app/pages/user/user.page.html
@@ -2,6 +2,10 @@
   <page-notfound *ngIf="notfound"></page-notfound>
   <ng-container *ngIf="user">
     <table>
+      <tr *ngIf="user.metadata && user.metadata.self">
+        <th></th>
+        <td><a routerLink="/settings">{{'settings' | i18n}}</a></td>
+      </tr>
       <tr>
         <th>{{'user.username' | i18n}}</th>
         <td>{{user.username}}</td>
diff --git a/src/styles.scss b/src/styles.scss
index 10870f0..c13d265 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -102,11 +102,6 @@ ui-main {
   bottom: 0;
 }
 
-mat-card {
-  max-width: 400px;
-  margin: 2em auto;
-}
-
 mat-form-field {
   display: block;
 }