BETTERZON-31, BETTERZON-50 (#25)

* BETTERZON-31, dependencies.

* BETTERZON-31: Fixing dependencies

* BETTERZON-31,
BETTERZON-50

info popover and footer had been changed.

Co-authored-by: Patrick Müller <patrick@mueller-patrick.tech>

Frontend/angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+                "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                 "src/styles.css",
                 "./node_modules/cookieconsent/build/cookieconsent.min.css"
             ],
@@ -91,6 +92,7 @@
               "src/assets"
             ],
             "styles": [
+                "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                 "src/styles.css",
                 "./node_modules/cookieconsent/build/cookieconsent.min.css"
             ],
@@ -125,7 +127,6 @@
           }
         }
       }
-        }
+    }},
-    },
   "defaultProject": "Betterzon"
 }

Frontend/package-lock.json

@@ -9,11 +9,13 @@
             "version": "0.0.0",
             "dependencies": {
                 "@angular/animations": "^10.2.3",
+                "@angular/cdk": "~10.2.7",
                 "@angular/cli": "^10.2.0",
                 "@angular/common": "^10.2.3",
                 "@angular/compiler": "^10.2.3",
                 "@angular/core": "^10.2.3",
                 "@angular/forms": "^10.2.3",
+                "@angular/material": "~10.2.7",
                 "@angular/platform-browser": "^10.2.3",
                 "@angular/platform-browser-dynamic": "^10.2.3",
                 "@angular/router": "^10.2.3",
@@ -397,6 +399,27 @@
                 "tslib": "^2.0.0"
             }
         },
+        "node_modules/@angular/cdk": {
+            "version": "10.2.7",
+            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-10.2.7.tgz",
+            "integrity": "sha512-ZQjDfTRTn7JuAKsf3jiIdU2XBaxxGBi/ZWYv5Pb3HCl6B4PISsIE5VWRhkoUogoAB0MiFHpjnWeIqknJEm11YQ==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "optionalDependencies": {
+                "parse5": "^5.0.0"
+            },
+            "peerDependencies": {
+                "@angular/common": "^10.0.0 || ^11.0.0-0",
+                "@angular/core": "^10.0.0 || ^11.0.0-0"
+            }
+        },
+        "node_modules/@angular/cdk/node_modules/parse5": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+            "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+            "optional": true
+        },
         "node_modules/@angular/cli": {
             "version": "10.2.1",
             "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.2.1.tgz",
@@ -771,6 +794,21 @@
                 "tslib": "^2.0.0"
             }
         },
+        "node_modules/@angular/material": {
+            "version": "10.2.7",
+            "resolved": "https://registry.npmjs.org/@angular/material/-/material-10.2.7.tgz",
+            "integrity": "sha512-uk6JkRrKHaM9VFMzX7pWC83YNLVgXPB3D8U1yjSOafCdWwrRZgUHGr8MPlSILCr3o2nxgg5SsKdWcWwHuXXUZA==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "peerDependencies": {
+                "@angular/animations": "^10.0.0 || ^11.0.0-0",
+                "@angular/cdk": "10.2.7",
+                "@angular/common": "^10.0.0 || ^11.0.0-0",
+                "@angular/core": "^10.0.0 || ^11.0.0-0",
+                "@angular/forms": "^10.0.0 || ^11.0.0-0"
+            }
+        },
         "node_modules/@angular/platform-browser": {
             "version": "10.2.3",
             "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.2.3.tgz",
@@ -16542,6 +16580,23 @@
                 "tslib": "^2.0.0"
             }
         },
+        "@angular/cdk": {
+            "version": "10.2.7",
+            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-10.2.7.tgz",
+            "integrity": "sha512-ZQjDfTRTn7JuAKsf3jiIdU2XBaxxGBi/ZWYv5Pb3HCl6B4PISsIE5VWRhkoUogoAB0MiFHpjnWeIqknJEm11YQ==",
+            "requires": {
+                "parse5": "^5.0.0",
+                "tslib": "^2.0.0"
+            },
+            "dependencies": {
+                "parse5": {
+                    "version": "5.1.1",
+                    "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+                    "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+                    "optional": true
+                }
+            }
+        },
         "@angular/cli": {
             "version": "10.2.1",
             "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.2.1.tgz",
@@ -16838,6 +16893,14 @@
                 "tslib": "^2.0.0"
             }
         },
