gofnnp/h-selfdelivery-admin-panel-p
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

master

Browse Source
This commit is contained in:
gofnnp 2026-01-18 14:42:32 +04:00
parent 013b5785be
commit 765ecce31f
60 changed files with 24281 additions and 24281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
.browserslistrc
View File

@ -1,16 +1,16 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see: # For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries # https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see: # For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support # https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running: # You can see what browsers were selected by your queries by running:
# npx browserslist # npx browserslist
last 1 Chrome version last 1 Chrome version
last 1 Firefox version last 1 Firefox version
last 2 Edge major versions last 2 Edge major versions
last 2 Safari major versions last 2 Safari major versions
last 2 iOS major versions last 2 iOS major versions
Firefox ESR Firefox ESR

32
.editorconfig
View File

@ -1,16 +1,16 @@
# Editor configuration, see https://editorconfig.org # Editor configuration, see https://editorconfig.org
root = true root = true
[*] [*]
charset = utf-8 charset = utf-8
indent_style = space indent_style = space
indent_size = 2 indent_size = 2
insert_final_newline = true insert_final_newline = true
trim_trailing_whitespace = true trim_trailing_whitespace = true
[*.ts] [*.ts]
quote_type = single quote_type = single
[*.md] [*.md]
max_line_length = off max_line_length = off
trim_trailing_whitespace = false trim_trailing_whitespace = false

84
.gitignore vendored
View File

