Problem with transfer web-based layer to QGIS

Question

Following this question;

Cannot extract the WMS tiles to arbitrary GIS format

I have managed to transfer one of the infrastructure blocks to QGIS, because the website has an option to export it as the .csv file, and what is the most important - it includes the geometry, where we can easily transfer it to QGIS. We must only select the features we need. They are marked blue.

Unfortunately, the first feature (as you can see) feature doesn't have the geometry (marked red in the second feature below).

in turn, I cannot place it in QGIS

I have tried to inspect the webpage, which results are under this link:

https://i.sstatic.net/nmzIn.jpg

By the looking at the proper code, I tried to inspect the JavaScript "responsible for" selection of the data, and potentially forming the output table. I did the right-click and chosen "Copy JS source" where I received:

document.querySelector("#cdk-accordion-child-15 > div > div:nth-child(1) > div:nth- 
child(2) > div.cursor.ng-star-inserted > button > span > mat-icon > i")

for structures

and

document.querySelector("#cdk-accordion-child-15 > div > div:nth-child(1) > div:nth-child(1) > div.unselect.ng-star-inserted > button > span > mat-icon > i")

for ducts.

It is possible to create the geometry section programmatically on this website?

A similar scenario was discussed here:

Fetching the on-click data from the website into QGIS

where the Chrome JavaScript snippet was created. Would it work on the same basis in the website, which makes the infrastructure map available after login?

UPDATE:

The website has expanded the interface recently, although still no geometry for lines provided.

Answer 1

I have a non-perfect solution using Python (in QGIS) and JavaScript (in browser).

In browser:

Open DevTools (Ctrl+Shift+I) > Sources > Snippets > New Snippet > Paste the following code and run.

console.log = (...x) => {
    if (x[0] == "featuresofSTRCUATMTttttt"){
        a = JSON.stringify(x[1]);
        navigator.clipboard.writeText(a);
    }
}

Details: When you select a/multiple line(s) or point(s), the website returns a response JSON data, which includes the related line(s)/point(s) information (seperate JSONs for line and point) and write to the DevTools console (This makes our job easier). The script gets the related part of the printed text and copy it to the clipboard. Actually, we define here a new function overriding the console.log function.

---

In QGIS:

Paste the following script to Python Editor and run.

try: QApplication.clipboard().dataChanged.disconnect()
except: pass

def create_layer(name, type, geojson_data):   
    layer = QgsVectorLayer(type+ "?crs=EPSG:27700", name, "memory")
    fields = QgsJsonUtils.stringToFields(geojson_data)
    layer.dataProvider().addAttributes(fields.toList())
    layer.updateFields()
    QgsProject.instance().addMapLayer(layer)
    
    return layer

def add_features(geojson_data, geom_type):
    if geom_type == QgsWkbTypes.LineGeometry:
        try: 
            layer = QgsProject.instance().mapLayersByName("Ducts")[0]
        except IndexError:
            layer = create_layer("Ducts", "LineString", geojson_data)
            
    elif geom_type == QgsWkbTypes.PointGeometry:
        try: 
            layer = QgsProject.instance().mapLayersByName("Structures")[0]
        except IndexError:
            layer = create_layer("Structures", "Point", geojson_data)
            
    else:
        raise Exception("Unexpected geometry")
            
    fields = QgsJsonUtils.stringToFields(geojson_data)
    features = QgsJsonUtils.stringToFeatureList(geojson_data, fields, None)
    with edit(layer):
        layer.addFeatures(features)
        layer.updateExtents()


def clipboard_changed():
    geojson_data = QApplication.clipboard().text()
    
    features = QgsJsonUtils.stringToFeatureList(geojson_data, QgsFields(), None)
    if len(features) > 0:
        geom_type = features[0].geometry().type()
        add_features(geojson_data, geom_type)
    else:
        print("no features found")

QApplication.clipboard().dataChanged.connect(clipboard_changed)

Details: After JavaScript copies the json data to the clipboard, Python script gets that JSON data, parses as features using QgsJsonUtils.stringToFeatureList and add them to the related layer.

Limitation: JS code gets the text written in the console, which comes from the response data (JSON) from the server. If the developers stop writing the response data to the console, the code won't work anymore. Actually, the response JSON is displayed in DevTools > Network page, but I couldn't get that using JS.

---

Maximum features limit is 50 in the website. If you select a large arae, some features won't be selected.

No need to worry about CRS. The response data (JSON) includes CRS information.

Demo: