cors?

.vs/VSWorkspaceState.json

@@ -3,7 +3,6 @@
     "",
     "\\src",
     "\\src\\app",
-    "\\src\\app\\boards",
     "\\src\\app\\services"
   ],
   "PreviewInSolutionExplorer": false

angular.json

@@ -38,7 +38,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumError": "8kb"
                 }
               ],
               "fileReplacements": [
@@ -97,5 +97,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

docker-compose.yml

@@ -5,4 +5,10 @@ services:
         container_name: ng-dvach
         build: .
         ports:
-        - "4200:4200"
+        - "4200:4200"
+        restart: always
+        logging:
+          driver: "gelf"
+          options:
+            gelf-address: "udp://graylog.vdk2ch.ru:12201"
+            tag: "angular-logs"

package-lock.json

@@ -13,9 +13,11 @@
         "@angular/compiler": "^14.2.0",
         "@angular/core": "^14.2.0",
         "@angular/forms": "^14.2.0",
+        "@angular/material": "^7.0.0",
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
+        "angular-material-sidenav": "^0.1.1",
         "dotenv": "^16.0.3",
         "minio": "^7.0.32",
         "nestjs-minio-client": "^2.0.0",
@@ -37,6 +39,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.0.0",
+        "schematics-scss-migrate": "^1.3.15",
         "typescript": "~4.7.2"
       }
     },
@@ -349,6 +352,35 @@
         "@angular/core": "14.2.6"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.0.0.tgz",
+      "integrity": "sha512-HX+gIJzST/Nu07ASg1XR583KSEmHI6kUbiSBdq0LqF3mIQgId5z3auBqQcXAgvB0Cg29+/38aj31hnoK/LswEQ==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.7.1"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=7.0.0",
+        "@angular/core": ">=7.0.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@angular/cdk/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "peer": true
+    },
     "node_modules/@angular/cli": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.6.tgz",
@@ -481,6 +513,25 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-7.0.0.tgz",
+      "integrity": "sha512-HgHzHWsUvNiSpRmoOJqnH/TVb4Ki7sXxbWuw5OVKOKiBW6Gwvd29+cP4XauzH47wHMyvS9/HH8kj3gC72pLhJQ==",
+      "dependencies": {
+        "tslib": "^1.7.1"
+      },
+      "peerDependencies": {
+        "@angular/animations": ">=7.0.0",
+        "@angular/cdk": "7.0.0",
+        "@angular/common": ">=7.0.0",
+        "@angular/core": ">=7.0.0"
+      }
+    },
+    "node_modules/@angular/material/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@angular/platform-browser": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.6.tgz",
@@ -3393,6 +3444,11 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-material-sidenav": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/angular-material-sidenav/-/angular-material-sidenav-0.1.1.tgz",
+      "integrity": "sha512-EasHTz6tJhGfgPdoBr+xS3gBZeOfvvkBandTimdIUyWrOa/sDTSU2ybp1LK+rWTLqqtPAK2o59cmqW7J36qzfw=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -11058,6 +11114,188 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
+    "node_modules/schematics-scss-migrate": {
+      "version": "1.3.15",
+      "resolved": "https://registry.npmjs.org/schematics-scss-migrate/-/schematics-scss-migrate-1.3.15.tgz",
+      "integrity": "sha512-liOWef7NlVIoW8b3Ctvr1zcfHkISBKFI3X1dZaOQjDP0rDFgBCaPKqAl1X6Eiu0fgbWmNi5XzV9gU4F/2V7q5g==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/core": "^12.0.1",
+        "@angular-devkit/schematics": "^12.2.8",
+        "@schematics/angular": "^12.2.8",
+        "glob": "^7.1.6",
+        "sass": "^1.29.0",
+        "typescript": "^4.3.2"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/@angular-devkit/core": {
+      "version": "12.2.18",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-12.2.18.tgz",
+      "integrity": "sha512-GDLHGe9HEY5SRS+NrKr14C8aHsRCiBFkBFSSbeohgLgcgSXzZHFoU84nDWrl3KZNP8oqcUSv5lHu6dLcf2fnww==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "8.6.2",
+        "ajv-formats": "2.1.0",
+        "fast-json-stable-stringify": "2.1.0",
+        "magic-string": "0.25.7",
+        "rxjs": "6.6.7",
+        "source-map": "0.7.3"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/@angular-devkit/schematics": {
+      "version": "12.2.18",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-12.2.18.tgz",
+      "integrity": "sha512-bZ9NS5PgoVfetRC6WeQBHCY5FqPZ9y2TKHUo12sOB2YSL3tgWgh1oXyP8PtX34gasqsLjNULxEQsAQYEsiX/qQ==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/core": "12.2.18",
+        "ora": "5.4.1",
+        "rxjs": "6.6.7"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/@schematics/angular": {
+      "version": "12.2.18",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.18.tgz",
+      "integrity": "sha512-niRS9Ly9y8uI0YmTSbo8KpdqCCiZ/ATMZWeS2id5M8JZvfXbngwiqJvojdSol0SWU+n1W4iA+lJBdt4gSKlD5w==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/core": "12.2.18",
+        "@angular-devkit/schematics": "12.2.18",
+        "jsonc-parser": "3.0.0"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/ajv": {
+      "version": "8.6.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz",
+      "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/ajv-formats": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.0.tgz",
+      "integrity": "sha512-USH2jBb+C/hIpwD2iRjp0pe0k+MvzG0mlSn/FIdCgQhUb9ALPRjt2KIQdfZDS9r0ZIeUAg7gOu9KL0PFqGqr5Q==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+      "dev": true
+    },
+    "node_modules/schematics-scss-migrate/node_modules/magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/schematics-scss-migrate/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -13153,6 +13391,31 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/cdk": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.0.0.tgz",
+      "integrity": "sha512-HX+gIJzST/Nu07ASg1XR583KSEmHI6kUbiSBdq0LqF3mIQgId5z3auBqQcXAgvB0Cg29+/38aj31hnoK/LswEQ==",
+      "peer": true,
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true,
+          "peer": true
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "peer": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.6.tgz",
@@ -13231,6 +13494,21 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-7.0.0.tgz",
+      "integrity": "sha512-HgHzHWsUvNiSpRmoOJqnH/TVb4Ki7sXxbWuw5OVKOKiBW6Gwvd29+cP4XauzH47wHMyvS9/HH8kj3gC72pLhJQ==",
+      "requires": {
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@angular/platform-browser": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.6.tgz",
@@ -15338,6 +15616,11 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "angular-material-sidenav": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/angular-material-sidenav/-/angular-material-sidenav-0.1.1.tgz",
+      "integrity": "sha512-EasHTz6tJhGfgPdoBr+xS3gBZeOfvvkBandTimdIUyWrOa/sDTSU2ybp1LK+rWTLqqtPAK2o59cmqW7J36qzfw=="
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -20915,6 +21198,148 @@
         }
       }
     },