@ -1,42 +1,42 @@
# See http://help.github.com/ignore-files/ for more about ignoring files. # See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output # Compiled output
/dist /dist
/tmp /tmp
/out-tsc /out-tsc
/bazel-out /bazel-out
# Node # Node
/node_modules /node_modules
npm-debug.log npm-debug.log
yarn-error.log yarn-error.log
# IDEs and editors # IDEs and editors
.idea/ .idea/
.project .project
.classpath .classpath
.c9/ .c9/
*.launch *.launch
.settings/ .settings/
*.sublime-workspace *.sublime-workspace
# Visual Studio Code # Visual Studio Code
.vscode/* .vscode/*
!.vscode/settings.json !.vscode/settings.json
!.vscode/tasks.json !.vscode/tasks.json
!.vscode/launch.json !.vscode/launch.json
!.vscode/extensions.json !.vscode/extensions.json
.history/* .history/*
# Miscellaneous # Miscellaneous
/.angular/cache /.angular/cache
.sass-cache/ .sass-cache/
/connect.lock /connect.lock
/coverage /coverage
/libpeerconnection.log /libpeerconnection.log
testem.log testem.log
/typings /typings
# System files # System files
.DS_Store .DS_Store
Thumbs.db Thumbs.db

8
.vscode/extensions.json vendored
View File

@ -1,4 +1,4 @@
{ {
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"] "recommendations": ["angular.ng-template"]
} }

40
.vscode/launch.json vendored
View File

@ -1,20 +1,20 @@
{ {
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"name": "ng serve", "name": "ng serve",
"type": "pwa-chrome", "type": "pwa-chrome",
"request": "launch", "request": "launch",
"preLaunchTask": "npm: start", "preLaunchTask": "npm: start",
"url": "http://localhost:4200/" "url": "http://localhost:4200/"
}, },
{ {
"name": "ng test", "name": "ng test",
"type": "chrome", "type": "chrome",
"request": "launch", "request": "launch",
"preLaunchTask": "npm: test", "preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html" "url": "http://localhost:9876/debug.html"
} }
] ]
} }

84
.vscode/tasks.json vendored
View File

@ -1,42 +1,42 @@
{ {
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0", "version": "2.0.0",
"tasks": [ "tasks": [
{ {
"type": "npm", "type": "npm",
"script": "start", "script": "start",
"isBackground": true, "isBackground": true,
"problemMatcher": { "problemMatcher": {
"owner": "typescript", "owner": "typescript",
"pattern": "$tsc", "pattern": "$tsc",
"background": { "background": {
"activeOnStart": true, "activeOnStart": true,
"beginsPattern": { "beginsPattern": {
"regexp": "(.*?)" "regexp": "(.*?)"
}, },
"endsPattern": { "endsPattern": {
"regexp": "bundle generation complete" "regexp": "bundle generation complete"
} }
} }
} }
}, },
{ {
"type": "npm", "type": "npm",
"script": "test", "script": "test",
"isBackground": true, "isBackground": true,
"problemMatcher": { "problemMatcher": {
"owner": "typescript", "owner": "typescript",
"pattern": "$tsc", "pattern": "$tsc",
"background": { "background": {
"activeOnStart": true, "activeOnStart": true,
"beginsPattern": { "beginsPattern": {
"regexp": "(.*?)" "regexp": "(.*?)"
}, },
"endsPattern": { "endsPattern": {
"regexp": "bundle generation complete" "regexp": "bundle generation complete"
} }
} }
} }
} }
] ]
} }

24
JenkinsBuildProd
View File

@ -1,13 +1,13 @@
node('Lithium'){ node('Lithium'){
stage('get new version to repo') { stage('get new version to repo') {
checkout scm checkout scm
} }
stage('Install dependencies') { stage('Install dependencies') {
sh 'npm install' sh 'npm install'
} }
stage('build project') { stage('build project') {
sh 'npm run build-prod:lithium' sh 'npm run build-prod:lithium'
} }
} }

26
JenkinsBuildTest
View File

@ -1,13 +1,13 @@
node('Lithium'){ node('Lithium'){
stage('get new version to repo') { stage('get new version to repo') {
checkout scm checkout scm
} }
stage('Install dependencies') { stage('Install dependencies') {
sh 'npm install' sh 'npm install'
} }
stage('build project') { stage('build project') {
sh 'npm run build-test:lithium' sh 'npm run build-test:lithium'
} }
} }

54
README.md
View File

@ -1,27 +1,27 @@
# SelfdeliveryAdminPanel # SelfdeliveryAdminPanel
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.5. This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.5.
## Development server ## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding ## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build ## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running unit tests ## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests ## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Further help ## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

392
angular.json
View File

@ -1,196 +1,196 @@
{ {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": { "cli": {
"analytics": false "analytics": false
}, },
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"selfdelivery-admin-panel": { "selfdelivery-admin-panel": {
"projectType": "application", "projectType": "application",
"schematics": { "schematics": {
"@schematics/angular:component": { "@schematics/angular:component": {
"style": "scss" "style": "scss"
}, },
"@schematics/angular:application": { "@schematics/angular:application": {
"strict": true "strict": true
} }
}, },
"root": "", "root": "",
"sourceRoot": "src", "sourceRoot": "src",
"prefix": "app", "prefix": "app",
"architect": { "architect": {
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"outputPath": "dist/selfdelivery-admin-panel", "outputPath": "dist/selfdelivery-admin-panel",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
"assets": [ "assets": [
"src/favicon.ico", "src/favicon.ico",
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css", "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
"node_modules/primeicons/primeicons.css", "node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/primeng.min.css", "node_modules/primeng/resources/primeng.min.css",
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
"production": { "production": {
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
"maximumWarning": "4mb", "maximumWarning": "4mb",
"maximumError": "5mb" "maximumError": "5mb"
}, },
{ {
"type": "anyComponentStyle", "type": "anyComponentStyle",
"maximumWarning": "2kb", "maximumWarning": "2kb",
"maximumError": "4kb" "maximumError": "4kb"
} }
], ],
"fileReplacements": [ "fileReplacements": [
{ {
"replace": "src/environments/environment.ts", "replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts" "with": "src/environments/environment.prod.ts"
} }
], ],
"outputHashing": "all" "outputHashing": "all"
}, },
"test": { "test": {
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
"maximumWarning": "4mb", "maximumWarning": "4mb",
"maximumError": "5mb" "maximumError": "5mb"
}, },
{ {
"type": "anyComponentStyle", "type": "anyComponentStyle",
"maximumWarning": "2kb", "maximumWarning": "2kb",
"maximumError": "4kb" "maximumError": "4kb"
} }
], ],
"fileReplacements": [ "fileReplacements": [
{ {
"replace": "src/environments/environment.ts", "replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts" "with": "src/environments/environment.test.ts"
} }
], ],
"outputHashing": "all" "outputHashing": "all"
}, },
"development": { "development": {
"buildOptimizer": false, "buildOptimizer": false,
"optimization": false, "optimization": false,
"vendorChunk": true, "vendorChunk": true,
"extractLicenses": false, "extractLicenses": false,
"sourceMap": true, "sourceMap": true,
"namedChunks": true "namedChunks": true
} }
}, },
"defaultConfiguration": "production" "defaultConfiguration": "production"
}, },
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "selfdelivery-admin-panel:build:production" "browserTarget": "selfdelivery-admin-panel:build:production"
}, },
"development": { "development": {
"browserTarget": "selfdelivery-admin-panel:build:development", "browserTarget": "selfdelivery-admin-panel:build:development",
"proxyConfig": "proxy.confi.json" "proxyConfig": "proxy.confi.json"
} }
}, },
"defaultConfiguration": "development" "defaultConfiguration": "development"
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "selfdelivery-admin-panel:build" "browserTarget": "selfdelivery-admin-panel:build"
} }
}, },
"test": { "test": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"outputPath": "dist/selfdelivery-admin-panel", "outputPath": "dist/selfdelivery-admin-panel",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
"assets": [ "assets": [
"src/favicon.ico", "src/favicon.ico",
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css", "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
"node_modules/primeicons/primeicons.css", "node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/primeng.min.css", "node_modules/primeng/resources/primeng.min.css",
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
"production": { "production": {
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
"maximumWarning": "4mb", "maximumWarning": "4mb",
"maximumError": "5mb" "maximumError": "5mb"
}, },
{ {
"type": "anyComponentStyle", "type": "anyComponentStyle",
"maximumWarning": "2kb", "maximumWarning": "2kb",
"maximumError": "4kb" "maximumError": "4kb"
} }
], ],
"fileReplacements": [ "fileReplacements": [
{ {
"replace": "src/environments/environment.ts", "replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts" "with": "src/environments/environment.test.ts"
} }
], ],
"outputHashing": "all" "outputHashing": "all"
}, },
"development": { "development": {
"buildOptimizer": false, "buildOptimizer": false,
"optimization": false, "optimization": false,
"vendorChunk": true, "vendorChunk": true,
"extractLicenses": false, "extractLicenses": false,
"sourceMap": true, "sourceMap": true,
"namedChunks": true "namedChunks": true
} }
}, },
"defaultConfiguration": "production" "defaultConfiguration": "production"
}, },
"test2": { "test2": {
"builder": "@angular-devkit/build-angular:karma", "builder": "@angular-devkit/build-angular:karma",
"options": { "options": {
"main": "src/test.ts", "main": "src/test.ts",
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js", "karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
"assets": [ "assets": [
"src/favicon.ico", "src/favicon.ico",
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
} }
} }
} }
} }
}, },
"defaultProject": "selfdelivery-admin-panel" "defaultProject": "selfdelivery-admin-panel"
} }

88
karma.conf.js
View File

@ -1,44 +1,44 @@
// Karma configuration file, see link for more information // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html // https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) { module.exports = function (config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [ plugins: [
require('karma-jasmine'), require('karma-jasmine'),
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage'), require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma') require('@angular-devkit/build-angular/plugins/karma')
], ],
client: { client: {
jasmine: { jasmine: {
// you can add configuration options for Jasmine here // you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false` // for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321` // or set a specific seed with `seed: 4321`
}, },
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false // leave Jasmine Spec Runner output visible in browser
}, },
jasmineHtmlReporter: { jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces suppressAll: true // removes the duplicated traces
}, },
coverageReporter: { coverageReporter: {
dir: require('path').join(__dirname, './coverage/selfdelivery-admin-panel'), dir: require('path').join(__dirname, './coverage/selfdelivery-admin-panel'),
subdir: '.', subdir: '.',
reporters: [ reporters: [
{ type: 'html' }, { type: 'html' },
{ type: 'text-summary' } { type: 'text-summary' }
] ]
}, },
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml'],
port: 9876, port: 9876,
colors: true, colors: true,
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ['Chrome'],
singleRun: false, singleRun: false,
restartOnFileChange: true restartOnFileChange: true
}); });
}; };

41356
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

100
package.json
View File

@ -1,50 +1,50 @@
{ {
"name": "selfdelivery-admin-panel", "name": "selfdelivery-admin-panel",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --proxy-config proxy.confi.json", "start": "ng serve --proxy-config proxy.confi.json",
"build": "ng build", "build": "ng build",
"build-test:lithium": "ng build --output-path=/var/www/html/selfdelivery-pitsburg-test.mydatahosting.ru --configuration=test", "build-test:lithium": "ng build --output-path=/var/www/html/selfdelivery-pitsburg-test.mydatahosting.ru --configuration=test",
"build-prod:lithium": "ng build --output-path=/var/www/html/selfdelivery-pitsburg.mydatahosting.ru", "build-prod:lithium": "ng build --output-path=/var/www/html/selfdelivery-pitsburg.mydatahosting.ru",
"watch": "ng build --watch --configuration development", "watch": "ng build --watch --configuration development",
"test": "ng test" "test": "ng test"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~13.3.0", "@angular/animations": "~13.3.0",
"@angular/cdk": "^13.3.8", "@angular/cdk": "^13.3.8",
"@angular/common": "~13.3.0", "@angular/common": "~13.3.0",
"@angular/compiler": "~13.3.0", "@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0", "@angular/core": "~13.3.0",
"@angular/forms": "~13.3.0", "@angular/forms": "~13.3.0",
"@angular/material": "^13.3.8", "@angular/material": "^13.3.8",
"@angular/platform-browser": "~13.3.0", "@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0", "@angular/platform-browser-dynamic": "~13.3.0",
"@angular/pwa": "^14.0.0", "@angular/pwa": "^14.0.0",
"@angular/router": "~13.3.0", "@angular/router": "~13.3.0",
"@schematics/angular": "^14.0.0", "@schematics/angular": "^14.0.0",
"primeicons": "^5.0.0", "primeicons": "^5.0.0",
"primeng": "^13.4.1", "primeng": "^13.4.1",
"rxjs": "~7.5.0", "rxjs": "~7.5.0",
"tslib": "^2.3.0", "tslib": "^2.3.0",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"web-push": "^3.5.0", "web-push": "^3.5.0",
"zone.js": "~0.11.4" "zone.js": "~0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~13.3.5", "@angular-devkit/build-angular": "~13.3.5",
"@angular/cli": "~13.3.5", "@angular/cli": "~13.3.5",
"@angular/compiler-cli": "~13.3.0", "@angular/compiler-cli": "~13.3.0",
"@types/jasmine": "~3.10.0", "@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"@types/uuid": "^8.3.4", "@types/uuid": "^8.3.4",
"jasmine-core": "~4.0.0", "jasmine-core": "~4.0.0",
"karma": "~6.3.0", "karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0", "karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0", "karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0", "karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0", "karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.2" "typescript": "~4.6.2"
} }
} }

22
proxy.confi.json
View File

@ -1,11 +1,11 @@
{ {
"/api": { "/api": {
"target": "http://selfdelivery-pitsburg-test.mydatahosting.ru/api", "target": "http://selfdelivery-pitsburg-test.mydatahosting.ru/api",
"secure": false, "secure": false,
"pathRewrite": { "pathRewrite": {
"^/api": "" "^/api": ""
}, },
"changeOrigin": true, "changeOrigin": true,
"logLevel": "debug" "logLevel": "debug"
} }
} }

20
src/app/app-routing.module.ts
View File

@ -1,10 +1,10 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
const routes: Routes = []; const routes: Routes = [];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule { }

30
src/app/app.component.html
View File

@ -1,15 +1,15 @@
<mat-sidenav-container class="main-container" *ngIf="isAuth"> <mat-sidenav-container class="main-container" *ngIf="isAuth">
<mat-sidenav #sidenav mode="side" [(opened)]="opened"> <mat-sidenav #sidenav mode="side" [(opened)]="opened">
<app-menu></app-menu> <app-menu></app-menu>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content> <mat-sidenav-content>
<button (click)="sidenav.toggle()">Меню</button> <button (click)="sidenav.toggle()">Меню</button>
<button (click)="signOut()" style="float: right">Выход</button> <button (click)="signOut()" style="float: right">Выход</button>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-sidenav-content> </mat-sidenav-content>
</mat-sidenav-container> </mat-sidenav-container>
<app-login *ngIf="!isAuth" (confirm)="setIsAuth()"> <app-login *ngIf="!isAuth" (confirm)="setIsAuth()">
</app-login> </app-login>

8
src/app/app.component.scss
View File

@ -1,4 +1,4 @@
.main-container { .main-container {
height: 100%; height: 100%;
z-index: auto !important; z-index: auto !important;
} }

70
src/app/app.component.spec.ts
View File

@ -1,35 +1,35 @@
import { TestBed } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing'; import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
describe('AppComponent', () => { describe('AppComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [ imports: [
RouterTestingModule RouterTestingModule
], ],
declarations: [ declarations: [
AppComponent AppComponent
], ],
}).compileComponents(); }).compileComponents();
}); });
it('should create the app', () => { it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance; const app = fixture.componentInstance;
expect(app).toBeTruthy(); expect(app).toBeTruthy();
}); });
it(`should have as title 'selfdelivery-admin-panel'`, () => { it(`should have as title 'selfdelivery-admin-panel'`, () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance; const app = fixture.componentInstance;
expect(app.title).toEqual('selfdelivery-admin-panel'); expect(app.title).toEqual('selfdelivery-admin-panel');
}); });
it('should render title', () => { it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges(); fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement; const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('selfdelivery-admin-panel app is running!'); expect(compiled.querySelector('.content span')?.textContent).toContain('selfdelivery-admin-panel app is running!');
}); });
}); });

164
src/app/app.component.ts
View File

@ -1,82 +1,82 @@
import { Component, ComponentRef, EmbeddedViewRef, OnInit, Type, ViewContainerRef } from '@angular/core'; import { Component, ComponentRef, EmbeddedViewRef, OnInit, Type, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DialogService } from 'primeng/dynamicdialog'; import { DialogService } from 'primeng/dynamicdialog';
import {Toast} from "primeng/toast"; import {Toast} from "primeng/toast";
import { ExitComponentComponent } from './components/exit-component/exit-component.component'; import { ExitComponentComponent } from './components/exit-component/exit-component.component';
import { CookiesService } from './services/cookies.service'; import { CookiesService } from './services/cookies.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], styleUrls: ['./app.component.scss'],
providers: [DialogService], providers: [DialogService],
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
public opened: boolean = true; public opened: boolean = true;
public isAuth!: boolean; public isAuth!: boolean;
private messageComponent!: ComponentRef<Toast>; private messageComponent!: ComponentRef<Toast>;
title = 'selfdelivery-admin-panel'; title = 'selfdelivery-admin-panel';
constructor( constructor(
private cookiesService: CookiesService, private cookiesService: CookiesService,
private viewContainerRef: ViewContainerRef, private viewContainerRef: ViewContainerRef,
public dialogService: DialogService, public dialogService: DialogService,
private router: Router, private router: Router,
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
this.messageComponent = this.appendComponent(Toast); this.messageComponent = this.appendComponent(Toast);
const token = decodeURI(this.cookiesService.getItem('token') ?? '') const token = decodeURI(this.cookiesService.getItem('token') ?? '')
this.isAuth = token.length ? true : false; this.isAuth = token.length ? true : false;
this.router.navigate(['/clients']) this.router.navigate(['/clients'])
} }
appendComponent<C>(component: Type<C>): ComponentRef<C> { appendComponent<C>(component: Type<C>): ComponentRef<C> {
const componentRef = this.viewContainerRef.createComponent(component); const componentRef = this.viewContainerRef.createComponent(component);
const domElem = (componentRef.hostView as EmbeddedViewRef<any>) const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement; .rootNodes[0] as HTMLElement;
document.body.appendChild(domElem); document.body.appendChild(domElem);
return componentRef; return componentRef;
} }
openSidenav() { openSidenav() {
this.opened = true this.opened = true
} }
setIsAuth() { setIsAuth() {
const token = decodeURI(this.cookiesService.getItem('token') ?? '') const token = decodeURI(this.cookiesService.getItem('token') ?? '')
this.isAuth = token.length ? true : false; this.isAuth = token.length ? true : false;
} }
signOut() { signOut() {
const ref = this.dialogService.open(ExitComponentComponent, { const ref = this.dialogService.open(ExitComponentComponent, {
width: 'auto', width: 'auto',
style: { style: {
'max-width': '90vw', 'max-width': '90vw',
'max-height': '90vh', 'max-height': '90vh',
}, },
contentStyle: { contentStyle: {
'max-height': '90vh', 'max-height': '90vh',
height: 'auto', height: 'auto',
'max-width': '90vw', 'max-width': '90vw',
overflow: 'auto', overflow: 'auto',
'border-radius': '7px', 'border-radius': '7px',
'padding-top': '20px' 'padding-top': '20px'
}, },
baseZIndex: 10000, baseZIndex: 10000,
autoZIndex: true, autoZIndex: true,
dismissableMask: true, dismissableMask: true,
closeOnEscape: true, closeOnEscape: true,
showHeader: false, showHeader: false,
}); });
ref.onClose.subscribe( ref.onClose.subscribe(
result => { result => {
if (result) { if (result) {
this.cookiesService.deleteCookie('token') this.cookiesService.deleteCookie('token')
this.setIsAuth() this.setIsAuth()
} }
} }
); );
} }
} }

166
src/app/app.module.ts
View File

@ -1,85 +1,85 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component'; import { LoginComponent } from './components/login/login.component';
import { HttpClientJsonpModule, HttpClientModule } from "@angular/common/http"; import { HttpClientJsonpModule, HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatNativeDateModule} from '@angular/material/core'; import {MatNativeDateModule} from '@angular/material/core';
import { MatSidenavModule } from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import { LoginModalComponent } from './components/login-modal/login-modal.component'; import { LoginModalComponent } from './components/login-modal/login-modal.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MessageService } from 'primeng/api'; import { MessageService } from 'primeng/api';
import { APP_BASE_HREF } from '@angular/common'; import { APP_BASE_HREF } from '@angular/common';
import {MessagesModule} from "primeng/messages"; import {MessagesModule} from "primeng/messages";
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { ClientsComponent } from './pages/clients/clients.component'; import { ClientsComponent } from './pages/clients/clients.component';
import { OrdersComponent } from './pages/orders/orders.component'; import { OrdersComponent } from './pages/orders/orders.component';
import { TerminalsComponent } from './pages/terminals/terminals.component'; import { TerminalsComponent } from './pages/terminals/terminals.component';
import { DivisionsComponent } from './pages/divisions/divisions.component'; import { DivisionsComponent } from './pages/divisions/divisions.component';
import { AreasComponent } from './pages/areas/areas.component'; import { AreasComponent } from './pages/areas/areas.component';
import { MenuComponent } from './components/menu/menu.component'; import { MenuComponent } from './components/menu/menu.component';
import { ExitComponentComponent } from './components/exit-component/exit-component.component'; import { ExitComponentComponent } from './components/exit-component/exit-component.component';
import { TableModule } from 'primeng/table'; import { TableModule } from 'primeng/table';
import { ScrollPanelModule } from 'primeng/scrollpanel'; import { ScrollPanelModule } from 'primeng/scrollpanel';
import { ToastModule } from 'primeng/toast'; import { ToastModule } from 'primeng/toast';
import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { ConfirmationService } from 'primeng/api'; import { ConfirmationService } from 'primeng/api';
import { DropdownModule } from 'primeng/dropdown'; import { DropdownModule } from 'primeng/dropdown';
import { ChipsModule } from 'primeng/chips'; import { ChipsModule } from 'primeng/chips';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import {MultiSelectModule} from 'primeng/multiselect'; import {MultiSelectModule} from 'primeng/multiselect';
import { PaymentTypePipe } from './pipes/payment-type.pipe'; import { PaymentTypePipe } from './pipes/payment-type.pipe';
import { PaymentStatusPipe } from './pipes/payment-status.pipe'; import { PaymentStatusPipe } from './pipes/payment-status.pipe';
const routes = [ const routes = [
{ path: 'clients', component: ClientsComponent }, { path: 'clients', component: ClientsComponent },
{ path: 'orders', component: OrdersComponent }, { path: 'orders', component: OrdersComponent },
{ path: 'terminals', component: TerminalsComponent }, { path: 'terminals', component: TerminalsComponent },
{ path: 'divisions', component: DivisionsComponent }, { path: 'divisions', component: DivisionsComponent },
{ path: 'areas', component: AreasComponent }, { path: 'areas', component: AreasComponent },
{ path: '', redirectTo: '/clients', pathMatch: 'full' } { path: '', redirectTo: '/clients', pathMatch: 'full' }
] ]
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
LoginComponent, LoginComponent,
LoginModalComponent, LoginModalComponent,
ClientsComponent, ClientsComponent,
OrdersComponent, OrdersComponent,
TerminalsComponent, TerminalsComponent,
DivisionsComponent, DivisionsComponent,
AreasComponent, AreasComponent,
MenuComponent, MenuComponent,
ExitComponentComponent, ExitComponentComponent,
PaymentTypePipe, PaymentTypePipe,
PaymentStatusPipe PaymentStatusPipe
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
HttpClientModule, HttpClientModule,
HttpClientJsonpModule, HttpClientJsonpModule,
BrowserAnimationsModule, BrowserAnimationsModule,
MatNativeDateModule, MatNativeDateModule,
MatSidenavModule, MatSidenavModule,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
ToastModule, ToastModule,
MessagesModule, MessagesModule,
ConfirmDialogModule, ConfirmDialogModule,
TableModule, TableModule,
ScrollPanelModule, ScrollPanelModule,
DropdownModule, DropdownModule,
ChipsModule, ChipsModule,
ButtonModule, ButtonModule,
MultiSelectModule, MultiSelectModule,
RouterModule.forRoot(routes) RouterModule.forRoot(routes)
], ],
providers: [MessageService, { provide: APP_BASE_HREF, useValue: '/' }, ConfirmationService], providers: [MessageService, { provide: APP_BASE_HREF, useValue: '/' }, ConfirmationService],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }

10
src/app/components/exit-component/exit-component.component.html
View File

@ -1,5 +1,5 @@
<div> <div>
<H2>Вы действительно хотите выйти?</H2> <H2>Вы действительно хотите выйти?</H2>
<button class="woocommerce-button button" style="margin-right: 1rem" (click)="onClick(true)">Да</button> <button class="woocommerce-button button" style="margin-right: 1rem" (click)="onClick(true)">Да</button>
<button class="woocommerce-button button " (click)="onClick(false)">Нет</button> <button class="woocommerce-button button " (click)="onClick(false)">Нет</button>
</div> </div>

50
src/app/components/exit-component/exit-component.component.spec.ts
View File

@ -1,25 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExitComponentComponent } from './exit-component.component'; import { ExitComponentComponent } from './exit-component.component';
describe('ExitComponentComponent', () => { describe('ExitComponentComponent', () => {
let component: ExitComponentComponent; let component: ExitComponentComponent;
let fixture: ComponentFixture<ExitComponentComponent>; let fixture: ComponentFixture<ExitComponentComponent>;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ ExitComponentComponent ] declarations: [ ExitComponentComponent ]
}) })
.compileComponents(); .compileComponents();
}); });
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(ExitComponentComponent); fixture = TestBed.createComponent(ExitComponentComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
}); });

34
src/app/components/exit-component/exit-component.component.ts
View File

@ -1,17 +1,17 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {DynamicDialogRef} from "primeng/dynamicdialog"; import {DynamicDialogRef} from "primeng/dynamicdialog";
@Component({ @Component({
selector: 'app-exit-component', selector: 'app-exit-component',
templateUrl: './exit-component.component.html', templateUrl: './exit-component.component.html',
styleUrls: ['./exit-component.component.scss'] styleUrls: ['./exit-component.component.scss']
}) })
export class ExitComponentComponent{ export class ExitComponentComponent{
constructor(public dialogRef: DynamicDialogRef) { } constructor(public dialogRef: DynamicDialogRef) { }
onClick(val: boolean): void { onClick(val: boolean): void {
this.dialogRef.close(val); this.dialogRef.close(val);
} }
} }

28
src/app/components/login-modal/login-modal.component.html
View File

@ -1,15 +1,15 @@
<form (ngSubmit)="submit()" [formGroup]="mainFormGroup" action="false" autocomplete="on"> <form (ngSubmit)="submit()" [formGroup]="mainFormGroup" action="false" autocomplete="on">
<div class="login-container"> <div class="login-container">
<p> <p>
<label class="login-container__label" for="login">Логин</label> <label class="login-container__label" for="login">Логин</label>
<input class="login-container__input" formControlName="login" id="login" pInputText placeholder="Логин" type="text"> <input class="login-container__input" formControlName="login" id="login" pInputText placeholder="Логин" type="text">
</p> </p>
<p> <p>
<label class="login-container__label" for="password">Пароль</label> <label class="login-container__label" for="password">Пароль</label>
<input class="login-container__input" formControlName="password" id="password" pInputText placeholder="Пароль" type="password"> <input class="login-container__input" formControlName="password" id="password" pInputText placeholder="Пароль" type="password">
</p> </p>
<button [disabled]="!mainFormGroup.valid" style="margin-bottom: 8px;" type="submit"> <button [disabled]="!mainFormGroup.valid" style="margin-bottom: 8px;" type="submit">
<span>Войти</span> <span>Войти</span>
</button> </button>
</div> </div>
</form> </form>

102
src/app/components/login-modal/login-modal.component.scss
View File

@ -1,52 +1,52 @@
.login-container { .login-container {
&__label { &__label {
display: block; display: block;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
&__input { &__input {
display: block; display: block;
width: 100%; width: 100%;
height: calc(2.25rem + 2px); height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #212529; color: #212529;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #bdbdbd; border: 1px solid #bdbdbd;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
&::placeholder { &::placeholder {
color: #212529; color: #212529;
opacity: 0.4; opacity: 0.4;
} }
&:focus { &:focus {
color: #212529; color: #212529;
background-color: #fff; background-color: #fff;
border-color: #bdbdbd; border-color: #bdbdbd;
outline: 0; outline: 0;
box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25); box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
} }
} }
button { button {
margin-bottom: 8px; margin-bottom: 8px;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: #3b953b; background: #3b953b;
border: none; border: none;
border-radius: 7px; border-radius: 7px;
color: #fff; color: #fff;
transition: all .3s; transition: all .3s;
cursor: pointer; cursor: pointer;
&:disabled { &:disabled {
background: #5b8b5b; background: #5b8b5b;
} }
&:hover { &:hover {
transform: scale(1.009); transform: scale(1.009);
} }
} }
} }

152
src/app/components/login-modal/login-modal.component.ts
View File

@ -1,76 +1,76 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms"; import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
import { UserData } from "src/app/interface/data"; import { UserData } from "src/app/interface/data";
import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service"; import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
import { MessageService } from "primeng/api"; import { MessageService } from "primeng/api";
import { CookiesService } from "src/app/services/cookies.service"; import { CookiesService } from "src/app/services/cookies.service";
import { DynamicDialogRef } from "primeng/dynamicdialog"; import { DynamicDialogRef } from "primeng/dynamicdialog";
@Component({ @Component({
selector: 'app-login-modal', selector: 'app-login-modal',
templateUrl: './login-modal.component.html', templateUrl: './login-modal.component.html',
styleUrls: ['./login-modal.component.scss'], styleUrls: ['./login-modal.component.scss'],
}) })
export class LoginModalComponent implements OnInit { export class LoginModalComponent implements OnInit {
public mainFormGroup!: FormGroup; public mainFormGroup!: FormGroup;
public UserData: UserData = { public UserData: UserData = {
login: '', login: '',
password: '' password: ''
} }
public errorConfirm: boolean = false; public errorConfirm: boolean = false;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
private jsonRpcService: JsonrpcService, private jsonRpcService: JsonrpcService,
private messageService: MessageService, private messageService: MessageService,
private cookiesService: CookiesService, private cookiesService: CookiesService,
private dialogRef: DynamicDialogRef private dialogRef: DynamicDialogRef
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
this.mainFormGroup = new FormGroup({ this.mainFormGroup = new FormGroup({
login: new FormControl('', [Validators.required, Validators.minLength(4)]), login: new FormControl('', [Validators.required, Validators.minLength(4)]),
password: new FormControl('', [Validators.required, Validators.minLength(4)]), password: new FormControl('', [Validators.required, Validators.minLength(4)]),
}) })
} }
submit() { submit() {
const mainControls = this.mainFormGroup.controls; const mainControls = this.mainFormGroup.controls;
if (this.mainFormGroup.invalid) { if (this.mainFormGroup.invalid) {
Object.keys(mainControls).forEach(groupName => { Object.keys(mainControls).forEach(groupName => {
mainControls[groupName].markAsTouched(); mainControls[groupName].markAsTouched();
}); });
return; return;
} }
this.submitAuth() this.submitAuth()
} }
submitAuth() { submitAuth() {
const userData = this.mainFormGroup.value; const userData = this.mainFormGroup.value;
this.jsonRpcService.rpc({ this.jsonRpcService.rpc({
method: 'login', method: 'login',
params: [userData.login, userData.password] params: [userData.login, userData.password]
}, RpcService.authService, false).subscribe({ }, RpcService.authService, false).subscribe({
next: (result) => { next: (result) => {
this.cookiesService.setCookie('token', result.result); this.cookiesService.setCookie('token', result.result);
this.messageService.add({ this.messageService.add({
severity: 'success', severity: 'success',
summary: 'Авторизация прошла успешно!', summary: 'Авторизация прошла успешно!',
}) })
this.dialogRef.close() this.dialogRef.close()
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
this.errorConfirm = true; this.errorConfirm = true;
} }
} }
); );
} }
} }

26
src/app/components/login/login.component.scss
View File

@ -1,14 +1,14 @@
.example-container { .example-container {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
.example-events { .example-events {
width: 300px; width: 300px;
height: 200px; height: 200px;
overflow: auto; overflow: auto;
border: 1px solid #555; border: 1px solid #555;
} }

112
src/app/components/login/login.component.ts
View File

@ -1,57 +1,57 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DialogService } from 'primeng/dynamicdialog'; import { DialogService } from 'primeng/dynamicdialog';
import { CookiesService } from 'src/app/services/cookies.service'; import { CookiesService } from 'src/app/services/cookies.service';
import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service'; import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
import { LoginModalComponent } from '../login-modal/login-modal.component'; import { LoginModalComponent } from '../login-modal/login-modal.component';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
templateUrl: 'login.component.html', templateUrl: 'login.component.html',
styleUrls: ['login.component.scss'], styleUrls: ['login.component.scss'],
providers: [DialogService], providers: [DialogService],
}) })
export class LoginComponent implements OnInit { export class LoginComponent implements OnInit {
@Output() confirm = new EventEmitter<void>(); @Output() confirm = new EventEmitter<void>();
public login!: string; public login!: string;
public password!: string; public password!: string;
public errorConfirm: boolean = false; public errorConfirm: boolean = false;
constructor( constructor(
private router: Router, private router: Router,
private jsonrpc: JsonrpcService, private jsonrpc: JsonrpcService,
private cookiesService: CookiesService, private cookiesService: CookiesService,
public dialogService: DialogService, public dialogService: DialogService,
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
this.openDialog(); this.openDialog();
} }
openDialog() { openDialog() {
const ref = this.dialogService.open(LoginModalComponent, { const ref = this.dialogService.open(LoginModalComponent, {
width: 'auto', width: 'auto',
style: { style: {
background: '#FDFBFA', background: '#FDFBFA',
'border-radius': '7px' 'border-radius': '7px'
}, },
contentStyle: { contentStyle: {
height: 'auto', height: 'auto',
width: '300px', width: '300px',
overflow: 'auto', overflow: 'auto',
}, },
data: { data: {
}, },
header: 'Авторизация', header: 'Авторизация',
baseZIndex: 10000, baseZIndex: 10000,
autoZIndex: true, autoZIndex: true,
dismissableMask: false, dismissableMask: false,
closeOnEscape: false, closeOnEscape: false,
closable: false closable: false
}); });
ref.onClose.subscribe((res) => { ref.onClose.subscribe((res) => {
this.confirm.emit(); this.confirm.emit();
}) })
} }
} }

10
src/app/components/menu/menu.component.html
View File

@ -1,5 +1,5 @@
<div class="menu-container"> <div class="menu-container">
<div id="menu" *ngFor="let item of menuItems" (click)="redirect(item.path)" style="margin: 20px 20px 20px 5px; font-size:20px"> <div id="menu" *ngFor="let item of menuItems" (click)="redirect(item.path)" style="margin: 20px 20px 20px 5px; font-size:20px">
{{item.name}} {{item.name}}
</div> </div>
</div> </div>

96
src/app/components/menu/menu.component.ts
View File

@ -1,48 +1,48 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
import { MenuItem } from "src/app/interface/data"; import { MenuItem } from "src/app/interface/data";
@Component({ @Component({
selector: 'app-menu', selector: 'app-menu',
templateUrl: './menu.component.html', templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'] styleUrls: ['./menu.component.scss']
}) })
export class MenuComponent implements OnInit { export class MenuComponent implements OnInit {
public menuItems: Array<MenuItem> = [ public menuItems: Array<MenuItem> = [
{ {
name: 'Клиенты', name: 'Клиенты',
path: '/clients' path: '/clients'
}, },
{ {
name: 'Заказы', name: 'Заказы',
path: '/orders' path: '/orders'
}, },
{ {
name: 'Терминалы', name: 'Терминалы',
path: '/terminals' path: '/terminals'
}, },
{ {
name: 'Точки', name: 'Точки',
path: '/divisions' path: '/divisions'
}, },
{ {
name: 'Зоны', name: 'Зоны',
path: '/areas' path: '/areas'
}, },
] ]
constructor( constructor(
private router: Router, private router: Router,
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
} }
redirect(path: string) { redirect(path: string) {
/* this.router.navigate([path]);*/ /* this.router.navigate([path]);*/
this.router.routeReuseStrategy.shouldReuseRoute = () => false; this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload'; this.router.onSameUrlNavigation = 'reload';
this.router.navigate([path]); this.router.navigate([path]);
} }
} }

