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>
2024-11-21 22:03:58 +00:00 · 2021-04-08 11:28:05 +02:00 · 2021-04-08 11:28:05 +02:00 · 632491c33d
commit 632491c33d
parent 55a019d217
9 changed files with 212 additions and 131 deletions
--- a/Frontend/angular.json
+++ b/Frontend/angular.json
@ -1,131 +1,132 @@
 {
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "version": 1,
-    "newProjectRoot": "projects",
-    "projects": {
-        "Betterzon": {
-            "projectType": "application",
-            "schematics": {},
-            "root": "",
-            "sourceRoot": "src",
-            "prefix": "app",
-            "architect": {
-                "build": {
-                    "builder": "@angular-devkit/build-angular:browser",
-                    "options": {
-                        "outputPath": "dist/Betterzon",
-                        "index": "src/index.html",
-                        "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "tsconfig.app.json",
-                        "aot": true,
-                        "assets": [
-                            "src/favicon.ico",
-                            "src/assets"
-                        ],
-                        "styles": [
-                            "src/styles.css",
-                            "./node_modules/cookieconsent/build/cookieconsent.min.css"
-                        ],
-                        "scripts": [
-                            "./node_modules/cookieconsent/build/cookieconsent.min.js"
-                        ]
-                    },
-                    "configurations": {
-                        "production": {
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.prod.ts"
-                                }
-                            ],
-                            "optimization": true,
-                            "outputHashing": "all",
-                            "sourceMap": false,
-                            "extractCss": true,
-                            "namedChunks": false,
-                            "extractLicenses": true,
-                            "vendorChunk": false,
-                            "buildOptimizer": true,
-                            "budgets": [
-                                {
-                                    "type": "initial",
-                                    "maximumWarning": "2mb",
-                                    "maximumError": "5mb"
-                                },
-                                {
-                                    "type": "anyComponentStyle",
-                                    "maximumWarning": "6kb",
-                                    "maximumError": "10kb"
-                                }
-                            ]
-                        }
-                    }
-                },
-                "serve": {
-                    "builder": "@angular-devkit/build-angular:dev-server",
-                    "options": {
-                        "browserTarget": "Betterzon:build"
-                    },
-                    "configurations": {
-                        "production": {
-                            "browserTarget": "Betterzon:build:production"
-                        }
-                    }
-                },
-                "extract-i18n": {
-                    "builder": "@angular-devkit/build-angular:extract-i18n",
-                    "options": {
-                        "browserTarget": "Betterzon:build"
-                    }
-                },
-                "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
-                    "options": {
-                        "main": "src/test.ts",
-                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "tsconfig.spec.json",
-                        "karmaConfig": "karma.conf.js",
-                        "assets": [
-                            "src/favicon.ico",
-                            "src/assets"
-                        ],
-                        "styles": [
-                            "src/styles.css",
-                            "./node_modules/cookieconsent/build/cookieconsent.min.css"
-                        ],
-                        "scripts": [
-                            "./node_modules/cookieconsent/build/cookieconsent.min.js"
-                        ]
-                    }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": [
-                            "tsconfig.app.json",
-                            "tsconfig.spec.json",
-                            "e2e/tsconfig.json"
-                        ],
-                        "exclude": [
-                            "**/node_modules/**"
-                        ]
-                    }
-                },
-                "e2e": {
-                    "builder": "@angular-devkit/build-angular:protractor",
-                    "options": {
-                        "protractorConfig": "e2e/protractor.conf.js",
-                        "devServerTarget": "Betterzon:serve"
-                    },
-                    "configurations": {
-                        "production": {
-                            "devServerTarget": "Betterzon:serve:production"
-                        }
-                    }
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "Betterzon": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/Betterzon",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+                "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+                "src/styles.css",
+                "./node_modules/cookieconsent/build/cookieconsent.min.css"
+            ],
+            "scripts": [
+                "./node_modules/cookieconsent/build/cookieconsent.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "Betterzon:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "Betterzon:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "Betterzon:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+                "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+                "src/styles.css",
+                "./node_modules/cookieconsent/build/cookieconsent.min.css"
+            ],
+            "scripts": [
+                "./node_modules/cookieconsent/build/cookieconsent.min.js"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "Betterzon:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "Betterzon:serve:production"
+            }
+          }
        }
-    },
-    "defaultProject": "Betterzon"
+      }
+    }},
+  "defaultProject": "Betterzon"
 }
--- a/Frontend/package-lock.json
+++ b/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",
--- a/Frontend/package.json
+++ b/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",
--- a/Frontend/src/app/app.module.ts
+++ b/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: [],
--- a/Frontend/src/app/components/footer/footer.component.html
+++ b/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://www.facebook.com/TheElonmusk/" class="fa fa-facebook fa-4x icon-3d"></a>
+            <a href="https://blog.betterzon.xyz/" class="fa fa-info 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>
--- a/Frontend/src/app/components/header/header.component.html
+++ b/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>
--- a/Frontend/src/app/components/header/header.component.ts
+++ b/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;
--- a/Frontend/src/index.html
+++ b/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>
--- a/Frontend/src/styles.css
+++ b/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; }