diff --git a/package-lock.json b/package-lock.json index 8a5524cb..0a5274a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,10 @@ "@angular/platform-browser-dynamic": "~13.2.5", "@angular/router": "~13.2.5", "@fontsource/jost": "^4.5.4", + "@fontsource/nothing-you-could-do": "^4.5.8", "@sentry/angular": "^6.18.2", + "@tabler/icons": "^1.109.0", + "angular-tabler-icons": "^1.112.0", "ng-particles": "^2.40.2", "rxjs": "~7.5.0", "tslib": "^2.3.0", @@ -2631,6 +2634,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz", "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ==" }, + "node_modules/@fontsource/nothing-you-could-do": { + "version": "4.5.8", + "resolved": "https://registry.npmjs.org/@fontsource/nothing-you-could-do/-/nothing-you-could-do-4.5.8.tgz", + "integrity": "sha512-gbWrGiuvG6TA2qRopcywotFRMNQoVsdBiA9lWQ88WqjUElARgv+ctvPwOD7MVGbdxy3cvO7xJ4QHUoqFHmE6pg==" + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -3718,6 +3726,27 @@ "node": ">=10" } }, + "node_modules/@tabler/icons": { + "version": "1.109.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.109.0.tgz", + "integrity": "sha512-B0YetE4pB6HY2Wa57v/LJ3NgkJzKYPze4U0DurIqPoKSptatKv2ga76FZSkO6EUpkYfHMtGPM6QjpJljfuCmAQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": "^16.x || 17.x || 18.x", + "react-dom": "^16.x || 17.x || 18.x" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -4472,9 +4501,9 @@ } }, "node_modules/adjust-sourcemap-loader/node_modules/loader-utils": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", - "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", "dev": true, "dependencies": { "big.js": "^5.2.2", @@ -4569,6 +4598,18 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-tabler-icons": { + "version": "1.112.0", + "resolved": "https://registry.npmjs.org/angular-tabler-icons/-/angular-tabler-icons-1.112.0.tgz", + "integrity": "sha512-DCWFPnaGRdT4TgS1S1WxtcHu3flwFup0OHxtOZKCr3KCdK1mP7gV/0xrWxR1DOH71GLCLFKtMJavG6tR+TRn3g==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "11 - 14", + "@angular/core": "11 - 14" + } + }, "node_modules/ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -4696,9 +4737,9 @@ } }, "node_modules/async": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", - "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=", + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", + "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==", "dev": true }, "node_modules/at-least-node": { @@ -4787,9 +4828,9 @@ } }, "node_modules/babel-loader/node_modules/loader-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", - "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", + "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", "dev": true, "dependencies": { "big.js": "^5.2.2", @@ -6267,12 +6308,12 @@ "dev": true }, "node_modules/ejs": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", - "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz", + "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==", "dev": true, "dependencies": { - "jake": "^10.6.1" + "jake": "^10.8.5" }, "bin": { "ejs": "bin/cli.js" @@ -7446,12 +7487,33 @@ } }, "node_modules/filelist": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", - "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", "dev": true, "dependencies": { - "minimatch": "^3.0.4" + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", + "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" } }, "node_modules/fill-range": { @@ -8701,13 +8763,13 @@ } }, "node_modules/jake": { - "version": "10.8.2", - "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz", - "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==", + "version": "10.8.5", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", + "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==", "dev": true, "dependencies": { - "async": "0.9.x", - "chalk": "^2.4.2", + "async": "^3.2.3", + "chalk": "^4.0.2", "filelist": "^1.0.1", "minimatch": "^3.0.4" }, @@ -8715,7 +8777,77 @@ "jake": "bin/cli.js" }, "engines": { - "node": "*" + "node": ">=10" + } + }, + "node_modules/jake/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/jake/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jake/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/jake/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/jake/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/jake/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" } }, "node_modules/jasmine-core": { @@ -9566,10 +9698,13 @@ } }, "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/minipass": { "version": "3.1.6", @@ -9821,9 +9956,9 @@ "optional": true }, "node_modules/node-forge": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz", - "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz", + "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==", "dev": true, "engines": { "node": ">= 6.13.0" @@ -10695,9 +10830,9 @@ } }, "node_modules/portfinder/node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -11643,9 +11778,9 @@ } }, "node_modules/resolve-url-loader/node_modules/loader-utils": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", - "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", "dev": true, "dependencies": { "big.js": "^5.2.2", @@ -12144,9 +12279,9 @@ "dev": true }, "node_modules/socket.io-parser": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", - "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.5.tgz", + "integrity": "sha512-sNjbT9dX63nqUFIOv95tTVm6elyIU4RvB1m8dOeZt+IgWwcWklFDOdmGcfo3zSiRsnR/3pJkjY5lfoGqEe4Eig==", "dev": true, "dependencies": { "@types/component-emitter": "^1.2.10", @@ -15362,6 +15497,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz", "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ==" }, + "@fontsource/nothing-you-could-do": { + "version": "4.5.8", + "resolved": "https://registry.npmjs.org/@fontsource/nothing-you-could-do/-/nothing-you-could-do-4.5.8.tgz", + "integrity": "sha512-gbWrGiuvG6TA2qRopcywotFRMNQoVsdBiA9lWQ88WqjUElARgv+ctvPwOD7MVGbdxy3cvO7xJ4QHUoqFHmE6pg==" + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -16152,6 +16292,12 @@ "dev": true, "optional": true }, + "@tabler/icons": { + "version": "1.109.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.109.0.tgz", + "integrity": "sha512-B0YetE4pB6HY2Wa57v/LJ3NgkJzKYPze4U0DurIqPoKSptatKv2ga76FZSkO6EUpkYfHMtGPM6QjpJljfuCmAQ==", + "requires": {} + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -16747,9 +16893,9 @@ }, "dependencies": { "loader-utils": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", - "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", "dev": true, "requires": { "big.js": "^5.2.2", @@ -16819,6 +16965,14 @@ "fast-deep-equal": "^3.1.3" } }, + "angular-tabler-icons": { + "version": "1.112.0", + "resolved": "https://registry.npmjs.org/angular-tabler-icons/-/angular-tabler-icons-1.112.0.tgz", + "integrity": "sha512-DCWFPnaGRdT4TgS1S1WxtcHu3flwFup0OHxtOZKCr3KCdK1mP7gV/0xrWxR1DOH71GLCLFKtMJavG6tR+TRn3g==", + "requires": { + "tslib": "^2.0.0" + } + }, "ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -16913,9 +17067,9 @@ "dev": true }, "async": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", - "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=", + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", + "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==", "dev": true }, "at-least-node": { @@ -16972,9 +17126,9 @@ } }, "loader-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", - "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", + "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", "dev": true, "requires": { "big.js": "^5.2.2", @@ -18091,12 +18245,12 @@ "dev": true }, "ejs": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", - "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz", + "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==", "dev": true, "requires": { - "jake": "^10.6.1" + "jake": "^10.8.5" } }, "electron-to-chromium": { @@ -18898,12 +19052,32 @@ } }, "filelist": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", - "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", "dev": true, "requires": { - "minimatch": "^3.0.4" + "minimatch": "^5.0.1" + }, + "dependencies": { + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0" + } + }, + "minimatch": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", + "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "dev": true, + "requires": { + "brace-expansion": "^2.0.1" + } + } } }, "fill-range": { @@ -19830,15 +20004,66 @@ } }, "jake": { - "version": "10.8.2", - "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz", - "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==", + "version": "10.8.5", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", + "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==", "dev": true, "requires": { - "async": "0.9.x", - "chalk": "^2.4.2", + "async": "^3.2.3", + "chalk": "^4.0.2", "filelist": "^1.0.1", "minimatch": "^3.0.4" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } } }, "jasmine-core": { @@ -20481,9 +20706,9 @@ } }, "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", "dev": true }, "minipass": { @@ -20672,9 +20897,9 @@ "optional": true }, "node-forge": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz", - "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz", + "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==", "dev": true }, "node-gyp": { @@ -21344,9 +21569,9 @@ }, "dependencies": { "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" @@ -22009,9 +22234,9 @@ }, "dependencies": { "loader-utils": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", - "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", "dev": true, "requires": { "big.js": "^5.2.2", @@ -22392,9 +22617,9 @@ "dev": true }, "socket.io-parser": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", - "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.5.tgz", + "integrity": "sha512-sNjbT9dX63nqUFIOv95tTVm6elyIU4RvB1m8dOeZt+IgWwcWklFDOdmGcfo3zSiRsnR/3pJkjY5lfoGqEe4Eig==", "dev": true, "requires": { "@types/component-emitter": "^1.2.10", diff --git a/package.json b/package.json index cb773f4b..01a0e30c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,10 @@ "@angular/platform-browser-dynamic": "~13.2.5", "@angular/router": "~13.2.5", "@fontsource/jost": "^4.5.4", + "@fontsource/nothing-you-could-do": "^4.5.8", "@sentry/angular": "^6.18.2", + "@tabler/icons": "^1.109.0", + "angular-tabler-icons": "^1.112.0", "ng-particles": "^2.40.2", "rxjs": "~7.5.0", "tslib": "^2.3.0", diff --git a/src/app/api/devices/device.service.ts b/src/app/api/devices/device.service.ts index 7d4d8e95..d251f5c7 100644 --- a/src/app/api/devices/device.service.ts +++ b/src/app/api/devices/device.service.ts @@ -11,7 +11,7 @@ export class DeviceService { constructor(private webSocket: WebsocketService) { } - getDeviceInfo(deviceUUID: string | null): Observable { + getDeviceInfo(deviceUUID: string | null): Observable { return this.deviceRequest(['device', 'info'], {device_uuid: deviceUUID}); } diff --git a/src/app/control-center/_control-center-style.scss b/src/app/control-center/_control-center-style.scss index 2c74e25b..44e6b61f 100644 --- a/src/app/control-center/_control-center-style.scss +++ b/src/app/control-center/_control-center-style.scss @@ -1,4 +1,5 @@ @import "variables"; +@import "theme-colors"; $header-background: #384044; $sidebar-background: #1e2529; @@ -11,3 +12,58 @@ $button-border-color: $gray; $button-hover-color: #21292d; $table-header-color: #7d7d7d; + +// mixins \\ + +@mixin sidebar-menu-item { + width: 100%; + + .title { + display: flex; + align-items: center; + + width: 250px; + height: 40px; + + margin: 0 auto; + + border-radius: 8px; + + font-size: 20px; + vertical-align: middle; + + cursor: pointer; + user-select: none; + outline: none; + + &:hover, &.active { + background-color: $primary-default; + color: $input-background; + font-weight: 500; + } + + .icon { + flex: 0 0 auto; + width: 24px; + height: 24px; + margin-left: 20px; + } + + span { + flex: 1 1 auto; + margin-left: 15px; + } + + .arrow { + flex: 0 0 auto; + margin-right: 15px; + } + } + + .children { + position: absolute; + left: 350px; + top: 0; + height: 100%; + } +} \ No newline at end of file diff --git a/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.html b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.html new file mode 100644 index 00000000..dcea7baa --- /dev/null +++ b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.html @@ -0,0 +1,41 @@ +
+
+
Computer
+
+ +
+
+ +
+
+
+
+ + + + + + + +
+
Create new
Computer
+
+
You own no Computer
+
+
+ + +
+
{{item.title}}
+ +
+ Offline + Online + + Unknown State +
+
+ + +
\ No newline at end of file diff --git a/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.scss b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.scss new file mode 100644 index 00000000..2d5e3324 --- /dev/null +++ b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.scss @@ -0,0 +1,122 @@ +@import "../control-center-style"; + +.computer-menu { + background-color: #2a2a31; + + padding: 50px; + + overflow: auto; + + width: 500px; + height: 100vh; + box-sizing: border-box; + + .title-bar { + display: flex; + align-items: center; + + .title { + font-weight: 500; + font-size: 40px; + } + + .add-computer { + margin-left: auto; + width: 50px; + height: 50px; + background-color: $input-background; + cursor: pointer; + border-radius: 16px; + + &:hover { + background-color: $primary-default; + color: $input-background; + } + + &-icon { + width: 24px; + height: 24px; + padding: 25% 0 0 25%; + } + + } + } + + .no-items { + .new-pc-indicator { + .arrow { + text-align: right; + position: relative; + right: 15px; + } + .text { + font-family: "Nothing You Could Do"; + text-align: center; + position: relative; + left: 50px; + } + } + .no-pcs { + text-align: center; + margin: 233px 0 0; + } + } + + .item { + cursor: pointer; + box-sizing: content-box; + padding: 13px 20px; + background-color: $input-background; + margin-top: 40px; + border-radius: 16px; + display: grid; + grid-template-areas: + "title icon" + "state state"; + + &:hover, &.active { + background-color: $primary-default; + color: $input-background; + + .state { + .online, .offline, .stopping, .starting, .unknown { + color: $input-background; + } + } + } + + .name { + grid-area: title; + justify-self: start; + margin-bottom: 1px; + } + + .state { + grid-area: state; + justify-self: start; + font-weight: 500; + + .online { + color: $primary-default; + } + + .offline { + color: $danger-default; + } + + .at_startup, .at_shutdown, .unknown { + color: $warning-default; + } + + .unknown { + font-style: italic; + } + + } + + .power-icon { + grid-area: icon; + justify-self: end; + } + } +} \ No newline at end of file diff --git a/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.spec.ts b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.spec.ts new file mode 100644 index 00000000..9698a4cd --- /dev/null +++ b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.spec.ts @@ -0,0 +1,29 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { SidebarMenu } from '../control-center-sidebar-menu/control-center-sidebar-menu.component'; + +import { ControlCenterComputerMenuComponent } from './control-center-computer-menu.component'; + +describe('ControlCenterComputerMenuComponent', () => { + let component: ControlCenterComputerMenuComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ControlCenterComputerMenuComponent ], + imports: [RouterTestingModule] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ControlCenterComputerMenuComponent); + component = fixture.componentInstance; + component.menu = new SidebarMenu('', ''); + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.ts b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.ts new file mode 100644 index 00000000..e969701a --- /dev/null +++ b/src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.ts @@ -0,0 +1,86 @@ +import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; +import { SidebarMenu, SidebarMenuItem } from '../control-center-sidebar-menu/control-center-sidebar-menu.component'; +import {Router} from '@angular/router'; +import {Device} from 'src/app/api/devices/device'; + +@Component({ + selector: 'app-control-center-computer-menu', + templateUrl: './control-center-computer-menu.component.html', + styleUrls: ['./control-center-computer-menu.component.scss'] +}) +export class ControlCenterComputerMenuComponent implements OnInit { + + @Input() menu: SidebarMenu; + @Input() expanded!: boolean; + @Output() expandChange = new EventEmitter(); + + @Input() devices: Device[]; + + states: any[] = []; + computerState = ComputerStateEnum; + + constructor(private router: Router) { + } + + ngOnInit(): void { + this.updatePcState(); + } + + updatePcState() { + + if (this.devices != undefined) { + this.devices.forEach(device => { + + switch (device.powered_on) { + + case true: + this.states.push({uuid: device.uuid, state: ComputerStateEnum.Online}); + break; + + case false: + this.states.push({uuid: device.uuid, state: ComputerStateEnum.Offline}); + break; + + default: + this.states.push({uuid: device.uuid, state: ComputerStateEnum.Unknown}); + break; + } + + }); + + } + + } + + itemClicked(item: SidebarMenuItem) { + this.router.navigate([item.routerLink], {queryParams: item.queryParams}).then(); + this.expanded = false; + this.expandChange.emit(this.expanded); + } + + newPcClicked() { + this.router.navigate(['/create-device']).then(); + this.expanded = false; + this.expandChange.emit(this.expanded); + } + + isItemActive(item: SidebarMenuItem) { + // had to do this without routerLinkActive because of the lack of https://github.com/angular/angular/issues/31154 + if (!item.routerLink) { + return false; + } + if (this.router.isActive(this.router.createUrlTree([item.routerLink], {queryParams: item.queryParams}), false)) { + return true; + } + return false; + } + +} + +enum ComputerStateEnum { + Online, + Offline, + Stopping, + Starting, + Unknown +} \ No newline at end of file diff --git a/src/app/control-center/control-center-create-device-page/control-center-create-device-page.component.html b/src/app/control-center/control-center-create-device-page/control-center-create-device-page.component.html index 30ea0dc9..8c26377c 100644 --- a/src/app/control-center/control-center-create-device-page/control-center-create-device-page.component.html +++ b/src/app/control-center/control-center-create-device-page/control-center-create-device-page.component.html @@ -1,6 +1,6 @@

Build a new device

-Build your first device
diff --git a/src/app/control-center/control-center-device-page/control-center-device-page.component.ts b/src/app/control-center/control-center-device-page/control-center-device-page.component.ts index 35362dbb..25716a12 100644 --- a/src/app/control-center/control-center-device-page/control-center-device-page.component.ts +++ b/src/app/control-center/control-center-device-page/control-center-device-page.component.ts @@ -5,9 +5,10 @@ import {from} from 'rxjs'; import {filter, mergeMap, map, switchMap, toArray} from 'rxjs/operators'; import {Device, DeviceResources, ResourceUsage} from '../../api/devices/device'; import {animate, animateChild, keyframes, query, state, style, transition, trigger} from '@angular/animations'; -import {ActivatedRoute, Router} from '@angular/router'; +import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; import {DeviceHardware} from '../../api/hardware/device-hardware'; import {ControlCenterService} from '../control-center.service'; +import { MessageService } from '../message-service.service'; function powerButtonColorAnimation(triggerName: string, property: string) { @@ -88,6 +89,7 @@ export class ControlCenterDevicePageComponent implements OnDestroy { private deviceService: DeviceService, private activatedRoute: ActivatedRoute, private controlCenterService: ControlCenterService, + private messageService: MessageService, private router: Router) { this.activatedRoute.data.subscribe(data => { this.hardware = data['hardware']; @@ -99,7 +101,22 @@ export class ControlCenterDevicePageComponent implements OnDestroy { }); } + //messaging + sendMessage(message: string): void { + // send message to subscribers via observable subject + this.messageService.sendMessage(this.device.uuid, message); + } + + + ngOnDestroy() { + // send the right state to ComputerMenu + // console.log((this.powerButton.state === "on") ? "off" : "on"); + // if (this.powerButton.animating) { + // this.sendMessage((this.powerButton.state === "on") ? "off" : "on"); + // } else { + // this.sendMessage((this.powerButton.state === "on") ? "on" : "off"); + // } this.powerButton.animating = false; } @@ -194,6 +211,14 @@ export class ControlCenterDevicePageComponent implements OnDestroy { powerButtonClicked() { if (!this.powerButton.animating) { this.powerButton.animating = true; + + // send "Am Auschalten" or "Am Einschalten" to ComputerMenu + // if (this.powerButton.state === 'off' || this.powerButton.state === 'fast-off') { + // this.sendMessage("amon"); + // } else { + // this.sendMessage("amoff"); + // } + this.powerButton.state = (this.powerButton.state === 'fast-off' || this.powerButton.state === 'off') ? 'on' : 'off'; } @@ -202,6 +227,12 @@ export class ControlCenterDevicePageComponent implements OnDestroy { powerAnimationDone() { if (this.powerButton.animating) { this.powerButton.animating = false; + + // send "Online" or "Offline" to ComputerMenu + // console.log(this.powerButton.state); + + this.sendMessage(this.powerButton.state); + this.deviceService.togglePower(this.device.uuid).subscribe(device => { Object.assign(this.device, device); this.updateServices(); diff --git a/src/app/control-center/control-center-network-page/control-center-network-page.component.html b/src/app/control-center/control-center-network-page/control-center-network-page.component.html new file mode 100644 index 00000000..6866f7ee --- /dev/null +++ b/src/app/control-center/control-center-network-page/control-center-network-page.component.html @@ -0,0 +1 @@ +

Network page coming soon!

diff --git a/src/app/control-center/control-center-network-page/control-center-network-page.component.scss b/src/app/control-center/control-center-network-page/control-center-network-page.component.scss new file mode 100644 index 00000000..3ff65895 --- /dev/null +++ b/src/app/control-center/control-center-network-page/control-center-network-page.component.scss @@ -0,0 +1,3 @@ +h1 { + margin-top: 0; +} diff --git a/src/app/control-center/control-center-network-page/control-center-network-page.component.spec.ts b/src/app/control-center/control-center-network-page/control-center-network-page.component.spec.ts new file mode 100644 index 00000000..4232d53b --- /dev/null +++ b/src/app/control-center/control-center-network-page/control-center-network-page.component.spec.ts @@ -0,0 +1,25 @@ +import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; + +import {ControlCenterNetworkPageComponent} from './control-center-network-page.component'; + +describe('ControlCenterNetworkPageComponent', () => { + let component: ControlCenterNetworkPageComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ControlCenterNetworkPageComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ControlCenterNetworkPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/control-center/control-center-network-page/control-center-network-page.component.ts b/src/app/control-center/control-center-network-page/control-center-network-page.component.ts new file mode 100644 index 00000000..80170491 --- /dev/null +++ b/src/app/control-center/control-center-network-page/control-center-network-page.component.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'app-control-center-network-page', + templateUrl: './control-center-network-page.component.html', + styleUrls: ['./control-center-network-page.component.scss'] +}) +export class ControlCenterNetworkPageComponent { +} diff --git a/src/app/control-center/control-center-routing.module.ts b/src/app/control-center/control-center-routing.module.ts index 32f2b87a..416da8c8 100644 --- a/src/app/control-center/control-center-routing.module.ts +++ b/src/app/control-center/control-center-routing.module.ts @@ -20,6 +20,7 @@ import { ControlCenterSettingsPageComponent } from "./control-center-settings-page/control-center-settings-page.component"; import {ControlCenterSoundPageComponent} from "./control-center-sound-page/control-center-sound-page.component"; +import {ControlCenterNetworkPageComponent} from "./control-center-network-page/control-center-network-page.component"; import { ControlCenterChangelogPageComponent } from "./control-center-changelog-page/control-center-changelog-page.component"; @@ -52,6 +53,7 @@ const routes: Routes = [ }, {path: 'settings', component: ControlCenterSettingsPageComponent}, {path: 'sound', component: ControlCenterSoundPageComponent}, + {path: 'network', component: ControlCenterNetworkPageComponent}, {path: 'changelog', component: ControlCenterChangelogPageComponent} ] } diff --git a/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.html b/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.html index 4f50cef1..c46a991e 100644 --- a/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.html +++ b/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.html @@ -1,14 +1,11 @@
-
- - {{menu.title}}{{menu.displayCount ? ' (' + menu.getDisplayCount() + ')' : ''}} - - - + +
+ + {{menu.title}}
-
-
{{item.title}}
+
+
-
+ +
\ No newline at end of file diff --git a/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.scss b/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.scss index b5d9ea02..0f66f6b2 100644 --- a/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.scss +++ b/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.scss @@ -1,64 +1,5 @@ @import "../control-center-style"; -@import "variables"; .sub-menu { - width: 100%; - - .title { - display: flex; - align-items: center; - - padding-left: 20px; - font-size: 16pt; - line-height: 3em; - vertical-align: middle; - border-bottom: 1px solid $button-border-color; - - cursor: pointer; - user-select: none; - outline: none; - - &:hover { - background-color: $button-hover-color; - } - - .icon { - flex: 0 0 auto; - width: 2em; - height: 2em; - } - - span { - flex: 1 1 auto; - margin-left: 1em; - } - - .arrow { - flex: 0 0 auto; - margin-right: 15px; - } - } - - .children { - border-bottom: 1px solid $gray; - - .child { - font-size: 12pt; - line-height: 25pt; - padding-left: 20px; - - cursor: pointer; - user-select: none; - outline: none; - - &:hover { - background-color: $button-hover-color; - } - - &.active { - background-color: $sidebar-active-color; - } - - } - } + @include sidebar-menu-item; } diff --git a/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.ts b/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.ts index 9aaed873..987ea3cc 100644 --- a/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.ts +++ b/src/app/control-center/control-center-sidebar-menu/control-center-sidebar-menu.component.ts @@ -1,6 +1,10 @@ -import {Component, Input} from '@angular/core'; +import {Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild} from '@angular/core'; import {animate, state, style, transition, trigger} from '@angular/animations'; import {Params, Router} from '@angular/router'; +import { DeviceService } from 'src/app/api/devices/device.service'; +import { Device } from 'src/app/api/devices/device'; +import { Subscription } from 'rxjs'; +import { MessageService } from '../message-service.service'; @Component({ selector: 'app-control-center-sidebar-menu', @@ -8,85 +12,135 @@ import {Params, Router} from '@angular/router'; trigger('expandCollapse', [ transition('void => *', [ style({ - opacity: '0', - transform: 'scaleY(0.5) translateY(-10%)' + opacity: '0' }), - animate('200ms') + animate('170ms') ]), transition('* => void', [ - animate('200ms', style({ - opacity: '0', - transform: 'scaleY(0.5) translateY(-10%)' + animate('170ms', style({ + opacity: '0' })) ]) - ]), - trigger('arrowUpwardsDownwards', [ - state('upwards', style({})), - state('downwards', style({ - transform: 'rotateX(-180deg)' - })), - transition('upwards <=> downwards', [ - animate('200ms') - ]) ]) ], templateUrl: './control-center-sidebar-menu.component.html', styleUrls: ['./control-center-sidebar-menu.component.scss'] }) -export class ControlCenterSidebarMenuComponent { +export class ControlCenterSidebarMenuComponent implements OnInit, OnDestroy { expanded = false; + devices: Device[]; + + messages: any[] = []; + subscription: Subscription; @Input() menu: SidebarMenu; - constructor(private router: Router) { + @ViewChild('computerMenu') computerMenu: ElementRef; + @ViewChild('button') button: ElementRef; + + constructor(private router: Router, private renderer: Renderer2, private deviceService: DeviceService, private messageService: MessageService) { + this.renderer.listen('window', 'click',(e:Event) => { + /** + * Only run when toggleButton is not clicked + * If we don't check this, all clicks (even on the toggle button) gets into this + * section which in the result we might never see the menu open! + * And the menu itself is checked here, and it's where we check just outside of + * the menu and button the condition abbove must close the menu + */ + if(this.expanded) { + if(!this.computerMenu.nativeElement.contains(e.target) && !this.button.nativeElement.contains(e.target)) { + this.expanded = false; + } + } + }); + + this.subscription = this.messageService.onMessage().subscribe(message => { + var msg = this.messages.find((msg) => { + return msg.uuid === message.uuid; + }) + if (msg !== undefined) { + this.messages.splice(this.messages.indexOf(msg), 1, message) + } else { + this.messages.push(message); + } + + + }); } - menuClicked() { + ngOnDestroy(): void { + this.subscription.unsubscribe(); + } + + ngOnInit(): void { + //doing it here so the submenu doesn't make a request every time the menu is clicked if (this.menu.items.length !== 0) { + this.deviceService.getDevices().subscribe(devices => { + this.devices = devices.devices; + }); + } + } + + menuClicked() { + if (this.menu.items.length !== 0 || this.menu.specialItems === 1) { this.expanded = !this.expanded; } + + + if (this.menu.routerLink) { this.router.navigate([this.menu.routerLink], {queryParams: this.menu.queryParams}).then(); + } else if (this.menu.link) { + window.open(this.menu.link, '_blank'); } } - itemClicked(item: SidebarMenuItem) { - this.router.navigate([item.routerLink], {queryParams: item.queryParams}).then(); - } - isItemActive(item: SidebarMenuItem) { - // had to do this without routerLinkActive because of the lack of https://github.com/angular/angular/issues/31154 if (!item.routerLink) { + if (item.title == "Computer" && this.router.isActive(this.router.createUrlTree(['/device'], {queryParams: item.queryParams}), false)) { + return true; + } return false; } return this.router.isActive(this.router.createUrlTree([item.routerLink], {queryParams: item.queryParams}), false); + } } +export enum SubMenuType { + Computer = "Computer" +} + export class SidebarMenu { title: string; icon: string; + header?: string; + link?: string; items: SidebarMenuItem[]; displayCount: boolean; specialItems: number; routerLink?: string; queryParams?: Params; + subMenuType?: SubMenuType; constructor(title: string, icon: string, options: { - items?: SidebarMenuItem[]; displayCount?: boolean; specialItems?: number; - routerLink?: string; queryParams?: Params; + items?: SidebarMenuItem[]; subMenuType?: SubMenuType; displayCount?: boolean; specialItems?: number; + routerLink?: string; queryParams?: Params; header?: string; link?: string; } = {}) { this.title = title; this.icon = icon; + this.header = options.header; + this.link = options.link; this.items = options.items ?? []; this.displayCount = options.displayCount ?? false; this.specialItems = options.specialItems ?? 0; this.routerLink = options.routerLink; this.queryParams = options.queryParams; + this.subMenuType = options.subMenuType; } getDisplayCount(): number { @@ -97,5 +151,6 @@ export class SidebarMenu { export interface SidebarMenuItem { title: string; routerLink?: string; + link?: string; queryParams?: Params; } diff --git a/src/app/control-center/control-center-sidebar/control-center-sidebar.component.html b/src/app/control-center/control-center-sidebar/control-center-sidebar.component.html index 5277fce3..dd7e8682 100644 --- a/src/app/control-center/control-center-sidebar/control-center-sidebar.component.html +++ b/src/app/control-center/control-center-sidebar/control-center-sidebar.component.html @@ -1,8 +1,24 @@ diff --git a/src/app/control-center/control-center-sidebar/control-center-sidebar.component.scss b/src/app/control-center/control-center-sidebar/control-center-sidebar.component.scss index ff5346c7..9f39f333 100644 --- a/src/app/control-center/control-center-sidebar/control-center-sidebar.component.scss +++ b/src/app/control-center/control-center-sidebar/control-center-sidebar.component.scss @@ -3,42 +3,92 @@ #sidebar-container { display: flex; flex-direction: column; + width: 100%; height: 100%; - .footer { - margin: auto 25px 15px; - - .logout-button { - margin-bottom: 25px; - padding: 0.75em; - color: white; - background-color: $sidebar-background; - font-size: 12pt; - cursor: pointer; - outline: none; - - border: 2px solid $button-border-color; - border-radius: 10px; - - &:hover { - background-color: $button-hover-color; + user-select: none; + + .lettering { + font-weight: 500; + font-size: 40px; + margin-left: 70px; + margin-top: 30px; + margin-bottom: 10px; + text-transform: uppercase; + line-height: 38px; + background-color: $input-background; + } + + .sidebar-items { + overflow: auto; + + .sidebar-item { + &:first-child { + margin-top: 0 !important; + } + + &:not(.has-header) { + margin-top: 2px; } - } - .username { - font-size: 12pt; - margin: 0 0 5px; - overflow-wrap: break-word; + &.has-header { + margin-top: 40px; + } + + .menu-header { + margin-left: 70px; + margin-bottom: 10px; + } } + } + + .footer { + margin: auto 0 0; + background: $input-background; + + .pic-name { + display: flex; + margin-left: 50px; + margin-right: 50px; + margin-bottom: 30px; + margin-top: 10px; + + .username { + font-size: 16px; + margin: auto 0; + + font-weight: 700; - .imprint { - margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; - a { - color: gray; + .logged-in-as { + font-weight: 300; + color: $grey-font; + } + + .name { + font-size: 20px; + color: white; + + user-select: all; + } + } + + .profile-pic { + margin-right: 30px; + width: 75px; + height: 75px; + border-radius: 15px; } } } -} + .logout-button { + margin-bottom: 30px; + @include sidebar-menu-item; + } + +} \ No newline at end of file diff --git a/src/app/control-center/control-center-sidebar/control-center-sidebar.component.ts b/src/app/control-center/control-center-sidebar/control-center-sidebar.component.ts index e5cabdec..a73fc1a8 100644 --- a/src/app/control-center/control-center-sidebar/control-center-sidebar.component.ts +++ b/src/app/control-center/control-center-sidebar/control-center-sidebar.component.ts @@ -5,6 +5,7 @@ import { } from '../control-center-sidebar-menu/control-center-sidebar-menu.component'; import {WebsocketService} from '../../websocket.service'; import {AccountService} from '../../account/account.service'; +// import { ControlCenterComputerMenuComponent } from './control-center-computer-menu/control-center-computer-menu.component'; @Component({ selector: 'app-control-center-sidebar', diff --git a/src/app/control-center/control-center.component.html b/src/app/control-center/control-center.component.html index 31f1e18b..d0ab356a 100644 --- a/src/app/control-center/control-center.component.html +++ b/src/app/control-center/control-center.component.html @@ -1,7 +1,4 @@
-
-

Control-Center

-
diff --git a/src/app/control-center/control-center.component.scss b/src/app/control-center/control-center.component.scss index 8433f94b..1b802110 100644 --- a/src/app/control-center/control-center.component.scss +++ b/src/app/control-center/control-center.component.scss @@ -30,12 +30,13 @@ .sidebar { flex: 0 0 auto; - width: 20rem; + min-width: 350px; + max-width: 850px; height: 100%; overflow-y: auto; - background-color: $sidebar-background; + background-color: $input-background; } .main-page-container { @@ -45,7 +46,7 @@ overflow-y: auto; - background-color: $page-background; + background-color: $background; .main-page { padding: 1.5rem 3rem; diff --git a/src/app/control-center/control-center.component.ts b/src/app/control-center/control-center.component.ts index 93f5babf..34574292 100644 --- a/src/app/control-center/control-center.component.ts +++ b/src/app/control-center/control-center.component.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {SidebarMenu} from './control-center-sidebar-menu/control-center-sidebar-menu.component'; +import {SidebarMenu, SubMenuType} from './control-center-sidebar-menu/control-center-sidebar-menu.component'; import {ControlCenterService} from './control-center.service'; @Component({ @@ -11,14 +11,21 @@ export class ControlCenterComponent { menus: SidebarMenu[] = [ new SidebarMenu( - $localize`Computers`, - 'menu_computers.svg', - {items: this.controlCenterService.deviceSidebarMenuItems, displayCount: true, specialItems: 1} + $localize`Computer`, + 'device-desktop', + {items: this.controlCenterService.deviceSidebarMenuItems, subMenuType: SubMenuType.Computer, displayCount: true, specialItems: 1, header: $localize`Game`} ), - new SidebarMenu($localize`Inventory`, 'menu_inventory.svg', {routerLink: '/inventory'}), - new SidebarMenu($localize`Settings`, 'menu_settings.svg', {routerLink: '/settings'}), - new SidebarMenu($localize`Sound`, 'menu_sound.svg', {routerLink: '/sound'}), - new SidebarMenu($localize`Changelog`, 'menu_changelog.svg', {routerLink: '/changelog'}) + new SidebarMenu($localize`Inventory`, 'briefcase', { routerLink: '/inventory' }), + new SidebarMenu($localize`Network`, 'affiliate', { routerLink: '/network' }), + + // Other + new SidebarMenu($localize`Account`, 'user', { routerLink: '/settings', header: $localize`Other` }), + new SidebarMenu($localize`Wiki`, 'lifebuoy', { link: 'https://wiki.cryptic-game.net/' }), + new SidebarMenu($localize`Bug Report`, 'bug', { link: 'https://github.com/cryptic-game/frontend/issues/new?labels=bug&template=BUG_REPORT.md' }), + new SidebarMenu($localize`Server Status`, 'activity', { link: 'https://status.cryptic-game.net/' }), + // new SidebarMenu($localize`Sound`, 'volume' {routerLink: '/sound'}), + new SidebarMenu($localize`Changelog`, 'code', { routerLink: '/changelog' }), + new SidebarMenu($localize`Impressum`, 'license', { link: 'https://the-morpheus.de/#contact/' }) ]; constructor(private controlCenterService: ControlCenterService) { diff --git a/src/app/control-center/control-center.module.ts b/src/app/control-center/control-center.module.ts index 0edba10d..fb2a8c14 100644 --- a/src/app/control-center/control-center.module.ts +++ b/src/app/control-center/control-center.module.ts @@ -19,6 +19,8 @@ import { } from './control-center-inventory-page/control-center-inventory-page.component'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {ControlCenterRoutingModule} from "./control-center-routing.module"; +import {IconsModule} from '../icons/icons.module'; +import {ControlCenterComputerMenuComponent} from './control-center-computer-menu/control-center-computer-menu.component'; @NgModule({ declarations: [ @@ -30,13 +32,15 @@ import {ControlCenterRoutingModule} from "./control-center-routing.module"; ControlCenterSettingsPageComponent, ControlCenterSoundPageComponent, ControlCenterChangelogPageComponent, - ControlCenterInventoryPageComponent + ControlCenterInventoryPageComponent, + ControlCenterComputerMenuComponent ], imports: [ CommonModule, ControlCenterRoutingModule, ReactiveFormsModule, - FormsModule + FormsModule, + IconsModule ] }) export class ControlCenterModule { diff --git a/src/app/control-center/control-center.service.ts b/src/app/control-center/control-center.service.ts index cc49ac7d..35fd7ef2 100644 --- a/src/app/control-center/control-center.service.ts +++ b/src/app/control-center/control-center.service.ts @@ -23,7 +23,6 @@ export class ControlCenterService implements Resolve { return this.deviceService.getDevices().pipe(map(response => { this.deviceSidebarMenuItems.length = 0; this.deviceSidebarMenuItems.push(...response.devices.map(device => new DeviceSidebarMenuItem(device))); - this.deviceSidebarMenuItems.push({title: 'Build new device', routerLink: '/create-device'}); })); } diff --git a/src/app/control-center/message-service.service.ts b/src/app/control-center/message-service.service.ts new file mode 100644 index 00000000..2b0679b4 --- /dev/null +++ b/src/app/control-center/message-service.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; + +@Injectable({ providedIn: 'root' }) +export class MessageService { + private subject = new Subject(); + + sendMessage(uuid: string, message: string) { + this.subject.next({ uuid: uuid, text: message }); + } + + onMessage(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/icons/icons.module.ts b/src/app/icons/icons.module.ts new file mode 100644 index 00000000..c16c9e7f --- /dev/null +++ b/src/app/icons/icons.module.ts @@ -0,0 +1,32 @@ +import {NgModule} from '@angular/core'; + +import {TablerIconsModule} from 'angular-tabler-icons'; +import {IconPlus, IconBriefcase, IconDeviceDesktop, IconAffiliate, IconUser, IconLifebuoy, IconBug, IconActivity, IconCode, IconLicense, IconLogout, IconPower} from 'angular-tabler-icons/icons'; + + +const icons = { + IconBriefcase, + IconDeviceDesktop, + IconAffiliate, + IconUser, + IconLifebuoy, + IconBug, + IconActivity, + IconCode, + IconLicense, + IconLogout, + IconPower, + IconPlus +}; + + + +@NgModule({ + imports: [ + TablerIconsModule.pick(icons) + ], + exports: [ + TablerIconsModule + ] +}) +export class IconsModule { } diff --git a/src/assets/control-center/menu_changelog.svg b/src/assets/control-center/menu_changelog.svg deleted file mode 100644 index 3fca7758..00000000 --- a/src/assets/control-center/menu_changelog.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - LOG - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/control-center/menu_computers.svg b/src/assets/control-center/menu_computers.svg deleted file mode 100644 index 6642f695..00000000 --- a/src/assets/control-center/menu_computers.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/control-center/menu_inventory.svg b/src/assets/control-center/menu_inventory.svg deleted file mode 100644 index 94beed97..00000000 --- a/src/assets/control-center/menu_inventory.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/control-center/menu_servers.svg b/src/assets/control-center/menu_servers.svg deleted file mode 100644 index dd0344a8..00000000 --- a/src/assets/control-center/menu_servers.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/control-center/menu_settings.svg b/src/assets/control-center/menu_settings.svg deleted file mode 100644 index a7114099..00000000 --- a/src/assets/control-center/menu_settings.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/control-center/menu_sound.svg b/src/assets/control-center/menu_sound.svg deleted file mode 100644 index 0b3843d4..00000000 --- a/src/assets/control-center/menu_sound.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/control-center/ph-profile-picture.jpg b/src/assets/control-center/ph-profile-picture.jpg new file mode 100644 index 00000000..9aec6a47 Binary files /dev/null and b/src/assets/control-center/ph-profile-picture.jpg differ diff --git a/src/styles.scss b/src/styles.scss index 82bfe68c..1a746307 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,6 +4,8 @@ @import "controls"; @import "context-menu"; @import "@fontsource/jost"; +@import "@fontsource/jost/500.css"; +@import "@fontsource/nothing-you-could-do"; app-root { width: 100%;