WaterLevelSensor/SettingsPopup.qml

import QtQuick
import QtQuick.Effects
import QtQuick.Controls
import QtQuick.Controls.Material

Popup {
    id: settings_popup
    signal saveConfig(config: var)
    signal deleteConfig()
    property color accent_color: "#00000000"
    property int font_enlarged_text_size: 20
    property int font_normal_text_size: 16
    property color background_color: "#00000000"
    property var config: {
        "max": 0,
        "min": 0,
        "alert": 0,
        "interval": 0,
        "url": "none",
        "water_tank_width": 2,
        "water_tank_height": 1.3,
        "rate_of_fill_enable": true,
        "current_reading_enable": true,
        "percentage_enable": true,
        "filling_status_enable": true,
        "expected_to_fill_enable": true,
        "accent_color": "F05FAF5F",
        "dark_accent_color": "FF5F7F5F",
        "danger_color": "F0AF2F1F",
        "water_color": "F00F7FAF",
        "water_color_above_alert": "F00FAF0F",
        "background_color": "1F1F1F",
        "font_normal_text_size": 16,
        "font_enlarged_text_size": 20
    }

    background: Rectangle {
        color: "#F0121212"
        radius: 5
        border.color: settings_popup.accent_color
        border.width: 1
    }
    height: Math.max(parent.height / 1.6, contentHeight)
    width: parent.width / 1.2
    anchors.centerIn: Overlay.overlay
    Rectangle {
        id: settings_base
        anchors.fill: parent
        color: "#F0121212"

        ScrollView {
            id: rect_base_scroll_view
            anchors {
                top: parent.top
                horizontalCenter: parent.horizontalCenter
                bottom: save_config.top
                bottomMargin: 10
            }
            width: parent.width
            clip: true

            // Use contentWidth and contentHeight to define the scrollable area
            contentWidth: availableWidth
            contentHeight: settings_column.height

            Column {
                id: settings_column
                width: rect_base_scroll_view.width
                spacing: 20

                Text {
                    id: settings_label
                    text: "Settings"
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                    color: settings_popup.accent_color
                    font.pointSize: settings_popup.font_enlarged_text_size
                }

                // Max Threshold
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Max Threshold:  "
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: max_thres_input.verticalCenter
                        }

                    }
                    TextField {
                        id: max_thres_input
                        text: config.max
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Min Threshold
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Min Threshold:  "
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: min_thres_input.verticalCenter
                        }

                    }
                    TextField {
                        id: min_thres_input
                        text: config.min
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Alert Threshold
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Alert Threshold: "
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: alert_thres_input.verticalCenter
                        }

                    }
                    TextField {
                        id: alert_thres_input
                        text: config.alert
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Update Interval
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Update Interval: "
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: interval_input.verticalCenter
                        }
                    }
                    TextField {
                        id: interval_input
                        text: config.interval
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // URL
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Url: "
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: http_url_input.verticalCenter
                        }

                    }
                    TextField {
                        id: http_url_input
                        text: config.url
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        cursorPosition: 0
                    }
                }

                // Tank Image Width
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Tank Image Width"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: water_tank_width_input.verticalCenter
                        }

                    }
                    TextField {
                        id: water_tank_width_input
                        text: String(config.water_tank_width)
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        cursorPosition: 0
                    }
                }

                // Tank Image Height
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Tank Image Height"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: water_tank_height_input.verticalCenter
                        }
                    }
                    TextField {
                        id: water_tank_height_input
                        text: String(config.water_tank_height)
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        cursorPosition: 0
                    }
                }

                // Accent Color
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Accent Color"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: accent_color_input.verticalCenter
                        }
                    }
                    ColorInput {
                        id: accent_color_input
                        text: config.accent_color
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Dark Accent Color
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Dark Accent Color"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: dark_accent_color_input.verticalCenter
                        }
                    }
                    ColorInput {
                        id: dark_accent_color_input
                        text: config.dark_accent_color
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Danger Color
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Danger Text Color"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: danger_color_input.verticalCenter
                        }
                    }
                    ColorInput {
                        id: danger_color_input
                        text: config.danger_color
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Water Color
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Water Color"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: water_color_input.verticalCenter
                        }
                    }
                    ColorInput {
                        id: water_color_input
                        text: config.water_color
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Alert Water Color
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Alert Water Color"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: water_color_above_alert_input.verticalCenter
                        }
                    }
                    ColorInput {
                        id: water_color_above_alert_input
                        text: config.water_color_above_alert
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Background Color
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Backgound Color"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: background_color_input.verticalCenter
                        }
                    }
                    ColorInput {
                        id: background_color_input
                        text: config.background_color
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                    }
                }

                // Normal Font Size
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Font Size"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: font_normal_text_size_input.verticalCenter
                        }
                    }
                    TextField {
                        id: font_normal_text_size_input
                        text: String(config.font_normal_text_size)
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        cursorPosition: 0
                    }
                }

                // Header Font Size
                Row {
                    width: parent.width
                    spacing: 10
                    Text {
                        text: "Header Font Size"
                        width: parent.width * 0.4
                        verticalAlignment: Text.AlignVCenter
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        anchors {
                            verticalCenter: font_enlarged_text_size_input.verticalCenter
                        }
                    }
                    TextField {
                        id: font_enlarged_text_size_input
                        text: String(config.font_enlarged_text_size)
                        width: parent.width * 0.55
                        color: settings_popup.accent_color
                        font.pointSize: settings_popup.font_normal_text_size
                        cursorPosition: 0
                    }
                }

                // CheckBox
                CustomCheckBox {
                    id: current_reading_enable
                    checked: config.current_reading_enable
                    font_color: settings_popup.accent_color
                    font_point_size: settings_popup.font_normal_text_size
                    text: "Enable Current Reading"
                    leftPadding: 0
                }

                // CheckBox
                CustomCheckBox {
                    id: percentage_enable
                    checked: config.percentage_enable
                    font_color: settings_popup.accent_color
                    font_point_size: settings_popup.font_normal_text_size
                    text: "Enable Percentage Reading"
                    leftPadding: 0
                }

                // CheckBox
                CustomCheckBox {
                    id: filling_status_enable
                    checked: config.filling_status_enable
                    font_color: settings_popup.accent_color
                    font_point_size: settings_popup.font_normal_text_size
                    text: "Enable Filling Status"
                    leftPadding: 0
                }

                // CheckBox
                CustomCheckBox {
                    id: rate_of_fill_enable
                    checked: config.rate_of_fill_enable
                    font_color: settings_popup.accent_color
                    font_point_size: settings_popup.font_normal_text_size
                    text: "Enable Text Rate of Fill"
                    leftPadding: 0
                }

                // CheckBox
                CustomCheckBox {
                    id: expected_to_fill_enable
                    checked: config.expected_to_fill_enable
                    font_color: settings_popup.accent_color
                    font_point_size: settings_popup.font_normal_text_size
                    text: "Enable Expected to fill"
                    leftPadding: 0
                }

                ConnectButton {
                    id: delete_config_button
                    width: parent.width / 1.5
                    height: 80
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }

                    font_color: settings_popup.accent_color
                    font_enlarged_text_size: settings_popup.font_enlarged_text_size
                    font_normal_text_size: settings_popup.font_normal_text_size
                    color: settings_popup.background_color
                    accent_color: settings_popup.accent_color
                    text: "Delete/Reset Config"
                    text2: text
                    onConnect: {
                        settings_popup.deleteConfig();
                    }
                }
            }
        }
        Rectangle {
            id: save_config
            anchors {
                topMargin: 10
                bottom: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
            color: "#F0121212"
            width: parent.width / 1.3
            height: 60
            border {
                width: 1
                color: settings_popup.accent_color
            }
            radius: 3

            Text {
                anchors.centerIn: parent
                text: "Save"
                color: settings_popup.accent_color
                font.pointSize: settings_popup.font_enlarged_text_size
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                property color settings_rect_pressed_prev: "#00000000"
                property color settings_rect_entered_prev: "#00000000"
                onEntered:  {
                    settings_rect_entered_prev = save_config.color
                    save_config.color = "#5A1F1F1F"
                }
                onExited: {
                    save_config.color = settings_rect_entered_prev
                }
                onPressed: {
                    settings_rect_pressed_prev = save_config.color
                    save_config.color = "#5A1F4F1F"
                    let max = parseFloat(max_thres_input.text);
                    let min = parseFloat(min_thres_input.text);
                    let alert = parseFloat(alert_thres_input.text);
                    let url = http_url_input.text;
                    let interval = parseInt(interval_input.text);
                    let image_width = parseFloat(water_tank_width_input.text);
                    let image_height = parseFloat(water_tank_height_input.text);

                    let current_reading = current_reading_enable.checked;
                    let percentage_reading = percentage_enable.checked
                    let filling_status = filling_status_enable.checked;
                    let rate_of_fill = rate_of_fill_enable.checked;
                    let expected_to_fill = expected_to_fill_enable.checked;

                    let normal_font_size = parseInt(font_normal_text_size_input.text);
                    let enlarged_font_size = parseInt(font_enlarged_text_size_input.text);

                    let accent_color = accent_color_input.text;
                    let dark_accent_color = dark_accent_color_input.text;
                    let danger_color = danger_color_input.text;
                    let water_color = water_color_input.text;
                    let water_color_above_alert = water_color_above_alert_input.text;
                    let background_color = background_color_input.text;

                    var new_config = {"max": max, "min": min, "alert": alert, "url": url,
                        "interval": interval,
                        "water_tank_height": image_height,
                        "water_tank_width": image_width,
                        "current_reading_enable": current_reading,
                        "percentage_enable": percentage_reading,
                        "filling_status_enable": filling_status,
                        "rate_of_fill_enable": rate_of_fill,
                        "expected_to_fill_enable": expected_to_fill,
                        "font_normal_text_size": normal_font_size,
                        "font_enlarged_text_size": enlarged_font_size,
                        "accent_color": accent_color,
                        "dark_accent_color": dark_accent_color,
                        "danger_color": danger_color,
                        "water_color": water_color,
                        "water_color_above_alert": water_color_above_alert,
                        "background_color": background_color
                    }
                    settings_popup.saveConfig(new_config)
                    settings_popup.close();
                }
                onReleased: {
                    save_config.color = settings_rect_pressed_prev
                }
            }
        }
    }
}