10
src/app/data/data.ts
View File

@ -1,6 +1,6 @@
export const OrderTypes = { export const OrderTypes = {
"mobileApp": "Мобильное приложение", "mobileApp": "Мобильное приложение",
"offlineReline": "Кассовое приложение", "offlineReline": "Кассовое приложение",
"mobileAppOfflineOrder": "Диплинк", "mobileAppOfflineOrder": "Диплинк",
"selfServiceTerminalOrder": "Терминал самообслуживания" "selfServiceTerminalOrder": "Терминал самообслуживания"
} }

254
src/app/interface/data.ts
View File

@ -1,128 +1,128 @@
export interface UserData { export interface UserData {
login: string; login: string;
password: string; password: string;
} }
export interface MenuItem { export interface MenuItem {
name: string; name: string;
path: string; path: string;
} }
export interface Delivery_address { export interface Delivery_address {
flat: string; flat: string;
house: string; house: string;
street: string; street: string;
} }
export interface Modifiers { export interface Modifiers {
group: string; group: string;
title: string; title: string;
} }
export interface Products { export interface Products {
area: string; area: string;
id: string; id: string;
modifiers: Modifiers[]; modifiers: Modifiers[];
nomenclature_code: string; nomenclature_code: string;
requested_quantity: string; requested_quantity: string;
status: string; status: string;
stock_quantity: string; stock_quantity: string;
title: string; title: string;
unit: string; unit: string;
} }
export interface Address { export interface Address {
client_id: string; client_id: string;
id: string; id: string;
name: string; name: string;
} }
export interface Payment { export interface Payment {
payload: Payload; payload: Payload;
summ: number; summ: number;
type: string; type: string;
} }
export interface Payload { export interface Payload {
id: string; id: string;
status: string status: string
} }
export interface Order { export interface Order {
address: Address; address: Address;
comment: string; comment: string;
date_created: string; date_created: string;
delivery_address: Delivery_address; delivery_address: Delivery_address;
due_datetime: string; due_datetime: string;
external_id: string; external_id: string;
id: number; id: number;
payment: Payment[]; payment: Payment[];
phone: string; phone: string;
products: Products[]; products: Products[];
status: string; status: string;
status_h: string; status_h: string;
item_style: string; item_style: string;
isWarnLine: boolean; isWarnLine: boolean;
type: string; type: string;
} }
export interface Client { export interface Client {
id: string; id: string;
name: string; name: string;
choose: boolean; choose: boolean;
} }
export interface Divisions { export interface Divisions {
client_id: string; client_id: string;
id: string; id: string;
name: string; name: string;
} }
export interface Areas { export interface Areas {
client_id: string; client_id: string;
id: string; id: string;
name: string; name: string;
selected: boolean; selected: boolean;
} }
export interface Terminals { export interface Terminals {
area_types: []; area_types: [];
client_id: string; client_id: string;
division_id: string; division_id: string;
id: string; id: string;
public_id: string; public_id: string;
} }
export interface TerminalDetails extends Terminals { export interface TerminalDetails extends Terminals {
socket_data: { socket_data: {
closed: boolean, closed: boolean,
connected: boolean, connected: boolean,
last_ping: string, last_ping: string,
} }
} }
export interface Notification { export interface Notification {
id: string; id: string;
new: boolean; new: boolean;
new_fin: boolean; new_fin: boolean;
due: boolean; due: boolean;
} }
export interface ref { export interface ref {
amount: number | undefined; amount: number | undefined;
status: string; status: string;
} }
export interface Refund { export interface Refund {
admin_return: ref; admin_return: ref;
difference_return: ref; difference_return: ref;
full_return: ref; full_return: ref;
} }
export interface PaymentRefund { export interface PaymentRefund {
id: string, id: string,
payment_id: string, payment_id: string,
data: { data: {
token: string token: string
}, },
amount: number, amount: number,
status: string, status: string,
} }

