сделала нотификацию

добавила функционал на вкладки зоны, подразделения, терминалы, клиенты

angular.json

@@ -82,8 +82,8 @@
               "browserTarget": "selfdelivery-admin-panel:build:production"
             },
             "development": {
-              "browserTarget": "selfdelivery-admin-panel:build:development",
-              "proxyConfig": "proxy.confi.json"
+              "browserTarget": "selfdelivery-admin-panel:build:development"
+              //"proxyConfig": "proxy.confi.json"
             }
           },
           "defaultConfiguration": "development"

package.json

@@ -19,12 +19,15 @@
     "@angular/material": "^13.3.8",
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular/pwa": "^14.0.0",
     "@angular/router": "~13.3.0",
+    "@schematics/angular": "^14.0.0",
     "primeicons": "^5.0.0",
     "primeng": "^13.4.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "uuid": "^8.3.2",
+    "web-push": "^3.5.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

src/app/app.component.html

@@ -4,12 +4,12 @@
     </mat-sidenav>
 
     <mat-sidenav-content>
-        <button (click)="sidenav.toggle()">Открыть меню</button>
-        <button (click)="signOut()">Выход</button>
+        <button (click)="sidenav.toggle()">Меню</button>
+        <button (click)="signOut()" style="float: right">Выход</button>
         <router-outlet></router-outlet>
     </mat-sidenav-content>
 </mat-sidenav-container>
 
 <app-login *ngIf="!isAuth" (confirm)="setIsAuth()">
 
-</app-login>
+</app-login>

src/app/app.component.scss

@@ -1,3 +1,3 @@
 .main-container {
     height: 100%;
-}
+}

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, ComponentRef, EmbeddedViewRef, OnInit, Type, ViewContainerRef } from '@angular/core';
+import { Router } from '@angular/router';
 import { DialogService } from 'primeng/dynamicdialog';
 import {Toast} from "primeng/toast";
 import { ExitComponentComponent } from './components/exit-component/exit-component.component';
@@ -20,12 +21,14 @@ export class AppComponent implements OnInit {
     private cookiesService: CookiesService,
     private viewContainerRef: ViewContainerRef,
     public dialogService: DialogService,
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
     this.messageComponent = this.appendComponent(Toast);
     const token = decodeURI(this.cookiesService.getItem('token') ?? '')
     this.isAuth = token.length ? true : false;
+    this.router.navigate(['/clients'])
   }
 
 

src/app/app.module.ts

@@ -21,6 +21,9 @@ import { DivisionsComponent } from './pages/divisions/divisions.component';
 import { AreasComponent } from './pages/areas/areas.component';
 import { MenuComponent } from './components/menu/menu.component';
 import { ExitComponentComponent } from './components/exit-component/exit-component.component';