+        "@angular/material": {
+            "version": "10.2.7",
+            "resolved": "https://registry.npmjs.org/@angular/material/-/material-10.2.7.tgz",
+            "integrity": "sha512-uk6JkRrKHaM9VFMzX7pWC83YNLVgXPB3D8U1yjSOafCdWwrRZgUHGr8MPlSILCr3o2nxgg5SsKdWcWwHuXXUZA==",
+            "requires": {
+                "tslib": "^2.0.0"
+            }
+        },
         "@angular/platform-browser": {
             "version": "10.2.3",
             "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.2.3.tgz",

Frontend/package.json

@@ -12,11 +12,13 @@
     "private": true,
     "dependencies": {
         "@angular/animations": "^10.2.3",
+        "@angular/cdk": "~10.2.7",
         "@angular/cli": "^10.2.0",
         "@angular/common": "^10.2.3",
         "@angular/compiler": "^10.2.3",
         "@angular/core": "^10.2.3",
         "@angular/forms": "^10.2.3",
+        "@angular/material": "~10.2.7",
         "@angular/platform-browser": "^10.2.3",
         "@angular/platform-browser-dynamic": "^10.2.3",
         "@angular/router": "^10.2.3",

Frontend/src/app/app.module.ts

@@ -15,6 +15,8 @@ import {HeaderComponent} from './components/header/header.component';
 import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
 import {FormsModule} from '@angular/forms';
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
+import {MatMenuModule} from '@angular/material/menu';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {ImprintComponent} from './pages/imprint/imprint.component';
 import {PrivacyComponent} from './pages/privacy/privacy.component';
 import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';
@@ -79,6 +81,8 @@ const cookieConfig: NgcCookieConsentConfig = {
         HttpClientModule,
         NgApexchartsModule,
         FormsModule,
+        MatMenuModule,
+        BrowserAnimationsModule,
         NgcCookieConsentModule.forRoot(cookieConfig)
     ],
     providers: [],

Frontend/src/app/components/footer/footer.component.html

@@ -6,8 +6,8 @@
     <div class='wrap' id="footer-icons">
         <div class="icons">
             <a href="https://github.com/Mueller-Patrick/Betterzon" class="fa fa-github fa-4x icon-3d"></a>
-            <a href="https://twitter.com/elonmusk" class="fa fa-twitter fa-4x icon-3d"></a>
+            <a href="https://blog.betterzon.xyz/" class="fa fa-info fa-4x icon-3d"></a>
-            <a href="https://www.facebook.com/TheElonmusk/" class="fa fa-facebook fa-4x icon-3d"></a>
+            <a href="https://github.com/Mueller-Patrick/Betterzon/wiki" class="fa fa-wikipedia-w fa-4x icon-3d"></a>
         </div>
         <div class = "blocks" id="copyright">© COPYRIGHT 2020</div>
     </div>

Frontend/src/app/components/header/header.component.html

@@ -8,7 +8,13 @@
             <input *ngIf="showSearch===true" type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
         </div>
         <div class="profileIcon">
-            Profile
+            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
+            <mat-menu #menu="matMenu">
+                <button mat-menu-item>Option 1</button>
+                <button mat-menu-item>Option 2</button>
+                <button mat-menu-item>Option 3</button>
+                <button mat-menu-item>Option 4</button>
+            </mat-menu>
         </div>
     </div>
 </header>

Frontend/src/app/components/header/header.component.ts

@@ -4,8 +4,9 @@ import {Router} from '@angular/router';
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
-    styleUrls: ['./header.component.css']
+    styleUrls: ['./header.component.css'],
 })
+
 export class HeaderComponent implements OnInit {
     searchInput: string;
     @Input() showSearch: boolean;

Frontend/src/index.html

@@ -6,7 +6,8 @@
         <base href="/">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="icon" type="image/x-icon" href="favicon.ico">
-        <link rel="stylesheet" type="text/css" href="node_modules/cookieconsent/build/cookieconsent.min.css"/>
+        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
     </head>
     <body>

Frontend/src/styles.css

@@ -4,3 +4,6 @@ body {
     font-family: sans-serif;
     margin-bottom: 10em;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }