Refactor UI layout and enhance DeviceWidget visuals.

Replaced QVBoxLayout with QGridLayout for flexible positioning in `DeviceWidget`. Added overlays, labels, and interactive buttons to improve UI and functionality. Introduced new image assets for icons and removed unused files to optimize resources.

views/MainWindow.cpp

@@ -77,14 +77,14 @@ void MainWindow::createDevicePage() {
 
     auto *scrollArea = new QScrollArea(this);
     auto *contentWidget = new QWidget;
-    flowLayout = new FlowLayout(contentWidget);
+    flowLayout = new FlowLayout(contentWidget, 0, 0, 0);
-    flowLayout->setContentsMargins(0, 0, 0, 0);
+    // flowLayout->setContentsMargins(0, 0, 0, 0);
-    flowLayout->setSpacing(0);
+    // flowLayout->setSpacing(0);
 
     QVector<DeviceInfo> devices = DeviceDAO::getAllDevices(true);
     for (const auto &device: devices) {
         auto *deviceWidget = new DeviceWidget(device);
-        deviceWidget->setFixedSize(220, 400);
+        // deviceWidget->setFixedSize(220, 400);
         flowLayout->addWidget(deviceWidget);
     }
 

views/device/DeviceWidget.cpp

@@ -3,35 +3,129 @@
 #include <QLabel>
 #include <QPixmap>
 #include <QImage>
+#include <QPushButton>
+#include <QCoreApplication>
 
 DeviceWidget::DeviceWidget(const DeviceInfo &device, QWidget *parent): QWidget(parent) {
-    auto *layout = new QVBoxLayout(this);
+    auto *layout = new QGridLayout(this);
-
+    layout->setContentsMargins(2, 2, 2, 2);
-    this->setStyleSheet("background-color: lightgray;padding: 10px;");
+    layout->setSpacing(0);
+    this->setStyleSheet("background-color: lightgray;padding: 2px;");
 
     QImage img;
     img.loadFromData(device.image, "JPG");
 
     auto *imageLabel = new QLabel(this);
-    // qDebug() << "imageLabel" << img.width() ;
+    imageLabel->setPixmap(QPixmap::fromImage(img).scaled(300, 450, Qt::KeepAspectRatio, Qt::SmoothTransformation));
-    imageLabel->setPixmap(QPixmap::fromImage(img).scaled(200, 350, Qt::KeepAspectRatio, Qt::SmoothTransformation));
     imageLabel->setAlignment(Qt::AlignCenter);
-    layout->addWidget(imageLabel);
+    layout->addWidget(imageLabel, 0, 0);
 
-    const QString result = QString("%1, Android %2, battery %3% [%4x%5]")
+    auto *statusLabel = new QLabel(device.name, this);
-            .arg(device.name).arg(device.android).arg(device.battery).
-            arg(device.screenWidth).arg(device.screenHeight);
-
-    auto *statusLabel = new QLabel(result, this);
-    statusLabel->setAlignment(Qt::AlignCenter);
-    statusLabel->setMaximumWidth(200);
     statusLabel->setWordWrap(true);
+    statusLabel->setMaximumWidth(300);
+    statusLabel->setStyleSheet(
+        "background-color: rgba(0, 0, 0, 0.5);"
+        "color: white;"
+    );
+    // статус — в ту же ячейку, но поверх картинки и по углу
+    layout->addWidget(statusLabel, 0, 0, Qt::AlignTop | Qt::AlignLeft);
 
-    const QString styleSheet = QString("color: %1; font-weight: bold;")
+    auto *batteryLabel = new QLabel(QString("%1%").arg(device.battery), this);
-            .arg(device.status == "online" ? "green" : "red");
+    batteryLabel->setWordWrap(true);
-    statusLabel->setStyleSheet(styleSheet);
+    batteryLabel->setMaximumWidth(300);
+    batteryLabel->setStyleSheet(
+        "background-color: rgba(0, 0, 0, 0.5);"
+        "color: white;"
+    );
+    // статус — в ту же ячейку, но поверх картинки и по углу
+    layout->addWidget(batteryLabel, 0, 0, Qt::AlignTop | Qt::AlignRight);
 
-    // layout->setContentsMargins(10, 10, 10, 10);
+
-    layout->setSpacing(0);
+    auto *overlay = new QWidget(this);
-    layout->addWidget(statusLabel);
+    overlay->setAttribute(Qt::WA_TransparentForMouseEvents, false);
+    overlay->setStyleSheet("background: transparent;"); // сам фон прозрачный
+    // вертикальный лэйаут списка внутри overlay
+    auto *vbox = new QVBoxLayout(overlay);
+    vbox->setContentsMargins(2, 0, 0, 2);
+    vbox->setSpacing(2);
+
+    // пример трёх строк (можете генерировать их динамически)
+    for (int i = 0; i < 3; ++i) {
+        auto *rowWidget = new QWidget(overlay);
+        rowWidget->setContentsMargins(0, 0, 0, 0);
+        rowWidget->setStyleSheet(
+            "background-color: rgba(0, 0, 0, 0.6);" // полупрозрачный фон
+            "border-radius: 4px;" // скруглённые углы, если нужно
+        );
+
+        // вешаем на контейнер ваш QHBoxLayout
+        auto *hbox = new QHBoxLayout(rowWidget);
+        hbox->setContentsMargins(2, 1, 1, 1);
+        hbox->setSpacing(0);
+
+        auto *icon = new QLabel(overlay);
+        QPixmap pixmap(QCoreApplication::applicationDirPath() + "/images/alfa_icon.png");
+        icon->setPixmap(pixmap);
+        icon->setPixmap(pixmap.scaled(18, 18, Qt::KeepAspectRatio, Qt::SmoothTransformation));
+        icon->setStyleSheet(
+            "background-color: transparent;"
+            "margin: 0px;"
+        );
+
+
+        auto *label = new QLabel(QString("Банк %1").arg(i + 1), overlay);
+        label->setStyleSheet(
+            "background-color: transparent;"
+            "margin: 0px;"
+            "font-size: 10px;"
+            "color: white;"
+        );
+
+        auto *circle = new QLabel(overlay);
+        circle->setFixedSize(12, 12);
+        circle->setStyleSheet(
+            "margin: 0px;"
+            "background-color: red; "
+            "border-radius: 6px;"
+        );
+
+        // 3) две кнопки
+        auto *btn1 = new QPushButton(overlay);
+        QIcon btnIcon(QCoreApplication::applicationDirPath() + "/images/turn_on.png");
+        btn1->setIcon(btnIcon);
+        btn1->setIconSize(QSize(16, 16));
+        btn1->setFlat(true);
+        btn1->setStyleSheet(
+        "margin: 0px;"
+            "background-color: transparent;"
+            "border: none;"
+        );
+
+        auto *btn2 = new QPushButton(overlay);
+        QIcon btn2Icon(QCoreApplication::applicationDirPath() + "/images/cogwheel.png");
+        btn2->setIcon(btn2Icon);
+        btn2->setIconSize(QSize(16, 16));
+        btn2->setFlat(true);
+        btn2->setStyleSheet(
+        "margin: 0px;"
+            "background-color: transparent;"
+            "border: none;"
+        );
+
+
+        // собираем
+        hbox->addWidget(icon);
+        hbox->addWidget(label);
+        hbox->addWidget(circle);
+        hbox->addWidget(btn1);
+        hbox->addWidget(btn2);
+
+        hbox->addStretch();
+        vbox->addWidget(rowWidget);
+    }
+    vbox->addStretch();
+
+    // кладём overlay в ту же ячейку, что и картинку,
+    // но выравниваем его по левому-нижнему углу
+    layout->addWidget(overlay, 0, 0, Qt::AlignLeft | Qt::AlignBottom);
 }