+import { TableModule } from 'primeng/table';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+
 
 const routes = [
   { path: 'clients', component: ClientsComponent },
@@ -56,6 +59,8 @@ const routes = [
     FormsModule,
     ReactiveFormsModule,
     MessagesModule,
+    TableModule,
+    ScrollPanelModule,
     RouterModule.forRoot(routes)
   ],
   providers: [MessageService, {provide: APP_BASE_HREF, useValue: '/'}],

src/app/components/login-modal/login-modal.component.ts

@@ -54,7 +54,7 @@ export class LoginModalComponent implements OnInit {
             params: [userData.login, userData.password]
         }, RpcService.authService, false).subscribe({
             next: (result) => {
-                this.cookiesService.setCookie('token', result);
+                this.cookiesService.setCookie('token', result.result);
                 this.messageService.add({
                     severity: 'success',
                     summary: 'Авторизация прошла успешно!',
@@ -73,4 +73,4 @@ export class LoginModalComponent implements OnInit {
         );
     }
 
-}
+}

src/app/components/menu/menu.component.html

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

src/app/components/menu/menu.component.ts

@@ -42,4 +42,4 @@ export class MenuComponent implements OnInit {
     redirect(path: string) {
         this.router.navigate([path]);
     }
-}
+}

src/app/interface/data.ts

@@ -6,4 +6,89 @@ export interface UserData {
 export interface MenuItem {
     name: string;
     path: string;
-}
+}
+
+export interface Delivery_address {
+  flat: string;
+  house: string;
+  street: string;
+}
+
+export interface Modifiers {
+  group: string;
+  title: string;
+}
+
+export interface Products {
+  area: string;
+  id: string;
+  modifiers: Modifiers[];
+  nomenclature_code: string;
+  requested_quantity: string;
+  status: string;
+  stock_quantity: string;
+  title: string;
+  unit: string;
+}
+
+export interface Address {
+  client_id: string;
+  id: string;
+  name: string;
+}
+
+export interface Payment {
+  summ: number;
+  type: string;
+}
+
+export interface Order {
+  address: Address;
+  comment: string;
+  date_created: string;
+  delivery_address: Delivery_address;
+  due_datetime: string;
+  external_id: string;
+  id: string;
+  payment: Payment[];
+  phone: string;
+  products: Products[];
+  status: string;
+  status_h: string;
+  item_style: string;
+  isWarnLine: boolean;
+}
+
+export interface Client {
+  id: string;
+  name: string;
+  choose: boolean;
+}
+
+export interface Divisions {
+  client_id: string;
+  id: string;
+  name: string;
+}
+
+export interface Areas {
+  client_id: string;
+  id: string;
+  name: string;
+  selected: boolean;
+}
+
+export interface Terminals {
+  area_types: [];
+  client_id: string;
+  division_id: string;
+  id: string;
+  public_id: string;
+}
+
+export interface Notification {
+  id: string;
+  new: boolean;
+  new_fin: boolean;
+  due: boolean;
+}

src/app/pages/areas/areas.component.html

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

src/app/pages/areas/areas.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from "@angular/core";
+import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
+import { MessageService } from "primeng/api";
+import { Areas } from "src/app/interface/data";
 
 
 @Component({
@@ -7,11 +10,134 @@ import { Component, OnInit } from "@angular/core";
     styleUrls: ['./areas.component.scss']
 })
 export class AreasComponent implements OnInit {
-    constructor(
+  public areas: Areas[] = [];
+  public new_ar = true;
+  public choose = this.jsonRpcService.ClientChoose;
+  public create = false;
+  public chooseName!: string;
 
-    ) {}
+  constructor(
+    private jsonRpcService: JsonrpcService,
+    private messageService: MessageService
+  ) { }
 
-    ngOnInit(): void {
-        
-    }
-}
+  ngOnInit(): void {
+    if (this.choose) { this.getAreas() };
+  }
+
+  async getAreas() {
+    this.create = false;
+    this.new_ar = true;
+    await this.jsonRpcService.rpc2({
+      method: 'getAreas',
+      params: {
+        "client_id": this.choose
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          this.areas = data;
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    this.chooseName = this.jsonRpcService.ClientChooseName;
+  }
+
+  updateArea1(id: any, name: any) {
+    this.new_ar = false;
+    setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100);
+    this.jsonRpcService.changeId = id
+  }
+
+  updateArea() {
+    let name_n = document.getElementsByTagName("input")[0].value
+    this.jsonRpcService.rpc2({
+      method: 'updateArea',
+      params: {
+        "client_id": this.choose,
+        "area_id": this.jsonRpcService.changeId,
+        "name": name_n
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    this.new_ar = true;
+    this.jsonRpcService.changeId = "";
+    this.getAreas();
+  }
+
+  deleteArea(id: any) {
+    this.jsonRpcService.rpc2({
+      method: 'deleteArea',
+      params: {
+        "client_id": this.choose,
+        "area_id": id
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getAreas(), 100);
+  }
+
+
+  createArea() {
+    this.new_ar = false;
+    this.create = true;
+  }
+
+  createArea2() {
+    let name = document.getElementsByTagName("input")[0].value
+    this.jsonRpcService.rpc2({
+      method: 'createArea',
+      params: {
+        "name": name,
+        "client_id": this.choose
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getAreas(), 100);
+
+  }
+
+}

src/app/pages/clients/clients.component.html

@@ -1 +1,49 @@
-<h1>Clients</h1>
+<h1>Клиенты</h1>
+
+<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
+<ng-template #ClientNull>
+  <h2 style="color:red">Выберите клиента</h2>
+</ng-template>
+
+  <div *ngIf="new_cl;else new_client">
+    <button (click)="createCient()">Добавить</button>
+    <p-table [value]="clients">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>ID</th>
+          <th>Наименование организации</th>
+          <th style="width:10%"></th>
+          <th style="width:10%"></th>
+          <th style="width:10%"></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-client>
+        <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
+        <tr>
+          <td>{{client.id}}</td>
+          <td>{{client.name}}</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)="deleteClient(client.id)">Удалить</button></td>
+        </tr>
+      </ng-template>
+    </p-table>
+  </div>
+
+  <ng-template #new_client>
+    <button (click)="getClients()">К списку</button>
+    <p-table>
+      <ng-template pTemplate="header">
+        <tr>
+          <th>Введите наименование организации:</th>
+          <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
+        </tr>
+      </ng-template>
+    </p-table>
+    <div *ngIf="create; else change">
+      <button (click)="createClient2()">Создать</button>
+    </div>
+    <ng-template #change>
+      <button (click)="changeClient()">Сохранить</button>
+    </ng-template>
+  </ng-template>

src/app/pages/clients/clients.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from "@angular/core";
+import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
+import { MessageService } from "primeng/api";
+import { Client } from "src/app/interface/data";
+
 
 
 @Component({
@@ -7,11 +11,142 @@ import { Component, OnInit } from "@angular/core";
     styleUrls: ['./clients.component.scss']
 })
 export class ClientsComponent implements OnInit {
+  public clients: Client[] = [];
+  public new_cl = true;
+  public choose = this.jsonRpcService.ClientChoose;
+  public create = false;
+  public chooseName!: string;
+  public myAudio = new Audio();
+
+
     constructor(
+      private jsonRpcService: JsonrpcService,
+      private messageService: MessageService
+    ) { }
 
-    ) {}
+  ngOnInit(): void {
+    this.getClients();
+  }
 
-    ngOnInit(): void {
-        
-    }
-}
+  async getClients() {
+    this.create = false;
+    this.new_cl = true;
+     await this.jsonRpcService.rpc2({
+        method: 'getClients',
+        params: {
+          "name": ""
+        }
+      }, RpcService.authService, false)
+        .subscribe({
+          next: (result) => {
+            let data = result.result;
+            this.clients = data;
+          },
+          error: (err) => {
+            console.log('ERROR: ', err)
+            this.messageService.add({
+              severity: 'error',
+              summary: 'Произошла ошибка!',
+            })
+          }
+        });
+    this.chooseName = this.jsonRpcService.ClientChooseName;
+  }
+
+  changeClient1(id: any, name: any) {
+    this.new_cl = false;
+    setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100);
+    this.jsonRpcService.changeId = id
+  }
+
+  changeClient() {
+    let name_n = document.getElementsByTagName("input")[0].value
+    this.jsonRpcService.rpc2({
+      method: 'updateClient',
+      params: {
+        "client_id": this.jsonRpcService.changeId,
+        "name": name_n
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    this.new_cl = true;
+    this.jsonRpcService.changeId = "";
+    this.getClients();
+  }
+
+  deleteClient(id: any) {
+    this.jsonRpcService.rpc2({
+      method: 'deleteClient',
+      params: {
+        "client_id": id
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getClients(), 100);
+  }
+
+  chooseClient(id: any, name: any) {
+    this.myAudio.src = "../../../assets/myAudio.mp3"
+    this.jsonRpcService.ClientChooseName = name;
+    this.jsonRpcService.ClientChoose = id;
+    this.choose = this.jsonRpcService.ClientChoose;
+    this.chooseName = this.jsonRpcService.ClientChooseName;
+    //this.myAudio.load();
+    //this.myAudio.play();
+  }
+
+  createCient() {
+    this.new_cl = false;
+    this.create = true;
+  }
+
+  createClient2() {
+    let name = document.getElementsByTagName("input")[0].value
+    this.jsonRpcService.rpc2({
+      method: 'createClient',
+      params: {
+        "name": name
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getClients(), 100);
+    
+  }
+
+}

src/app/pages/divisions/divisions.component.html

@@ -1 +1,51 @@
-<h1>divisions</h1>
+<h1>Подразделения</h1>
+
+<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
+<ng-template #ClientNull>
+  <h2 style="color:red">Выберите клиента</h2>
+</ng-template>
+
+<div *ngIf="new_div;else new_Division">
+  <button (click)="createDivision()">Добавить</button>
+  <p-table [value]="divisions">
+    <ng-template pTemplate="header">
+      <tr>
+        <th>ID</th>
+        <th>Наименование подразделения</th>
+        <th></th>
+        <th></th>
+        <th style="width:10%"></th>
+        <th style="width:10%"></th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-Division>
+      <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
+      <tr>
+        <td>{{Division.id}}</td>
+        <td>{{Division.name}}</td>
+        <td></td>
+        <td></td>
+        <td><button (click)="changeDivision1(Division.id, Division.name)">Изменить</button></td>
+        <td><button (click)="deleteDivision(Division.id)">Удалить</button></td>
+      </tr>
+    </ng-template>
+  </p-table>
+</div>
+
+<ng-template #new_Division>
+  <button (click)="getDivisions()">К списку</button>
+  <p-table>
+    <ng-template pTemplate="header">
+      <tr>
+        <th>Введите наименование подразделения:</th>
+        <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
+      </tr>
+    </ng-template>
+  </p-table>
+  <div *ngIf="create; else change">
+    <button (click)="createDivision2()">Создать</button>
+  </div>
+  <ng-template #change>
+    <button (click)="changeDivision()">Сохранить</button>
+  </ng-template>
+</ng-template>

src/app/pages/divisions/divisions.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from "@angular/core";
+import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
+import { MessageService } from "primeng/api";
+import { Divisions } from "src/app/interface/data";
 
 
 @Component({
@@ -7,11 +10,141 @@ import { Component, OnInit } from "@angular/core";
     styleUrls: ['./divisions.component.scss']
 })
 export class DivisionsComponent implements OnInit {
-    constructor(
+  public divisions: Divisions[] = [];
+  public new_div = true;
+  public choose = this.jsonRpcService.ClientChoose;
+  public create = false;
+  public chooseName!: string;
 
-    ) {}
+  constructor(
+    private jsonRpcService: JsonrpcService,
+    private messageService: MessageService
+  ) { }
 
-    ngOnInit(): void {
-        
-    }
-}
+  ngOnInit(): void {
+    if (this.choose) { this.getDivisions() };
+  }
+
+  async getDivisions() {
+    this.create = false;
+    this.new_div = true;
+    await this.jsonRpcService.rpc2({
+      method: 'getDivisions',
+      params: {
+        "client_id": this.choose
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          this.divisions = data;
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    this.chooseName = this.jsonRpcService.ClientChooseName;
+  }
+
+  changeDivision1(id: any, name: any) {
+    this.new_div = false;
+    setTimeout(() => document.getElementsByTagName("input")[0].value = name, 100);
+    this.jsonRpcService.changeId = id
+  }
+
+  changeDivision() {
+    let name_n = document.getElementsByTagName("input")[0].value
+    this.jsonRpcService.rpc2({
+      method: 'updateDivision',
+      params: {
+        "client_id": this.choose,
+        "division_id": this.jsonRpcService.changeId,
+        "name": name_n
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    this.new_div = true;
+    this.jsonRpcService.changeId = "";
+    this.getDivisions();
+  }
+
+  deleteDivision(id: any) {
+    this.jsonRpcService.rpc2({
+      method: 'deleteDivision',
+      params: {
+        "client_id": this.choose,
+        "division_id": id
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getDivisions(), 100);
+  }
+
+  chooseClient(id: any, name: any) {
+    console.log(id);
+    this.jsonRpcService.ClientChooseName = name;
+    this.jsonRpcService.ClientChoose = id;
+    this.choose = this.jsonRpcService.ClientChoose;
+    this.chooseName = this.jsonRpcService.ClientChooseName;
+  }
+
+  createDivision() {
+    this.new_div = false;
+    this.create = true;
+  }
+
+  createDivision2() {
+    let name = document.getElementsByTagName("input")[0].value
+    this.jsonRpcService.rpc2({
+      method: 'createDivision',
+      params: {
+        "name": name,
+        "client_id": this.choose
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getDivisions(), 100);
+
+  }
+
+}

src/app/pages/orders/orders.component.html

@@ -1 +1,205 @@
-<h1>Orders</h1>
+<h1>Заказы</h1>
+
+<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
+<ng-template #ClientNull>
+  <h2 style="color:red">Выберите клиента</h2>
+</ng-template>
+
+<style>
+  .red {
+    color: red !important;
+    background-color: pink;
+  }
+
+  .orange {
+    color: darkorange !important;
+    background-color: wheat;
+  }
+
+  .green {
+    color: green !important;
+    background-color: lightgreen;
+  }
+
+  .grey {
+    color: grey !important;
+    background-color: lightgray;
+  }
+
+  .yellow {
+    color: darkgoldenrod !important;
+    background-color: lightgoldenrodyellow;
+  }
+
+  .blue {
+    color: blue !important;
+    background-color: lightblue;
+  }
+
+  .lilac {
+    color: #8b00ff !important;
+    background-color: #ebc4eb;
+  }
+</style>
+<div *ngIf="view; else order_v">
+  <p>Время последнего обновления: {{lastOrderUpdateTime | date:'dd.MM.yyyy HH:mm:ss'}}</p>
+  <button (click)="getOrders()">Обновить</button>
+  <p-table [value]="orders">
+    <ng-template pTemplate="header">
+      <tr>
+        <th>ID</th>
+        <th>Статус</th>
+        <!--<p-columnFilter type="text" field="Статус" display="menu"></p-columnFilter>-->
+        <th>ID точки заказа</th>
+        <th>Дата создания</th>
+        <th>Дата самовывоза</th>
+        <th>Внешний ID заказа</th>
+        <th>Телефон клиента</th>
+        <th>Тип оплаты</th>
+      </tr>
+      <tr>
+        <th></th>
+        <th><p-columnFilter type="text" field="status_h"></p-columnFilter></th>
+        <!--<p-columnFilter field="statuses" matchMode="in" [showMenu]="false">
+          <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+            <p-multiSelect [ngModel]="value" [options]="statuses" placeholder="Any"
+                           (onChange)="filter($event.value)">
+              <ng-template let-option pTemplate="item">
+                <div class="p-multiselect-representative-option">
+                  <span class="p-ml-1">{{option}}</span>
+                </div>
+              </ng-template>
+            </p-multiSelect>
+          </ng-template>
+        </p-columnFilter>-->
+
+        <th><p-columnFilter type="text" field="address.name"></p-columnFilter></th>
+        <th></th>
+        <th></th>
+        <th></th>
+        <th></th>
+        <th></th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-order>
+      <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
+      <tr (click)="vievOrder(order.id)" #ordtable style="cursor: pointer">
+        <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'}">{{order.status_h}}</td>
+        <td>{{order.address.name}}</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.external_id}}</td>
+        <td>{{order.phone}}</td>
+        <td *ngIf="order.payment[0]; else nd">{{order.payment[0].type}}</td>
+      </tr>
+    </ng-template>
+<ng-template #nd>
+  <td>Нет данных</td>
+</ng-template>
+  </p-table>
+</div>
+
+<ng-template #order_v>
+  <div>
+    <button (click)="listOrders()">К списку заказов</button>
+    <h1>Заказ: {{order[0].id}}</h1>
+    <p-table [value]="order">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>Внешний ID заказа</th>
+          <th>Дата создания</th>
+          <th>ID точки заказа</th>
+          <th>Статус</th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-ord>
+        <tr>
+          <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="text" value="{{ord.address.id}}"></td>
+          <td>
+            <select>
+              <option selected>{{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>
+          </td>
+        </tr>
+      </ng-template>
+    </p-table>
+    <h2>Состав заказа:</h2>
+    <p-table [value]="order[0].products">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>Товар</th>
+          <th>Кол-во (факт.)</th>
+          <th>Цена</th>
+          <th>Кол-во (реал.)</th>
+          <th>Стоимость</th>
+          <th>Модификаторы</th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-ord>
+        <tr>
+          <!--<td>
+            <button type="button" pButton pRipple [pRowToggler]="rowData"></button>
+          </td>-->
+          <td>{{ord.title}}</td>
+
+          <td>{{ord.requested_quantity}}</td>
+          <td>-</td>
+          <td>{{ord.stock_quantity}}</td>
+          <td>-</td>
+
+
+
+          <!--<p-table [value]="ord.modifiers">
+          <ng-template pTemplate="body" let-mod>-->
+
+          <td>
+        <tbody *ngFor="let mod of ord.modifiers">
+          <tr>
+            {{mod.group}}
+          </tr>
+          <tr>
+            {{mod.title}}
+          </tr>
+        </tbody>
+        </td>
+        </tr>
+      </ng-template>
+
+    </p-table>
+    <h2>Оплата:</h2>
+    <p-table [value]="order[0].payment">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>Сумма к оплате по безналу:</th>
+          <th>Тип оплаты:</th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-pay>
+        <tr>
+          <td>{{pay.summ}}</td>
+          <td>{{pay.type}}</td>
+        </tr>
+      </ng-template>
+    </p-table>
+  </div>
+</ng-template>
+
+
+

src/app/pages/orders/orders.component.scss

@@ -0,0 +1,3 @@
+.Red {
+    color: red;
+}

src/app/pages/orders/orders.component.ts

@@ -1,17 +1,206 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, Renderer2, ElementRef, Input } from "@angular/core";
+import { TableModule } from 'primeng/table';
+import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
+import { MessageService } from "primeng/api";
+import { Order, Products, Delivery_address, Notification } from "src/app/interface/data";
+import { ClientsComponent } from "../clients/clients.component";
+/*import { SwPush, NewsletterService } from '@angular/service-worker*/
 
 
 @Component({
     selector: 'app-orders',
     templateUrl: './orders.component.html',
-    styleUrls: ['./orders.component.scss']
+  styleUrls: ['./orders.component.scss'],
+  providers: [ClientsComponent]
 })
 export class OrdersComponent implements OnInit {
+  public orders: Array<Order> = [];
+  public order: Array<Order> = [];
+  public view: boolean = true;
+  public chooseName!: string;
+  public lastOrderUpdateTime: string = "";
+  public choose = this.jsonRpcService.ClientChoose;
+  public notification: Array<Notification> = [];
+  public map_new = new Map();
+  public map_new_fin = new Map();
+  public map_due = new Map();
+  public myAudioP = new Audio();
+  public myAudioA = new Audio();
+
+
+  public statuses = [
+   "К готовке",
+   "Готовится",
+   "Готово",
+   "Отменен",
+   "Можно забирать",
+   "У курьера",
+   "Доставлен",
+   "Не подтвержден",
+   "Требует согласия",
+   "Требуется оплата",
+   "Оплата просрочена",
+   "Новый",
+   "Выдан",
+   "Нужен возврат"
+  ];
+
+
+
     constructor(
-
-    ) {}
-
-    ngOnInit(): void {
-        
+      private jsonRpcService: JsonrpcService,
+      private messageService: MessageService,
+      private clientsComponent: ClientsComponent,
+    ) {
     }
-}
+
+ 
+
+  async ngOnInit() {
+
+    if (this.choose) {
+      this.getOrders();
+      setTimeout(() => this.notif(), 700);
+      
+      setInterval(() => this.getOrders(), 60000);
+      this.chooseName = this.jsonRpcService.ClientChooseName;
+    }
+
+  }
+
+  notif() {
+    for (let i = 0; i < this.orders.length; i++) {
+      this.map_new.set(this.orders[i].id, true)
+      this.map_new_fin.set(this.orders[i].id, true)
+    } 
+  }
+
+  async getOrders() {
+    this.myAudioP.src = "../../../assets/myAudio.mp3";
+    this.myAudioA.src = "../../../assets/myAudio2.mp3";
+    if (this.view == true) {
+      await this.jsonRpcService.rpc2({
+        method: 'getOrders',
+        params: {
+          "client_id": this.choose, "order_status": [
+            "readyToStart",
+            "inProgress",
+            "complete",
+            "cancel",
+            "readyToPickup",
+            "onWay",
+            "delivered",
+            "unconfirmed",
+            "requiresConsent",
+            "requiresPayment",
+            "paymentOverdue",
+            "newOrder",
+            "issued",
+            "needReturnPayment"
+          ]
+        }
+      }, RpcService.authService, false)
+        .subscribe({
+          next: (result) => {
+            let data = result.result;
+            this.color(data);
+            this.orders = data;
+
+
+            this.lastOrderUpdateTime = Date().toString();
+          },
+          error: (err) => {
+            console.log('ERROR: ', err)
+            this.messageService.add({
+              severity: 'error',
+              summary: 'Произошла ошибка!',
+            })
+          }
+        }
+      );
+    }
+    setTimeout (() => this.notif2(), 700)
+
+    }
+
+  
+
+notif2() {
+  for (let i = 0; i < this.orders.length; i++) {
+    if (this.map_new.has(this.orders[i].id) == false) {
+      this.map_new.set(this.orders[i].id, true);
+    }
+    if (this.map_new_fin.has(this.orders[i].id) == false && this.map_new.has(this.orders[i].id) == true) {
+      this.myAudioP.load();
+      this.myAudioP.play();
+      this.map_new_fin.set(this.orders[i].id, true);
+    }
+    var date1 = new Date();
+    var date2 = new Date(this.orders[i].due_datetime);
+    if ((date2.getTime() - date1.getTime() < 1000 * 3600) && (this.orders[i].status_h == 'К готовке') && (this.map_due.has(this.orders[i].id) == false) && (date2.getTime() - date1.getTime() > 1000 * 1080)) {
+      this.myAudioA.load();
+      this.myAudioA.play();
+      this.map_due.set(this.orders[i].id, true);
+    }
+  }
+}
+
+
+  async vievOrder(id: any) {
+    
+    await this.jsonRpcService.rpc2({
+      method: 'getOrders',
+      params: { "client_id": this.choose, "order_id": id }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result
+          
+          this.order = data
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      }
+    );
+    this.view = false
+  }
+
+  listOrders() {
+    this.view = true;
+    this.getOrders();
+  }
+
+  color(targetData: any) {
+    for (let i = 0; i < targetData.length; i++) {
+      var item = targetData[i];
+      var date1 = new Date();
+      var date2 = new Date(item.due_datetime);
+      if ((date2.getTime() - date1.getTime() < 1000 * 3600) && (item.status_h == 'К готовке') && (date2.getTime() - date1.getTime() >= 0)) {
+        item.item_style = 'orange'
+      };
+      if ((item.status_h == 'К готовке') && (date2.getTime() - date1.getTime() < 0)) {
+        item.item_style = 'red'
+      };
+      if (item.status_h == 'Готово') {
+        item.item_style = 'green'
+      };
+      if ((item.status_h == 'Отменен') || (item.status_h == 'Оплата просрочена')) {
+        item.item_style = 'grey'
+      };
+      if ((date2.getTime() - date1.getTime() >= 1000 * 3600) && (item.status_h == 'К готовке')) {
+        item.item_style = 'yellow'
+      };
+      if (item.status_h == 'Готовится') {
+        item.item_style = 'blue'
+      };
+      if (item.status_h == 'Выдан') {
+        item.item_style = 'lilac'
+      };
+    }
+  }
+}

src/app/pages/terminals/terminals.component.html

@@ -1 +1,77 @@
-<h1>terminals</h1>
+<h1>Терминалы</h1>
+
+<style>
+  span {
+    padding: 0 5px !important;
+  }
+</style>
+
+<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
+<ng-template #ClientNull>
+  <h2 style="color:red">Выберите клиента</h2>
+</ng-template>
+
+<div *ngIf="new_ter;else new_Terminal">
+  <button (click)="registerTerminal()">Добавить</button>
+  <p-table [value]="terminals">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>ID</th>
+          <th>Наименование терминала</th>
+          <th style="width:20%">ID точки заказа</th>
+          <th>Список ID цехов готовки</th>
+          <th>Статус подключения</th>
+          <th style="width: 10%"></th>
+          <th style="width: 10%"></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-terminals>
+          <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
+          <tr>
+            <td>{{terminals.id}}</td>
+            <td>{{terminals.public_id}}</td>
+            <td>{{terminals.division_id}}</td>
+            <td>{{terminals.area_types}}</td>
+            <td></td>
+            <td><button (click)="updateTerminal1(terminals.id, terminals.public_id, terminals.division_id, terminals.area_types)">Изменить</button></td>
+            <td><button (click)="deleteTerminal(terminals.id)">Удалить</button></td>
+          </tr>
+      </ng-template>
+  </p-table>
+</div>
+
+<ng-template #new_Terminal>
+  <button (click)="getTerminals()">К списку</button>
+  <p-table>
+    <ng-template pTemplate="header">
+      <tr>
+        <th>Введите внешний ID терминала:</th>
+        <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
+      </tr>
+      <tr>
+        <th>Введите ID точки заказа:</th>
+        <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
+      </tr>
+      <tr>
+        <th>Введите ID цехов готовки:</th>
+
+        <th>
+      <tbody *ngFor="let area of areas">
+        <tr>
+          <input type="checkbox" value="{{area.selected}}" id="ar" [(ngModel)]="area.selected">
+          <span>Цех: {{area.name}}</span>
+        </tr>
+      </tbody>
+      </th>
+
+      </tr>
+    </ng-template>
+  </p-table>
+  <div *ngIf="create; else change">
+    <button (click)="registerTerminal2()">Создать</button>
+    <button (click)="updateTerminal()">Сохранить</button>
+  </div>
+  <ng-template #change>
+    <button (click)="updateTerminal()">Сохранить</button>
+  </ng-template>
+</ng-template>

src/app/pages/terminals/terminals.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from "@angular/core";
+import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
+import { MessageService } from "primeng/api";
+import { Terminals, Areas } from "src/app/interface/data";
+import { ScrollPanelModule } from 'primeng/scrollpanel';
 
 
 @Component({
@@ -7,11 +11,176 @@ import { Component, OnInit } from "@angular/core";
     styleUrls: ['./terminals.component.scss']
 })
 export class TerminalsComponent implements OnInit {
-    constructor(
+  public terminals: Terminals[] = [];
+  public new_ter = true;
+  public choose = this.jsonRpcService.ClientChoose;
+  public create = false;
+  public chooseName!: string;
+  public areas: Areas[] = [];
+  public chooseArea: Array<string> = [];
 
-    ) {}
 
-    ngOnInit(): void {
-        
+  constructor(
+    private jsonRpcService: JsonrpcService,
+    private messageService: MessageService,
+
+    //readonly swPush: SwPush,
+    //private newsletterService: NewsletterService
+  ) { }
+
+  ngOnInit(): void {
+    if (this.choose) { this.getTerminals() };
+  }
+
+  async getTerminals() {
+    this.create = false;
+    this.new_ter = true;
+    await this.jsonRpcService.rpc2({
+      method: 'getTerminals',
+      params: {
+        "client_id": this.choose
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          this.terminals = data;
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    this.chooseName = this.jsonRpcService.ClientChooseName;
+  }
+
+  async getAreas() {
+    await this.jsonRpcService.rpc2({
+      method: 'getAreas',
+      params: {
+        "client_id": this.choose
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          this.areas = data;
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+  }
+
+  updateTerminal1(id: any, public_id: any, division_id: any, area_types: any) {
+    this.new_ter = false;
+    setTimeout(() => document.getElementsByTagName("input")[0].value = public_id, 100);
+    setTimeout(() => document.getElementsByTagName("input")[1].value = division_id, 100);
+    this.jsonRpcService.changeId = id;
+    this.getAreas()
+  }
+
+  updateTerminal() {
+    this.chooseArea = [];
+    let address = document.getElementsByTagName("input")[1].value
+/*    let areas = document.getElementsByTagName("input")[1].value*/
+    let public_id = document.getElementsByTagName("input")[0].value
+    for (let i = 0; i < this.areas.length; i++) {
+      
+      if (this.areas[i].selected == true) {
+        this.chooseArea.push(this.areas[i].name)
+      }
     }
-}
+
+    this.jsonRpcService.rpc2({
+      method: 'updateTerminal',
+      params: {
+        "client_id": this.choose,
+        "terminal_id": this.jsonRpcService.changeId,
+        "address": address,
+        "areas": this.chooseArea,
+        "public_id": public_id
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    this.new_ter = true;
+    this.jsonRpcService.changeId = "";
+    this.getTerminals();
+  }
+
+  deleteTerminal(id: any) {
+    this.jsonRpcService.rpc2({
+      method: 'deleteTerminal',
+      params: {
+        "client_id": this.choose,
+        "terminal_id": id
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getTerminals(), 100);
+  }
+
+
+  registerTerminal() {
+    this.new_ter = false;
+    this.create = true;
+    this.getAreas()
+  }
+
+  registerTerminal2() {
+    let public_id = document.getElementsByTagName("input")[0].value
+    this.jsonRpcService.rpc2({
+      method: 'registerTerminal',
+      params: {
+        "public_id": public_id,
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          /*this.clients = data;*/
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+    setTimeout(() => this.getTerminals(), 100);
+
+  }
+
+}

src/app/services/jsonrpc.service.ts

@@ -5,6 +5,9 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { CookiesService } from './cookies.service';
 import { v4 as uuidv4 } from 'uuid';
+import { Areas } from "src/app/interface/data";
+
+
 
 export enum RpcService{
   authService,
@@ -27,13 +30,17 @@ export class JsonrpcService {
   protected readonly api = environment.appSelfDeliveryEndPoint;
   private jsonrpc = '2.0';
   private body!: JsonRpcBody;
+  public ClientChoose = "";
+  public ClientChooseName = "";
+  public changeId = "";
+  public areas: Areas[] = [];
 
   constructor(
     private http: HttpClient,
     private cookiesService: CookiesService
   ) { }
 
-  rpc(data: {method: string, params: any[]},service: RpcService, auth = false): Observable<any> {
+  rpc(data: {method: string, params: any},service: RpcService, auth = false): Observable<any> {
     let headers = new HttpHeaders();
     const token = decodeURI(this.cookiesService.getItem('token') ?? '');
     headers = headers.set('Content-Type', 'application/json');
@@ -56,6 +63,32 @@ export class JsonrpcService {
         }
   }
 
+  rpc2(data: { method: string, params: any }, service: RpcService, auth = false): Observable<any> {
+    let headers = new HttpHeaders();
+    const token = decodeURI(this.cookiesService.getItem('token') ?? '');
+    
+    const options = {
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': token
+      },
+    };
+     this.body = {
+      id: uuidv4(),
+      jsonrpc: this.jsonrpc,
+      method: data.method,
+      params: { ...data.params },
+    };
+    try {
+      return this.http
+        .post(environment.appSelfDeliveryEndPoint, this.body, options)
+        .pipe(map((res: any) => res));
+    } catch (error) {
+      return new Observable()
+    }
+  }
+
+
   handleHttpError(error: HttpErrorResponse): void {
     console.log(error.message);
   }

src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: true,
-  appSelfDeliveryEndPoint: 'http://selfdelivery-dev.crm4retail.ru/api',
+  appSelfDeliveryEndPoint: 'http://selfdelivery-pitsburg.mydatahosting.ru/admin_api',
   systemId: 'dfe16ca16a3598b812',
 };

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  appSelfDeliveryEndPoint: 'http://localhost:4200/api',
+  appSelfDeliveryEndPoint: 'http://selfdelivery-pitsburg.mydatahosting.ru/admin_api',
   systemId: 'dfe16ca16a3598b812',
 };
 

src/styles.scss

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