100
src/app/pages/areas/areas.component.html
View File

@ -1,50 +1,50 @@
<h1>Зоны</h1> <h1>Зоны</h1>
<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2> <h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull> <ng-template #ClientNull>
<h2 style="color:red">Выберите клиента</h2> <h2 style="color:red">Выберите клиента</h2>
</ng-template> </ng-template>
<div *ngIf="new_ar;else new_Area"> <div *ngIf="new_ar;else new_Area">
<button (click)="createArea()">Добавить</button> <button (click)="createArea()">Добавить</button>
<p-table [value]="areas"> <p-table [value]="areas">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr style="position:sticky !important; top: 0"> <tr style="position:sticky !important; top: 0">
<th style="width:35%">ID</th> <th style="width:35%">ID</th>
<th style="width:35%">Наименование зоны</th> <th style="width:35%">Наименование зоны</th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-areas> <ng-template pTemplate="body" let-areas>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"--> <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr> <tr>
<td style="width:35%">{{areas.id}}</td> <td style="width:35%">{{areas.id}}</td>
<td style="width:35%">{{areas.name}}</td> <td style="width:35%">{{areas.name}}</td>
<td><button (click)="updateArea1(areas.id, areas.name)">Изменить</button></td> <td><button (click)="updateArea1(areas.id, areas.name)">Изменить</button></td>
<td><button (click)="confirm(areas.id)">Удалить</button></td> <td><button (click)="confirm(areas.id)">Удалить</button></td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
</div> </div>
<ng-template #new_Area> <ng-template #new_Area>
<button (click)="getAreas()">К списку</button> <button (click)="getAreas()">К списку</button>
<p-table> <p-table>
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Введите наименование зоны:</th> <th>Введите наименование зоны:</th>
<th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th> <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<div *ngIf="create; else change"> <div *ngIf="create; else change">
<button (click)="createArea2()">Создать</button> <button (click)="createArea2()">Создать</button>
</div> </div>
<ng-template #change> <ng-template #change>
<button (click)="updateArea()">Сохранить</button> <button (click)="updateArea()">Сохранить</button>
</ng-template> </ng-template>
</ng-template> </ng-template>
<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog> <p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>

10
src/app/pages/areas/areas.component.scss
View File

@ -1,5 +1,5 @@
tr { tr {
display: table; display: table;
width: calc(100% - 5px); width: calc(100% - 5px);
table-layout: fixed; table-layout: fixed;
} }

320
src/app/pages/areas/areas.component.ts
View File

