Ви повинні розробити мережеву панель керування за допомогою Python та Flask.

Панель керування — це вебсторінка, яка відображає інформацію зрозумілим і наочним способом. У цьому завданні вам буде надано приклади даних про різні пристрої в мережі, а також потрібно використовувати Flask і Jinja для презентації цієї інформації.

Метою не є створення справжньої системи моніторингу вже зараз. Насамперед тут ви будете практикувати:

• Flask
• маршрути (routes)
• шаблони (templates)
• передачу інформації з Python у HTML
• перевірки if та цикли for у Jinja
• створення чистого та зручного інтерфейсу вебсторінки

Дані, які ви можете використовувати ✅

devices = [
    {
        "name": "Головні маршрутизатори",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Маршрутизатори",
        "status": "online",
        "response_time": 12,
        "location": "Серверна кімната",
        "last_checked": "14:32:10",
        "uptime": "12 днів",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Основний маршрутизатор мережі"
    },
    {
        "name": "Веб-сервер",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Сервер",
        "status": "online",
        "response_time": 34,
        "location": "Серверна кімната",
        "last_checked": "14:32:12",
        "uptime": "4 дні",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Працює внутрішній вебсайт"
    },
    {
        "name": "Принтер",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Принтер",
        "status": "offline",
        "response_time": None,
        "location": "Клас 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Невідомо",
        "notes": "Не відповів під час останньої перевірки"
    },
    {
        "name": "ПК вчителя",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Комп'ютер",
        "status": "online",
        "response_time": 18,
        "location": "Клас 204",
        "last_checked": "14:32:16",
        "uptime": "6 годин",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Сервер зберігання даних",
        "status": "warning",
        "response_time": 87,
        "location": "Серверна кімната",
        "last_checked": "14:32:18",
        "uptime": "38 днів",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Високий час відповіді"
    }
]

Вам не потрібно показувати всю інформацію. Самі вирішіть, що підходить для вашої панелі керування. Ви також можете змінити, додати або видалити дані, якщо хочете, або вважаєте, що деякі дані неточні (наприклад, можливо, час безвідмовної роботи має бути в секундах? 🤔).

Завдання

1. Створіть панель керування

Створіть вебсторінку, яка відображає інформацію про пристрої в мережі.

Те, як має виглядати панель керування, залежить від вас.

Ви можете, наприклад, використовувати:

• картки для кожного пристрою
• таблиці
• індикатори стану
• розділи
• іконки
• кольори
• статистику або зведення

Панель керування повинна бути легкою для сприйняття при відкритті сторінки.

2. Використання Flask та маршрутів

Застосунок має використовувати Flask.

Ви повинні мати принаймні:

• один маршрут для відображення головної сторінки/дашборду
• один додатковий маршрут із іншою функцією

Те, для чого буде використаний додатковий маршрут, ви визначаєте самостійно.

Наприклад, він може:

• відображати інформацію про певний пристрій
• показувати лише офлайн-пристрої
• відображати окрему сторінку стану
• показувати більш детальну інформацію
• відображати просту сторінку «Про застосунок»

3. Використання шаблонів

HTML-сторінки мають бути розміщені у папці з назвою templates.

Дані слід передавати від коду на Python до шаблона за допомогою Flask. Ви повинні використовувати Jinja для динамічного відображення інформації.

Рішення має містити:

• змінні
• цикл for
• перевірку if

Тобто, ви не повинні вручну вводити інформацію про всі пристрої в код HTML.

4. Відображайте статус чітко

Дашборд має полегшувати перегляд стану пристроїв.

Наприклад:

• 🟢 У мережі
• 🟡 Попередження
• 🔴 Не в мережі

Ви можете використовувати текст, CSS, іконки або інші візуальні рішення.

5. Зробіть дашборд власним

Не існує єдиного правильного способу вирішити це завдання.

Подумайте над таким:

• Яка інформація найважливіша?
• Що користувач має бачити першим?
• Чого не потрібно показувати?
• Як можна чітко відобразити статус?
• Як сторінку зробити впорядкованою, навіть якщо пристроїв багато?
• Ви можете використовувати CSS та за потреби JavaScript, якщо хочете цього.

Вимоги

Рішення має:

• використовувати Python і Flask
• містити щонайменше два роути (маршрути)
• використовувати щонайменше один шаблон HTML
• передавати дані з Python у шаблон
• використовувати Jinja
• містити щонайменше одну петлю <emp>for</emp>
• містити щонайменше одну перевірку <emp>if</emp>
• відображати кілька записів із набору даних
• мати чіткий спосіб показу статусу

Готово?

Доставка