+    "schematics-scss-migrate": {
+      "version": "1.3.15",
+      "resolved": "https://registry.npmjs.org/schematics-scss-migrate/-/schematics-scss-migrate-1.3.15.tgz",
+      "integrity": "sha512-liOWef7NlVIoW8b3Ctvr1zcfHkISBKFI3X1dZaOQjDP0rDFgBCaPKqAl1X6Eiu0fgbWmNi5XzV9gU4F/2V7q5g==",
+      "dev": true,
+      "requires": {
+        "@angular-devkit/core": "^12.0.1",
+        "@angular-devkit/schematics": "^12.2.8",
+        "@schematics/angular": "^12.2.8",
+        "glob": "^7.1.6",
+        "sass": "^1.29.0",
+        "typescript": "^4.3.2"
+      },
+      "dependencies": {
+        "@angular-devkit/core": {
+          "version": "12.2.18",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-12.2.18.tgz",
+          "integrity": "sha512-GDLHGe9HEY5SRS+NrKr14C8aHsRCiBFkBFSSbeohgLgcgSXzZHFoU84nDWrl3KZNP8oqcUSv5lHu6dLcf2fnww==",
+          "dev": true,
+          "requires": {
+            "ajv": "8.6.2",
+            "ajv-formats": "2.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "magic-string": "0.25.7",
+            "rxjs": "6.6.7",
+            "source-map": "0.7.3"
+          }
+        },
+        "@angular-devkit/schematics": {
+          "version": "12.2.18",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-12.2.18.tgz",
+          "integrity": "sha512-bZ9NS5PgoVfetRC6WeQBHCY5FqPZ9y2TKHUo12sOB2YSL3tgWgh1oXyP8PtX34gasqsLjNULxEQsAQYEsiX/qQ==",
+          "dev": true,
+          "requires": {
+            "@angular-devkit/core": "12.2.18",
+            "ora": "5.4.1",
+            "rxjs": "6.6.7"
+          }
+        },
+        "@schematics/angular": {
+          "version": "12.2.18",
+          "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.18.tgz",
+          "integrity": "sha512-niRS9Ly9y8uI0YmTSbo8KpdqCCiZ/ATMZWeS2id5M8JZvfXbngwiqJvojdSol0SWU+n1W4iA+lJBdt4gSKlD5w==",
+          "dev": true,
+          "requires": {
+            "@angular-devkit/core": "12.2.18",
+            "@angular-devkit/schematics": "12.2.18",
+            "jsonc-parser": "3.0.0"
+          }
+        },
+        "ajv": {
+          "version": "8.6.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz",
+          "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-formats": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.0.tgz",
+          "integrity": "sha512-USH2jBb+C/hIpwD2iRjp0pe0k+MvzG0mlSn/FIdCgQhUb9ALPRjt2KIQdfZDS9r0ZIeUAg7gOu9KL0PFqGqr5Q==",
+          "dev": true,
+          "requires": {
+            "ajv": "^8.0.0"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "jsonc-parser": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+          "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+          "dev": true
+        },
+        "magic-string": {
+          "version": "0.25.7",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+          "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.4"
+          }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "rxjs": {
+          "version": "6.6.7",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+          "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host=0.0.0.0 --disable-host-check --verbose",
+    "start": "ng serve --live-reload=false --host=0.0.0.0 --disable-host-check --verbose",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
@@ -15,9 +15,11 @@
     "@angular/compiler": "^14.2.0",
     "@angular/core": "^14.2.0",
     "@angular/forms": "^14.2.0",
+    "@angular/material": "^7.0.0",
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "angular-material-sidenav": "^0.1.1",
     "dotenv": "^16.0.3",
     "minio": "^7.0.32",
     "nestjs-minio-client": "^2.0.0",
@@ -39,6 +41,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "schematics-scss-migrate": "^1.3.15",
     "typescript": "~4.7.2"
   }
 }

src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {RouterModule, Routes} from "@angular/router";
+import {HomeComponent} from "./pages/home/home.component";
+import {ThreadsComponent} from "./pages/BoardThreads/threads.component";
+import {BoardsComponent} from "./pages/SingleThread/boards.component";
+import {AboutComponent} from "./pages/about/about.component";
+import {NotFoundComponent} from "./pages/not-found/not-found.component";
+
+const appRoutes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'threads', component: ThreadsComponent},
+  { path: 'board', component: BoardsComponent },
+  { path: 'about', component: AboutComponent },
+  { path: '**', component: NotFoundComponent }
+]
+
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.css

