path: root/main.qml

/*
 * This file is part of Remote Support Desktop
 * https://gitlab.das-netzwerkteam.de/RemoteWebApp/remote-support-desktop
 * Copyright 2020-2021 Daniel Teichmann <daniel.teichmann@das-netzwerkteam.de>
 * Copyright 2020-2021 Mike Gabriel <mike.gabriel@das-netzwerkteam.de>
 * SPDX-License-Identifier: GPL-2.0-or-later
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the
 * Free Software Foundation, Inc.,
 * 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Extras 1.4
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Material 2.3

ApplicationWindow {
    readonly property int normal_width: 650
    readonly property int normal_height: 500
    readonly property bool inPortrait: window.width < window.height

    /*
    // Make window not resizeable
    maximumWidth: normal_width * 1.25
    maximumHeight: normal_height * 1.25*/

    // Make window not resizeable
    minimumWidth: 400
    minimumHeight: 460

    width: normal_width
    height: normal_height

    id: window
    visible: true
    title: qsTr("Remote Support for your Desktop")

    onClosing: {
        mainqmladaptor.onCloseHandler();
    }

    function minimizeWindow() {
        showMinimized();
        console.log("Miniming window now...");
    }

    function showWindow() {
        showNormal();
        console.log("Opening window now...");
    }

    MessageDialog {
        id: message_dialog
        objectName: "message_dialog"
        title: qsTr("Remote Support for your Desktop")
        text: qsTr("You are not supposed to see this message.\nThis is a bug.")
        icon: StandardIcon.Critical
    }

    Connections {
        target: mainqmladaptor
        onShowToastSignal: {
            toast.show(text, durationMs)
        }
    }

    Connections {
        target: mainqmladaptor
        onShowMessageDialogChanged: {
            message_dialog.visible = show
        }
    }


    Item {
        id: main_content
        anchors.leftMargin: 0
        anchors.top: top_menu_bar_frame.bottom
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.topMargin: 0

        StackView {
            id: main_content_view

            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.leftMargin: !inPortrait ? (window.width * 0.25) : 0
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.topMargin: 0

            Label {
                id: dbus_api_status_text
                text: "Unknown state of Service"
                anchors.leftMargin: 10 + 5 + dbus_api_status_indicator.width
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 11
                fontSizeMode: Text.Fit
                objectName: "dbus_api_status_text"
                anchors.left: parent.left

                StatusIndicator {
                    id: dbus_api_status_indicator
                    width: height
                    height: parent.height
                    objectName: "dbus_api_status_indicator"
                    color: "#73d216"
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.left
                    anchors.rightMargin: 5
                    active: false
                }
            }

            Label {
                id: explain_function_label
                text: qsTr("Please tell your remote support partner your access address and your access-PIN to let your partner connect to this computer.")
                font.pixelSize: 18
                fontSizeMode: Text.VerticalFit
                wrapMode: Text.WordWrap
                anchors.left: parent.left
                anchors.leftMargin: 10
                anchors.top: parent.top
                anchors.topMargin: 10
                anchors.right: parent.right
                anchors.rightMargin: 10
                horizontalAlignment: Text.AlignLeft
                enabled: false

                color: Material.theme == Material.Light ? "#000000" : "#FFFFFF"
            }

            Rectangle {
                id: dbus_api_status_line
                y: 379
                height: 1
                radius: 1
                anchors.right: parent.right
                anchors.rightMargin: 10
                anchors.bottom: dbus_api_status_text.top
                anchors.bottomMargin: 10
                opacity: 0.3
                gradient: Gradient {
                    GradientStop {
                        position: 0.391
                        color: "#ffffff"
                    }

                    GradientStop {
                        position: 0.975
                        color: "#8b8b8b"
                    }
                }
                border.width: 1
                border.color: "#00000000"
                anchors.left: parent.left
                anchors.leftMargin: 10
            }

            Column {
                id: column
                spacing: 5
                anchors.right: parent.right
                anchors.rightMargin: 10
                anchors.left: parent.left
                anchors.leftMargin: 10
                anchors.bottom: dbus_api_status_line.top
                anchors.bottomMargin: 10
                anchors.top: explain_function_label.bottom
                anchors.topMargin: 10

                Column {
                    id: url_group
                    width: parent.width
                    height: parent.height * 0.25
                    spacing: 5

                    Label {
                        id: your_url_text
                        height: parent.height/2
                        text: qsTr("Remote Support Address")
                        verticalAlignment: Text.AlignBottom
                        horizontalAlignment: Text.AlignLeft
                        font.pointSize: 14
                        fontSizeMode: Text.Fit
                    }

                    TextEdit {
                        id: url_text
                        height: parent.height/2
                        text: mainqmladaptor.url
                        anchors.rightMargin: 10 + copy_url_to_clipboard_button.width
                        anchors.right: parent.right
                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                        anchors.leftMargin: 10
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignLeft
                        font.pointSize: 15
                        /*fontSizeMode: Text.Fit

                        background: Rectangle {
                            color: Material.theme == Material.Light ? "#F0F0F0" : "#383838"
                            radius: 5
                        }*/
                        readOnly: true
                        color: Material.foreground
                        //wrapMode: Text.WordWrap
                        selectByMouse: true
                        font.bold: true
                        anchors.left: parent.left

                        Button {
                            id: copy_url_to_clipboard_button
                            width: copy_url_to_clipboard_image.width + 6
                            height: copy_url_to_clipboard_image.height + 6 + 10
                            anchors.verticalCenter: parent.verticalCenter
                            display: AbstractButton.IconOnly
                            anchors.leftMargin: 5
                            anchors.left: url_text.right
                            highlighted: false
                            flat: true

                            Image {
                                id: copy_url_to_clipboard_image
                                x: 0
                                y: -26
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.verticalCenter: parent.verticalCenter
                                source: "images/into-clipboard.svg"
                                opacity: 0.65
                            }

                            onClicked: {
                                mainqmladaptor.handleCopyToClipboardButtonClick(url_text.text);
                                toast.show(qsTr("Copied access address into clipboard!"), "1000");
                            }

                            ToolTip.text: qsTr("Copy the access address into the clipboard")
                            hoverEnabled: true

                            ToolTip.delay: 1000
                            ToolTip.timeout: 5000
                            ToolTip.visible: hovered
                        }
                    }
                }

                Column {
                    id: pin_group
                    width: parent.width
                    height: parent.height * 0.25
                    spacing: 5

                    Label {
                        id: your_pin_text
                        height: parent.height/2
                        text: qsTr("Access-PIN")
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: 0
                        font.pointSize: 14
                        verticalAlignment: Text.AlignBottom
                        horizontalAlignment: Text.AlignLeft
                    }

                    TextEdit {
                        objectName: "pin_text"
                        id: pin_text
                        height: parent.height/2
                        text: mainqmladaptor.pin
                        font.weight: Font.Bold
                        font.bold: true
                        anchors.rightMargin: 10 + copy_pin_to_clipboard_button.width
                        anchors.right: parent.right
                        font.pointSize: 20
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        font.letterSpacing: 10
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                        /*fontSizeMode: Text.Fit

                        background: Rectangle {
                            color: Material.theme == Material.Light ? "#F0F0F0" : "#383838"
                            radius: 5
                        }*/
                        readOnly: true
                        color: Material.foreground
                        wrapMode: Text.WordWrap
                        selectByMouse: true

                        Button {
                            id: copy_pin_to_clipboard_button
                            width: copy_pin_to_clipboard_image.width + 6
                            height: copy_pin_to_clipboard_image.height + 6 + 10
                            anchors.verticalCenter: parent.verticalCenter
                            flat: true
                            display: AbstractButton.IconOnly
                            anchors.left: pin_text.right
                            anchors.leftMargin: 5

                            Image {
                                id: copy_pin_to_clipboard_image
                                anchors.verticalCenter: parent.verticalCenter
                                opacity: 0.65
                                anchors.horizontalCenter: parent.horizontalCenter
                                source: "images/into-clipboard.svg"
                                fillMode: Image.PreserveAspectFit
                            }

                            onClicked: {
                                mainqmladaptor.handleCopyToClipboardButtonClick(pin_text.text);
                                toast.show(qsTr("Copied PIN into clipboard!"), "1000");
                            }

                            ToolTip.text: qsTr("Copy the pin into the clipboard")
                            hoverEnabled: true

                            ToolTip.delay: 1000
                            ToolTip.timeout: 5000
                            ToolTip.visible: hovered
                        }
                    }
                }

                Column {
                    id: session_id_group
                    width: parent.width
                    height: parent.height * 0.25
                    spacing: 5

                    Label {
                        id: your_session_id_text
                        height: parent.height/2
                        text: qsTr("Session-ID")
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: 0
                        font.pointSize: 14
                        verticalAlignment: Text.AlignBottom
                        horizontalAlignment: Text.AlignLeft
                        fontSizeMode: Text.Fit
                    }

                    TextEdit {
                        objectName: "session_id_text"
                        id: session_id_text
                        height: parent.height/2
                        text: mainqmladaptor.session_id
                        font.weight: Font.Bold
                        font.bold: true
                        font.letterSpacing: 10
                        anchors.rightMargin: 10 + copy_session_id_to_clipboard_button.width
                        anchors.right: parent.right
                        font.pointSize: 20
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                        /*fontSizeMode: Text.Fit

                        background: Rectangle {
                            color: Material.theme == Material.Light ? "#F0F0F0" : "#383838"
                            radius: 5
                        }*/
                        readOnly: true
                        color: Material.foreground
                        wrapMode: Text.WordWrap
                        selectByMouse: true

                        Button {
                            id: copy_session_id_to_clipboard_button
                            width: copy_session_id_to_clipboard_image.width + 6
                            height: copy_session_id_to_clipboard_image.height + 6 + 10
                            anchors.verticalCenter: parent.verticalCenter
                            flat: true
                            display: AbstractButton.IconOnly
                            anchors.left: session_id_text.right
                            anchors.leftMargin: 5

                            Image {
                                id: copy_session_id_to_clipboard_image
                                opacity: 0.65
                                anchors.verticalCenter: parent.verticalCenter
                                source: "images/into-clipboard.svg"
                                fillMode: Image.PreserveAspectFit
                            }

                            onClicked: {
                                mainqmladaptor.handleCopyToClipboardButtonClick(pin_text.text);
                                toast.show(qsTr("Copied session-ID into clipboard!"), "1000");
                            }

                            ToolTip.text: qsTr("Copy the session-ID into the clipboard")
                            hoverEnabled: true

                            ToolTip.delay: 1000
                            ToolTip.timeout: 5000
                            ToolTip.visible: hovered
                        }
                    }
                }

                Button {
                    id: start_support_button
                    height: Math.min(70, parent.height * 0.222)
                    objectName: "start_support_button"
                    text: qsTr("Start remote support session")
                    anchors.right: parent.right
                    anchors.rightMargin: 0
                    checkable: true

                    onClicked: mainqmladaptor.handleConnectButtonClick(checked);
                }
            }
        }
    }

    ToastManager {
        id: toast
        anchors.leftMargin: inPortrait ? 0 : parent.width * 0.25
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.top: parent.top
    }

    Connections {
        target: mainqmladaptor
        onMessageDialogTextChanged: {
            message_dialog.text = text
        }
    }


    Connections {
        target: mainqmladaptor
        onMessageDialogTitleChanged: {
            message_dialog.title = title
        }
    }

    Connections {
        target: mainqmladaptor
        onMessageDialogIconChanged: {
            message_dialog.icon = iconindex
        }
    }

    Drawer {
        id: sidebar_drawer
        y: top_menu_bar_frame.height

        width: !inPortrait ? (window.width * 0.25) : (window.width * 0.5)
        height: window.height - top_menu_bar_frame.height

        modal: inPortrait
        interactive: inPortrait
        position: inPortrait ? 0 : 1
        dragMargin: 1
        margins: -2
        visible: !inPortrait

        ListView {
            id: sidebar_listview
            boundsBehavior: Flickable.StopAtBounds
            interactive: true
            clip: true
            anchors.fill: parent

            footer: ItemDelegate {
                id: footer
                text: "  " + qsTr("Settings")
                width: parent.width

                onClicked: {
                    if (inPortrait) {
                        sidebar_drawer.close()
                    }
                }

                MenuSeparator {
                    parent: footer
                    width: parent.width
                    anchors.verticalCenter: parent.top
                }
            }

            model: 5
            delegate: ItemDelegate {
                text: qsTr("Title %1").arg(index + 1)
                width: parent.width
                onClicked: {
                    if (inPortrait) {
                        sidebar_drawer.close()
                    }
                }
            }

            ScrollIndicator.vertical: ScrollIndicator { }
        }
    }

    /*Rectangle {
        id: side_menu
        width: parent.width * 0.333
        color: "#ffffff"
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: top_menu_bar_frame.bottom
        anchors.topMargin: 0

        visible: !inPortrait

        Drawer {
            x: side_menu.x
            y: side_menu.y
            width: side_menu.width
            height: side_menu.height
            modal: inPortrait
            interactive: inPortrait
            position: inPortrait ? 0 : 1
            //visible: true
            visible: !inPortrait
        }
    }*/


    Material.theme: theme.position < 1 ? Material.Light : Material.Dark

    ToolBar {
        id: top_menu_bar_frame
        width: parent.width
        height: parent.height * 0.10

        background: Rectangle {
            color: parent.Material.background
            border.color: parent.Material.background
        }
        Material.background: "#0d5eaf"
        Material.foreground: "#ffffff"

        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0

        Switch {
            id: theme
            width: 150
            implicitWidth: 100
            visible: !inPortrait

            height: parent.height
            anchors.margins: 10
            text: qsTr("Dark theme")
            anchors.left: parent.left
            anchors.verticalCenterOffset: 0
            anchors.leftMargin: 0
            anchors.verticalCenter: parent.verticalCenter
            checked: true
        }

        Label {
            id: header_text
            width: 1
            height: parent.height
            color: "#ffffff"
            text: qsTr("Allow Remote Control")
            anchors.left: theme.right
            anchors.leftMargin: 5
            horizontalAlignment: Text.AlignRight
            padding: 5
            font.family: "Verdana"
            font.pointSize: 20
            fontSizeMode: Text.Fit
            verticalAlignment: Text.AlignVCenter
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.verticalCenter: parent.verticalCenter
        }

        Button {
            id: burger_button
            width: 50
            height: parent.height + 10
            visible: inPortrait


            text: "≡"
            checkable: false
            font.pointSize: 24
            flat: true
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.verticalCenter: parent.verticalCenter
            enabled: !sidebar_drawer.opened

            onClicked: {
                sidebar_drawer.open()
                enabled: false
            }
        }

    }



    /*    TabBar {
        id: side_menu
        width: parent.width * 0.3333
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: top_menu_bar_frame.bottom
        anchors.topMargin: 0

        TabButton {
            id: firstBtn
            text: "Erster Knopf"

            width: side_menu.width
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0

            onClicked: {

            }
        }

        TabButton {
            id: secondBtn
            text: "Zweiter Knopf"

            width: side_menu.width
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: firstBtn.bottom
            anchors.topMargin: 0
        }

        TabButton {
            id: thirdBtn
            text: "Dritter Knopf"

            width: side_menu.width
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: secondBtn.bottom
            anchors.topMargin: 0
        }

        visible: true

        background: Rectangle {
            color: Material.theme == Material.Light ? "#e5f1fd" : "#0b4a8a"
            anchors.fill: parent
        }
    }
*/

}