backup push
This commit is contained in:
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
# IDE files
|
||||||
|
.idea/
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
|
||||||
|
# Node
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Angular specific
|
||||||
|
/main_web/tmp
|
||||||
|
/main_web/out-tsc
|
||||||
|
/main_web/bazel-out
|
||||||
|
/main_web/.angular/cache
|
||||||
|
/main_web/.sass-cache/
|
||||||
|
/main_web/connect.lock
|
||||||
|
/main_web/coverage
|
||||||
|
/main_web/libpeerconnection.log
|
||||||
|
/main_web/testem.log
|
||||||
|
/main_web/typings
|
||||||
42
Dockerfile
Normal file
42
Dockerfile
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# Use official Node.js LTS image
|
||||||
|
FROM node:20-alpine AS build
|
||||||
|
|
||||||
|
# Set working directory
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy package.json and package-lock.json
|
||||||
|
COPY main_web/package*.json ./main_web/
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
RUN cd main_web && npm install && npm install -g @angular/cli
|
||||||
|
|
||||||
|
# Copy the rest of the app
|
||||||
|
COPY main_web ./main_web
|
||||||
|
|
||||||
|
# Build Angular app
|
||||||
|
RUN cd main_web && ng build --configuration=production
|
||||||
|
|
||||||
|
# --- Production image ---
|
||||||
|
FROM node:20-alpine AS prod
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy built Angular app (fix path to browser output)
|
||||||
|
COPY --from=build /app/main_web/dist/main_web/browser /app/dist
|
||||||
|
|
||||||
|
# Copy server.js and minimal package.json
|
||||||
|
COPY server.js ./
|
||||||
|
COPY package.json ./
|
||||||
|
|
||||||
|
# Install only production dependencies (express)
|
||||||
|
RUN npm install --production
|
||||||
|
|
||||||
|
# Debug: list /app/dist and check for index.html
|
||||||
|
RUN ls -l /app/dist && (cat /app/dist/index.html | head -n 5) || echo 'index.html not found'
|
||||||
|
|
||||||
|
EXPOSE 8080
|
||||||
|
|
||||||
|
# Env defaults (can be overridden at runtime)
|
||||||
|
ENV DEFAULT_PROXY_TARGET=https://iko-main.ddns.net \
|
||||||
|
ALLOWED_PROXY_TARGETS=https://iko-main.ddns.net
|
||||||
|
|
||||||
|
CMD ["node", "server.js"]
|
||||||
18
build-docker.sh
Executable file
18
build-docker.sh
Executable file
@@ -0,0 +1,18 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
# Always run from the directory where this script is located
|
||||||
|
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||||
|
cd "$SCRIPT_DIR"
|
||||||
|
|
||||||
|
if ! docker info > /dev/null 2>&1; then
|
||||||
|
echo "Docker does not seem to be running. Please start Docker Desktop or the Docker daemon first."
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "Building Docker image..."
|
||||||
|
docker build --platform linux/amd64,linux/arm64 -t mainweb-app .
|
||||||
|
|
||||||
|
if [ $? -ne 0 ]; then
|
||||||
|
echo "Docker build failed."
|
||||||
|
exit
|
||||||
|
fi
|
||||||
17
main_web/.editorconfig
Normal file
17
main_web/.editorconfig
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
# Editor configuration, see https://editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.ts]
|
||||||
|
quote_type = single
|
||||||
|
ij_typescript_use_double_quotes = false
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
max_line_length = off
|
||||||
|
trim_trailing_whitespace = false
|
||||||
41
main_web/.gitignore
vendored
Normal file
41
main_web/.gitignore
vendored
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||||
|
|
||||||
|
# Compiled output
|
||||||
|
/tmp
|
||||||
|
/out-tsc
|
||||||
|
/bazel-out
|
||||||
|
|
||||||
|
# Node
|
||||||
|
/node_modules
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
.idea/
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.c9/
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
|
# Visual Studio Code
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.history/*
|
||||||
|
|
||||||
|
# Miscellaneous
|
||||||
|
/.angular/cache
|
||||||
|
.sass-cache/
|
||||||
|
/connect.lock
|
||||||
|
/coverage
|
||||||
|
/libpeerconnection.log
|
||||||
|
testem.log
|
||||||
|
/typings
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
4
main_web/.vscode/extensions.json
vendored
Normal file
4
main_web/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||||
|
"recommendations": ["angular.ng-template"]
|
||||||
|
}
|
||||||
19
main_web/.vscode/launch.json
vendored
Normal file
19
main_web/.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "ng serve",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "npm: start",
|
||||||
|
"url": "http://localhost:4200/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ng test",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "npm: test",
|
||||||
|
"url": "http://localhost:9876/debug.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
42
main_web/.vscode/tasks.json
vendored
Normal file
42
main_web/.vscode/tasks.json
vendored
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||||
|
"version": "2.0.0",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"type": "npm",
|
||||||
|
"script": "start",
|
||||||
|
"isBackground": true,
|
||||||
|
"problemMatcher": {
|
||||||
|
"owner": "typescript",
|
||||||
|
"pattern": "$tsc",
|
||||||
|
"background": {
|
||||||
|
"activeOnStart": true,
|
||||||
|
"beginsPattern": {
|
||||||
|
"regexp": "(.*?)"
|
||||||
|
},
|
||||||
|
"endsPattern": {
|
||||||
|
"regexp": "bundle generation complete"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "npm",
|
||||||
|
"script": "test",
|
||||||
|
"isBackground": true,
|
||||||
|
"problemMatcher": {
|
||||||
|
"owner": "typescript",
|
||||||
|
"pattern": "$tsc",
|
||||||
|
"background": {
|
||||||
|
"activeOnStart": true,
|
||||||
|
"beginsPattern": {
|
||||||
|
"regexp": "(.*?)"
|
||||||
|
},
|
||||||
|
"endsPattern": {
|
||||||
|
"regexp": "bundle generation complete"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
59
main_web/README.md
Normal file
59
main_web/README.md
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
# MainWeb
|
||||||
|
|
||||||
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.6.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
To start a local development server, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng serve
|
||||||
|
```
|
||||||
|
|
||||||
|
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng generate component component-name
|
||||||
|
```
|
||||||
|
|
||||||
|
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng generate --help
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
To build the project run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng build
|
||||||
|
```
|
||||||
|
|
||||||
|
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng test
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
For end-to-end (e2e) testing, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||||
|
|
||||||
|
## Additional Resources
|
||||||
|
|
||||||
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||||
134
main_web/angular.json
Normal file
134
main_web/angular.json
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"main_web": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"style": "scss"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular/build:application",
|
||||||
|
"options": {
|
||||||
|
"index": "src/index.html",
|
||||||
|
"browser": "src/main.ts",
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js"
|
||||||
|
],
|
||||||
|
"tsConfig": "tsconfig.app.json",
|
||||||
|
"inlineStyleLanguage": "scss",
|
||||||
|
"assets": [
|
||||||
|
{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "public"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "src/assets",
|
||||||
|
"output": "/assets"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"src/styles.scss"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "500kB",
|
||||||
|
"maximumError": "1MB"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "anyComponentStyle",
|
||||||
|
"maximumWarning": "4kB",
|
||||||
|
"maximumError": "20kB"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"outputHashing": "all"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"optimization": false,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular/build:dev-server",
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"buildTarget": "main_web:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildTarget": "main_web:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular/build:extract-i18n"
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular/build:karma",
|
||||||
|
"options": {
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js",
|
||||||
|
"zone.js/testing"
|
||||||
|
],
|
||||||
|
"tsConfig": "tsconfig.spec.json",
|
||||||
|
"inlineStyleLanguage": "scss",
|
||||||
|
"assets": [
|
||||||
|
{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "public"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"src/styles.scss"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"config-generator": {
|
||||||
|
"projectType": "library",
|
||||||
|
"root": "projects/config-generator",
|
||||||
|
"sourceRoot": "projects/config-generator/src",
|
||||||
|
"prefix": "lib",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular/build:ng-packagr",
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"tsConfig": "projects/config-generator/tsconfig.lib.prod.json"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"tsConfig": "projects/config-generator/tsconfig.lib.json"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular/build:karma",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": "projects/config-generator/tsconfig.spec.json",
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js",
|
||||||
|
"zone.js/testing"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
382
main_web/dist/main_web/3rdpartylicenses.txt
vendored
Normal file
382
main_web/dist/main_web/3rdpartylicenses.txt
vendored
Normal file
@@ -0,0 +1,382 @@
|
|||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: @angular/core
|
||||||
|
License: "MIT"
|
||||||
|
|
||||||
|
The MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: rxjs
|
||||||
|
License: "Apache-2.0"
|
||||||
|
|
||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright (c) 2015-2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: tslib
|
||||||
|
License: "0BSD"
|
||||||
|
|
||||||
|
Copyright (c) Microsoft Corporation.
|
||||||
|
|
||||||
|
Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
purpose with or without fee is hereby granted.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: @angular/common
|
||||||
|
License: "MIT"
|
||||||
|
|
||||||
|
The MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: @angular/platform-browser
|
||||||
|
License: "MIT"
|
||||||
|
|
||||||
|
The MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: @angular/router
|
||||||
|
License: "MIT"
|
||||||
|
|
||||||
|
The MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: @ngxs/store
|
||||||
|
License: "MIT"
|
||||||
|
|
||||||
|
(The MIT License)
|
||||||
|
|
||||||
|
Copyright (c) 2018 <amcdaniel2@gmail.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of this software and associated documentation files (the
|
||||||
|
'Software'), to deal in the Software without restriction, including
|
||||||
|
without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be
|
||||||
|
included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||||
|
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||||
|
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||||
|
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||||
|
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
Package: zone.js
|
||||||
|
License: "MIT"
|
||||||
|
|
||||||
|
The MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
16
main_web/dist/main_web/browser/assets/config.json
vendored
Normal file
16
main_web/dist/main_web/browser/assets/config.json
vendored
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Lukasov Plex Server",
|
||||||
|
"url": "http://192.168.111.100:32400/status",
|
||||||
|
"headers": {
|
||||||
|
"X-Plex-Token": "my token"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Ikov Plex Server",
|
||||||
|
"url": "http://192.168.100.201:32400/status",
|
||||||
|
"headers": {
|
||||||
|
"X-Plex-Token": "put your token here"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
BIN
main_web/dist/main_web/browser/favicon.ico
vendored
Normal file
BIN
main_web/dist/main_web/browser/favicon.ico
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
13
main_web/dist/main_web/browser/index.html
vendored
Normal file
13
main_web/dist/main_web/browser/index.html
vendored
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" data-beasties-container>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>MainWeb</title>
|
||||||
|
<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" href="styles-5INURTSO.css"></head>
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
<script src="polyfills-B6TNHZQ6.js" type="module"></script><script src="main-3RWZEL3G.js" type="module"></script></body>
|
||||||
|
</html>
|
||||||
5
main_web/dist/main_web/browser/main-3RWZEL3G.js
vendored
Normal file
5
main_web/dist/main_web/browser/main-3RWZEL3G.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
main_web/dist/main_web/browser/polyfills-B6TNHZQ6.js
vendored
Normal file
2
main_web/dist/main_web/browser/polyfills-B6TNHZQ6.js
vendored
Normal file
File diff suppressed because one or more lines are too long
0
main_web/dist/main_web/browser/styles-5INURTSO.css
vendored
Normal file
0
main_web/dist/main_web/browser/styles-5INURTSO.css
vendored
Normal file
3
main_web/dist/main_web/prerendered-routes.json
vendored
Normal file
3
main_web/dist/main_web/prerendered-routes.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"routes": {}
|
||||||
|
}
|
||||||
9673
main_web/package-lock.json
generated
Normal file
9673
main_web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
55
main_web/package.json
Normal file
55
main_web/package.json
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "main-web",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve --proxy-config proxy.conf.json",
|
||||||
|
"build": "ng build",
|
||||||
|
"watch": "ng build --watch --configuration development",
|
||||||
|
"test": "ng test"
|
||||||
|
},
|
||||||
|
"prettier": {
|
||||||
|
"printWidth": 100,
|
||||||
|
"singleQuote": true,
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": "*.html",
|
||||||
|
"options": {
|
||||||
|
"parser": "angular"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "^20.1.7",
|
||||||
|
"@angular/cdk": "^20.2.1",
|
||||||
|
"@angular/common": "^20.1.0",
|
||||||
|
"@angular/compiler": "^20.1.0",
|
||||||
|
"@angular/core": "^20.1.0",
|
||||||
|
"@angular/forms": "^20.1.0",
|
||||||
|
"@angular/platform-browser": "^20.1.0",
|
||||||
|
"@angular/platform-browser-dynamic": "^20.1.7",
|
||||||
|
"@angular/router": "^20.1.0",
|
||||||
|
"@ngxs/store": "^20.1.0",
|
||||||
|
"@ngxs/websocket-plugin": "20.1.0",
|
||||||
|
"bootstrap": "^5.3.7",
|
||||||
|
"rxjs": "~7.8.0",
|
||||||
|
"tslib": "^2.3.0",
|
||||||
|
"zone.js": "~0.15.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular/build": "^20.1.6",
|
||||||
|
"@angular/cli": "^20.1.6",
|
||||||
|
"@angular/compiler-cli": "^20.1.0",
|
||||||
|
"@types/jasmine": "~5.1.0",
|
||||||
|
"jasmine-core": "~5.8.0",
|
||||||
|
"karma": "~6.4.0",
|
||||||
|
"karma-chrome-launcher": "~3.2.0",
|
||||||
|
"karma-coverage": "~2.2.0",
|
||||||
|
"karma-jasmine": "~5.1.0",
|
||||||
|
"karma-jasmine-html-reporter": "~2.1.0",
|
||||||
|
"ng-packagr": "^20.1.0",
|
||||||
|
"typescript": "~5.8.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
63
main_web/projects/config-generator/README.md
Normal file
63
main_web/projects/config-generator/README.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
# ConfigGenerator
|
||||||
|
|
||||||
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng generate component component-name
|
||||||
|
```
|
||||||
|
|
||||||
|
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng generate --help
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
To build the library, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng build config-generator
|
||||||
|
```
|
||||||
|
|
||||||
|
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||||
|
|
||||||
|
### Publishing the Library
|
||||||
|
|
||||||
|
Once the project is built, you can publish your library by following these steps:
|
||||||
|
|
||||||
|
1. Navigate to the `dist` directory:
|
||||||
|
```bash
|
||||||
|
cd dist/config-generator
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||||
|
```bash
|
||||||
|
npm publish
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng test
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
For end-to-end (e2e) testing, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||||
|
|
||||||
|
## Additional Resources
|
||||||
|
|
||||||
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||||
7
main_web/projects/config-generator/ng-package.json
Normal file
7
main_web/projects/config-generator/ng-package.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||||
|
"dest": "../../dist/config-generator",
|
||||||
|
"lib": {
|
||||||
|
"entryFile": "src/public-api.ts"
|
||||||
|
}
|
||||||
|
}
|
||||||
12
main_web/projects/config-generator/package.json
Normal file
12
main_web/projects/config-generator/package.json
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"name": "config-generator",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@angular/common": "^20.1.0",
|
||||||
|
"@angular/core": "^20.1.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.3.0"
|
||||||
|
},
|
||||||
|
"sideEffects": false
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||||||
|
|
||||||
|
import {ConfigGenerator} from './config-generator';
|
||||||
|
|
||||||
|
describe('ConfigGenerator', () => {
|
||||||
|
let component: ConfigGenerator;
|
||||||
|
let fixture: ComponentFixture<ConfigGenerator>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [ConfigGenerator]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(ConfigGenerator);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'lib-config-generator',
|
||||||
|
imports: [],
|
||||||
|
template: `
|
||||||
|
<p>
|
||||||
|
config-generator works!
|
||||||
|
</p>
|
||||||
|
`,
|
||||||
|
styles: ``
|
||||||
|
})
|
||||||
|
export class ConfigGenerator {
|
||||||
|
|
||||||
|
}
|
||||||
5
main_web/projects/config-generator/src/public-api.ts
Normal file
5
main_web/projects/config-generator/src/public-api.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/*
|
||||||
|
* Public API Surface of config-generator
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from './lib/config-generator';
|
||||||
18
main_web/projects/config-generator/tsconfig.lib.json
Normal file
18
main_web/projects/config-generator/tsconfig.lib.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/lib",
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"inlineSources": true,
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"**/*.spec.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
11
main_web/projects/config-generator/tsconfig.lib.prod.json
Normal file
11
main_web/projects/config-generator/tsconfig.lib.prod.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.lib.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"declarationMap": false
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"compilationMode": "partial"
|
||||||
|
}
|
||||||
|
}
|
||||||
14
main_web/projects/config-generator/tsconfig.spec.json
Normal file
14
main_web/projects/config-generator/tsconfig.spec.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/spec",
|
||||||
|
"types": [
|
||||||
|
"jasmine"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
17
main_web/proxy.conf.json
Normal file
17
main_web/proxy.conf.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"/api": {
|
||||||
|
"target": "http://localhost:8080",
|
||||||
|
"secure": false,
|
||||||
|
"changeOrigin": true,
|
||||||
|
"logLevel": "debug"
|
||||||
|
},
|
||||||
|
"/draw": {
|
||||||
|
"target": "http://localhost:8080",
|
||||||
|
"secure": false,
|
||||||
|
"changeOrigin": true,
|
||||||
|
"logLevel": "debug",
|
||||||
|
"headers": {
|
||||||
|
"x-proxy-target": "https://iko-main.ddns.net"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
main_web/public/favicon.ico
Normal file
BIN
main_web/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
23
main_web/src/app/app.config.ts
Normal file
23
main_web/src/app/app.config.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import {
|
||||||
|
ApplicationConfig,
|
||||||
|
importProvidersFrom,
|
||||||
|
provideBrowserGlobalErrorListeners,
|
||||||
|
provideZoneChangeDetection
|
||||||
|
} from '@angular/core';
|
||||||
|
import {provideRouter} from '@angular/router';
|
||||||
|
import {provideHttpClient} from '@angular/common/http';
|
||||||
|
import {provideAnimations} from '@angular/platform-browser/animations';
|
||||||
|
import {routes} from './app.routes';
|
||||||
|
import {NgxsModule} from '@ngxs/store';
|
||||||
|
import {ServiceStatusState} from './store/service-status.state';
|
||||||
|
|
||||||
|
export const appConfig: ApplicationConfig = {
|
||||||
|
providers: [
|
||||||
|
provideBrowserGlobalErrorListeners(),
|
||||||
|
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||||
|
provideRouter(routes),
|
||||||
|
provideHttpClient(),
|
||||||
|
provideAnimations(),
|
||||||
|
importProvidersFrom(NgxsModule.forRoot([ServiceStatusState]))
|
||||||
|
]
|
||||||
|
};
|
||||||
14
main_web/src/app/app.html
Normal file
14
main_web/src/app/app.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<section class="page-container">
|
||||||
|
<div class="page-header">
|
||||||
|
<button type="button" class="btn btn-secondary" (click)="navigateToOtherPage()">
|
||||||
|
{{ getNavigationButtonText() }}
|
||||||
|
</button>
|
||||||
|
<h1>{{ getPageTitle() }}</h1>
|
||||||
|
<button type="button" class="btn theme-toggle-btn" (click)="toggleTheme()">
|
||||||
|
{{ isDarkMode ? '☀️ Light Mode' : '🌙 Dark Mode' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="page-content">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
9
main_web/src/app/app.routes.ts
Normal file
9
main_web/src/app/app.routes.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import {Routes} from '@angular/router';
|
||||||
|
import {Dashboard} from './pages/dashboard/dashboard';
|
||||||
|
import {Settings} from './pages/settings/settings';
|
||||||
|
|
||||||
|
export const routes: Routes = [
|
||||||
|
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||||
|
{ path: 'dashboard', component: Dashboard },
|
||||||
|
{ path: 'settings', component: Settings },
|
||||||
|
];
|
||||||
145
main_web/src/app/app.scss
Normal file
145
main_web/src/app/app.scss
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.page-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
color: var(--text-color);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--btn-hover-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: var(--btn-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
max-width: 800px;
|
||||||
|
border-color: var(--border-color);
|
||||||
|
width: 100%;
|
||||||
|
table-layout: auto;
|
||||||
|
|
||||||
|
/* Column width settings */
|
||||||
|
th:nth-child(1) {
|
||||||
|
width: auto; /* First column takes remaining space */
|
||||||
|
}
|
||||||
|
th:nth-child(2),
|
||||||
|
th:nth-child(3),
|
||||||
|
th:nth-child(4),
|
||||||
|
th:nth-child(5) {
|
||||||
|
width: 1%;
|
||||||
|
white-space: nowrap;
|
||||||
|
} /* Status column - fit to content */
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: var(--table-header-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
vertical-align: middle; /* Vertically center the header text */
|
||||||
|
padding: 8px 12px; /* Consistent padding with table cells */
|
||||||
|
line-height: 1.5; /* Consistent line height with table cells */
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-color: var(--border-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 8px 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
display: table-cell !important;
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.no-wrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure all cells in a row have the same height */
|
||||||
|
tr {
|
||||||
|
min-height: 36px; /* Minimum height for rows but allows dynamic expansion */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure status column center aligns content */
|
||||||
|
td:nth-child(2) {
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:nth-child(3),
|
||||||
|
td:nth-child(4) {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||||
|
background-color: var(--table-stripe-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-hover > tbody > tr:hover > * {
|
||||||
|
background-color: var(--table-hover-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Service icon styling */
|
||||||
|
.service-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-up {
|
||||||
|
color: var(--status-up-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-down {
|
||||||
|
color: var(--status-down-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-loading {
|
||||||
|
color: var(--status-loading-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-height {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
23
main_web/src/app/app.spec.ts
Normal file
23
main_web/src/app/app.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import {TestBed} from '@angular/core/testing';
|
||||||
|
import {App} from './app';
|
||||||
|
|
||||||
|
describe('App', () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [App],
|
||||||
|
}).compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create the app', () => {
|
||||||
|
const fixture = TestBed.createComponent(App);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render title', () => {
|
||||||
|
const fixture = TestBed.createComponent(App);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const compiled = fixture.nativeElement as HTMLElement;
|
||||||
|
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, main_web');
|
||||||
|
});
|
||||||
|
});
|
||||||
86
main_web/src/app/app.ts
Normal file
86
main_web/src/app/app.ts
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
import {Component, OnInit} from '@angular/core';
|
||||||
|
import {NavigationEnd, Router, RouterOutlet} from '@angular/router';
|
||||||
|
import {filter} from 'rxjs/operators';
|
||||||
|
import {CheckServiceStatusService} from './check-service-status.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
imports: [RouterOutlet],
|
||||||
|
templateUrl: './app.html',
|
||||||
|
styleUrl: './app.scss'
|
||||||
|
})
|
||||||
|
export class App implements OnInit{
|
||||||
|
isDarkMode: boolean = false;
|
||||||
|
currentRoute: string = '';
|
||||||
|
|
||||||
|
constructor(private router: Router, private checkServiceStatusService: CheckServiceStatusService) {
|
||||||
|
// Check if user prefers dark mode
|
||||||
|
this.isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.initApp();
|
||||||
|
// Subscribe to router events to track current route
|
||||||
|
this.router.events
|
||||||
|
.pipe(filter(event => event instanceof NavigationEnd))
|
||||||
|
.subscribe((event: NavigationEnd) => {
|
||||||
|
this.currentRoute = event.url;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set initial route
|
||||||
|
this.currentRoute = this.router.url;
|
||||||
|
|
||||||
|
// Add event listener for system theme changes
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||||
|
this.isDarkMode = e.matches;
|
||||||
|
this.applyTheme();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Apply initial theme
|
||||||
|
this.applyTheme(); }
|
||||||
|
|
||||||
|
|
||||||
|
toggleTheme() {
|
||||||
|
this.isDarkMode = !this.isDarkMode;
|
||||||
|
this.applyTheme();
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTheme() {
|
||||||
|
const htmlElement = document.querySelector('html');
|
||||||
|
if (htmlElement) {
|
||||||
|
htmlElement.classList.remove('light-mode', 'dark-mode');
|
||||||
|
htmlElement.classList.add(this.isDarkMode ? 'dark-mode' : 'light-mode');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openPage(page: string) {
|
||||||
|
this.router.navigate(['/' + page]);
|
||||||
|
}
|
||||||
|
|
||||||
|
navigateToOtherPage() {
|
||||||
|
if (this.isOnSettingsPage()) {
|
||||||
|
this.router.navigate(['/dashboard']);
|
||||||
|
} else {
|
||||||
|
this.router.navigate(['/settings']);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove focus from the button to prevent stuck hover styling
|
||||||
|
(document.activeElement as HTMLElement)?.blur();
|
||||||
|
}
|
||||||
|
|
||||||
|
isOnSettingsPage(): boolean {
|
||||||
|
return this.currentRoute.includes('/settings');
|
||||||
|
}
|
||||||
|
|
||||||
|
getNavigationButtonText(): string {
|
||||||
|
return this.isOnSettingsPage() ? '📊 Dashboard' : '⚙️ Settings';
|
||||||
|
}
|
||||||
|
|
||||||
|
getPageTitle(): string {
|
||||||
|
return this.isOnSettingsPage() ? 'Settings' : 'Service Check';
|
||||||
|
}
|
||||||
|
|
||||||
|
private initApp() {
|
||||||
|
this.checkServiceStatusService.initializeServices().subscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
53
main_web/src/app/check-service-status.service.ts
Normal file
53
main_web/src/app/check-service-status.service.ts
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import {Injectable} from '@angular/core';
|
||||||
|
import {HttpClient, HttpHeaders} from '@angular/common/http';
|
||||||
|
import {Observable, of} from 'rxjs';
|
||||||
|
import {catchError, map, switchMap} from 'rxjs/operators';
|
||||||
|
import {Status} from './interfaces/services.interface';
|
||||||
|
import {Store} from '@ngxs/store';
|
||||||
|
import {CheckAllServicesStatus, LoadConfig} from './store/service-status.action';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class CheckServiceStatusService {
|
||||||
|
constructor(private http: HttpClient, private store: Store) {}
|
||||||
|
|
||||||
|
checkStatus(serverName: string, serverAddress: string, httpHeaders: HttpHeaders): Observable<Status> {
|
||||||
|
// All requests go to the backend proxy.
|
||||||
|
const proxyUrl = '/proxy';
|
||||||
|
|
||||||
|
// Pass the real target URL and its original headers through custom headers.
|
||||||
|
const headers = new HttpHeaders({
|
||||||
|
'x-proxy-target': serverAddress,
|
||||||
|
...httpHeaders,
|
||||||
|
});
|
||||||
|
|
||||||
|
return this.http.get(proxyUrl, { headers, responseType: 'text' }).pipe(
|
||||||
|
map(() => 'up' as Status),
|
||||||
|
catchError(() => of('down' as Status))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save config and refresh services
|
||||||
|
saveConfigAndRefresh(config: any): Observable<any> {
|
||||||
|
return this.http.post('/api/save-config', config).pipe(
|
||||||
|
switchMap((response) => {
|
||||||
|
if (response) {
|
||||||
|
// Reload config and check all services like initApp does
|
||||||
|
return this.store.dispatch(new LoadConfig()).pipe(
|
||||||
|
switchMap(() => this.store.dispatch(new CheckAllServicesStatus())),
|
||||||
|
map(() => response)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return of(response);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize or refresh app state
|
||||||
|
initializeServices(): Observable<any> {
|
||||||
|
return this.store.dispatch(new LoadConfig()).pipe(
|
||||||
|
switchMap(() => this.store.dispatch(new CheckAllServicesStatus()))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
<div class="icon-container">
|
||||||
|
<div [@rotateAnimation]="animationState" class="icon" [innerHTML]="currentIcon"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
24
main_web/src/app/components/animated-icon/animated-icon.scss
Normal file
24
main_web/src/app/components/animated-icon/animated-icon.scss
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
.icon-container {
|
||||||
|
position: relative;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
::ng-deep svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
123
main_web/src/app/components/animated-icon/animated-icon.ts
Normal file
123
main_web/src/app/components/animated-icon/animated-icon.ts
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
import {Component, Input, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
|
||||||
|
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
|
||||||
|
import {animate, state, style, transition, trigger} from '@angular/animations';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-animated-icon',
|
||||||
|
standalone: true,
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './animated-icon.html',
|
||||||
|
animations: [
|
||||||
|
trigger('rotateAnimation', [
|
||||||
|
state('hidden', style({
|
||||||
|
transform: 'rotateY(-90deg)',
|
||||||
|
opacity: 0
|
||||||
|
})),
|
||||||
|
state('visible', style({
|
||||||
|
transform: 'rotateY(0deg)',
|
||||||
|
opacity: 1
|
||||||
|
})),
|
||||||
|
transition('hidden => visible', animate('500ms ease-out')),
|
||||||
|
transition('visible => hidden', animate('500ms ease-in'))
|
||||||
|
])
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class AnimatedIcon implements OnChanges, OnDestroy {
|
||||||
|
@Input() icon: string = '';
|
||||||
|
@Input() delay: number = 3000; // Default 3 second delay
|
||||||
|
@Input() animate: boolean = false; // Only animate when explicitly enabled
|
||||||
|
|
||||||
|
currentIcon: SafeHtml | null = null;
|
||||||
|
animationState: 'hidden' | 'visible' = 'hidden';
|
||||||
|
|
||||||
|
private animationTimeout: any;
|
||||||
|
private iconQueue: string[] = [];
|
||||||
|
private currentIconIndex = 0;
|
||||||
|
|
||||||
|
constructor(private sanitizer: DomSanitizer) {}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
if (changes['icon'] && changes['icon'].currentValue) {
|
||||||
|
const newIcon = changes['icon'].currentValue;
|
||||||
|
|
||||||
|
// If it's a string with multiple icons (comma separated), split them
|
||||||
|
if (typeof newIcon === 'string' && newIcon.includes(',')) {
|
||||||
|
this.iconQueue = newIcon.split(',').map(icon => icon.trim());
|
||||||
|
this.startIconCycle();
|
||||||
|
} else {
|
||||||
|
// Single icon
|
||||||
|
this.iconQueue = [newIcon];
|
||||||
|
this.showIcon(newIcon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private sanitizeHtml(html: string): SafeHtml {
|
||||||
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
private showIcon(iconHtml: string) {
|
||||||
|
// Set the new icon content
|
||||||
|
this.currentIcon = this.sanitizeHtml(iconHtml);
|
||||||
|
|
||||||
|
if (this.animate) {
|
||||||
|
// Start hidden and then animate to visible
|
||||||
|
this.animationState = 'hidden';
|
||||||
|
|
||||||
|
// Small delay to ensure the hidden state is applied
|
||||||
|
setTimeout(() => {
|
||||||
|
this.animationState = 'visible';
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
// No animation, just show the icon immediately
|
||||||
|
this.animationState = 'visible';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private startIconCycle() {
|
||||||
|
if (this.iconQueue.length === 0 || !this.animate) return;
|
||||||
|
|
||||||
|
// Clear any existing timeout
|
||||||
|
if (this.animationTimeout) {
|
||||||
|
clearTimeout(this.animationTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show the first icon
|
||||||
|
this.showCurrentIcon();
|
||||||
|
|
||||||
|
// Schedule the cycling if we have multiple icons
|
||||||
|
if (this.iconQueue.length > 1) {
|
||||||
|
this.scheduleNextIcon();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private showCurrentIcon() {
|
||||||
|
if (this.iconQueue.length > 0) {
|
||||||
|
const iconToShow = this.iconQueue[this.currentIconIndex];
|
||||||
|
this.showIcon(iconToShow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private scheduleNextIcon() {
|
||||||
|
this.animationTimeout = setTimeout(() => {
|
||||||
|
// Hide current icon
|
||||||
|
this.animationState = 'hidden';
|
||||||
|
|
||||||
|
// After hiding animation completes, show next icon
|
||||||
|
setTimeout(() => {
|
||||||
|
this.currentIconIndex = (this.currentIconIndex + 1) % this.iconQueue.length;
|
||||||
|
this.showCurrentIcon();
|
||||||
|
|
||||||
|
// Schedule the next icon
|
||||||
|
this.scheduleNextIcon();
|
||||||
|
}, 1000); // Wait for hide animation to complete
|
||||||
|
|
||||||
|
}, this.delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
if (this.animationTimeout) {
|
||||||
|
clearTimeout(this.animationTimeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
main_web/src/app/interfaces/services.interface.ts
Normal file
12
main_web/src/app/interfaces/services.interface.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import {HttpHeaders} from '@angular/common/http';
|
||||||
|
|
||||||
|
export interface Service {
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
headers: HttpHeaders;
|
||||||
|
status: Status;
|
||||||
|
lastChecked?: number; // Timestamp when the service was last checked
|
||||||
|
icon?: string; // SVG icon as string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Status = 'up' | 'down' | 'loading';
|
||||||
53
main_web/src/app/pages/dashboard/dashboard.html
Normal file
53
main_web/src/app/pages/dashboard/dashboard.html
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<table class="table table-striped table-bordered full-width">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Service</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Last update</th>
|
||||||
|
<th>
|
||||||
|
<div type="button" class="btn btn-secondary full-width" (click)="checkAllServices()">Check all</div>
|
||||||
|
</th>
|
||||||
|
<th>Link</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@if (data$ | async; as data) {
|
||||||
|
@for (service of data.services; track service.name) {
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
@if (service.icon) {
|
||||||
|
<span class="service-icon" [innerHTML]="getSafeHtml(service.icon)"></span>
|
||||||
|
}
|
||||||
|
{{ service.name }}
|
||||||
|
</td>
|
||||||
|
<td class=" justify-content-center align-items-center">
|
||||||
|
@if (service.status !== null) {
|
||||||
|
@if (service.status === 'loading' || data.loading) {
|
||||||
|
<app-animated-icon [icon]="'⏳'" [animate]="true" class="status-loading"></app-animated-icon>
|
||||||
|
} @else if (service.status === 'down') {
|
||||||
|
<app-animated-icon [icon]="'❌'" [animate]="true" class="status-down"></app-animated-icon>
|
||||||
|
} @else if (service.status === 'up') {
|
||||||
|
<app-animated-icon [icon]="'✅'" [animate]="true" class="status-up"></app-animated-icon>
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
<app-animated-icon [icon]="'⏳'" [animate]="true" class="status-loading"></app-animated-icon>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
@if (service.lastChecked) {
|
||||||
|
{{ service.lastChecked | date:'dd.MM. HH:mm:ss' }}
|
||||||
|
} @else {
|
||||||
|
--:--:--
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center">
|
||||||
|
<div type="button" class="btn btn-secondary" (click)="checkService(service.name)">Check</div>
|
||||||
|
</td>
|
||||||
|
<td class="d-flex justify-content-center align-items-center">
|
||||||
|
<div type="button" class="btn btn-secondary no-wrap" (click)="goToLink(service.url)">Link 🔗</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
0
main_web/src/app/pages/dashboard/dashboard.scss
Normal file
0
main_web/src/app/pages/dashboard/dashboard.scss
Normal file
23
main_web/src/app/pages/dashboard/dashboard.spec.ts
Normal file
23
main_web/src/app/pages/dashboard/dashboard.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||||||
|
|
||||||
|
import {Dashboard} from './dashboard';
|
||||||
|
|
||||||
|
describe('Dashboard', () => {
|
||||||
|
let component: Dashboard;
|
||||||
|
let fixture: ComponentFixture<Dashboard>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [Dashboard]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(Dashboard);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
59
main_web/src/app/pages/dashboard/dashboard.ts
Normal file
59
main_web/src/app/pages/dashboard/dashboard.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import {Component, OnInit} from '@angular/core';
|
||||||
|
import {Store} from '@ngxs/store';
|
||||||
|
import {combineLatest, Observable} from 'rxjs';
|
||||||
|
import {CheckAllServicesStatus, CheckSpecifiedServiceStatus} from '../../store/service-status.action';
|
||||||
|
import {ServiceStatusState} from '../../store/service-status.state';
|
||||||
|
import {AsyncPipe, DatePipe} from '@angular/common';
|
||||||
|
import {Service} from '../../interfaces/services.interface';
|
||||||
|
import {map} from 'rxjs/operators';
|
||||||
|
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
|
||||||
|
import {AnimatedIcon} from '../../components/animated-icon/animated-icon';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-dashboard',
|
||||||
|
imports: [
|
||||||
|
AsyncPipe,
|
||||||
|
DatePipe,
|
||||||
|
AnimatedIcon
|
||||||
|
],
|
||||||
|
templateUrl: './dashboard.html',
|
||||||
|
styleUrl: './dashboard.scss'
|
||||||
|
})
|
||||||
|
export class Dashboard implements OnInit {
|
||||||
|
config$!: Observable<any>;
|
||||||
|
loading$!: Observable<boolean>;
|
||||||
|
error$!: Observable<any>;
|
||||||
|
services$!: Observable<Array<Service>>;
|
||||||
|
data$!: Observable<any>;
|
||||||
|
constructor(private store: Store, private sanitizer: DomSanitizer) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.config$ = this.store.select(ServiceStatusState.config);
|
||||||
|
this.loading$ = this.store.select(ServiceStatusState.loading);
|
||||||
|
this.error$ = this.store.select(ServiceStatusState.error);
|
||||||
|
this.services$ = this.store.select(ServiceStatusState.services);
|
||||||
|
this.data$ = combineLatest([this.services$, this.loading$]).pipe(
|
||||||
|
map(([services, loading]) => ({ services, loading }))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
checkService(name: string) {
|
||||||
|
this.store.dispatch(new CheckSpecifiedServiceStatus(name));
|
||||||
|
}
|
||||||
|
|
||||||
|
checkAllServices() {
|
||||||
|
this.store.dispatch(new CheckAllServicesStatus());
|
||||||
|
}
|
||||||
|
|
||||||
|
getSafeHtml(html: string): SafeHtml {
|
||||||
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected readonly Date = Date;
|
||||||
|
|
||||||
|
|
||||||
|
goToLink(url: string) {
|
||||||
|
window.open(url, '_blank');
|
||||||
|
}
|
||||||
|
}
|
||||||
208
main_web/src/app/pages/settings/settings.html
Normal file
208
main_web/src/app/pages/settings/settings.html
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
<div class="settings-container">
|
||||||
|
<div class="settings-content">
|
||||||
|
<div class="config-section">
|
||||||
|
<h3>Export Configuration</h3>
|
||||||
|
<p>Download your current configuration file for backup or transfer purposes.</p>
|
||||||
|
<button type="button" class="btn btn-primary export-btn" (click)="exportConfig()">
|
||||||
|
📥 Export Config
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="config-section">
|
||||||
|
<h3>Import Configuration</h3>
|
||||||
|
<p>Upload a configuration file to replace your current settings.</p>
|
||||||
|
<div class="import-controls">
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept=".json"
|
||||||
|
#fileInput
|
||||||
|
(change)="onFileSelected($event)"
|
||||||
|
class="file-input"
|
||||||
|
style="display: none;">
|
||||||
|
<button type="button" class="btn btn-secondary import-btn" (click)="fileInput.click()">
|
||||||
|
📤 Choose File
|
||||||
|
</button>
|
||||||
|
@if (selectedFileName) {
|
||||||
|
<span class="selected-file">{{ selectedFileName }}</span>
|
||||||
|
<button type="button" class="btn btn-success import-confirm-btn" (click)="importConfig()">
|
||||||
|
✅ Import
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-danger import-cancel-btn" (click)="cancelImport()">
|
||||||
|
❌ Cancel
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
@if (importMessage) {
|
||||||
|
<p class="import-message" [class.success]="importMessage.includes('✅')" [class.error]="importMessage.includes('❌')">
|
||||||
|
{{ importMessage }}
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (config$ | async) {
|
||||||
|
<div class="config-preview">
|
||||||
|
<div class="config-header">
|
||||||
|
<h3>Current Configuration</h3>
|
||||||
|
<div class="config-actions">
|
||||||
|
@if (hasChanges) {
|
||||||
|
<button type="button" class="btn btn-primary save-btn" (click)="saveConfig()" [disabled]="isSaving">
|
||||||
|
@if (isSaving) {
|
||||||
|
⏳ Saving...
|
||||||
|
} @else {
|
||||||
|
💾 Save Changes
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary reset-btn" (click)="resetChanges()" [disabled]="isSaving">
|
||||||
|
🔄 Reset
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="config-info">
|
||||||
|
<p><strong>Services configured:</strong> {{ editableConfig?.length || 0 }}</p>
|
||||||
|
@if (hasChanges) {
|
||||||
|
<p class="changes-indicator"><strong>⚠️ You have unsaved changes</strong></p>
|
||||||
|
}
|
||||||
|
@if (saveMessage) {
|
||||||
|
<p class="save-message" [class.success]="saveMessage.includes('✅')" [class.error]="saveMessage.includes('❌')">
|
||||||
|
{{ saveMessage }}
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (editableConfig && editableConfig.length > 0) {
|
||||||
|
<div class="config-table-container">
|
||||||
|
<table class="table table-striped table-bordered config-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>🔄</th>
|
||||||
|
<th>#</th>
|
||||||
|
<th>Icon</th>
|
||||||
|
<th>Service Name</th>
|
||||||
|
<th>URL</th>
|
||||||
|
<th>Headers</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody cdkDropList (cdkDropListDropped)="drop($event)">
|
||||||
|
@for (service of editableConfig; track $index) {
|
||||||
|
<tr cdkDrag class="draggable-row">
|
||||||
|
<td class="drag-handle">
|
||||||
|
<div cdkDragHandle class="drag-icon">
|
||||||
|
⋮⋮
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="index-column">{{ $index + 1 }}</td>
|
||||||
|
<td class="icon-column">
|
||||||
|
@if (isEditing($index)) {
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control form-control-sm icon-input"
|
||||||
|
[value]="service.icon"
|
||||||
|
(input)="updateService($index, 'icon', $event.target.value)"
|
||||||
|
placeholder="SVG icon code">
|
||||||
|
} @else {
|
||||||
|
@if (service.icon) {
|
||||||
|
<span class="service-icon" [innerHTML]="getSafeHtml(service.icon)"></span>
|
||||||
|
} @else {
|
||||||
|
<span class="no-icon">—</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td class="name-column">
|
||||||
|
@if (isEditing($index)) {
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control form-control-sm"
|
||||||
|
[value]="service.name"
|
||||||
|
(input)="updateService($index, 'name', $event.target.value)"
|
||||||
|
placeholder="Service name">
|
||||||
|
} @else {
|
||||||
|
{{ service.name }}
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td class="url-column">
|
||||||
|
@if (isEditing($index)) {
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
class="form-control form-control-sm"
|
||||||
|
[value]="service.url"
|
||||||
|
(input)="updateService($index, 'url', $event.target.value)"
|
||||||
|
placeholder="https://example.com">
|
||||||
|
} @else {
|
||||||
|
<a [href]="service.url" target="_blank" class="url-link">
|
||||||
|
{{ service.url }}
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td class="headers-column">
|
||||||
|
@if (isEditing($index)) {
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control form-control-sm headers-input"
|
||||||
|
[value]="getHeadersAsString(service.headers)"
|
||||||
|
(input)="updateServiceHeaders($index, $event.target.value)"
|
||||||
|
placeholder="key1:value1,key2:value2">
|
||||||
|
} @else {
|
||||||
|
@if (service.headers && Object.keys(service.headers).length > 0) {
|
||||||
|
<span class="headers-count">{{ Object.keys(service.headers).length }} header(s)</span>
|
||||||
|
} @else {
|
||||||
|
<span class="no-headers">None</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td class="actions-column">
|
||||||
|
@if (isEditing($index)) {
|
||||||
|
<div class="edit-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm btn-success save-row-btn"
|
||||||
|
(click)="saveRow($index)"
|
||||||
|
title="Save changes">
|
||||||
|
✅
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm btn-secondary cancel-btn"
|
||||||
|
(click)="cancelEdit($index)"
|
||||||
|
title="Cancel editing">
|
||||||
|
❌
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
} @else {
|
||||||
|
<div class="view-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm btn-primary edit-btn"
|
||||||
|
(click)="toggleEdit($index)"
|
||||||
|
title="Edit service">
|
||||||
|
✏️
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm btn-danger remove-btn"
|
||||||
|
(click)="removeService($index)"
|
||||||
|
[disabled]="editableConfig.length <= 1"
|
||||||
|
title="Remove service">
|
||||||
|
🗑️
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="table-footer-actions">
|
||||||
|
<button type="button" class="btn btn-success add-btn" (click)="addService()">
|
||||||
|
➕ Add Service
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
523
main_web/src/app/pages/settings/settings.scss
Normal file
523
main_web/src/app/pages/settings/settings.scss
Normal file
@@ -0,0 +1,523 @@
|
|||||||
|
.settings-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.settings-content {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-section {
|
||||||
|
background: var(--table-header-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-btn {
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--btn-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 2px solid var(--status-up-color);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.import-btn {
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--btn-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 2px solid var(--status-up-color);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-file {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: var(--table-header-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-confirm-btn {
|
||||||
|
background: var(--status-up-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #146c43;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-cancel-btn {
|
||||||
|
background: var(--status-down-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #c82333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-message {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background-color: rgba(25, 135, 84, 0.1);
|
||||||
|
color: var(--status-up-color);
|
||||||
|
border: 1px solid var(--status-up-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
color: var(--status-down-color);
|
||||||
|
border: 1px solid var(--status-down-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-preview {
|
||||||
|
background: var(--background-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
.config-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--btn-hover-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
background: var(--status-loading-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-info {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.changes-indicator {
|
||||||
|
color: var(--status-down-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.save-message {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background-color: rgba(25, 135, 84, 0.1);
|
||||||
|
color: var(--status-up-color);
|
||||||
|
border: 1px solid var(--status-up-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
color: var(--status-down-color);
|
||||||
|
border: 1px solid var(--status-down-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
.config-table {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-color: var(--border-color);
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: var(--table-header-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 12px 8px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
width: 40px;
|
||||||
|
} // Drag handle
|
||||||
|
&:nth-child(2) {
|
||||||
|
width: 50px;
|
||||||
|
} // # column
|
||||||
|
&:nth-child(3) {
|
||||||
|
width: 60px;
|
||||||
|
} // Icon column
|
||||||
|
&:nth-child(4) {
|
||||||
|
width: auto;
|
||||||
|
} // Service Name
|
||||||
|
&:nth-child(5) {
|
||||||
|
width: 300px;
|
||||||
|
} // URL
|
||||||
|
&:nth-child(6) {
|
||||||
|
width: 120px;
|
||||||
|
} // Headers
|
||||||
|
&:nth-child(7) {
|
||||||
|
width: 80px;
|
||||||
|
} // Actions
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody.cdk-drop-list {
|
||||||
|
.draggable-row {
|
||||||
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
|
||||||
|
&.cdk-drag-preview {
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cdk-drag-placeholder {
|
||||||
|
opacity: 0.5;
|
||||||
|
background: var(--table-stripe-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cdk-drag-animating {
|
||||||
|
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-color: var(--border-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 12px 8px;
|
||||||
|
|
||||||
|
&.drag-handle {
|
||||||
|
text-align: center;
|
||||||
|
cursor: move;
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.drag-icon {
|
||||||
|
color: var(--status-loading-color);
|
||||||
|
font-weight: bold;
|
||||||
|
user-select: none;
|
||||||
|
font-family: monospace;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.index-column {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-column {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-icon {
|
||||||
|
color: var(--status-loading-color);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.name-column {
|
||||||
|
font-weight: 500;
|
||||||
|
max-width: 200px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.url-column {
|
||||||
|
max-width: 300px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
.url-link {
|
||||||
|
color: var(--status-up-color);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: var(--btn-hover-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.headers-column {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.headers-count {
|
||||||
|
color: var(--status-up-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-headers {
|
||||||
|
color: var(--status-loading-color);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.actions-column {
|
||||||
|
text-align: center;
|
||||||
|
width: 120px; // Increased width for edit actions
|
||||||
|
|
||||||
|
.edit-actions,
|
||||||
|
.view-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--btn-hover-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-row-btn {
|
||||||
|
background: var(--status-up-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #146c43;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
background: var(--status-loading-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-btn {
|
||||||
|
background: var(--status-down-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: #c82333;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: var(--status-loading-color);
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input field styling for edit mode
|
||||||
|
.form-control {
|
||||||
|
background: var(--background-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--status-up-color);
|
||||||
|
box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-input {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Editing row highlight
|
||||||
|
.draggable-row {
|
||||||
|
&.editing {
|
||||||
|
background-color: rgba(25, 135, 84, 0.05);
|
||||||
|
border-left: 3px solid var(--status-up-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||||
|
background-color: var(--table-stripe-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-hover > tbody > tr:hover > * {
|
||||||
|
background-color: var(--table-hover-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-footer-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding-top: 12px;
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--btn-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 2px solid var(--status-up-color);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
23
main_web/src/app/pages/settings/settings.spec.ts
Normal file
23
main_web/src/app/pages/settings/settings.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||||||
|
|
||||||
|
import {Settings} from './settings';
|
||||||
|
|
||||||
|
describe('Settings', () => {
|
||||||
|
let component: Settings;
|
||||||
|
let fixture: ComponentFixture<Settings>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [Settings]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(Settings);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
302
main_web/src/app/pages/settings/settings.ts
Normal file
302
main_web/src/app/pages/settings/settings.ts
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
import {Component, OnInit} from '@angular/core';
|
||||||
|
import {Store} from '@ngxs/store';
|
||||||
|
import {Observable} from 'rxjs';
|
||||||
|
import {ServiceStatusState} from '../../store/service-status.state';
|
||||||
|
import {AsyncPipe, CommonModule} from '@angular/common';
|
||||||
|
import {FormsModule} from '@angular/forms';
|
||||||
|
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
|
||||||
|
import {CdkDragDrop, DragDropModule, moveItemInArray} from '@angular/cdk/drag-drop';
|
||||||
|
import {CheckServiceStatusService} from '../../check-service-status.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-settings',
|
||||||
|
imports: [AsyncPipe, DragDropModule, FormsModule, CommonModule],
|
||||||
|
templateUrl: './settings.html',
|
||||||
|
styleUrl: './settings.scss'
|
||||||
|
})
|
||||||
|
export class Settings implements OnInit {
|
||||||
|
config$!: Observable<any>;
|
||||||
|
editableConfig: any[] = [];
|
||||||
|
hasChanges: boolean = false;
|
||||||
|
isSaving: boolean = false;
|
||||||
|
saveMessage: string = '';
|
||||||
|
editingRows: Set<number> = new Set(); // Track which rows are in edit mode
|
||||||
|
selectedFileName: string = '';
|
||||||
|
selectedFileContent: any = null;
|
||||||
|
importMessage: string = '';
|
||||||
|
protected readonly Object = Object;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private store: Store,
|
||||||
|
private sanitizer: DomSanitizer,
|
||||||
|
private checkServiceStatusService: CheckServiceStatusService
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.config$ = this.store.select(ServiceStatusState.config);
|
||||||
|
|
||||||
|
// Subscribe to config changes to maintain editable copy
|
||||||
|
this.config$.subscribe(config => {
|
||||||
|
if (config) {
|
||||||
|
this.editableConfig = JSON.parse(JSON.stringify(config)); // Deep copy
|
||||||
|
this.hasChanges = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
exportConfig() {
|
||||||
|
// Get current config from store
|
||||||
|
const config = this.store.selectSnapshot(ServiceStatusState.config);
|
||||||
|
|
||||||
|
if (config) {
|
||||||
|
// Convert config to JSON string
|
||||||
|
const configJson = JSON.stringify(config, null, 2);
|
||||||
|
|
||||||
|
// Create blob and download
|
||||||
|
const blob = new Blob([configJson], { type: 'application/json' });
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
// Create temporary download link
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = 'config.json';
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
|
document.body.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getSafeHtml(html: string): SafeHtml {
|
||||||
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drag and drop functionality
|
||||||
|
drop(event: CdkDragDrop<any[]>) {
|
||||||
|
moveItemInArray(this.editableConfig, event.previousIndex, event.currentIndex);
|
||||||
|
this.hasChanges = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new service in edit mode
|
||||||
|
addService() {
|
||||||
|
const newService = {
|
||||||
|
icon: '',
|
||||||
|
name: 'New Service',
|
||||||
|
url: 'https://example.com',
|
||||||
|
headers: {}
|
||||||
|
};
|
||||||
|
this.editableConfig.push(newService);
|
||||||
|
this.editingRows.add(this.editableConfig.length - 1); // Set new row to edit mode
|
||||||
|
this.hasChanges = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle edit mode for a row
|
||||||
|
toggleEdit(index: number) {
|
||||||
|
if (this.editingRows.has(index)) {
|
||||||
|
this.editingRows.delete(index);
|
||||||
|
} else {
|
||||||
|
this.editingRows.add(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save changes for a specific row
|
||||||
|
saveRow(index: number) {
|
||||||
|
this.editingRows.delete(index);
|
||||||
|
this.hasChanges = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cancel editing for a row
|
||||||
|
cancelEdit(index: number) {
|
||||||
|
if (index >= this.editableConfig.length - 1 && this.editingRows.has(index)) {
|
||||||
|
// If it's a new row being cancelled, remove it
|
||||||
|
this.removeService(index);
|
||||||
|
} else {
|
||||||
|
// Otherwise just exit edit mode
|
||||||
|
this.editingRows.delete(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if row is in edit mode
|
||||||
|
isEditing(index: number): boolean {
|
||||||
|
return this.editingRows.has(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update service property
|
||||||
|
updateService(index: number, property: string, value: string) {
|
||||||
|
this.editableConfig[index][property] = value;
|
||||||
|
this.hasChanges = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert headers object to string for editing
|
||||||
|
getHeadersAsString(headers: any): string {
|
||||||
|
if (!headers || Object.keys(headers).length === 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return Object.entries(headers)
|
||||||
|
.map(([key, value]) => `${key}:${value}`)
|
||||||
|
.join(',');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update service headers from string input
|
||||||
|
updateServiceHeaders(index: number, value: string) {
|
||||||
|
const headers: any = {};
|
||||||
|
|
||||||
|
if (value.trim()) {
|
||||||
|
// Parse the string format: "key1:value1,key2:value2"
|
||||||
|
const pairs = value.split(',');
|
||||||
|
for (const pair of pairs) {
|
||||||
|
const trimmedPair = pair.trim();
|
||||||
|
if (trimmedPair) {
|
||||||
|
const colonIndex = trimmedPair.indexOf(':');
|
||||||
|
if (colonIndex > 0) {
|
||||||
|
const key = trimmedPair.substring(0, colonIndex).trim();
|
||||||
|
const val = trimmedPair.substring(colonIndex + 1).trim();
|
||||||
|
if (key && val) {
|
||||||
|
headers[key] = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.editableConfig[index].headers = headers;
|
||||||
|
this.hasChanges = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove service
|
||||||
|
removeService(index: number) {
|
||||||
|
if (this.editableConfig.length > 1) {
|
||||||
|
this.editableConfig.splice(index, 1);
|
||||||
|
this.hasChanges = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save changes to server and refresh services
|
||||||
|
saveConfig() {
|
||||||
|
if (this.hasChanges && !this.isSaving) {
|
||||||
|
this.isSaving = true;
|
||||||
|
this.saveMessage = '';
|
||||||
|
|
||||||
|
this.checkServiceStatusService.saveConfigAndRefresh(this.editableConfig).subscribe({
|
||||||
|
next: (response) => {
|
||||||
|
if (response.success) {
|
||||||
|
this.hasChanges = false;
|
||||||
|
this.saveMessage = '✅ Configuration saved and services refreshed!';
|
||||||
|
} else {
|
||||||
|
this.saveMessage = '❌ Failed to save configuration: ' + response.message;
|
||||||
|
}
|
||||||
|
this.isSaving = false;
|
||||||
|
|
||||||
|
// Clear message after 3 seconds
|
||||||
|
setTimeout(() => this.saveMessage = '', 3000);
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error saving config:', error);
|
||||||
|
this.saveMessage = '❌ Error saving configuration. Please try again.';
|
||||||
|
this.isSaving = false;
|
||||||
|
|
||||||
|
// Clear message after 3 seconds
|
||||||
|
setTimeout(() => this.saveMessage = '', 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset changes
|
||||||
|
resetChanges() {
|
||||||
|
const originalConfig = this.store.selectSnapshot(ServiceStatusState.config);
|
||||||
|
if (originalConfig) {
|
||||||
|
this.editableConfig = JSON.parse(JSON.stringify(originalConfig));
|
||||||
|
this.hasChanges = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Import functionality
|
||||||
|
onFileSelected(event: any) {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
this.selectedFileName = file.name;
|
||||||
|
this.importMessage = '';
|
||||||
|
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
try {
|
||||||
|
const content = e.target?.result as string;
|
||||||
|
this.selectedFileContent = JSON.parse(content);
|
||||||
|
|
||||||
|
// Validate the imported config structure
|
||||||
|
if (this.validateConfigStructure(this.selectedFileContent)) {
|
||||||
|
this.importMessage = '✅ File is valid and ready to import';
|
||||||
|
} else {
|
||||||
|
this.importMessage = '❌ Invalid configuration format';
|
||||||
|
this.selectedFileContent = null;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.importMessage = '❌ Invalid JSON file';
|
||||||
|
this.selectedFileContent = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
validateConfigStructure(config: any): boolean {
|
||||||
|
// Check if config is an array and has valid structure
|
||||||
|
if (!Array.isArray(config)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const service of config) {
|
||||||
|
if (!service.name || !service.url || typeof service.headers !== 'object') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Import config and automatically upload + refresh
|
||||||
|
importConfig() {
|
||||||
|
if (this.selectedFileContent && !this.isSaving) {
|
||||||
|
this.isSaving = true;
|
||||||
|
this.importMessage = '⏳ Importing and refreshing services...';
|
||||||
|
|
||||||
|
// Use the enhanced service to save and refresh automatically
|
||||||
|
this.checkServiceStatusService.saveConfigAndRefresh(this.selectedFileContent).subscribe({
|
||||||
|
next: (response) => {
|
||||||
|
if (response.success) {
|
||||||
|
this.importMessage = '✅ Configuration imported and services refreshed!';
|
||||||
|
this.hasChanges = false;
|
||||||
|
} else {
|
||||||
|
this.importMessage = '❌ Failed to import configuration: ' + response.message;
|
||||||
|
}
|
||||||
|
this.isSaving = false;
|
||||||
|
this.cancelImport();
|
||||||
|
|
||||||
|
// Clear message after 3 seconds
|
||||||
|
setTimeout(() => this.importMessage = '', 3000);
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error importing config:', error);
|
||||||
|
this.importMessage = '❌ Error importing configuration. Please try again.';
|
||||||
|
this.isSaving = false;
|
||||||
|
|
||||||
|
// Clear message after 3 seconds
|
||||||
|
setTimeout(() => this.importMessage = '', 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cancelImport() {
|
||||||
|
this.selectedFileName = '';
|
||||||
|
this.selectedFileContent = null;
|
||||||
|
// Reset file input
|
||||||
|
const fileInput = document.querySelector('.file-input') as HTMLInputElement;
|
||||||
|
if (fileInput) {
|
||||||
|
fileInput.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
16
main_web/src/app/services/config.service.ts
Normal file
16
main_web/src/app/services/config.service.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import {Injectable} from '@angular/core';
|
||||||
|
import {HttpClient} from '@angular/common/http';
|
||||||
|
import {Observable} from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class ConfigService {
|
||||||
|
constructor(private http: HttpClient) {}
|
||||||
|
|
||||||
|
getConfig(): Observable<any> {
|
||||||
|
return this.http.get('/assets/config.json');
|
||||||
|
}
|
||||||
|
|
||||||
|
saveConfig(config: any): Observable<any> {
|
||||||
|
return this.http.post('/api/save-config', config);
|
||||||
|
}
|
||||||
|
}
|
||||||
11
main_web/src/app/store/service-status.action.ts
Normal file
11
main_web/src/app/store/service-status.action.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
export class LoadConfig {
|
||||||
|
static readonly type = '[ServiceStatus] Load Config';
|
||||||
|
}
|
||||||
|
export class CheckAllServicesStatus {
|
||||||
|
static readonly type = '[ServiceStatus] Check All Services Status';
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CheckSpecifiedServiceStatus {
|
||||||
|
static readonly type = '[ServiceStatus] Check Specified Service Status';
|
||||||
|
constructor(public serviceName: string) {}
|
||||||
|
}
|
||||||
105
main_web/src/app/store/service-status.state.ts
Normal file
105
main_web/src/app/store/service-status.state.ts
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import {Action, Selector, State, StateContext} from '@ngxs/store';
|
||||||
|
import {Injectable} from '@angular/core';
|
||||||
|
import {ConfigService} from '../services/config.service';
|
||||||
|
import {catchError, map, tap} from 'rxjs/operators';
|
||||||
|
import {forkJoin, Observable, of} from 'rxjs';
|
||||||
|
import {Service, Status} from '../interfaces/services.interface';
|
||||||
|
import {CheckAllServicesStatus, CheckSpecifiedServiceStatus, LoadConfig} from './service-status.action';
|
||||||
|
import {CheckServiceStatusService} from '../check-service-status.service';
|
||||||
|
|
||||||
|
export interface ServiceStatusModel {
|
||||||
|
config: any | null;
|
||||||
|
loading: boolean;
|
||||||
|
error: any | null;
|
||||||
|
services: Service[];
|
||||||
|
}
|
||||||
|
|
||||||
|
@State<ServiceStatusModel>({
|
||||||
|
name: 'serviceStatus',
|
||||||
|
defaults: {
|
||||||
|
config: null,
|
||||||
|
loading: false,
|
||||||
|
error: null,
|
||||||
|
services: []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
@Injectable({providedIn: 'root'})
|
||||||
|
export class ServiceStatusState {
|
||||||
|
constructor(private configService: ConfigService, private checkServiceStatus: CheckServiceStatusService) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@Selector()
|
||||||
|
static config(state: ServiceStatusModel) {
|
||||||
|
return state.config;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Selector()
|
||||||
|
static loading(state: ServiceStatusModel) {
|
||||||
|
return state.loading;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Selector()
|
||||||
|
static error(state: ServiceStatusModel) {
|
||||||
|
return state.error;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Selector()
|
||||||
|
static services(state: ServiceStatusModel): Service[] {
|
||||||
|
return state.services;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Action(LoadConfig)
|
||||||
|
loadConfig(ctx: StateContext<ServiceStatusModel>): Observable<any> {
|
||||||
|
ctx.patchState({loading: true, error: null});
|
||||||
|
return this.configService.getConfig().pipe(
|
||||||
|
tap((data) => {
|
||||||
|
ctx.patchState({config: data, loading: false});
|
||||||
|
}),
|
||||||
|
catchError((err) => {
|
||||||
|
ctx.patchState({error: err, loading: false});
|
||||||
|
return of(null);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Action(CheckAllServicesStatus)
|
||||||
|
checkServicesStatus(ctx: StateContext<ServiceStatusModel>) {
|
||||||
|
ctx.patchState({ loading: true });
|
||||||
|
const config = ctx.getState().config;
|
||||||
|
|
||||||
|
if (!config || !Array.isArray(config)) {
|
||||||
|
ctx.patchState({ services: [], loading: false });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const statusObservables = config.map((service: Service) =>
|
||||||
|
this.checkServiceStatus.checkStatus(service.name, service.url, service.headers).pipe(
|
||||||
|
map((status: Status) => ({ ...service, status, lastChecked: Date.now() }))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
return forkJoin(statusObservables).pipe(
|
||||||
|
tap((services: Service[]) => {
|
||||||
|
ctx.patchState({ services, loading: false });
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Action(CheckSpecifiedServiceStatus)
|
||||||
|
checkSpecifiedServiceStatus(ctx: StateContext<ServiceStatusModel>, action: CheckSpecifiedServiceStatus) {
|
||||||
|
const config = ctx.getState().config;
|
||||||
|
if (!config || !Array.isArray(config)) return;
|
||||||
|
const service = config.find((s: Service) => s.name === action.serviceName);
|
||||||
|
if (!service) return;
|
||||||
|
const services = ctx.getState().services.slice();
|
||||||
|
const index = services.findIndex(s => s.name === action.serviceName);
|
||||||
|
if (index !== -1) {
|
||||||
|
services[index] = { ...services[index], status: 'loading' };
|
||||||
|
ctx.patchState({ services });
|
||||||
|
}
|
||||||
|
this.checkServiceStatus.checkStatus(service.name, service.url, service.headers).subscribe((status: Status) => {
|
||||||
|
const updatedServices = ctx.getState().services.map(s =>
|
||||||
|
s.name === action.serviceName ? { ...s, status, lastChecked: Date.now() } : s
|
||||||
|
);
|
||||||
|
ctx.patchState({ services: updatedServices });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
14
main_web/src/assets/config.json
Normal file
14
main_web/src/assets/config.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n<linearGradient id=\"s4jFNnMAB4nIFX1Kv1Lz_a_bUiJaENo3bOZ_gr1\" x1=\"7.172\" x2=\"40.828\" y1=\"386.828\" y2=\"353.172\" gradientTransform=\"matrix(1 0 0 -1 0 394)\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#4c4c4c\"></stop><stop offset=\"1\" stop-color=\"#343434\"></stop></linearGradient><path fill=\"url(#s4jFNnMAB4nIFX1Kv1Lz_a_bUiJaENo3bOZ_gr1)\" d=\"M38,42H10c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4v28 C42,40.209,40.209,42,38,42z\"></path><linearGradient id=\"s4jFNnMAB4nIFX1Kv1Lz_b_bUiJaENo3bOZ_gr2\" x1=\"12.309\" x2=\"35.237\" y1=\"24\" y2=\"24\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#e36001\"></stop><stop offset=\".226\" stop-color=\"#eb8001\"></stop><stop offset=\".572\" stop-color=\"#f5ac00\"></stop><stop offset=\".842\" stop-color=\"#fcc700\"></stop><stop offset=\"1\" stop-color=\"#fed100\"></stop></linearGradient><polygon fill=\"url(#s4jFNnMAB4nIFX1Kv1Lz_b_bUiJaENo3bOZ_gr2)\" points=\"31.109,24 23.625,35.5 16.809,35.5 24.209,24 16.809,12.5 23.625,12.5\"></polygon>\n</svg>",
|
||||||
|
"name": "Ikov Plex Server (Local)",
|
||||||
|
"url": "https://iko-main.ddns.net/draw/",
|
||||||
|
"headers": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "<svg width=\"48px\" height=\"48px\" viewBox=\"0 0 48 48\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <!-- Globe -->\n <circle cx=\"24\" cy=\"24\" r=\"19\" />\n <!-- Meridians -->\n <path d=\"M24,5 L24,43\" />\n <path d=\"M5,24 L43,24\" />\n <ellipse cx=\"24\" cy=\"24\" rx=\"9.5\" ry=\"19\" />\n <!-- Refresh/Dynamic arrows -->\n <path d=\"M17,10 L12,15 L17,20\" />\n <path d=\"M31,38 L36,33 L31,28\" />\n </g>\n</svg>",
|
||||||
|
"name": "Ikov ddns",
|
||||||
|
"url": "https://iko-home.ddns.net/",
|
||||||
|
"headers": {}
|
||||||
|
}
|
||||||
|
]
|
||||||
13
main_web/src/index.html
Normal file
13
main_web/src/index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>MainWeb</title>
|
||||||
|
<base href="/">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
main_web/src/main.ts
Normal file
6
main_web/src/main.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import {bootstrapApplication} from '@angular/platform-browser';
|
||||||
|
import {appConfig} from './app/app.config';
|
||||||
|
import {App} from './app/app';
|
||||||
|
|
||||||
|
bootstrapApplication(App, appConfig)
|
||||||
|
.catch((err) => console.error(err));
|
||||||
120
main_web/src/styles.scss
Normal file
120
main_web/src/styles.scss
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
@import "bootstrap/scss/bootstrap";
|
||||||
|
@import './theme-variables.scss';
|
||||||
|
@import './app/app.scss';
|
||||||
|
|
||||||
|
/* Theme variables for light/dark mode */
|
||||||
|
:root {
|
||||||
|
/* Light theme (default) */
|
||||||
|
--background-color: #{$light-background-color};
|
||||||
|
--text-color: #{$light-text-color};
|
||||||
|
--border-color: #{$light-border-color};
|
||||||
|
--table-header-bg: #{$light-table-header-bg};
|
||||||
|
--table-stripe-bg: #{$light-table-stripe-bg};
|
||||||
|
--table-even-row-bg: #{$light-table-even-row-bg};
|
||||||
|
--table-hover-bg: #{$light-table-hover-bg};
|
||||||
|
--btn-bg: #{$light-btn-bg};
|
||||||
|
--btn-hover-bg: #{$light-btn-hover-bg};
|
||||||
|
--status-up-color: #{$light-status-up-color};
|
||||||
|
--status-down-color: #{$light-status-down-color};
|
||||||
|
--status-loading-color: #{$light-status-loading-color};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme */
|
||||||
|
.dark-mode {
|
||||||
|
--background-color: #{$dark-background-color};
|
||||||
|
--text-color: #{$dark-text-color};
|
||||||
|
--border-color: #{$dark-border-color};
|
||||||
|
--table-header-bg: #{$dark-table-header-bg};
|
||||||
|
--table-stripe-bg: #{$dark-table-stripe-bg};
|
||||||
|
--table-even-row-bg: #{$dark-table-even-row-bg};
|
||||||
|
--table-hover-bg: #{$dark-table-hover-bg};
|
||||||
|
--btn-bg: #{$dark-btn-bg};
|
||||||
|
--btn-hover-bg: #{$dark-btn-hover-bg};
|
||||||
|
--status-up-color: #{$dark-status-up-color};
|
||||||
|
--status-down-color: #{$dark-status-down-color};
|
||||||
|
--status-loading-color: #{$dark-status-loading-color};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light theme explicit class (for manual toggle) */
|
||||||
|
.light-mode {
|
||||||
|
--background-color: #{$light-background-color};
|
||||||
|
--text-color: #{$light-text-color};
|
||||||
|
--border-color: #{$light-border-color};
|
||||||
|
--table-header-bg: #{$light-table-header-bg};
|
||||||
|
--table-stripe-bg: #{$light-table-stripe-bg};
|
||||||
|
--table-even-row-bg: #{$light-table-even-row-bg};
|
||||||
|
--table-hover-bg: #{$light-table-hover-bg};
|
||||||
|
--btn-bg: #{$light-btn-bg};
|
||||||
|
--btn-hover-bg: #{$light-btn-hover-bg};
|
||||||
|
--status-up-color: #{$light-status-up-color};
|
||||||
|
--status-down-color: #{$light-status-down-color};
|
||||||
|
--status-loading-color: #{$light-status-loading-color};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* System preference dark theme */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not(.light-mode):not(.dark-mode) {
|
||||||
|
--background-color: #{$dark-background-color};
|
||||||
|
--text-color: #{$dark-text-color};
|
||||||
|
--border-color: #{$dark-border-color};
|
||||||
|
--table-header-bg: #{$dark-table-header-bg};
|
||||||
|
--table-stripe-bg: #{$dark-table-stripe-bg};
|
||||||
|
--table-even-row-bg: #{$dark-table-even-row-bg};
|
||||||
|
--table-hover-bg: #{$dark-table-hover-bg};
|
||||||
|
--btn-bg: #{$system-dark-btn-bg};
|
||||||
|
--btn-hover-bg: #{$dark-btn-hover-bg};
|
||||||
|
--status-up-color: #{$dark-status-up-color};
|
||||||
|
--status-down-color: #{$dark-status-down-color};
|
||||||
|
--status-loading-color: #{$dark-status-loading-color};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply theme to html and body elements */
|
||||||
|
html, body {
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.light-mode, html.light-mode body {
|
||||||
|
background-color: #{$light-background-color};
|
||||||
|
color: #{$light-text-color};
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark-mode, html.dark-mode body {
|
||||||
|
background-color: #{$dark-background-color};
|
||||||
|
color: #{$dark-text-color};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default system-based theming */
|
||||||
|
body {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override Bootstrap styles with our theme variables */
|
||||||
|
.table {
|
||||||
|
--bs-table-color: var(--text-color);
|
||||||
|
--bs-table-bg: var(--background-color);
|
||||||
|
--bs-table-border-color: var(--border-color);
|
||||||
|
--bs-table-striped-bg: var(--table-stripe-bg);
|
||||||
|
--bs-table-striped-color: var(--text-color);
|
||||||
|
--bs-table-hover-bg: var(--table-hover-bg);
|
||||||
|
--bs-table-hover-color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style all table rows in light mode too */
|
||||||
|
.table-striped > tbody > tr:nth-of-type(even) > * {
|
||||||
|
background-color: var(--table-even-row-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
border-color: var(--btn-bg);
|
||||||
|
color: #{$light-text-color};
|
||||||
|
|
||||||
|
&:hover, &:focus, &:active {
|
||||||
|
background-color: var(--btn-hover-bg) !important;
|
||||||
|
border-color: var(--btn-hover-bg) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
main_web/src/theme-variables.scss
Normal file
32
main_web/src/theme-variables.scss
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
/* Theme Variables - Centralized color definitions */
|
||||||
|
|
||||||
|
/* Light Theme Variables */
|
||||||
|
$light-background-color: #ffffff;
|
||||||
|
$light-text-color: #212529;
|
||||||
|
$light-border-color: #dee2e6;
|
||||||
|
$light-table-header-bg: #f8f9fa;
|
||||||
|
$light-table-stripe-bg: #f2f2f2;
|
||||||
|
$light-table-even-row-bg: #ffffff;
|
||||||
|
$light-table-hover-bg: #ececec;
|
||||||
|
$light-btn-bg: #a2e89d;
|
||||||
|
$light-btn-hover-bg: #559551;
|
||||||
|
$light-status-up-color: #198754;
|
||||||
|
$light-status-down-color: #dc3545;
|
||||||
|
$light-status-loading-color: #6c757d;
|
||||||
|
|
||||||
|
/* Dark Theme Variables */
|
||||||
|
$dark-background-color: #212529;
|
||||||
|
$dark-text-color: #f8f9fa;
|
||||||
|
$dark-border-color: #495057;
|
||||||
|
$dark-table-header-bg: #343a40;
|
||||||
|
$dark-table-stripe-bg: #2c3034;
|
||||||
|
$dark-table-even-row-bg: #212529;
|
||||||
|
$dark-table-hover-bg: #343a40;
|
||||||
|
$dark-btn-bg: #163714;
|
||||||
|
$dark-btn-hover-bg: #497746;
|
||||||
|
$dark-status-up-color: #75b798;
|
||||||
|
$dark-status-down-color: #ea868f;
|
||||||
|
$dark-status-loading-color: #adb5bd;
|
||||||
|
|
||||||
|
/* System Dark Theme Variables (slight variations) */
|
||||||
|
$system-dark-btn-bg: #75b171;
|
||||||
15
main_web/tsconfig.app.json
Normal file
15
main_web/tsconfig.app.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/app",
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"src/**/*.spec.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
45
main_web/tsconfig.json
Normal file
45
main_web/tsconfig.json
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"compileOnSave": false,
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"config-generator": [
|
||||||
|
"./dist/config-generator"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"strict": true,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"noPropertyAccessFromIndexSignature": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"importHelpers": true,
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "preserve"
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"enableI18nLegacyMessageIdFormat": false,
|
||||||
|
"strictInjectionParameters": true,
|
||||||
|
"strictInputAccessModifiers": true,
|
||||||
|
"typeCheckHostBindings": true,
|
||||||
|
"strictTemplates": true
|
||||||
|
},
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.spec.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./projects/config-generator/tsconfig.lib.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./projects/config-generator/tsconfig.spec.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
14
main_web/tsconfig.spec.json
Normal file
14
main_web/tsconfig.spec.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/spec",
|
||||||
|
"types": [
|
||||||
|
"jasmine"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
1066
package-lock.json
generated
Normal file
1066
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
13
package.json
Normal file
13
package.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "mainweb-server",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"docker-build:docker-tag:docker-push": "./build-docker.sh && docker tag mainweb-app:latest iko-git.ddns.net/tpikna/main_web/mainweb-app:latest && docker push iko-git.ddns.net/tpikna/main_web/mainweb-app:latest"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"express": "^4.19.2",
|
||||||
|
"http-proxy-middleware": "^3.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
104
server.js
Normal file
104
server.js
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const cors = require('cors');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs').promises;
|
||||||
|
const { createProxyMiddleware, fixRequestBody } = require('http-proxy-middleware');
|
||||||
|
const app = express();
|
||||||
|
|
||||||
|
app.use(cors());
|
||||||
|
app.use(express.json()); // Add JSON body parser
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
function normalizeUrl(u) {
|
||||||
|
try {
|
||||||
|
return new URL(u);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Env-configurable allowed origins for proxying
|
||||||
|
const RAW_ALLOWED = process.env.ALLOWED_PROXY_ORIGINS || '*';
|
||||||
|
const ALLOW_ANY = RAW_ALLOWED.trim() === '*';
|
||||||
|
const allowedOrigins = ALLOW_ANY
|
||||||
|
? ['*']
|
||||||
|
: RAW_ALLOWED.split(',')
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
if (ALLOW_ANY) {
|
||||||
|
console.log('[proxy] ALLOWED_PROXY_ORIGINS="*" (allow any http/https target)');
|
||||||
|
} else {
|
||||||
|
console.log('[proxy] Allowed proxy origins:', allowedOrigins);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generic proxy endpoint
|
||||||
|
app.use(
|
||||||
|
'/proxy',
|
||||||
|
(req, res, next) => {
|
||||||
|
const targetUrlString = req.get('x-proxy-target');
|
||||||
|
if (!targetUrlString) {
|
||||||
|
return res.status(400).send('Missing x-proxy-target header');
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetUrl = normalizeUrl(targetUrlString);
|
||||||
|
if (!targetUrl) {
|
||||||
|
return res.status(400).send('Invalid x-proxy-target URL');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!ALLOW_ANY && !allowedOrigins.includes(targetUrl.origin)) {
|
||||||
|
return res.status(403).send(`Proxy target origin "${targetUrl.origin}" not allowed.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pass the full URL to the proxy middleware
|
||||||
|
req._proxyTarget = targetUrlString;
|
||||||
|
next();
|
||||||
|
},
|
||||||
|
createProxyMiddleware({
|
||||||
|
router: (req) => new URL(req._proxyTarget).origin,
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: (_path, req) => {
|
||||||
|
const targetUrl = new URL(req._proxyTarget);
|
||||||
|
return `${targetUrl.pathname}${targetUrl.search}`;
|
||||||
|
},
|
||||||
|
secure: false,
|
||||||
|
logLevel: 'debug',
|
||||||
|
onProxyReq: fixRequestBody, // Fixes body for POST/PUT requests
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// API endpoint to save config
|
||||||
|
app.post('/api/save-config', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const configPath = path.join(__dirname, 'main_web/src/assets/config.json');
|
||||||
|
const configData = JSON.stringify(req.body, null, 2);
|
||||||
|
|
||||||
|
await fs.writeFile(configPath, configData, 'utf8');
|
||||||
|
|
||||||
|
console.log('Config saved successfully to:', configPath);
|
||||||
|
res.json({ success: true, message: 'Configuration saved successfully' });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving config:', error);
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Failed to save configuration',
|
||||||
|
error: error.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const distPath = path.join(__dirname, 'dist');
|
||||||
|
app.use(express.static(distPath));
|
||||||
|
|
||||||
|
// Simple health check
|
||||||
|
app.get('/__health', (req, res) => res.json({ ok: true }));
|
||||||
|
|
||||||
|
// SPA fallback
|
||||||
|
app.get('*', (req, res) => {
|
||||||
|
res.sendFile(path.join(distPath, 'index.html'));
|
||||||
|
});
|
||||||
|
|
||||||
|
const port = process.env.PORT || 8080;
|
||||||
|
app.listen(port, () => {
|
||||||
|
console.log(`Server running on http://localhost:${port}`);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user