@@ -1,4 +1,70 @@
-h1{
-    color: red;
-    font-size: 10rem;
+
+.main-container {
+  border: 2px solid rgba(124, 124, 124, 0.5);
+}
+
+.sidenav-content {
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.sidenav {
+  padding: 20px;
+  border: 1px solid rgba(25, 116, 211, 0.5);
+
+}
+
+.btn-sidebar-close{
+  float: right;
+  font-size: 45px;
+  font-weight: 600;
+}
+
+.navToggle-btn {
+  height: 40px;
+  color: #fff;
+  border-radius: 5px;
+  padding: 10px 25px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  display: inline-block;
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
+  7px 7px 20px 0px rgba(0,0,0,.1),
+  4px 4px 5px 0px rgba(0,0,0,.1);
+  outline: none;
+}
+.btn-14 {
+  background: rgb(255,151,0);
+  border: none;
+  z-index: 1;
+}
+.btn-14:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 0;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: 5px;
+  background-color: #ff0000;
+  background-image: linear-gradient(315deg, #000000 0%, #ff0000 74%);
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
+  transition: all 0.3s ease;
+}
+.btn-14:hover {
+  color: #ffffff;
+}
+.btn-14:hover:after {
+  top: auto;
+  bottom: 0;
+  height: 100%;
+}
+.btn-14:active {
+  top: 2px;
 }

src/app/app.component.html

@@ -0,0 +1,19 @@
+<div>
+  <app-snow style="overflow: hidden;"></app-snow>
+  <h1>Welcome, traveler.</h1>
+  <mat-drawer-container class="main-container" [autosize]="true" [hasBackdrop]="false">
+    <mat-drawer #drawer class="sidenav" mode="side" [mode]="'push'" [opened]="true" >
+      <span class="btn-sidebar-close"  (click)="drawer.toggle()">
+        &times;
+      </span >
+      <app-nav-bar></app-nav-bar>
+    </mat-drawer>
+    <div class="sidenav-content">
+      <button *ngIf="!drawer.opened" type="button" class = "navToggle-btn btn-14" (click)="drawer.toggle()">
+        Отобразить панель навигации
+      </button>
+      <br>
+      <router-outlet></router-outlet>
+    </div>
+  </mat-drawer-container>
+</div>

src/app/app.component.ts

@@ -1,17 +1,20 @@
 import { Component } from '@angular/core';
 
+
+
 @Component({
   selector: 'app-root',
-  template: `<div>
-        <h1>Welcome, traveler.</h1>
-        <nav>
-        <a routerLink = "">Главная </a>
-        <a routerLink = "about">О нас </a>
-        <a routerLink = "boards">Борда </a>
-        </nav>
-        <router-outlet></router-outlet>
-        </div>`
+  templateUrl: `app.component.html`,
+  styleUrls:['app.component.css']
 })
+
 export class AppComponent {
   title = 'Nedvach Angular';
+
+  ngOnInit(): void {
+  }
 }
+
+
+
+

src/app/app.module.ts

@@ -1,26 +1,27 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { Routes, RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 
 
+
 import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
-import { AboutComponent } from './about/about.component';
-import { BoardsComponent } from './boards/boards.component';
-import { NotFoundComponent } from './not-found/not-found.component';
+import { HomeComponent } from './pages/home/home.component';
+import { AboutComponent } from './pages/about/about.component';
+import { BoardsComponent } from './pages/SingleThread/boards.component';
+import { NotFoundComponent } from './pages/not-found/not-found.component';
 import { ApiChatService } from './services/api-chat.service';
 import { FormsModule } from '@angular/forms';
-import { SendPostComponent } from './send-post/send-post.component';
-import { PostComponent } from './boards/post/post.component'
-import { MinIoService } from "./services/min-io.service.";
+import { PostComponent } from './pages/SingleThread/post/post.component'
+import { ThreadsComponent } from './pages/BoardThreads/threads.component';
+import { OPComponent } from './pages/BoardThreads/op/op.component';
+import { AppRoutingModule } from './app-routing.module';
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NavBarComponent } from './pages/nav-bar/nav-bar.component';
+import { SendFormComponent } from './pages/send-form/send-form.component';
+import { SnowComponent } from './pages/snow/snow.component';
+
 
-const appRoutes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'boards', component: BoardsComponent },
-  { path: 'about', component: AboutComponent },
-  { path: '**', component: NotFoundComponent },
-]
 
 @NgModule({
   declarations: [
@@ -30,17 +31,23 @@ const appRoutes: Routes = [
     BoardsComponent,
     NotFoundComponent,
     PostComponent,
-    SendPostComponent
+    ThreadsComponent,
+    OPComponent,
+    NavBarComponent,
+    SendFormComponent,
+    SnowComponent
+
   ],
   imports: [
     BrowserModule,
-    RouterModule.forRoot(appRoutes),
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    AppRoutingModule,
+    MatSidenavModule,
+    BrowserAnimationsModule
   ],
   providers: [
-    ApiChatService,
-    MinIoService
+    ApiChatService
   ],
   bootstrap: [AppComponent]
 })

src/app/boards/boards.component.html

@@ -1,16 +0,0 @@
-<div class="wrappe">
-<img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150">
-<app-send-post></app-send-post>,
-<button (click)="refreshPosts()">Обновить</button>
-<post-single
-  *ngFor="let post of postsToShow" [post]="post"
-></post-single>
-<button (click)="refreshPosts()">Обновить</button>
-<br>
-<div class="hexagon">
-  <div class="hexagon-inside">
-    <div class="hexagon-image">
-    </div>
-  </div>
-</div>
-</div>

src/app/boards/boards.component.ts

@@ -1,34 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ApiChatService } from '../services/api-chat.service';
-import { HttpClient } from '@angular/common/http';
-import { SinglePost } from '../models/post'
-
-@Component({
-  selector: 'app-boards',
-  templateUrl: `./boards.component.html`,
-  styleUrls: [`./boards.component.css`]
-})
-export class BoardsComponent implements OnInit {
-  command: string = "";
-  response: any;
-  postsToShow: SinglePost[] = [] //products: Iproduct[] = data
-
-  constructor(public apiChatService: ApiChatService) {
-
-  }
-
-  refreshPosts() {
-    this.apiChatService.getPosts().subscribe(response => {
-      this.postsToShow = response
-    })
-  }
-
-  ngOnInit(): void {
-    this.apiChatService.getPosts().subscribe(response => {
-    this.postsToShow = response
-    })
-  }
-
-
-}
-

