Ви маєте розробити мережеву панель керування, використовуючи 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.

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

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

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

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

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

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

HTML-сторінки мають знаходитися в папці з назвою templates.

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

Рішення має включати:

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

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

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

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

Наприклад:

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

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

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

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

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

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

Вимоги

Рішення має:

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

Готово?

Доставка