First try implementing charts

evcharger-app/i18n/qml_de.ts

@@ -1757,7 +1757,27 @@
         <translation>Informationen</translation>
     </message>
     <message>
-        <location filename="../qml/InformationsTabPage.qml" line="48"/>
+        <location filename="../qml/InformationsTabPage.qml" line="20"/>
+        <source>Idle</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../qml/InformationsTabPage.qml" line="41"/>
+        <source>HEADERS_RECEIVED</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../qml/InformationsTabPage.qml" line="43"/>
+        <source>LOADING</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../qml/InformationsTabPage.qml" line="56"/>
+        <source>Request started...</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../qml/InformationsTabPage.qml" line="101"/>
         <source>Download informations</source>
         <translation>Informationen herunterladen</translation>
     </message>

evcharger-app/qml/InformationsTabPage.qml

@@ -15,6 +15,77 @@ ScrollableTabPage {
         text: qsTr("Informations")
     }
 
+    Text {
+        id: statusText
+        text: qsTr("Idle")
+    }
+
+    ApiKeyValueHelper {
+        id: dataApiKeyValueHelper
+        deviceConnection: theDeviceConnection
+        apiKey: "data"
+    }
+
+    QtObject {
+        property var xhr: undefined
+        property bool requestAgain: false
+
+        property var parsed: typeof dataApiKeyValueHelper.value === 'string' || dataApiKeyValueHelper.value instanceof String ?
+                                 JSON.parse(dataApiKeyValueHelper.value) : undefined
+        property var url: parsed ? parsed.url + "&title=title&chartTitle=chartTitle&scale=1&width=" + (page.width-30) + "&app_id=1&&lang=de" : undefined
+        onUrlChanged: {
+            if (!url)
+                return;
+
+            if (xhr) {
+                console.log('enqueued new request')
+                requestAgain = true
+                return
+            }
+
+            console.log('started new request')
+            xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
+                    statusText.text = qsTr("HEADERS_RECEIVED");
+                } else if(xhr.readyState === XMLHttpRequest.LOADING) {
+                    statusText.text = qsTr("LOADING");
+                } else if(xhr.readyState === XMLHttpRequest.DONE) {
+                    try {
+                        var object = JSON.parse(xhr.responseText.toString());
+
+                        imagesRepeater.model = object.images;
+
+                        statusText.text = qsTr("DONE!" + ('images' in object ? ' images' : '') + ('chartData' in object ? ' chartData' : ''));
+                    } catch (e) {
+                        statusText.text = qsTr("DONE, but exception: " + e);
+                    }
+
+                    xhr = undefined
+                    if (requestAgain) {
+                        requestAgain = false
+                        onUrlChanged()
+                    }
+                }
+            }
+            statusText.text = qsTr("Request started...");
+            xhr.open("GET", url);
+            xhr.send();
+        }
+    }
+
+    Repeater {
+        id: imagesRepeater
+        visible: false
+        Layout.fillWidth: true
+
+        Image {
+            Layout.fillWidth: true
+            x: -30
+            source: "data:image/svg+xml;utf8," + modelData
+        }
+    }
+
     Repeater {
         model: 5