src/app/boards/post/post.component.html

@@ -1,5 +0,0 @@
-<div class="post">
-  <img src="http://static.vdk2ch.ru:15555/test-public/оладий.jpg" alt="anonpls" width="140"> #  {{post.Id}}
-  <h3>{{post.Timestamp}}</h3>
-  <h2>{{post.Text}}</h2>
-</div>

src/app/const/alert.ts

@@ -0,0 +1,20 @@
+const ALERT_SHOW_TIME = 5000;
+const showAlert = (message:string, color:string) => {
+  const alertContainer = document.createElement('div');
+  alertContainer.style.zIndex = '100';
+  alertContainer.style.position = 'fixed';
+  alertContainer.style.left = '50';
+  alertContainer.style.top = '0';
+  alertContainer.style.right = '0';
+  alertContainer.style.padding = '30px 3px';
+  alertContainer.style.fontSize = '20px';
+  alertContainer.style.textAlign = 'right';
+  alertContainer.style.backgroundColor = color;
+  alertContainer.style.border = "2px dashed #6CFFDD"
+  alertContainer.textContent = message;
+  document.body.append(alertContainer);
+  setTimeout(() => {
+    alertContainer.remove();
+  }, ALERT_SHOW_TIME);
+}
+export {showAlert}

src/app/const/api.ts

@@ -0,0 +1,3 @@
+//export const api_endpoint: string = 'http://api.vdk2ch.ru:5000/';
+export const api_endpoint: string = 'https://api.vdk2ch.ru/';
+//export const api_endpoint: string = 'http://localhost:7141/';

src/app/home/home.component.html

@@ -1 +0,0 @@
-<p>home works!</p>

src/app/models/boards.ts

@@ -0,0 +1,9 @@
+export interface Board {
+  BoardName: string,
+  BoardExplainedName: string,
+  BoardID: number,
+  ThreadCount: number,
+  PostCount: number
+}
+
+

src/app/models/picResponse.ts

@@ -0,0 +1,6 @@
+export interface IPicresponse {
+  contentType: null
+  serializerSettings: null
+  statusCode: null
+  value: string
+}

src/app/models/post.ts

@@ -2,5 +2,7 @@ export interface SinglePost {
   Timestamp: string
   Id: number
   Text: string
-
+  ImgURL: string[]
+  Thread_Id: number
+  Is_OP: boolean
 }

src/app/pages/BoardThreads/op/op.component.css

@@ -0,0 +1,21 @@
+.op {
+  padding:20px;
+  width: 500px;
+  word-break: break-word;
+  word-wrap: break-word;
+  margin-top: 6px;
+}
+
+.preview {
+  border-width: 1px;
+  border-color: rgb(190,190,190);
+  border-style: solid;
+  background-color: #F0D0B6;
+  border-radius: 5px;
+  padding:20px;
+  width: 500px;
+  word-break: break-word;
+  word-wrap: break-word;
+  margin-top: 6px;
+  margin-left: 7%;
+}

