Source: components/webgis/reboot/subcomponents/FieldMeasurementPopup.js

import React from 'react';
import config from '../../../../config'
import getTranslation from '../../../../i18n/'

/**
 * The popup window for field measurement data
 * @param {*} props 
 */
function FieldMeasurementPopup(props) {

    const location = Object.keys(props.data).filter(key => key !== 'measurements' && key !== 'coordinates');
    const downloadurl = config.downloadUrl
    
    return (
        <div className="field-measurement">
            <h2>{getTranslation("webgis.field_measurements.location")}</h2>
            <table cellSpacing="0">
                <tbody>
                {location.map((key) =>
                    <tr key={key}>
                        <td>{getTranslation("webgis.field_measurements_"+key)}</td>
                        <td>{props.data[key]}</td>
                    </tr>
                )}
                </tbody>
            </table>
            <h2>{getTranslation("webgis.field_measurements.measurements")}</h2>
            {props.data.measurements.map((measured, index) =>
                <React.Fragment key={index}>
                    <table cellSpacing="0">
                        <tbody>
                        {Object.keys(measured).map((key, index) =>
                            <React.Fragment key={'a-'+key+index}>
                            {measured[key] &&
                            <tr key={key+index}>
                                <td>{getTranslation("webgis.field_measurements_"+key)}</td>
                                <td>{key === 'm_link_to_document' ? measured[key] !== '' ? <a href={downloadurl+measured[key]}>Download</a> : '-' : measured[key]}</td>
                            </tr>
                            }
                            </React.Fragment>
                        )}
                        </tbody>
                    </table>
                    <div className="field-measurements-between"></div>
                </React.Fragment>
            )}  
        </div>     
    )
}

export default FieldMeasurementPopup