Right dock that show data from a layer (#75)

* Create README.md

* Add files via upload

* Update README.md

Added driver_tutorial to the main Readme

* Update tour.css

* Update tour.js

* Update tour.js

Update tour.js with shepherd.js

* Update tour.css

Update tour.css with shepherd classes

* Update README.md

Update readme for shepherd.js

* Create README.md

* Add transparency script

Enable you to change the transparency of all checked layers

* Update README.md

Add change_opacity

* Update README.md

* Delete library/ui/change_opacity directory

* Update README.md

* Create data_table.js

Enable user to add a table of a specific layer and statistics

* Create README.md

Creation of readme for data_table

* Update README.md

Update readme and add "Dispaly a right-docked table of data"

* Update README.md

* Add demo.gif

Add demo.gif

* Update README.md

Add ![guided-tour](./demo.gif)

* Update README.md

Change on Popup Metadata

* Update tour.js

Remove french text to english text

* Add demo.png

* Update README.md

Add demo.png

* Create README.md

This UI can enable user to map data from an excel table

* Create table-dock.js

Main UI

* Create table-dock.css

* Create table-XY.js

Enable user to map data from X and Y field

* Update table-XY.js

* Update table-dock.js

* Create table-style.js

Change the style of layers

* Update README.md

* Update README.md

* Update README.md

* Update table-XY.js

Update for the worker

* Create workerXY.js

* Update table-dock.js

Update with current bootstrap for lizmap

* Update table-XY.js

Add the workerXY

* Update README.md

* Delete library/ui/map-excel directory

* Delete library/ui/driver_tutorial directory

* Update data_table.js

Translate some texte from french to english.

Author: altheaFeu

README.md

@@ -72,6 +72,7 @@ the script was written.
 ### UI
 
 * [Add documentation](./library/ui/add_documentation) with buttons and a dock
+* [Display a right-docked table of data](./library/ui/data_table)
 * [Background selector](./library/ui/background_selector), like on Google Maps
 * [Hide value popup](./library/ui/hide_value_popup)
 * [Measure tool custom style](./library/ui/measure_tool_custom_style)

library/ui/data_table/README.md

@@ -0,0 +1,5 @@
+# Data Display
+
+![donnees](./demo.png)
+
+This script retrieves data from a given URL containing GeoJSON data, dynamically creates an HTML table with the fetched data, and displays it in a Lizmap user interface.

library/ui/data_table/data_table.js

@@ -0,0 +1,101 @@
+lizMap.events.on({
+    'uicreated': function () {
+
+        // Change the URL from your own data
+        const URL = 'https://url/index.php/lizmap/service/?repository=your_repositoryu&project=your_project&SERVICE=WFS&REQUEST=GetFeature&VERSION=your_version&TYPENAME=your_layerOUTPUTFORMAT=GeoJSON';
+        const NAME = "Nom de la couche"
+
+        var html = '<div id="statistic_content"></div>';
+        lizMap.addDock(
+            'table_dock',
+            `Table of ${NAME}`,
+            'right-dock',
+            html,
+            'icon-signal'
+        );
+
+        try {
+            const promise = getData(URL);
+
+            // Handle promise resolution
+            promise.then(features =>{
+                // Extract property names from the first feature
+                const propertyNames = Object.keys(features[0].properties);
+                const tableRows = [];
+
+                // Create table header using property names
+                const tableHeader = `
+                    <thead>
+                        <tr>
+                            ${propertyNames.map(propertyName => `<th>${propertyName}</th>`).join('')}
+                        </tr>
+                    </thead>
+                `;
+
+                // Add rows to the table
+                features.forEach(feature => {
+                    const row = `
+                        <tr>
+                            ${propertyNames.map(propertyName => `<td>${feature.properties[propertyName]}</td>`).join('')}
+                        </tr>
+                    `;
+                    tableRows.push(row);
+                });
+
+                // Update the style of your table
+                const tableStyle = `
+                    <style>
+                        table#table-data {
+                            width: 100%;
+                            border-collapse: collapse;
+                            border: 1px solid;
+                            color:white;
+                        }
+                        #table-data th, #table-data td {
+                            padding: 8px;
+                            text-align: left;
+                            border-bottom: 1px solid #ddd;
+                        }
+                        table#table-data th {
+                            background-color: grey;
+                        }
+                    </style>
+                `;
+                
+                // Get to the table container
+                const tableContainer = $('#statistic_dock');
+
+                // Add the content of the table
+                tableContainer.html(`
+                    ${tableStyle}
+                    <table id="table-data">
+                        ${tableHeader}
+                        ${tableRows.join('')}
+                    </table>
+                `);
+                
+            })        
+        }catch (error) {
+            console.error('An error occurred during processing: ', error);
+        }
+
+    }
+})
+
+// Asynchronous function to get data
+async function getData(url) {
+    try {
+        const response = await fetch(url); 
+
+        if (!response.ok) {
+            throw new Error(`HTTP Error! Status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data.features;
+
+    } catch (error) {
+       console.error('An error occurred while retrieving the data', error);
+       throw error; 
+   }
+};