Alisa/native/MainPage.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 2.15
import QtQuick.Controls 2.15

Rectangle {
    SystemPalette { id: activeColors; colorGroup: SystemPalette.Active }
    SystemPalette { id: inactiveColors; colorGroup: SystemPalette.Inactive }
    SystemPalette { id: disabledColors; colorGroup: SystemPalette.Disabled }

    function getColors() {
        return root.active ? activeColors : inactiveColors;
    }

    property string authToken: ""

    signal logout()

    Rectangle {
        id: s1
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        height: 50
        color: getColors().midlight

        TextField {
            anchors{
            verticalCenter: s1.verticalCenter
            rightMargin: 5
            right: loginB.left
            }

            placeholderText: qsTr("Search")

        }

        Button{
            id: loginB
            anchors{
                verticalCenter: s1.verticalCenter
                rightMargin: 10
                right: s1.right
            }
            text: qsTr("Logout")

            onClicked: {
                logout();
            }
        }
    }

    Rectangle{
        id: s2
        anchors {
            top: s1.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        color: getColors().window

        ListModel {
            id: apiDataModel
        }

        ListView {
            anchors {
                topMargin: 5
                fill: s2
            }
            clip: true
            boundsBehavior: Flickable.StopAtBounds

            model: apiDataModel

            delegate: Item {
                width: parent.width
                height: 50

                Row {
                    spacing: 10

                    Text {
                        text: model.name
                        color: getColors().text
                    }

                    Text {
                        text: model.key
                        color: getColors().text
                    }
                    Text {
                        text: model.amount
                        color: getColors().text
                    }
                    Text {
                        text: model.start
                        color: getColors().text
                    }
                    Text {
                        text: model.end
                        color: getColors().text
                    }
                    Text {
                        text: model.group
                        color: getColors().text
                    }
                }
            }
        }
    }

    Component.onCompleted: {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://api.clan-war.net/api/v1/licenses");
        xhr.setRequestHeader("Authorization", "Bearer " + authToken);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var jsonResponse = JSON.parse(xhr.responseText);

                    apiDataModel.clear();
                    for (var i = 0; i < jsonResponse.length; i++) {
                        for (var ii = 0; ii < jsonResponse[i].licenses.length; ii++) {
                            apiDataModel.append({
                                group: jsonResponse[i].name,
                                name: jsonResponse[i].licenses[ii].name,
                                start: jsonResponse[i].licenses[ii].start ?? "Indefinitely",
                                end: jsonResponse[i].licenses[ii].end ?? "Indefinitely",
                                amount: jsonResponse[i].licenses[ii].amount ?? "∞",
                                key: jsonResponse[i].licenses[ii].key
                            });
                        }
                    }
                } else {
                    console.log("Error: " + xhr.status);
                }
            }
        }
        xhr.send();
    }
}