src/app/pages/BoardThreads/op/op.component.html

@@ -0,0 +1,10 @@
+<div class="op" [ngClass]="{op: op.Is_OP}" [ngClass]="{preview: !op.Is_OP}">
+  <a *ngIf="op.Thread_Id != 0" [routerLink] ="['/board']" [queryParams]="{thread: op.Thread_Id}" >Зайти в тред {{op.Thread_Id}} </a>
+  <p> # {{op.Id}} {{op.Timestamp}}</p>
+  <div>
+    <a *ngFor="let i of op.ImgURL" [href]="i" target="_blank">
+      <img [src]="setTimbnail(i)" style="height:140px">
+    </a>
+  </div>
+  <p>{{op.Text}}</p>
+</div>

src/app/pages/BoardThreads/op/op.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SendPostComponent } from './send-post.component';
+import { OPComponent } from './op.component';
 
-describe('SendPostComponent', () => {
-  let component: SendPostComponent;
-  let fixture: ComponentFixture<SendPostComponent>;
+describe('OPComponent', () => {
+  let component: OPComponent;
+  let fixture: ComponentFixture<OPComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SendPostComponent ]
+      declarations: [ OPComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(SendPostComponent);
+    fixture = TestBed.createComponent(OPComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/pages/BoardThreads/op/op.component.ts

@@ -0,0 +1,22 @@
+import {Component, Input, OnInit} from '@angular/core';
+import { SinglePost } from '../../../models/post';
+
+@Component({
+  selector: 'op-single',
+  templateUrl: './op.component.html',
+  styleUrls: ['./op.component.css']
+})
+export class OPComponent implements OnInit {
+
+  constructor() { }
+
+  @Input() op: SinglePost
+
+  setTimbnail(imgUrl:string){
+    return imgUrl.replace("thread-pics", "thread-pics-small");
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/BoardThreads/threads.component.html

@@ -0,0 +1,19 @@
+<h2>Вы находитесь на доске {{boardName}} </h2>
+<div>
+  <app-send-form [board]="boardName" (sendInfoToCreate)="createThread($event)">
+  </app-send-form>
+</div>
+<a (click)="showGuide = !showGuide" style=" font-size: small; color: chocolate; width: 500px;"> Что это и как это работает?</a>
+<br>
+<div *ngIf="showGuide">
+  Добро пожаловать в список доступных тредов. Выберите подходящий для вас тред и нажмите "войти в тред".
+</div>
+<br>
+<button (click)="refreshOPs(boardName)">Обновить</button>
+<div *ngFor="let oparrey of opsToShow">
+<op-single
+  *ngFor="let op of oparrey" [op]="op"
+></op-single>
+<hr>
+</div>
+<button (click)="refreshOPs(boardName)">Обновить</button>

src/app/pages/BoardThreads/threads.component.spec.ts

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

src/app/pages/BoardThreads/threads.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { showAlert } from 'src/app/const/alert';
+import {SinglePost} from "../../models/post";
+import {ApiChatService} from "../../services/api-chat.service";
+
+
+@Component({
+  selector: 'app-BoardThreads',
+  templateUrl: './threads.component.html',
+  styleUrls: ['./threads.component.css']
+})
+export class ThreadsComponent implements OnInit {
+
+  boardName:string = 'b'
+  command: string = "";
+  response: any;
+  opsToShow: SinglePost[][]
+  showGuide: boolean = false;
+
+  constructor(public apiChatService: ApiChatService) {
+  }
+
+  refreshOPs(boardName: string) {
+    this.apiChatService.getThreads(boardName).subscribe(response => {
+      this.opsToShow = response;
+      console.log(response);
+    })
+  }
+
+  createThread(tosend: any){
+    this.apiChatService.sendThreadToApi(tosend.text, tosend.images, this.boardName)
+  }
+
+  ngOnInit(): void {
+    this.apiChatService.getThreads(this.boardName).subscribe(response => {
+      this.opsToShow = response
+    })
+  }
+}
+
+

src/app/pages/SingleThread/boards.component.css

@@ -5,6 +5,7 @@
   background-color: rgb(143, 142, 142);
   color: #5d5d5d;
 }
-.wrapper {width: 800px;
-margin-left: auto;
-margin-right: auto;}
+.wrapper {
+  width: 800px;
+
+}

src/app/pages/SingleThread/boards.component.html

@@ -0,0 +1,21 @@
+<div class="wrapper">
+<img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150">
+<app-send-form [board]="boardName" (sendInfoToCreate)="sendPost($event)">
+</app-send-form>  
+<h2>Вы находитесь на доске {{boardName}} </h2>
+  <h3> в треде номер {{threadId}}</h3>
+  <a (click)="showGuide = !showGuide" style=" font-size: small; color: chocolate; width: 500px;"> Что это и как это работает?</a>
+  <br>
+  <br>
+  <button (click)="refreshPosts(boardName , threadId)">Обновить</button>
+<post-single
+  *ngFor="let post of postsToShow" [post]="post"
+></post-single>
+
+<div class="hexagon">
+  <div class="hexagon-inside">
+    <div class="hexagon-image">
+    </div>
+  </div>
+</div>
+</div>

src/app/pages/SingleThread/boards.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ApiChatService } from '../../services/api-chat.service';
+import { SinglePost } from '../../models/post'
+import * as vars from "../../const/api"
+import { showAlert } from 'src/app/const/alert';
+import {ActivatedRoute} from "@angular/router";
+
+@Component({
+  selector: 'app-SingleThread',
+  templateUrl: `./boards.component.html`,
+  styleUrls: [`./boards.component.css`]
+})
+export class BoardsComponent implements OnInit {
+  command: string = "";
+  response: any;
+  postsToShow: SinglePost[] = []
+  boardName:string = 'b';
+  showGuide: boolean = false;
+  threadId: number;
+
+  constructor(
+    public apiChatService: ApiChatService,
+    private activatedRoute:ActivatedRoute
+  ){
+
+  }
+  refreshPosts(boardName: string , threadId:number) {
+    this.apiChatService.getPosts(boardName, this.threadId).subscribe(response => {
+      this.postsToShow = response
+    })
+  }
+
+  sendPost(toSend: any){
+    console.log(`Получен эмит создания поста  с текстом ${toSend.text}`);
+    console.log("С картинками: " + toSend.images)
+    console.log("В тред " + this.threadId)
+
+    
+
+    this.apiChatService.sendPostToApi(toSend.text, toSend.images, this.threadId).subscribe( response => {
+      response = response.toString();
+      showAlert(response.toString(), "#ff0a36");
+      this.getThreadPosts();
+    });  
+  }
+
+  getThreadPosts(){
+    this.apiChatService.getPosts('postgres', this.threadId).subscribe(response => {
+      this.postsToShow = response
+      })
+  }
+
+  ngOnInit(): void {
+    this.threadId = parseInt(<string>this.activatedRoute.snapshot.queryParamMap.get('thread'));
+    this.getThreadPosts()
+  }
+}

src/app/pages/SingleThread/post/post.component.css

@@ -1,10 +1,21 @@
 .post {
-  border-width: 1;
+  white-space: pre-wrap;
+  border-width: 1px;
   border-color: rgb(190,190,190);
   border-style: solid;
   background-color: #F0D0B6;
   border-radius: 5px;
+  padding:20px;
   width: 500px;
   word-break: break-word;
   word-wrap: break-word;
+  margin-top: 6px;
+}
+
+.postText{
+
+}
+
+.postPictures{
+  padding: 5px;
 }

src/app/pages/SingleThread/post/post.component.html

@@ -0,0 +1,9 @@
+<div class="post">
+  <p> # {{post.Id}} {{post.Timestamp}}</p>
+  <div>
+    <a class="postPictures" *ngFor="let i of post.ImgURL" [href]="i" target="_blank">
+      <img [src]="setTimbnail(i)" style="height:140px">
+    </a>
+  </div>
+  <p class="postText">{{post.Text}}</p>
+</div>

src/app/pages/SingleThread/post/post.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { SinglePost } from '../../models/post';
+import { SinglePost } from '../../../models/post';
 
 
 
@@ -14,6 +14,11 @@ export class PostComponent implements OnInit {
 
 @Input() post: SinglePost
 
+
+  setTimbnail(imgUrl:string){
+    return imgUrl.replace("thread-pics", "thread-pics-small");
+  }
+
   ngOnInit(): void {
   }
 }

src/app/pages/about/about.component.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-            // двач лучший двач
-import { ApiChatService } from '../services/api-chat.service';
 
 @Component({
   selector: 'app-about',
@@ -8,12 +6,9 @@ import { ApiChatService } from '../services/api-chat.service';
   styleUrls: [`./about.component.css`]
 })
 export class AboutComponent implements OnInit {
-// это комментарий
 
   ngOnInit(): void {
-
-
-    console.log('ya tochno ne ta stroka chto budet v drugom commite!');
+    console.log('Yeah, you REALLY expect me to push changes without any console debugging?');
   }
 
 }

src/app/pages/home/home.component.html

@@ -0,0 +1 @@
+<img src="http://static.vdk2ch.ru:15555/test-public/sin.jpg">

src/app/pages/home/home.component.ts

@@ -2,11 +2,11 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  template: `<img src="http://static.vdk2ch.ru:15555/test-public/sin.jpg">`
-    
+  templateUrl: `home.component.html`,
+
 })
 export class HomeComponent implements OnInit {
-  title = 'Home компонент';
+  title = 'Напоминание';
 
 
 

src/app/pages/nav-bar/nav-bar.component.html

@@ -0,0 +1,10 @@
+<nav>
+  <a routerLink = "">Напоминание </a>
+  <br>
+  <a routerLink = "about">О нас </a>
+  <br>
+  Доски:
+  <div *ngFor="let board of boardsToList">
+    <a routerLink = "threads" title="{{board.BoardExplainedName}}">{{board.BoardName}}</a>
+  </div>
+</nav>

src/app/pages/nav-bar/nav-bar.component.spec.ts

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

src/app/pages/nav-bar/nav-bar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import {Board} from "../../models/boards";
+import {ApiChatService} from "../../services/api-chat.service";
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.css']
+})
+export class NavBarComponent implements OnInit {
+  boardsToList: Board[];
+
+
+  constructor(public apiChatService: ApiChatService) {
+  }
+
+  ngOnInit(): void {
+    this.boardsToList = this.apiChatService.getBoards()
+  }
+
+}

src/app/pages/send-form/send-form.component.css

@@ -0,0 +1,13 @@
+.posting_form {
+    border-width: 1px;
+    border-color: rgb(82, 77, 77);
+    border-style: solid;
+    background-color: #e7b58c;
+    border-radius: 5px;
+    width: 600px;
+    word-break: break-word;
+    word-wrap: break-word;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  

src/app/pages/send-form/send-form.component.html

@@ -0,0 +1,17 @@
+<h3 *ngIf="!showForm" (click)="showForm = !showForm">Открыть форму постинга</h3>
+<h3 *ngIf="showForm" (click)="showForm = !showForm" style="align-content: center">Скрыть форму постинга</h3>
+<div *ngIf="showForm" class="posting_form">
+    <h4>Создай то, о чем будут говорить многие в /{{board}}/.</h4>
+    <br>
+    <textarea type="text" rows="8" cols="45" placeholder="Печатать сюда" #textForm [(ngModel)] = "inputText"></textarea>
+    <p>
+      <button (click)="create()" >Отправить</button>
+    </p>
+    <h1>Загрузить картинку:</h1>
+    <input type="file" #file placeholder="Загрузить картинку" (change)="sendPic($event)" style="display:none;">
+    <button type="button" class="btn btn-success" (click)="file.click()">Загрузить картинку</button>
+    <div *ngFor="let singlePic of inputImages" >Картинка: {{singlePic}}</div>
+    <p>
+      <button (click)="eraseData()" >Отмена</button>
+    </p>
+</div>

src/app/pages/send-form/send-form.component.spec.ts

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

src/app/pages/send-form/send-form.component.ts

@@ -0,0 +1,54 @@
+import { Component, Output, EventEmitter, Input,  OnInit } from '@angular/core';
+import { showAlert } from 'src/app/const/alert';
+import { ApiChatService } from 'src/app/services/api-chat.service';
+
+@Component({
+  selector: 'app-send-form',
+  templateUrl: './send-form.component.html',
+  styleUrls: ['./send-form.component.css']
+})
+export class SendFormComponent implements OnInit {
+
+  @Input() board: string;
+  showForm:boolean = false;
+  inputText: string;
+  inputImages: string[] = [];
+
+  @Output() sendInfoToCreate = new EventEmitter();
+
+
+
+  constructor(
+    public apiChatService: ApiChatService) { }
+
+  create(){
+  var toSend =  {
+    text:  this.inputText,
+    images: this.inputImages
+  }
+    this.sendInfoToCreate.emit(toSend)
+    toSend.text = '';
+    toSend.images = [];
+    this.eraseData();
+  }
+
+  sendPic(event: any) {
+    this.apiChatService.sendpic(event.target.files[0]).subscribe(
+      response => {
+        response = response.value.toString();
+        this.inputImages.push(response);
+        showAlert(`Картинка ${response} добавлена`, "#ff0a36");
+      });
+  }
+
+  eraseData(){
+    this.inputImages = [];
+    this.inputText = '';
+
+  }
+
+  ngOnInit(): void {
+  }
+
+}
+

src/app/pages/snow/snow.component.html

@@ -0,0 +1,30 @@
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>
+<div class="snow">❅</div>

src/app/pages/snow/snow.component.scss

@@ -0,0 +1,48 @@
+@function random_range($min, $max) {
+    $rand: random();
+    $random_range: $min + floor($rand * (($max - $min) + 1));
+    @return $random_range;
+  }
+  
+
+
+  .snow {
+    $total: 30;
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    font-size: 50px;
+    border-radius: 50%;
+    pointer-events: none;
+    color: #f8f8f8;
+    z-index: 999999;
+    text-shadow: 1px 1px 1px #000000;
+  
+    @for $i from 1 through $total {
+      $random-x: random(1000000) * 0.0001vw;
+      $random-offset: random_range(-100000, 100000) * 0.0001vw;
+      $random-x-end: $random-x + $random-offset;
+      $random-x-end-yoyo: $random-x + ($random-offset / 2);
+      $random-yoyo-time: random_range(30000, 80000) / 100000;
+      $random-yoyo-y: $random-yoyo-time * 100vh;
+      $random-scale: random(10000) * 0.0001;
+      $fall-duration: random_range(10, 30) * 1s;
+      $fall-delay: random(30) * -1s;
+  
+      &:nth-child(#{$i}) {
+        opacity: random_range(2000, 8000) * 0.0001;
+        transform: translate($random-x, -10px) scale($random-scale);
+        animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
+      }
+  
+      @keyframes fall-#{$i} {
+        #{percentage($random-yoyo-time)} {
+          transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
+        }
+  
+        to {
+          transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
+        }
+      }
+    }
+  }

src/app/pages/snow/snow.component.spec.ts

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

src/app/pages/snow/snow.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-snow',
+  templateUrl: './snow.component.html',
+  styleUrls: ['./snow.component.scss']
+})
+export class SnowComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/send-post/send-post.component.css

