Simple-SSE-Server/src/qml-client/qml/main.qml

127 lines
3.0 KiB
QML

import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Material
import Qt.labs.settings
ApplicationWindow {
id: window
width: 800
height: 600
visible: true
title: Qt.application.name
Settings {
category: "ApplicationWindow"
property alias x: window.x
property alias y: window.y
property alias width: window.width
property alias height: window.height
}
Settings {
category: "settings"
property alias nrOfElements: nrOfElements.value
}
Settings{
id: settings
}
property int counter: 0
property bool online: false
function add(entry){
var diff = data.count - nrOfElements.value+1
if( diff > 0 )
data.remove(0, diff)
data.append( entry )
}
function update(event){
console.log(event)
}
function fetch(){
console.log("Try to fetch...")
var last_response_len = 0;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1/stream', true); // method, adress, async
xhr.setRequestHeader('Accept', 'text/event-stream');
xhr.onreadystatechange = console.log( xhr.readyState )
xhr.onprogress = () => {
var responseText = xhttxhrp.response.substr(last_response_len);
last_response_len = xhr.response.length;
update( responseText )
}
xhr.send()
}
ListModel{
id: data
}
Timer{
id: reconnect
interval: 3000
repeat: true
running: false
onTriggered: fetch()
}
Component.onCompleted: {
fetch()
}
header: RowLayout{
Label{
Layout.alignment: Qt.AlignLeft
text: 'Nr of Elements: ' + nrOfElements.value
}
Slider{
Layout.alignment: Qt.AlignLeft
id: nrOfElements
from: 5
to: 25
stepSize: 1
onValueChanged: {
while( data.count > value )
{
data.remove(0, 1);
}
}
}
Rectangle{
Layout.alignment: Qt.AlignLeft
id: status
property bool online: window.online
width: 100
height: 30
color: online ? 'green' : 'red'
radius: 5
Label{
anchors.centerIn: parent
text: parent.online ? 'Online' : 'Offline'
}
}
Button{
text: "Test"
onClicked: {
counter++;
var txt = "Counter " + counter
window.add( {type: "Message", txt: txt} )
}
}
Item{
Layout.fillWidth: true
}
}
ListView{
anchors.fill: parent
model: data
delegate: Label{
text: type + ' : ' + txt
}
}
}