@ -1,160 +1,160 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service"; import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
import { MessageService } from "primeng/api"; import { MessageService } from "primeng/api";
import { Areas } from "src/app/interface/data"; import { Areas } from "src/app/interface/data";
import { ConfirmationService } from 'primeng/api'; import { ConfirmationService } from 'primeng/api';
@Component({ @Component({
selector: 'app-areas', selector: 'app-areas',
templateUrl: './areas.component.html', templateUrl: './areas.component.html',
styleUrls: ['./areas.component.scss'] styleUrls: ['./areas.component.scss']
}) })
export class AreasComponent implements OnInit { export class AreasComponent implements OnInit {
public areas: Areas[] = []; public areas: Areas[] = [];
public new_ar = true; public new_ar = true;
public choose = this.jsonRpcService.ClientChoose; public choose = this.jsonRpcService.ClientChoose;
public create = false; public create = false;
public chooseName!: string; public chooseName!: string;
constructor( constructor(
private jsonRpcService: JsonrpcService, private jsonRpcService: JsonrpcService,
private messageService: MessageService, private messageService: MessageService,
private confirmationService: ConfirmationService private confirmationService: ConfirmationService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
if (this.choose) { this.getAreas() }; if (this.choose) { this.getAreas() };
} }
async getAreas() { async getAreas() {
this.create = false; this.create = false;
this.new_ar = true; this.new_ar = true;
await this.jsonRpcService.rpc2({ await this.jsonRpcService.rpc2({
method: 'getAreas', method: 'getAreas',
params: { params: {
"client_id": this.choose "client_id": this.choose
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
this.areas = data; this.areas = data;
document.getElementsByTagName('thead')[0].style.display = 'table'; document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%'; document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed'; document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block'; document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)'; document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll'; document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.chooseName = this.jsonRpcService.ClientChooseName; this.chooseName = this.jsonRpcService.ClientChooseName;
} }
updateArea1(id: any, name: any) { updateArea1(id: any, name: any) {
this.new_ar = false; this.new_ar = false;
setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100); setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100);
this.jsonRpcService.changeId = id this.jsonRpcService.changeId = id
} }
updateArea() { updateArea() {
let name_n = document.getElementsByTagName("input")[0].value let name_n = document.getElementsByTagName("input")[0].value
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'updateArea', method: 'updateArea',
params: { params: {
"client_id": this.choose, "client_id": this.choose,
"area_id": this.jsonRpcService.changeId, "area_id": this.jsonRpcService.changeId,
"name": name_n "name": name_n
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.new_ar = true; this.new_ar = true;
this.jsonRpcService.changeId = ""; this.jsonRpcService.changeId = "";
setTimeout(() => this.getAreas(), 100); setTimeout(() => this.getAreas(), 100);
} }
deleteArea(id: any) { deleteArea(id: any) {
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'deleteArea', method: 'deleteArea',
params: { params: {
"client_id": this.choose, "client_id": this.choose,
"area_id": id "area_id": id
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getAreas(), 100); setTimeout(() => this.getAreas(), 100);
} }
createArea() { createArea() {
this.new_ar = false; this.new_ar = false;
this.create = true; this.create = true;
} }
createArea2() { createArea2() {
let name = document.getElementsByTagName("input")[0].value let name = document.getElementsByTagName("input")[0].value
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'createArea', method: 'createArea',
params: { params: {
"name": name, "name": name,
"client_id": this.choose "client_id": this.choose
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getAreas(), 100); setTimeout(() => this.getAreas(), 100);
} }
confirm(id: any) { confirm(id: any) {
this.confirmationService.confirm({ this.confirmationService.confirm({
message: 'Вы действительно хотите удалить элемент?', message: 'Вы действительно хотите удалить элемент?',
accept: () => { accept: () => {
this.deleteArea(id) this.deleteArea(id)
} }
}); });
} }
} }

104
src/app/pages/clients/clients.component.html
View File

@ -1,52 +1,52 @@
<h1>Клиенты</h1> <h1>Клиенты</h1>
<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2> <h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull> <ng-template #ClientNull>
<h2 style="color:red">Выберите клиента</h2> <h2 style="color:red">Выберите клиента</h2>
</ng-template> </ng-template>
<div *ngIf="new_cl;else new_client"> <div *ngIf="new_cl;else new_client">
<button (click)="createCient()">Добавить</button> <button (click)="createCient()">Добавить</button>
<p-table [value]="clients"> <p-table [value]="clients">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr style="position:sticky !important; top: 0"> <tr style="position:sticky !important; top: 0">
<th style="width:30%">ID</th> <th style="width:30%">ID</th>
<th style="width:30%">Наименование организации</th> <th style="width:30%">Наименование организации</th>
<th></th> <th></th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-client> <ng-template pTemplate="body" let-client>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"--> <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr> <tr>
<td style="width:30%">{{client.id}}</td> <td style="width:30%">{{client.id}}</td>
<td style="width:30%">{{client.name}}</td> <td style="width:30%">{{client.name}}</td>
<td><button [disabled]="choose == client.id" (click)="(chooseClient(client.id, client.name))">{{ choose == client.id ? 'Выбран' : 'Выбрать' }}</button></td> <td><button [disabled]="choose == client.id" (click)="(chooseClient(client.id, client.name))">{{ choose == client.id ? 'Выбран' : 'Выбрать' }}</button></td>
<td><button (click)="changeClient1(client.id, client.name)">Изменить</button></td> <td><button (click)="changeClient1(client.id, client.name)">Изменить</button></td>
<td><button (click)="confirm(client.id)">Удалить</button></td> <td><button (click)="confirm(client.id)">Удалить</button></td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
</div> </div>
<ng-template #new_client> <ng-template #new_client>
<button (click)="getClients()">К списку</button> <button (click)="getClients()">К списку</button>
<p-table> <p-table>
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Введите наименование организации:</th> <th>Введите наименование организации:</th>
<th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th> <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<div *ngIf="create; else change"> <div *ngIf="create; else change">
<button (click)="createClient2()">Создать</button> <button (click)="createClient2()">Создать</button>
</div> </div>
<ng-template #change> <ng-template #change>
<button (click)="changeClient()">Сохранить</button> <button (click)="changeClient()">Сохранить</button>
</ng-template> </ng-template>
</ng-template> </ng-template>
<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog> <p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>

10
src/app/pages/clients/clients.component.scss
View File

@ -1,5 +1,5 @@
tr { tr {
display: table; display: table;
width: calc(100% - 5px); width: calc(100% - 5px);
table-layout: fixed; table-layout: fixed;
} }

332
src/app/pages/clients/clients.component.ts
View File

@ -1,166 +1,166 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service"; import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
import { MessageService } from "primeng/api"; import { MessageService } from "primeng/api";
import { Client } from "src/app/interface/data"; import { Client } from "src/app/interface/data";
import { ConfirmationService } from 'primeng/api'; import { ConfirmationService } from 'primeng/api';
@Component({ @Component({
selector: 'app-clents', selector: 'app-clents',
templateUrl: './clients.component.html', templateUrl: './clients.component.html',
styleUrls: ['./clients.component.scss'] styleUrls: ['./clients.component.scss']
}) })
export class ClientsComponent implements OnInit { export class ClientsComponent implements OnInit {
public clients: Client[] = []; public clients: Client[] = [];
public new_cl = true; public new_cl = true;
public choose = this.jsonRpcService.ClientChoose; public choose = this.jsonRpcService.ClientChoose;
public create = false; public create = false;
public chooseName!: string; public chooseName!: string;
public myAudio = new Audio(); public myAudio = new Audio();
constructor( constructor(
private jsonRpcService: JsonrpcService, private jsonRpcService: JsonrpcService,
private messageService: MessageService, private messageService: MessageService,
private confirmationService: ConfirmationService private confirmationService: ConfirmationService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getClients(); this.getClients();
} }
async getClients() { async getClients() {
this.create = false; this.create = false;
this.new_cl = true; this.new_cl = true;
await this.jsonRpcService.rpc2({ await this.jsonRpcService.rpc2({
method: 'getClients', method: 'getClients',
params: { params: {
"name": "" "name": ""
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
this.clients = data; this.clients = data;
document.getElementsByTagName('thead')[0].style.display = 'table'; document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%'; document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed'; document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block'; document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)'; document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll'; document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.chooseName = this.jsonRpcService.ClientChooseName; this.chooseName = this.jsonRpcService.ClientChooseName;
} }
changeClient1(id: any, name: any) { changeClient1(id: any, name: any) {
this.new_cl = false; this.new_cl = false;
setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100); setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100);
this.jsonRpcService.changeId = id this.jsonRpcService.changeId = id
} }
changeClient() { changeClient() {
let name_n = document.getElementsByTagName("input")[0].value let name_n = document.getElementsByTagName("input")[0].value
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'updateClient', method: 'updateClient',
params: { params: {
"client_id": this.jsonRpcService.changeId, "client_id": this.jsonRpcService.changeId,
"name": name_n "name": name_n
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.new_cl = true; this.new_cl = true;
this.jsonRpcService.changeId = ""; this.jsonRpcService.changeId = "";
this.getClients(); this.getClients();
} }
deleteClient(id: any) { deleteClient(id: any) {
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'deleteClient', method: 'deleteClient',
params: { params: {
"client_id": id "client_id": id
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getClients(), 100); setTimeout(() => this.getClients(), 100);
} }
chooseClient(id: any, name: any) { chooseClient(id: any, name: any) {
this.jsonRpcService.ClientChooseName = name; this.jsonRpcService.ClientChooseName = name;
this.jsonRpcService.ClientChoose = id; this.jsonRpcService.ClientChoose = id;
this.choose = this.jsonRpcService.ClientChoose; this.choose = this.jsonRpcService.ClientChoose;
this.chooseName = this.jsonRpcService.ClientChooseName; this.chooseName = this.jsonRpcService.ClientChooseName;
} }
createCient() { createCient() {
this.new_cl = false; this.new_cl = false;
this.create = true; this.create = true;
} }
createClient2() { createClient2() {
let name = document.getElementsByTagName("input")[0].value let name = document.getElementsByTagName("input")[0].value
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'createClient', method: 'createClient',
params: { params: {
"name": name "name": name
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getClients(), 100); setTimeout(() => this.getClients(), 100);
} }
confirm(id: any) { confirm(id: any) {
this.confirmationService.confirm({ this.confirmationService.confirm({
message: 'Вы действительно хотите удалить элемент?', message: 'Вы действительно хотите удалить элемент?',
accept: () => { accept: () => {
this.deleteClient(id) this.deleteClient(id)
} }
}); });
} }
} }

114
src/app/pages/divisions/divisions.component.html
View File

@ -1,57 +1,57 @@
<h1>Подразделения</h1> <h1>Подразделения</h1>
<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2> <h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull> <ng-template #ClientNull>
<h2 style="color:red">Выберите клиента</h2> <h2 style="color:red">Выберите клиента</h2>
</ng-template> </ng-template>
<div *ngIf="new_div;else new_Division"> <div *ngIf="new_div;else new_Division">
<button (click)="createDivision()">Добавить</button> <button (click)="createDivision()">Добавить</button>
<p-table [value]="divisions"> <p-table [value]="divisions">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr style="position:sticky !important; top: 0"> <tr style="position:sticky !important; top: 0">
<th style="width:35%">ID</th> <th style="width:35%">ID</th>
<th style="width:35%">Наименование подразделения</th> <th style="width:35%">Наименование подразделения</th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
<tr style="position:sticky !important; top: 55px"> <tr style="position:sticky !important; top: 55px">
<th style="width:35%"></th> <th style="width:35%"></th>
<th style="width:35%"><p-columnFilter type="text" field="name" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th style="width:35%"><p-columnFilter type="text" field="name" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-Division> <ng-template pTemplate="body" let-Division>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"--> <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr> <tr>
<td style="width:35%">{{Division.id}}</td> <td style="width:35%">{{Division.id}}</td>
<td style="width:35%">{{Division.name}}</td> <td style="width:35%">{{Division.name}}</td>
<td><button (click)="changeDivision1(Division.id, Division.name)">Изменить</button></td> <td><button (click)="changeDivision1(Division.id, Division.name)">Изменить</button></td>
<td><button (click)="confirm(Division.id)">Удалить</button></td> <td><button (click)="confirm(Division.id)">Удалить</button></td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
</div> </div>
<ng-template #new_Division> <ng-template #new_Division>
<button (click)="getDivisions()">К списку</button> <button (click)="getDivisions()">К списку</button>
<p-table> <p-table>
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Введите наименование подразделения:</th> <th>Введите наименование подразделения:</th>
<th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th> <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<div *ngIf="create; else change"> <div *ngIf="create; else change">
<button (click)="createDivision2()">Создать</button> <button (click)="createDivision2()">Создать</button>
</div> </div>
<ng-template #change> <ng-template #change>
<button (click)="changeDivision()">Сохранить</button> <button (click)="changeDivision()">Сохранить</button>
</ng-template> </ng-template>
</ng-template> </ng-template>
<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog> <p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>

10
src/app/pages/divisions/divisions.component.scss
View File

@ -1,5 +1,5 @@
tr { tr {
display: table; display: table;
width: calc(100% - 5px); width: calc(100% - 5px);
table-layout: fixed; table-layout: fixed;
} }

382
src/app/pages/divisions/divisions.component.ts
View File

@ -1,191 +1,191 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service"; import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
import { MessageService } from "primeng/api"; import { MessageService } from "primeng/api";
import { Divisions } from "src/app/interface/data"; import { Divisions } from "src/app/interface/data";
import { ConfirmationService, FilterService, FilterMatchMode, SelectItem } from 'primeng/api'; import { ConfirmationService, FilterService, FilterMatchMode, SelectItem } from 'primeng/api';
@Component({ @Component({
selector: 'app-divisions', selector: 'app-divisions',
templateUrl: './divisions.component.html', templateUrl: './divisions.component.html',
styleUrls: ['./divisions.component.scss'] styleUrls: ['./divisions.component.scss']
}) })
export class DivisionsComponent implements OnInit { export class DivisionsComponent implements OnInit {
public divisions: Divisions[] = []; public divisions: Divisions[] = [];
public new_div = true; public new_div = true;
public choose = this.jsonRpcService.ClientChoose; public choose = this.jsonRpcService.ClientChoose;
public create = false; public create = false;
public chooseName!: string; public chooseName!: string;
public ind: boolean = false; public ind: boolean = false;
public matchModeOptions!: SelectItem[]; public matchModeOptions!: SelectItem[];
constructor( constructor(
private jsonRpcService: JsonrpcService, private jsonRpcService: JsonrpcService,
private messageService: MessageService, private messageService: MessageService,
private confirmationService: ConfirmationService, private confirmationService: ConfirmationService,
private filterService: FilterService private filterService: FilterService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
if (this.choose) { this.getDivisions() }; if (this.choose) { this.getDivisions() };
const customFilterName = "custom-contains"; const customFilterName = "custom-contains";
this.filterService.register(customFilterName, (value: any, filter: any): boolean => { this.filterService.register(customFilterName, (value: any, filter: any): boolean => {
if (filter === undefined || filter === null || filter.trim() === '') { if (filter === undefined || filter === null || filter.trim() === '') {
return true; return true;
} }
if (value === undefined || value === null) { if (value === undefined || value === null) {
return false; return false;
} }
let det = value.toString() let det = value.toString()
let det2 = det.toLowerCase() let det2 = det.toLowerCase()
return det2.includes(filter.toString()) || det.includes(filter.toString()); return det2.includes(filter.toString()) || det.includes(filter.toString());
}); });
this.matchModeOptions = [ this.matchModeOptions = [
{ label: 'Содержит', value: customFilterName }, { label: 'Содержит', value: customFilterName },
{ label: 'Равно', value: FilterMatchMode.EQUALS }, { label: 'Равно', value: FilterMatchMode.EQUALS },
{ label: 'Начинается с', value: FilterMatchMode.STARTS_WITH }, { label: 'Начинается с', value: FilterMatchMode.STARTS_WITH },
]; ];
} }
async getDivisions() { async getDivisions() {
this.create = false; this.create = false;
this.new_div = true; this.new_div = true;
await this.jsonRpcService.rpc2({ await this.jsonRpcService.rpc2({
method: 'getDivisions', method: 'getDivisions',
params: { params: {
"client_id": this.choose "client_id": this.choose
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
this.divisions = data; this.divisions = data;
document.getElementsByTagName('thead')[0].style.display = 'table'; document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%'; document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed'; document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block'; document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 341px)'; document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 341px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll'; document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.chooseName = this.jsonRpcService.ClientChooseName; this.chooseName = this.jsonRpcService.ClientChooseName;
} }
changeDivision1(id: any, name: any) { changeDivision1(id: any, name: any) {
this.new_div = false; this.new_div = false;
setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100); setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100);
this.jsonRpcService.changeId = id this.jsonRpcService.changeId = id
} }
changeDivision() { changeDivision() {
let name_n = document.getElementsByTagName("input")[0].value let name_n = document.getElementsByTagName("input")[0].value
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'updateDivision', method: 'updateDivision',
params: { params: {
"client_id": this.choose, "client_id": this.choose,
"division_id": this.jsonRpcService.changeId, "division_id": this.jsonRpcService.changeId,
"name": name_n "name": name_n
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.new_div = true; this.new_div = true;
this.jsonRpcService.changeId = ""; this.jsonRpcService.changeId = "";
setTimeout(() => this.getDivisions(), 100); setTimeout(() => this.getDivisions(), 100);
} }
deleteDivision(id: any) { deleteDivision(id: any) {
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'deleteDivision', method: 'deleteDivision',
params: { params: {
"client_id": this.choose, "client_id": this.choose,
"division_id": id "division_id": id
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getDivisions(), 100); setTimeout(() => this.getDivisions(), 100);
} }
chooseClient(id: any, name: any) { chooseClient(id: any, name: any) {
console.log(id); console.log(id);
this.jsonRpcService.ClientChooseName = name; this.jsonRpcService.ClientChooseName = name;
this.jsonRpcService.ClientChoose = id; this.jsonRpcService.ClientChoose = id;
this.choose = this.jsonRpcService.ClientChoose; this.choose = this.jsonRpcService.ClientChoose;
this.chooseName = this.jsonRpcService.ClientChooseName; this.chooseName = this.jsonRpcService.ClientChooseName;
} }
createDivision() { createDivision() {
this.new_div = false; this.new_div = false;
this.create = true; this.create = true;
} }
createDivision2() { createDivision2() {
let name = document.getElementsByTagName("input")[0].value let name = document.getElementsByTagName("input")[0].value
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'createDivision', method: 'createDivision',
params: { params: {
"name": name, "name": name,
"client_id": this.choose "client_id": this.choose
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getDivisions(), 100); setTimeout(() => this.getDivisions(), 100);
} }
confirm(id: any) { confirm(id: any) {
this.confirmationService.confirm({ this.confirmationService.confirm({
message: 'Вы действительно хотите удалить элемент?', message: 'Вы действительно хотите удалить элемент?',
accept: () => { accept: () => {
this.deleteDivision(id) this.deleteDivision(id)
} }
}); });
} }
} }

398
src/app/pages/orders/orders.component.html
View File

@ -1,199 +1,199 @@
<h1>Заказы</h1> <h1>Заказы</h1>
<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2> <h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull> <ng-template #ClientNull>
<h2 style="color:red">Выберите клиента</h2> <h2 style="color:red">Выберите клиента</h2>
</ng-template> </ng-template>
<div *ngIf="view; else order_v"> <div *ngIf="view; else order_v">
<p>Время последнего обновления: {{lastOrderUpdateTime | date:'dd.MM.yyyy HH:mm:ss'}}</p> <p>Время последнего обновления: {{lastOrderUpdateTime | date:'dd.MM.yyyy HH:mm:ss'}}</p>
<button (click)="getOrders()">Обновить</button> <button (click)="getOrders()">Обновить</button>
<p-table [value]="orders"> <p-table [value]="orders">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr style="position:sticky !important; top: 0"> <tr style="position:sticky !important; top: 0">
<th>ID</th> <th>ID</th>
<th>Статус</th> <th>Статус</th>
<!--<p-columnFilter type="text" field="Статус" display="menu"></p-columnFilter>--> <!--<p-columnFilter type="text" field="Статус" display="menu"></p-columnFilter>-->
<th>ID точки заказа</th> <th>ID точки заказа</th>
<th>Дата создания</th> <th>Дата создания</th>
<th>Дата самовывоза</th> <th>Дата самовывоза</th>
<th>Внешний ID заказа</th> <th>Внешний ID заказа</th>
<th>Телефон клиента</th> <th>Телефон клиента</th>
<th>Тип оплаты</th> <th>Тип оплаты</th>
<th>Тип заказа</th> <th>Тип заказа</th>
</tr> </tr>
<tr style="position:sticky !important; top: 55px"> <tr style="position:sticky !important; top: 55px">
<th><p-columnFilter type="text" field="id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th><p-columnFilter type="text" field="id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th><p-columnFilter type="text" field="status_h" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th><p-columnFilter type="text" field="status_h" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th><p-columnFilter type="text" field="address.name" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th><p-columnFilter type="text" field="address.name" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th></th> <th></th>
<th></th> <th></th>
<th><p-columnFilter type="text" field="external_id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th><p-columnFilter type="text" field="external_id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th><p-columnFilter type="text" field="phone" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th><p-columnFilter type="text" field="phone" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th></th> <th></th>
<th><p-columnFilter field="type" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false"> <th><p-columnFilter field="type" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback"> <ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="keysFromObject(orderTypes)" placeholder="Тип заказа" <p-multiSelect [ngModel]="value" [options]="keysFromObject(orderTypes)" placeholder="Тип заказа"
(onChange)="filter($event.value)" [label]="orderTypes[leadToTypeOrderType(value)]" [displaySelectedLabel]="false"> (onChange)="filter($event.value)" [label]="orderTypes[leadToTypeOrderType(value)]" [displaySelectedLabel]="false">
<ng-template let-option pTemplate="item"> <ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<span class="p-ml-1">{{orderTypes[leadToTypeOrderType(option)]}}</span> <span class="p-ml-1">{{orderTypes[leadToTypeOrderType(option)]}}</span>
</div> </div>
</ng-template> </ng-template>
</p-multiSelect> </p-multiSelect>
</ng-template> </ng-template>
</p-columnFilter></th> </p-columnFilter></th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-order> <ng-template pTemplate="body" let-order>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"--> <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr (click)="vievOrder(order.id)" #ordtable style="cursor: pointer"> <tr (click)="vievOrder(order.id)" #ordtable style="cursor: pointer">
<td id="order">{{order.id}}</td> <td id="order">{{order.id}}</td>
<td [ngClass]="{'red': order.item_style == 'red','orange': order.item_style == 'orange','green': order.item_style == 'green','grey': order.item_style == 'grey','yellow': order.item_style == 'yellow','blue': order.item_style == 'blue','lilac': order.item_style == 'lilac', 'pink': order.item_style == 'pink'}">{{order.status_h}}</td> <td [ngClass]="{'red': order.item_style == 'red','orange': order.item_style == 'orange','green': order.item_style == 'green','grey': order.item_style == 'grey','yellow': order.item_style == 'yellow','blue': order.item_style == 'blue','lilac': order.item_style == 'lilac', 'pink': order.item_style == 'pink'}">{{order.status_h}}</td>
<td>{{order.address.name}}</td> <td>{{order.address.name}}</td>
<td>{{order.date_created | date:'HH:mm dd.MM.yyyy'}}</td> <td>{{order.date_created | date:'HH:mm dd.MM.yyyy'}}</td>
<td>{{order.due_datetime | date:'HH:mm dd.MM.yyyy'}}</td> <td>{{order.due_datetime | date:'HH:mm dd.MM.yyyy'}}</td>
<td>{{order.external_id}}</td> <td>{{order.external_id}}</td>
<td>{{order.phone}}</td> <td>{{order.phone}}</td>
<td *ngIf="order.payment[0]; else nd">{{order.payment[0].type}}</td> <td *ngIf="order.payment[0]; else nd">{{order.payment[0].type}}</td>
<td>{{orderTypes[leadToTypeOrderType(order.type)]}}</td> <td>{{orderTypes[leadToTypeOrderType(order.type)]}}</td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #nd> <ng-template #nd>
<td>Нет данных</td> <td>Нет данных</td>
</ng-template> </ng-template>
</p-table> </p-table>
</div> </div>
<ng-template #order_v> <ng-template #order_v>
<div> <div>
<button (click)="listOrders()">К списку</button> <button (click)="listOrders()">К списку</button>
<h1>Заказ: {{order[0]?.id}}</h1> <h1>Заказ: {{order[0]?.id}}</h1>
<p-table [value]="order"> <p-table [value]="order">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Внешний ID заказа</th> <th>Внешний ID заказа</th>
<th>Дата создания</th> <th>Дата создания</th>
<th>ID точки заказа</th> <th>ID точки заказа</th>
<th>Статус</th> <th>Статус</th>
<th>Тип заказа</th> <th>Тип заказа</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-ord> <ng-template pTemplate="body" let-ord>
<tr> <tr>
<td><input type="text" textarea disabled value="{{ord.external_id}}"></td> <td><input type="text" textarea disabled value="{{ord.external_id}}"></td>
<td><input textarea disabled type="datetime-local" value="{{ord.date_created}}"></td> <td><input textarea disabled type="datetime-local" value="{{ord.date_created}}"></td>
<td><input textarea disabled type="text" value="{{ord.address.id}}"></td> <td><input textarea disabled type="text" value="{{ord.address.id}}"></td>
<td> <td>
<select [(ngModel)]="selectedStatus"> <select [(ngModel)]="selectedStatus">
<option>{{ord.status_h}}</option> <option>{{ord.status_h}}</option>
<option>К готовке</option> <option>К готовке</option>
<option>Готовится</option> <option>Готовится</option>
<option>Готово</option> <option>Готово</option>
<option>Новый</option> <option>Новый</option>
<option>Выдан</option> <option>Выдан</option>
<option>Напечатан чек</option> <option>Напечатан чек</option>
<option>Отменен</option> <option>Отменен</option>
</select> </select>
<button (click)="saveStatus(ord.id)" [disabled]="!selectedStatus.length">Сохранить</button> <button (click)="saveStatus(ord.id)" [disabled]="!selectedStatus.length">Сохранить</button>
</td> </td>
<td>{{orderTypes[leadToTypeOrderType(ord.type)]}}</td> <td>{{orderTypes[leadToTypeOrderType(ord.type)]}}</td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<h2>Состав заказа:</h2> <h2>Состав заказа:</h2>
<p-table [value]="order[0].products"> <p-table [value]="order[0].products">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Товар</th> <th>Товар</th>
<th>Кол-во (факт.)</th> <th>Кол-во (факт.)</th>
<th>Цена</th> <th>Цена</th>
<th>Кол-во (реал.)</th> <th>Кол-во (реал.)</th>
<th>Стоимость</th> <th>Стоимость</th>
<th>Модификаторы</th> <th>Модификаторы</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-ord> <ng-template pTemplate="body" let-ord>
<tr> <tr>
<td>{{ord.title}}</td> <td>{{ord.title}}</td>
<td>{{ord.requested_quantity}}</td> <td>{{ord.requested_quantity}}</td>
<td>-</td> <td>-</td>
<td>{{ord.stock_quantity}}</td> <td>{{ord.stock_quantity}}</td>
<td>-</td> <td>-</td>
<td> <td>
<tbody *ngFor="let mod of ord.modifiers"> <tbody *ngFor="let mod of ord.modifiers">
<tr> <tr>
{{mod.group}} {{mod.group}}
</tr> </tr>
<tr> <tr>
{{mod.title}} {{mod.title}}
</tr> </tr>
</tbody> </tbody>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<p-table> <p-table>
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th width="15%">Комментарий:</th> <th width="15%">Комментарий:</th>
<th width="85%" style="font-weight: normal">{{order[0].comment}}</th> <th width="85%" style="font-weight: normal">{{order[0].comment}}</th>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<h2>Оплата:</h2> <h2>Оплата:</h2>
<p-table [value]="order[0].payment"> <p-table [value]="order[0].payment">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Сумма оплаты</th> <th>Сумма оплаты</th>
<th>Тип оплаты</th> <th>Тип оплаты</th>
<th *ngIf="order[0].payment[0]?.type?.toUpperCase() !== 'CASH'">Статус оплаты</th> <th *ngIf="order[0].payment[0]?.type?.toUpperCase() !== 'CASH'">Статус оплаты</th>
<!-- <th *ngIf="['PAID', 'NOTIFIED', 'INTERNAL_ERROR', 'PROCESSING'].includes(order[0].payment[0]?.payload?.status || '') && order[0].payment[0]?.type !== 'CASH'">Отмена заказа</th> --> <!-- <th *ngIf="['PAID', 'NOTIFIED', 'INTERNAL_ERROR', 'PROCESSING'].includes(order[0].payment[0]?.payload?.status || '') && order[0].payment[0]?.type !== 'CASH'">Отмена заказа</th> -->
<th>Отмена заказа</th> <th>Отмена заказа</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-pay> <ng-template pTemplate="body" let-pay>
<tr> <tr>
<td>{{pay.summ}}</td> <td>{{pay.summ}}</td>
<td>{{pay.type | paymentType}}</td> <td>{{pay.type | paymentType}}</td>
<td *ngIf="pay?.type?.toUpperCase() !== 'CASH'">{{pay?.payload?.status | paymentStatus}}</td> <td *ngIf="pay?.type?.toUpperCase() !== 'CASH'">{{pay?.payload?.status | paymentStatus}}</td>
<!-- <td *ngIf="['PAID', 'NOTIFIED', 'INTERNAL_ERROR', 'PROCESSING'].includes(order[0].payment[0]?.payload?.status || '') && order[0].payment[0]?.type !== 'CASH'"> --> <!-- <td *ngIf="['PAID', 'NOTIFIED', 'INTERNAL_ERROR', 'PROCESSING'].includes(order[0].payment[0]?.payload?.status || '') && order[0].payment[0]?.type !== 'CASH'"> -->
<td> <td>
<button (click)="cancelOrder(pay.payload?.id)" style="width: auto;"> <button (click)="cancelOrder(pay.payload?.id)" style="width: auto;">
{{pay?.type?.toUpperCase() == 'SBP'? 'Отменить и вернуть ДС' : 'Отменить'}} {{pay?.type?.toUpperCase() == 'SBP'? 'Отменить и вернуть ДС' : 'Отменить'}}
</button> </button>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<div *ngIf="paymentRefunds.length"> <div *ngIf="paymentRefunds.length">
<h2>Список возвратов:</h2> <h2>Список возвратов:</h2>
<p-table [value]="paymentRefunds"> <p-table [value]="paymentRefunds">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Сумма</th> <th>Сумма</th>
<th>Статус</th> <th>Статус</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-paymentRefund> <ng-template pTemplate="body" let-paymentRefund>
<tr> <tr>
<td>{{paymentRefund.amount}}</td> <td>{{paymentRefund.amount}}</td>
<td>{{paymentRefund.status}}</td> <td>{{paymentRefund.status}}</td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<p-toast position="bottom-right" key="br" closable="false"></p-toast> <p-toast position="bottom-right" key="br" closable="false"></p-toast>
<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined" [style]="{width: '30vw'}"></p-confirmDialog> <p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined" [style]="{width: '30vw'}"></p-confirmDialog>

112
src/app/pages/orders/orders.component.scss
View File

@ -1,56 +1,56 @@
button:disabled { button:disabled {
background-color: grey !important; background-color: grey !important;
opacity: 50%; opacity: 50%;
cursor: default; cursor: default;
} }
.red { .red {
color: red !important; color: red !important;
background-color: pink; background-color: pink;
} }
.orange { .orange {
color: darkorange !important; color: darkorange !important;
background-color: wheat; background-color: wheat;
} }
.green { .green {
color: green !important; color: green !important;
background-color: lightgreen; background-color: lightgreen;
} }
.grey { .grey {
color: grey !important; color: grey !important;
background-color: lightgray; background-color: lightgray;
} }
.yellow { .yellow {
color: darkgoldenrod !important; color: darkgoldenrod !important;
background-color: lightgoldenrodyellow; background-color: lightgoldenrodyellow;
} }
.blue { .blue {
color: blue !important; color: blue !important;
background-color: lightblue; background-color: lightblue;
} }
.lilac { .lilac {
color: #8b00ff !important; color: #8b00ff !important;
background-color: #ebc4eb; background-color: #ebc4eb;
} }
.pink { .pink {
color: #ff00ff !important; color: #ff00ff !important;
background-color: #ffabe3; background-color: #ffabe3;
} }
p-table { p-table {
height: auto; height: auto;
overflow: scroll overflow: scroll
} }
tr { tr {
display: table; display: table;
width: calc(100% - 5px); width: calc(100% - 5px);
table-layout: fixed; table-layout: fixed;
} }

1190
src/app/pages/orders/orders.component.ts
View File

File diff suppressed because it is too large Load Diff

276
src/app/pages/terminals/terminals.component.html
View File

@ -1,138 +1,138 @@
<div> <div>
<h1>Терминалы</h1> <h1>Терминалы</h1>
<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2> <h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull> <ng-template #ClientNull>
<h2 style="color:red">Выберите клиента</h2> <h2 style="color:red">Выберите клиента</h2>
</ng-template> </ng-template>
</div> </div>
<div *ngIf="new_ter;else new_Terminal"> <div *ngIf="new_ter;else new_Terminal">
<button (click)="registerTerminal()">Добавить</button> <button (click)="registerTerminal()">Добавить</button>
<p-table [value]="terminals"> <p-table [value]="terminals">
<ng-template pTemplate="header" class="head"> <ng-template pTemplate="header" class="head">
<tr> <tr>
<th style="width: 16%">ID</th> <th style="width: 16%">ID</th>
<th style="width: 16%">ID кассы ККМ</th> <th style="width: 16%">ID кассы ККМ</th>
<th style="width: 16%">ID точки заказа</th> <th style="width: 16%">ID точки заказа</th>
<th style="width: 16%">ID зон доставок</th> <th style="width: 16%">ID зон доставок</th>
<th style="width: 16%">Статус подключения</th> <th style="width: 16%">Статус подключения</th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
<tr style="position:sticky !important; top: 55px"> <tr style="position:sticky !important; top: 55px">
<th style="width: 16%"></th> <th style="width: 16%"></th>
<th style="width: 16%"><p-columnFilter type="text" field="public_id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th style="width: 16%"><p-columnFilter type="text" field="public_id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th style="width: 16%"><p-columnFilter type="text" field="division_id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th> <th style="width: 16%"><p-columnFilter type="text" field="division_id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
<th style="width: 16%"></th> <th style="width: 16%"></th>
<th style="width: 16%"></th> <th style="width: 16%"></th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-terminals> <ng-template pTemplate="body" let-terminals>
<tr> <tr>
<td style="width: 16%" class="customer-badge status-unqualified">{{terminals.id}}</td> <td style="width: 16%" class="customer-badge status-unqualified">{{terminals.id}}</td>
<td style="width: 16%">{{terminals.public_id}}</td> <td style="width: 16%">{{terminals.public_id}}</td>
<td style="width: 16%">{{terminals.division_id}}</td> <td style="width: 16%">{{terminals.division_id}}</td>
<td style="width: 16%">{{terminals.area_types}}</td> <td style="width: 16%">{{terminals.area_types}}</td>
<td <td
style="width: 16%" style="width: 16%"
[ngClass]="{disconnected: terminals.connection_status == 'disconnected', connected: terminals.connection_status == 'connected'}" [ngClass]="{disconnected: terminals.connection_status == 'disconnected', connected: terminals.connection_status == 'connected'}"
>{{terminals.connection_status}}</td> >{{terminals.connection_status}}</td>
<td><button (click)="updateTerminal1(terminals.id, terminals.public_id, terminals.division_id, terminals.area_types)">Изменить</button></td> <td><button (click)="updateTerminal1(terminals.id, terminals.public_id, terminals.division_id, terminals.area_types)">Изменить</button></td>
<td><button (click)="confirm(terminals.id)">Удалить</button></td> <td><button (click)="confirm(terminals.id)">Удалить</button></td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
</div> </div>
<ng-template #new_Terminal> <ng-template #new_Terminal>
<button (click)="getTerminals()">К списку</button> <button (click)="getTerminals()">К списку</button>
<p-table> <p-table>
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Введите внешний ID терминала:</th> <th>Введите внешний ID терминала:</th>
<th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th> <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
</tr> </tr>
<tr> <tr>
<th>Выберите точку заказа:</th> <th>Выберите точку заказа:</th>
<th> <th>
<p-dropdown autoWidth="false" [options]="divisions" optionLabel="name" [(ngModel)]="selectedDivision"></p-dropdown> <p-dropdown autoWidth="false" [options]="divisions" optionLabel="name" [(ngModel)]="selectedDivision"></p-dropdown>
</th> </th>
</tr> </tr>
<tr> <tr>
<th>Введите ID зон доставок:</th> <th>Введите ID зон доставок:</th>
<th> <th>
<ul class="selectedAreasList" style="width: 400px; font-size:16px"> <ul class="selectedAreasList" style="width: 400px; font-size:16px">
<p-dropdown autoWidth="false" [options]="areas" optionLabel="name" (onChange)="addAreaToSelected($event)"></p-dropdown> <p-dropdown autoWidth="false" [options]="areas" optionLabel="name" (onChange)="addAreaToSelected($event)"></p-dropdown>
<li *ngFor="let area of selectedAreas"> <li *ngFor="let area of selectedAreas">
<span>{{area.name}}</span> <span>{{area.name}}</span>
<button style="font-weight: bold" (click)="removeAreaFromSelected(area.id)">✖</button> <button style="font-weight: bold" (click)="removeAreaFromSelected(area.id)">✖</button>
<!-- <p-button (click)="removeAreaFromSelected(area.id)" icon="pi pi-times-circle"></p-button> --> <!-- <p-button (click)="removeAreaFromSelected(area.id)" icon="pi pi-times-circle"></p-button> -->
</li> </li>
</ul> </ul>
<!-- <p-chips [(ngModel)]="selectedAreas" [allowDuplicate]="false" inputId="chipInputField"> <!-- <p-chips [(ngModel)]="selectedAreas" [allowDuplicate]="false" inputId="chipInputField">
<ng-template let-item pTemplate="item"> <ng-template let-item pTemplate="item">
{{item.name}} <i class="fa fa-close"></i> {{item.name}} <i class="fa fa-close"></i>
</ng-template> </ng-template>
</p-chips> --> </p-chips> -->
</th> </th>
<!-- <th> <!-- <th>
<tbody *ngFor="let area of areas"> <tbody *ngFor="let area of areas">
<tr> <tr>
<input type="checkbox" value="{{area.selected}}" id="ar" [(ngModel)]="area.selected"> <input type="checkbox" value="{{area.selected}}" id="ar" [(ngModel)]="area.selected">
<span>Цех: {{area.name}}</span> <span>Цех: {{area.name}}</span>
</tr> </tr>
</tbody> </tbody>
</th> --> </th> -->
</tr> </tr>
<tr *ngIf="terminal"> <tr *ngIf="terminal">
<th> <th>
Статус: Статус:
</th> </th>
<th> <th>
{{terminal.socket_data.connected ? 'Соединен' : 'Отключен'}} {{terminal.socket_data.connected ? 'Соединен' : 'Отключен'}}
</th> </th>
</tr> </tr>
<tr> <tr>
<th> <th>
Обновлено: Обновлено:
</th> </th>
<th *ngIf="terminal?.socket_data?.last_ping === null"> <th *ngIf="terminal?.socket_data?.last_ping === null">
Нет Данных Нет Данных
</th> </th>
<th *ngIf="!(terminal?.socket_data?.last_ping === null)"> <th *ngIf="!(terminal?.socket_data?.last_ping === null)">
{{terminal?.socket_data?.last_ping | date:'dd.MM.yy, HH:mm:ss'}} {{terminal?.socket_data?.last_ping | date:'dd.MM.yy, HH:mm:ss'}}
</th> </th>
</tr> </tr>
<tr> <tr>
<th> <th>
Закрыто: Закрыто:
</th> </th>
<th *ngIf="terminal?.socket_data?.closed === null"> <th *ngIf="terminal?.socket_data?.closed === null">
Нет Данных Нет Данных
</th> </th>
<th *ngIf="!(terminal?.socket_data?.closed === null)"> <th *ngIf="!(terminal?.socket_data?.closed === null)">
{{terminal?.socket_data?.closed ? 'Да' : 'Нет'}} {{terminal?.socket_data?.closed ? 'Да' : 'Нет'}}
</th> </th>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<div *ngIf="create; else change"> <div *ngIf="create; else change">
<button (click)="registerTerminal2()">Создать</button> <button (click)="registerTerminal2()">Создать</button>
</div> </div>
<ng-template #change> <ng-template #change>
<button (click)="updateTerminal()">Сохранить</button> <button (click)="updateTerminal()">Сохранить</button>
</ng-template> </ng-template>
</ng-template> </ng-template>
<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog> <p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>

110
src/app/pages/terminals/terminals.component.scss
View File

@ -1,56 +1,56 @@
span { span {
padding: 0 5px !important; padding: 0 5px !important;
} }
tr { tr {
display: table; display: table;
width: calc(100% - 5px); width: calc(100% - 5px);
table-layout: fixed; table-layout: fixed;
} }
#chipInputField { #chipInputField {
display: none; display: none;
} }
.disconnected { .disconnected {
background-color: rgb(255, 120, 120);; background-color: rgb(255, 120, 120);;
} }
.connectede { .connectede {
background-color: rgb(120, 255, 143);; background-color: rgb(120, 255, 143);;
} }
ul.selectedAreasList { ul.selectedAreasList {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow-wrap: normal; overflow-wrap: normal;
li { li {
margin-left: 4px; margin-left: 4px;
margin-top: 2px; margin-top: 2px;
padding: 0 6px; padding: 0 6px;
width: fit-content; width: fit-content;
background-color: gray; background-color: gray;
text-align: center; text-align: center;
color: white; color: white;
outline: none; outline: none;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
button { button {
width: fit-content; width: fit-content;
padding: 0; padding: 0;
} }
} }
.ui-dropdown { .ui-dropdown {
width: 200px; width: 200px;
height: 30px !important; height: 30px !important;
font-size:20px; font-size:20px;
.p-dropdown { .p-dropdown {
height: 30px !important; height: 30px !important;
} }
} }
} }

614
src/app/pages/terminals/terminals.component.ts
View File

@ -1,307 +1,307 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service"; import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
import { MessageService } from "primeng/api"; import { MessageService } from "primeng/api";
import { Terminals, Areas, Divisions, TerminalDetails } from "src/app/interface/data"; import { Terminals, Areas, Divisions, TerminalDetails } from "src/app/interface/data";
import { ScrollPanelModule } from 'primeng/scrollpanel'; import { ScrollPanelModule } from 'primeng/scrollpanel';
import { ConfirmationService, FilterService, FilterMatchMode, SelectItem } from 'primeng/api'; import { ConfirmationService, FilterService, FilterMatchMode, SelectItem } from 'primeng/api';
import { StringMapWithRename } from "@angular/compiler/src/compiler_facade_interface"; import { StringMapWithRename } from "@angular/compiler/src/compiler_facade_interface";
@Component({ @Component({
selector: 'app-terminals', selector: 'app-terminals',
templateUrl: './terminals.component.html', templateUrl: './terminals.component.html',
styleUrls: ['./terminals.component.scss'] styleUrls: ['./terminals.component.scss']
}) })
export class TerminalsComponent implements OnInit { export class TerminalsComponent implements OnInit {
public terminals: Terminals[] = []; public terminals: Terminals[] = [];
public terminal?: TerminalDetails; public terminal?: TerminalDetails;
public new_ter = true; public new_ter = true;
public choose = this.jsonRpcService.ClientChoose; public choose = this.jsonRpcService.ClientChoose;
public create = false; public create = false;
public chooseName!: string; public chooseName!: string;
public areas: Areas[] = []; public areas: Areas[] = [];
public divisions: Divisions[] = []; public divisions: Divisions[] = [];
public selectedAreas: Areas[] = []; public selectedAreas: Areas[] = [];
public selectedDivision?: Divisions; public selectedDivision?: Divisions;
public matchModeOptions!: SelectItem[]; public matchModeOptions!: SelectItem[];
constructor( constructor(
private jsonRpcService: JsonrpcService, private jsonRpcService: JsonrpcService,
private messageService: MessageService, private messageService: MessageService,
private confirmationService: ConfirmationService, private confirmationService: ConfirmationService,
private filterService: FilterService private filterService: FilterService
//readonly swPush: SwPush, //readonly swPush: SwPush,
//private newsletterService: NewsletterService //private newsletterService: NewsletterService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
if (this.choose) { this.getTerminals() }; if (this.choose) { this.getTerminals() };
this.getAreas(); this.getAreas();
this.getDivisions(); this.getDivisions();
const customFilterName = "custom-contains"; const customFilterName = "custom-contains";
this.filterService.register(customFilterName, (value: any, filter: any): boolean => { this.filterService.register(customFilterName, (value: any, filter: any): boolean => {
if (filter === undefined || filter === null || filter.trim() === '') { if (filter === undefined || filter === null || filter.trim() === '') {
return true; return true;
} }
if (value === undefined || value === null) { if (value === undefined || value === null) {
return false; return false;
} }
let det = value.toString() let det = value.toString()
let det2 = det.toLowerCase() let det2 = det.toLowerCase()
return det2.includes(filter.toString()) || det.includes(filter.toString()); return det2.includes(filter.toString()) || det.includes(filter.toString());
}); });
this.matchModeOptions = [ this.matchModeOptions = [
{ label: 'Содержит', value: customFilterName }, { label: 'Содержит', value: customFilterName },
{ label: 'Равно', value: FilterMatchMode.EQUALS }, { label: 'Равно', value: FilterMatchMode.EQUALS },
{ label: 'Начинается с', value: FilterMatchMode.STARTS_WITH }, { label: 'Начинается с', value: FilterMatchMode.STARTS_WITH },
]; ];
} }
async getTerminals() { async getTerminals() {
this.create = false; this.create = false;
this.new_ter = true; this.new_ter = true;
await this.jsonRpcService.rpc2({ await this.jsonRpcService.rpc2({
method: 'getTerminals', method: 'getTerminals',
params: { params: {
"client_id": this.choose "client_id": this.choose
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
this.terminals = data; this.terminals = data;
document.getElementsByTagName('thead')[0].style.display = 'table'; document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%'; document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed'; document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block'; document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 341px)'; document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 341px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll'; document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.chooseName = this.jsonRpcService.ClientChooseName; this.chooseName = this.jsonRpcService.ClientChooseName;
} }
async getTerminal(id: string) { async getTerminal(id: string) {
await this.jsonRpcService.rpc({ await this.jsonRpcService.rpc({
method: 'getTerminal', method: 'getTerminal',
params: [this.choose, id] params: [this.choose, id]
}, RpcService.authService, true) }, RpcService.authService, true)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
this.terminal = data; this.terminal = data;
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
} }
getAreas() { getAreas() {
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'getAreas', method: 'getAreas',
params: { params: {
"client_id": this.choose "client_id": this.choose
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
this.areas = data; this.areas = data;
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
} }
getDivisions() { getDivisions() {
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'getDivisions', method: 'getDivisions',
params: { params: {
"client_id": this.choose "client_id": this.choose
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
this.divisions = data; this.divisions = data;
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
} }
async updateTerminal1(id: any, public_id: any, division_id: any, area_types: any[]) { async updateTerminal1(id: any, public_id: any, division_id: any, area_types: any[]) {
this.reset(); this.reset();
this.new_ter = false; this.new_ter = false;
this.getTerminal(id); this.getTerminal(id);
setTimeout(() => document.getElementsByTagName("input")[0].value = public_id, 100); setTimeout(() => document.getElementsByTagName("input")[0].value = public_id, 100);
setTimeout(() => document.getElementsByTagName("input")[1].value = division_id, 100); setTimeout(() => document.getElementsByTagName("input")[1].value = division_id, 100);
this.jsonRpcService.changeId = id; this.jsonRpcService.changeId = id;
area_types.forEach(area_type => { area_types.forEach(area_type => {
const area = this.areas.find(area => area.id == area_type); const area = this.areas.find(area => area.id == area_type);
if (area) { if (area) {
this.selectedAreas.push(area); this.selectedAreas.push(area);
} }
}); });
this.selectedDivision = this.divisions.find(divivsion => divivsion.id == division_id); this.selectedDivision = this.divisions.find(divivsion => divivsion.id == division_id);
} }
addAreaToSelected(event: any) { addAreaToSelected(event: any) {
const index = this.selectedAreas.findIndex(area => area.id == event.value.id); const index = this.selectedAreas.findIndex(area => area.id == event.value.id);
if (index == -1) { if (index == -1) {
this.selectedAreas.push(event.value); this.selectedAreas.push(event.value);
} }
} }
removeAreaFromSelected(areaId: string) { removeAreaFromSelected(areaId: string) {
const index = this.selectedAreas.findIndex(area => area.id == areaId); const index = this.selectedAreas.findIndex(area => area.id == areaId);
if (index > -1) { if (index > -1) {
this.selectedAreas.splice(index, 1); this.selectedAreas.splice(index, 1);
} }
} }
reset() { reset() {
this.selectedAreas = []; this.selectedAreas = [];
this.selectedDivision = undefined; this.selectedDivision = undefined;
} }
updateTerminal() { updateTerminal() {
// this.chooseArea = []; // this.chooseArea = [];
let address = document.getElementsByTagName("input")[1].value let address = document.getElementsByTagName("input")[1].value
// let areas = document.getElementsByTagName("input")[1].value // let areas = document.getElementsByTagName("input")[1].value
let public_id = document.getElementsByTagName("input")[0].value let public_id = document.getElementsByTagName("input")[0].value
for (let i = 0; i < this.areas.length; i++) { for (let i = 0; i < this.areas.length; i++) {
if (this.areas[i].selected == true) { if (this.areas[i].selected == true) {
// this.chooseArea.push(this.areas[i].name) // this.chooseArea.push(this.areas[i].name)
} }
} }
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'updateTerminal', method: 'updateTerminal',
params: { params: {
"client_id": this.choose, "client_id": this.choose,
"terminal_id": this.jsonRpcService.changeId, "terminal_id": this.jsonRpcService.changeId,
"address": this.selectedDivision?.id, "address": this.selectedDivision?.id,
"areas": this.selectedAreas.map(area => area.id), "areas": this.selectedAreas.map(area => area.id),
"public_id": public_id "public_id": public_id
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
this.new_ter = true; this.new_ter = true;
this.jsonRpcService.changeId = ""; this.jsonRpcService.changeId = "";
setTimeout(() => this.getTerminals(), 100); setTimeout(() => this.getTerminals(), 100);
} }
deleteTerminal(id: any) { deleteTerminal(id: any) {
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'deleteTerminal', method: 'deleteTerminal',
params: { params: {
"client_id": this.choose, "client_id": this.choose,
"terminal_id": id "terminal_id": id
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getTerminals(), 100); setTimeout(() => this.getTerminals(), 100);
} }
registerTerminal() { registerTerminal() {
this.reset(); this.reset();
this.new_ter = false; this.new_ter = false;
this.create = true; this.create = true;
} }
registerTerminal2() { registerTerminal2() {
let public_id = document.getElementsByTagName("input")[0].value; let public_id = document.getElementsByTagName("input")[0].value;
this.jsonRpcService.rpc2({ this.jsonRpcService.rpc2({
method: 'createTerminal', method: 'createTerminal',
params: { params: {
"client_id": this.jsonRpcService.ClientChoose, "client_id": this.jsonRpcService.ClientChoose,
"public_id": public_id, "public_id": public_id,
"address": this.selectedDivision?.id, "address": this.selectedDivision?.id,
"areas": this.selectedAreas.map(area => area.id), "areas": this.selectedAreas.map(area => area.id),
} }
}, RpcService.authService, false) }, RpcService.authService, false)
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
let data = result.result; let data = result.result;
/*this.clients = data;*/ /*this.clients = data;*/
}, },
error: (err) => { error: (err) => {
console.log('ERROR: ', err) console.log('ERROR: ', err)
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Произошла ошибка!', summary: 'Произошла ошибка!',
}) })
} }
}); });
setTimeout(() => this.getTerminals(), 100); setTimeout(() => this.getTerminals(), 100);
} }
confirm(id: any) { confirm(id: any) {
this.confirmationService.confirm({ this.confirmationService.confirm({
message: 'Вы действительно хотите удалить элемент?', message: 'Вы действительно хотите удалить элемент?',
accept: () => { accept: () => {
this.deleteTerminal(id) this.deleteTerminal(id)
} }
}); });
} }
} }

80
src/app/services/cookies.service.ts
View File

@ -1,40 +1,40 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class CookiesService { export class CookiesService {
constructor() {} constructor() {}
getItem(key: string): string|undefined { getItem(key: string): string|undefined {
const matches = document.cookie.match(new RegExp( const matches = document.cookie.match(new RegExp(
'(?:^|; )' + key.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)' '(?:^|; )' + key.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)'
)); ));
return matches ? decodeURIComponent(matches[1]) : undefined; return matches ? decodeURIComponent(matches[1]) : undefined;
} }
setCookie(key: string, value: string, options: any = {}): void { setCookie(key: string, value: string, options: any = {}): void {
options = { path: '/', ...options }; options = { path: '/', ...options };
if (options.expires instanceof Date) { if (options.expires instanceof Date) {
options.expires = options.expires.toUTCString(); options.expires = options.expires.toUTCString();
} }
let updatedCookie = encodeURIComponent(key) + '=' + encodeURIComponent(value); let updatedCookie = encodeURIComponent(key) + '=' + encodeURIComponent(value);
for (const optionKey of Object.keys(options)) { for (const optionKey of Object.keys(options)) {
updatedCookie += '; ' + optionKey; updatedCookie += '; ' + optionKey;
const optionValue = options[optionKey]; const optionValue = options[optionKey];
if (optionValue !== true) { if (optionValue !== true) {
updatedCookie += '=' + optionValue; updatedCookie += '=' + optionValue;
} }
} }
document.cookie = updatedCookie; document.cookie = updatedCookie;
} }
deleteCookie(key: string): void { deleteCookie(key: string): void {
this.setCookie(key, '', { 'max-age': -1 }); this.setCookie(key, '', { 'max-age': -1 });
} }
} }

192
src/app/services/jsonrpc.service.ts
View File

@ -1,96 +1,96 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { CookiesService } from './cookies.service'; import { CookiesService } from './cookies.service';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { Areas } from "src/app/interface/data"; import { Areas } from "src/app/interface/data";
export enum RpcService{ export enum RpcService{
authService, authService,
bonusService bonusService
} }
export interface JsonRpcBody { export interface JsonRpcBody {
id: string; id: string;
jsonrpc: string; jsonrpc: string;
method: string; method: string;
params: any; params: any;
} }
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class JsonrpcService { export class JsonrpcService {
protected readonly api = environment.appSelfDeliveryEndPoint; protected readonly api = environment.appSelfDeliveryEndPoint;
private jsonrpc = '2.0'; private jsonrpc = '2.0';
private body!: JsonRpcBody; private body!: JsonRpcBody;
public ClientChoose = ""; public ClientChoose = "";
public ClientChooseName = ""; public ClientChooseName = "";
public changeId = ""; public changeId = "";
public areas: Areas[] = []; public areas: Areas[] = [];
constructor( constructor(
private http: HttpClient, private http: HttpClient,
private cookiesService: CookiesService private cookiesService: CookiesService
) { } ) { }
rpc(data: {method: string, params: any}, service: RpcService, auth?: boolean): Observable<any> { rpc(data: {method: string, params: any}, service: RpcService, auth?: boolean): Observable<any> {
let headers = new HttpHeaders(); let headers = new HttpHeaders();
const token = decodeURI(this.cookiesService.getItem('token') ?? ''); const token = decodeURI(this.cookiesService.getItem('token') ?? '');
console.log(token); console.log(token);
headers = headers.set('Content-Type', 'application/json'); headers = headers.set('Content-Type', 'application/json');
auth ? headers = headers.append('Authorization', token) : null; auth ? headers = headers.append('Authorization', token) : null;
const options = { const options = {
headers: headers, headers: headers,
}; };
this.body = { this.body = {
id: uuidv4(), id: uuidv4(),
jsonrpc: this.jsonrpc, jsonrpc: this.jsonrpc,
method: data.method, method: data.method,
params: [...data.params], params: [...data.params],
}; };
try { try {
return this.http return this.http
.post(environment.appSelfDeliveryEndPoint, this.body, options) .post(environment.appSelfDeliveryEndPoint, this.body, options)
.pipe(map((res: any) => res)); .pipe(map((res: any) => res));
} catch (error) { } catch (error) {
return new Observable() return new Observable()
} }
} }
rpc2(data: { method: string, params: any }, service: RpcService, auth = false, url: string = ''): Observable<any> { rpc2(data: { method: string, params: any }, service: RpcService, auth = false, url: string = ''): Observable<any> {
let headers = new HttpHeaders(); let headers = new HttpHeaders();
const token = decodeURI(this.cookiesService.getItem('token') ?? ''); const token = decodeURI(this.cookiesService.getItem('token') ?? '');
const options = { const options = {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': token 'Authorization': token
}, },
}; };
this.body = { this.body = {
id: uuidv4(), id: uuidv4(),
jsonrpc: this.jsonrpc, jsonrpc: this.jsonrpc,
method: data.method, method: data.method,
params: data.params, params: data.params,
}; };
try { try {
return this.http return this.http
.post(url.length ? (url + "/api/payment") : (location.origin + "/api"), this.body, options) .post(url.length ? (url + "/api/payment") : (location.origin + "/api"), this.body, options)
.pipe(map((res: any) => res)); .pipe(map((res: any) => res));
} catch (error) { } catch (error) {
return new Observable() return new Observable()
} }
} }
handleHttpError(error: HttpErrorResponse): void { handleHttpError(error: HttpErrorResponse): void {
console.log(error.message); console.log(error.message);
} }
} }

12
src/environments/environment.prod.ts
View File

@ -1,6 +1,6 @@
export const environment = { export const environment = {
production: true, production: true,
appSelfDeliveryEndPoint: 'http://selfdelivery-pitsburg.mydatahosting.ru/admin_api', appSelfDeliveryEndPoint: 'http://selfdelivery-pitsburg.mydatahosting.ru/admin_api',
systemId: 'd0b89b219e1feb3d7', systemId: 'd0b89b219e1feb3d7',
selfServiceSystemId: 'pFBpATH59mFJZbuuHw', selfServiceSystemId: 'pFBpATH59mFJZbuuHw',
}; };

12
src/environments/environment.test.ts
View File

@ -1,7 +1,7 @@
export const environment = { export const environment = {
production: true, production: true,
appSelfDeliveryEndPoint: 'http://selfdelivery-pitsburg-test.mydatahosting.ru/api', appSelfDeliveryEndPoint: 'http://selfdelivery-pitsburg-test.mydatahosting.ru/api',
systemId: 'dfe16ca16a3598b812', systemId: 'dfe16ca16a3598b812',
selfServiceSystemId: 'pFBpATH59mFJZbuuHw', selfServiceSystemId: 'pFBpATH59mFJZbuuHw',
}; };

38
src/environments/environment.ts
View File

@ -1,19 +1,19 @@
// This file can be replaced during build by using the `fileReplacements` array. // This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`. // `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`. // The list of file replacements can be found in `angular.json`.
export const environment = { export const environment = {
production: false, production: false,
appSelfDeliveryEndPoint: 'http://localhost:4200/api', appSelfDeliveryEndPoint: 'http://localhost:4200/api',
systemId: 'd0b89b219e1feb3d7', systemId: 'd0b89b219e1feb3d7',
selfServiceSystemId: 'pFBpATH59mFJZbuuHw', selfServiceSystemId: 'pFBpATH59mFJZbuuHw',
}; };
/* /*
* For easier debugging in development mode, you can import the following file * For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
* *
* This import should be commented out in production mode because it will have a negative impact * This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown. * on performance if an error is thrown.
*/ */
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

32
src/index.html
View File

@ -1,16 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>SelfdeliveryAdminPanel</title> <title>SelfdeliveryAdminPanel</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body class="mat-typography"> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

24
src/main.ts
View File

@ -1,12 +1,12 @@
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
} }
platformBrowserDynamic().bootstrapModule(AppModule) platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err)); .catch(err => console.error(err));

106
src/polyfills.ts
View File

@ -1,53 +1,53 @@
/** /**
* This file includes polyfills needed by Angular and is loaded before the app. * This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file. * You can add your own extra polyfills to this file.
* *
* This file is divided into 2 sections: * This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file. * file.
* *
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes recent versions of Safari, Chrome (including * automatically update themselves. This includes recent versions of Safari, Chrome (including
* Opera), Edge on the desktop, and iOS and Chrome on mobile. * Opera), Edge on the desktop, and iOS and Chrome on mobile.
* *
* Learn more in https://angular.io/guide/browser-support * Learn more in https://angular.io/guide/browser-support
*/ */
/*************************************************************************************************** /***************************************************************************************************
* BROWSER POLYFILLS * BROWSER POLYFILLS
*/ */
/** /**
* By default, zone.js will patch all possible macroTask and DomEvents * By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags * user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack * because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file * will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags * in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js. * into that file, and then add the following code before importing zone.js.
* import './zone-flags'; * import './zone-flags';
* *
* The flags allowed in zone-flags.ts are listed here. * The flags allowed in zone-flags.ts are listed here.
* *
* The following flags will work for all browsers. * The following flags will work for all browsers.
* *
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
* *
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge * with the following flag, it will bypass `zone.js` patch for IE/Edge
* *
* (window as any).__Zone_enable_cross_context_check = true; * (window as any).__Zone_enable_cross_context_check = true;
* *
*/ */
/*************************************************************************************************** /***************************************************************************************************
* Zone JS is required by default for Angular itself. * Zone JS is required by default for Angular itself.
*/ */
import 'zone.js'; // Included with Angular CLI. import 'zone.js'; // Included with Angular CLI.
/*************************************************************************************************** /***************************************************************************************************
* APPLICATION IMPORTS * APPLICATION IMPORTS
*/ */

118
src/styles.scss
View File

@ -1,59 +1,59 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
html, body { html, body {
height: 98%; height: 98%;
} }
body { body {
margin: 15px 15px 15px 15px; margin: 15px 15px 15px 15px;
font-family: Roboto, "Helvetica Neue", sans-serif; font-family: Roboto, "Helvetica Neue", sans-serif;
} }
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
} }
button { button {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 20px;
margin: 2px 2px 2px 2px; margin: 2px 2px 2px 2px;
outline: none; outline: none;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
background-color: gray; background-color: gray;
/* box-shadow: 0 2px black;*/ /* box-shadow: 0 2px black;*/
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
appearance: none; appearance: none;
touch-action: manipulation; touch-action: manipulation;
vertical-align: top; vertical-align: top;
width: 120px; width: 120px;
} }
button:disabled { button:disabled {
background-color: forestgreen; background-color: forestgreen;
opacity: 50%; opacity: 50%;
cursor: default; cursor: default;
} }
h1 { h1 {
margin: 15px 0px 15px 0px !important; margin: 15px 0px 15px 0px !important;
} }
#menu:hover { #menu:hover {
cursor: pointer; cursor: pointer;
} }
.mat-sidenav { .mat-sidenav {
z-index: auto !important; z-index: auto !important;
} }

52
src/test.ts
View File

@ -1,26 +1,26 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files // This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/testing'; import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing'; import { getTestBed } from '@angular/core/testing';
import { import {
BrowserDynamicTestingModule, BrowserDynamicTestingModule,
platformBrowserDynamicTesting platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing'; } from '@angular/platform-browser-dynamic/testing';
declare const require: { declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): { context(path: string, deep?: boolean, filter?: RegExp): {
<T>(id: string): T; <T>(id: string): T;
keys(): string[]; keys(): string[];
}; };
}; };
// First, initialize the Angular testing environment. // First, initialize the Angular testing environment.
getTestBed().initTestEnvironment( getTestBed().initTestEnvironment(
BrowserDynamicTestingModule, BrowserDynamicTestingModule,
platformBrowserDynamicTesting(), platformBrowserDynamicTesting(),
); );
// Then we find all the tests. // Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/); const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules. // And load the modules.
context.keys().map(context); context.keys().map(context);

30
tsconfig.app.json
View File

@ -1,15 +1,15 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */ /* To learn more about this file see: https://angular.io/config/tsconfig. */
{ {
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./out-tsc/app", "outDir": "./out-tsc/app",
"types": [] "types": []
}, },
"files": [ "files": [
"src/main.ts", "src/main.ts",
"src/polyfills.ts" "src/polyfills.ts"
], ],
"include": [ "include": [
"src/**/*.d.ts" "src/**/*.d.ts"
] ]
} }

64
tsconfig.json
View File

@ -1,32 +1,32 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */ /* To learn more about this file see: https://angular.io/config/tsconfig. */
{ {
"compileOnSave": false, "compileOnSave": false,
"compilerOptions": { "compilerOptions": {
"baseUrl": "./", "baseUrl": "./",
"outDir": "./dist/out-tsc", "outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"strict": true, "strict": true,
"noImplicitOverride": true, "noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true, "noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"sourceMap": true, "sourceMap": true,
"declaration": false, "declaration": false,
"downlevelIteration": true, "downlevelIteration": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"moduleResolution": "node", "moduleResolution": "node",
"importHelpers": true, "importHelpers": true,
"target": "es2017", "target": "es2017",
"module": "es2020", "module": "es2020",
"lib": [ "lib": [
"es2020", "es2020",
"dom" "dom"
] ]
}, },
"angularCompilerOptions": { "angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false, "enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true, "strictInjectionParameters": true,
"strictInputAccessModifiers": true, "strictInputAccessModifiers": true,
"strictTemplates": true "strictTemplates": true
} }
} }

36
tsconfig.spec.json
View File

@ -1,18 +1,18 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */ /* To learn more about this file see: https://angular.io/config/tsconfig. */
{ {
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./out-tsc/spec", "outDir": "./out-tsc/spec",
"types": [ "types": [
"jasmine" "jasmine"
] ]
}, },
"files": [ "files": [
"src/test.ts", "src/test.ts",
"src/polyfills.ts" "src/polyfills.ts"
], ],
"include": [ "include": [
"src/**/*.spec.ts", "src/**/*.spec.ts",
"src/**/*.d.ts" "src/**/*.d.ts"
] ]
} }