6412 Косенко М.Р. Лаб.2 Вар.3

.editorconfig

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

.gitignore

@@ -0,0 +1,64 @@
+src/assets/data_allsettlements_anon_156_v20251217.csv
+
+# Angular
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node.js
+/node_modules
+npm-debug.log
+yarn-error.log
+package-lock.json
+yarn.lock
+
+# IDE
+/.vscode
+/.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store
+
+# Angular CLI
+/.angular
+/.ng
+
+# Environment files
+/src/environments/*.ts
+!/src/environments/environment.ts
+!/src/environments/environment.prod.ts
+
+# Build artifacts
+/dist
+/e2e
+/coverage
+
+# Testing
+/coverage
+/.nyc_output
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Optional
+.idea/
+.vscode/
+*.sublime-*

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

README.md

@@ -1,61 +1,27 @@
-# Безопасность веб-приложений. Лабораторка №2
+# Прогноз погоды
 
-## Схема сдачи
-
-1. Получить задание
-2. Сделать форк данного репозитория
-3. Выполнить задание согласно полученному варианту
-4. Сделать PR (pull request) в данный репозиторий 
-6. Исправить замечания после code review
-7. Получить approve 
-8. Прийти на занятие и защитить работу
-
-Что нужно проявить в работе:
-- умение разработать завершенное целое веб-приложение, с клиентской и серверной частями (допустимы открытые АПИ)
-- навыки верстки на html в объеме 200-300 тегов
-- навыки применения css для лейаута и стилизации, желательно с адаптацией к мобилке
-- использование jQuery или аналогичных JS-фреймворков
-- динамическая подгрузка контента
-- динамическое изменение DOM и CSSOM
-
-Если у вас своя идея по заданию, то расскажите, обсудим и подкорректирую.
-
-## Вариант 1. Расписания
-
-Сделать аналог раздела https://ssau.ru/rasp?groupId=531030143
-
-Какие нужны возможности:
-- справочники групп, табличные данные по расписаниям добывать с настоящего сайта на серверной стороне приложения
-- в клиентскую часть подгружать эти сведения динамически по JSON-API
-- обеспечить возможность смотреть расписания в разрезе группы или препода
-- обеспечить возможность выбора учебной недели (по умолчанию выбирается автоматически)
-
-## Вариант 2. Аналог Прибывалки для электричек
-
-Сделать веб-версию Прибывалки, только для электричек
-
-Какие нужны возможности:
-- находить желаемую ЖД-станцию поиском по названию и по карте
-- отображать расписания всех проходящих поездов через выбранную станцию
-- отображать расписания для поездов между двумя станциями
-- работа через АПИ Яндекс.Расписаний https://yandex.ru/dev/rasp/doc/ru/ (доступ получите сами)
-- хорошая работа в условиях экрана смартфона
-- бонус: функция "любимых остановок"
-
-## Вариант 3. Прогноз погоды
-
-Сделать одностраничный сайт с картой, на которой можно выбрать населенный пункт и получить прогноз погоды на несколько дней по нему.
-
-Какие нужны возможности:
- - увидеть на карте точки с населенными пунктами. Координаты населенных пунктов взять из https://tochno.st/datasets/allsettlements - но все 150 тысяч не нужно, выберите 1 тысячу с самым большим населением.
- - при нажатии на точку получить всплывающее окошко с графиками изменения температуры, осадков, силы ветра. API для прогнозов возьмите с https://projecteol.ru/ru/ с соблюдением правил.
- - графики рисовать каким-нибудь приличным компонентом, например, https://www.chartjs.org/
- - находить населенный пункт по названию
- - можете реализовать с собственным серверным компонентом или придумать, как обойтись без него
+Веб-приложение для просмотра прогноза погоды по городам России. Приложение использует карту с маркерами городов, поиск и модальные окна для отображения детальной информации.
 
+## Возможности
 
+- 🗺️ Интерактивная карта с маркерами 1000 крупнейших городов России
+- 🔍 Поиск городов по названию
+- 📊 Детальный прогноз погоды на 7 дней
+- 📈 Графики температуры и осадков
+- 🌡️ Текущая погода: температура, осадки, ветер, влажность
+- 📱 Адаптивный дизайн для мобильных устройств
 
+## Технологии
 
+- Angular 17+
+- Leaflet для карт
+- Chart.js для графиков
+- Open-Meteo API для данных о погоде
 
+## Установка и запуск
 
+### Клонирование репозитория
 
+```bash
+npm install
+ng serve

angular.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "weather-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "weather-app:build:production"
+            },
+            "development": {
+              "buildTarget": "weather-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "weather-app",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "packageManager": "npm@10.9.2",
+  "dependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@types/leaflet": "^1.9.21",
+    "chart.js": "^4.5.1",
+    "leaflet": "^1.9.4",
+    "papaparse": "^5.5.3",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.2.6",
+    "@angular/cli": "^21.2.6",
+    "@angular/compiler-cli": "^21.2.0",
+    "@types/papaparse": "^5.5.2",
+    "jsdom": "^28.0.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient()
+  ]
+};