@@ -1,10 +0,0 @@
-.send_post {
-  border-width: 1;
-  border-color: rgb(190,190,190);
-  border-style: solid;
-  background-color: #F0D0B6;
-  border-radius: 5px;
-  width: 500px;
-  word-break: break-word;
-  word-wrap: break-word;
-}

src/app/send-post/send-post.component.html

@@ -1,9 +0,0 @@
-<div class="send_post">
-  <h4>Поведай миру что-нибудь хорошее.</h4>
-  <textarea type="text" rows="8" cols="45" placeholder="Печатать сюда" #textToPost> </textarea>
-  <p>
-    <button (click)="sendPost(textToPost.value)">Отправить</button>
-  </p>
-  <h1>Загрузить картинку:</h1>
-    <input type="file" (change)="sendPic($event)">
-</div>

src/app/send-post/send-post.component.ts

@@ -1,26 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ApiChatService } from '../services/api-chat.service';
-import { MinIoService } from '../services/min-io.service.'
-
-@Component({
-  selector: 'app-send-post',
-  templateUrl: './send-post.component.html',
-  styleUrls: ['./send-post.component.css']
-})
-export class SendPostComponent implements OnInit {
-
-  constructor(public apiChatService: ApiChatService, public minIoService: MinIoService) {
-  }
-
-  sendPost(text: string) {
-    this.apiChatService.sendPostToApi(text).subscribe();
-  }
-
-  sendPic(event: any) {
-    this.minIoService.SendPicture(event);
-  }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/services/api-chat.service.ts

@@ -2,29 +2,72 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { SinglePost } from '../models/post';
+import { Board } from "../models/boards";
+import * as globals from '../const/api';
+
 
 @Injectable({
   providedIn: 'root'
 })
 export class ApiChatService {
+  se: any;
   constructor(private http: HttpClient) {
   }
 
-  getPosts(): Observable<SinglePost[]> {
-    console.log("Получаю данные из сервиса");
-    //return this.http.get<SinglePost[]>('http://api.vdk2ch.ru:5000/List/');
-    return this.http.get<SinglePost[]>('http://localhost:7141/List/');
+  getPosts(boardName: string, threadID: number): Observable<SinglePost[]> {
+    //console.log("Получаю посты и картинки");
+    return this.http.get<SinglePost[]>(globals.api_endpoint + 'List/', {params: {board: boardName, thread: threadID}});
   }
 
-    sendPostToApi(text: string) {
-    console.log("Отправляю пост...");
+  sendPostToApi(text: string, imgUrl: string[], threadId: number,) {
+    //console.log("Отправляю пост...");
     var postToSend =
-    {
-      Timestamp: text,
-      Id: 0,
-      Text: text
-    }
-      //return this.http.post('http://api.vdk2ch.ru:5000/PostTo', postToSend)
-      return this.http.post('http://localhost:7141/PostTo', postToSend)
+      {
+        Timestamp: "time",
+        Id: 0,
+        Text: text,
+        ImgURL: imgUrl,
+        Thread_Id: threadId
+      }
+    return this.http.post(globals.api_endpoint + 'PostTo', postToSend)
+  }
+
+  sendpic(picToSend: File): Observable<any> {
+    const PostPicture = new FormData();
+    PostPicture.append('PostPicture', picToSend);
+    return this.http.post(globals.api_endpoint + 'UploadPic', PostPicture)
+  }
+
+  getThreads(boardName: string): Observable<SinglePost[][]> {
+    //console.log("Получаю посты и картинки");
+    return this.http.get<SinglePost[][]>(globals.api_endpoint + 'Threads/', {params: {board: boardName}});
+  }
+
+  
+  sendThreadToApi(OPtext: string, OPimgUrl: string[], board: string,){
+    return alert("Попытка создания тред с оп-постом " + OPtext + " на доске " + board);
+  }
+
+  sampleBoardList = [
+{
+  BoardName: 'b',
+  BoardExplainedName: 'Всего понемногу',
+  BoardID: 228,
+  ThreadCount: 4,
+  PostCount: 4445
+},
+{
+      BoardName: 'vdk',
+      BoardExplainedName: 'Здесь живут тигры',
+      BoardID: 223,
+      ThreadCount: 1,
+      PostCount: 245
+}
+]
+
+  getBoards(): Board[] {
+    return this.sampleBoardList;
+    //return this.http.get<Board[]>(globals.api_endpoint + 'Boards/');
   }
 }
+

src/app/services/min-io.service..ts

@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from "@angular/common/http";
-import * as Minio from 'minio';
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MinIoService {
-  picToSend = null;
-
-
-
-  constructor(private http: HttpClient) {
-
-  }
-
-  SendPicture(event: any): void {
-    console.log(event.target.files[0].name);
-    console.log('Отправляю картинку сервисом...');
-
-  }
-
-
-}

src/app/services/min-io.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { MinIoService } from './min-io.service.';
-
-describe('MinIoServiceService', () => {
-  let service: MinIoService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(MinIoService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});