WaterLevelSensor/SettingsPopup.qml

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

Popup {
    id: settings_popup
    signal saveConfig(config: var)
    property color accent_color: "#00000000"
    property int font_enlarged_text_size: 20
    property int font_normal_text_size: 16
    property var config: {
        "max": 0,
        "min": 0,
        "alert": 0,
        "interval": 0,
        "url": "none"
    }

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

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


        Text {
            id: max_thres_label
            text: "Max Threshold:  "
            anchors {
                topMargin: 20
                top: settings_label.bottom
                left: parent.left
                verticalCenter: max_thres_input.verticalCenter
            }
            height: max_thres_input.height
            verticalAlignment: Text.AlignVCenter
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }

        TextField {
            id: max_thres_input
            text: config.max
            anchors {
                right: parent.right
                rightMargin: 5
                top: settings_label.bottom
                topMargin: 20
            }
            width: parent.width / 2
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }


        Text {
            id: min_thres_label
            text: "Min Threshold:  "
            anchors {
                topMargin: 20
                top: max_thres_label.bottom
                left: parent.left
                verticalCenter: min_thres_input.verticalCenter
            }
            height: min_thres_input.height
            verticalAlignment: Text.AlignVCenter
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }

        TextField {
            id: min_thres_input
            text: config.min
            anchors {
                right: parent.right
                rightMargin: 5
                top: max_thres_label.bottom
                topMargin: 20
            }
            width: parent.width / 2
            color: root.accent_color
            font.pointSize: root.font_normal_text_size
        }


        Text {
            id: alert_thres_label
            text: "Alert Percentage: "
            anchors {
                topMargin: 20
                top: min_thres_label.bottom
                left: parent.left
                verticalCenter: alert_thres_input.verticalCenter
            }
            height: alert_thres_input.height
            verticalAlignment: Text.AlignVCenter
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }

        TextField {
            id: alert_thres_input
            text: config.alert
            anchors {
                right: parent.right
                rightMargin: 5
                top: min_thres_label.bottom
                topMargin: 20
            }
            width: parent.width / 2
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }

        Text {
            id: interval_label
            text: "Update Interval: "
            anchors {
                topMargin: 20
                top: alert_thres_label.bottom
                left: parent.left
                verticalCenter: interval_input.verticalCenter
            }
            height: interval_input.height
            verticalAlignment: Text.AlignVCenter
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }


        TextField {
            id: interval_input
            text: config.interval
            anchors {
                right: parent.right
                rightMargin: 5
                top: alert_thres_input.bottom
                topMargin: 20
            }
            width: parent.width / 2
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }

        Text {
            id: http_url_label
            text: "Url: "
            anchors {
                topMargin: 20
                top: interval_label.bottom
                left: parent.left
                verticalCenter: http_url_input.verticalCenter
            }
            height: http_url_input.height
            verticalAlignment: Text.AlignVCenter
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
        }

        TextField {
            id: http_url_input
            text: config.url
            anchors {
                right: parent.right
                rightMargin: 20
                leftMargin: 20
                top: interval_input.bottom
                topMargin: 20
            }
            width: Math.max(parent.width / 2, parent.width - http_url_label.width - anchors.leftMargin)
            color: settings_popup.accent_color
            font.pointSize: settings_popup.font_normal_text_size
            cursorPosition: 0
        }

        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);
                    var new_config = {"max": max, "min": min, "alert": alert, "url": url, "interval": interval}
                    settings_popup.saveConfig(new_config)
                    settings_popup.close();
                }
                onReleased: {
                    save_config.color = settings_rect_pressed_prev
                }
            }

        }
    }
}