GeoNames - Earthquakes & Weather

<?php

    function curl( $url=NULL, $options=NULL, $headers=false ){
        $vbh = fopen('php://temp', 'w+');

        session_write_close();

        $curl=curl_init();
        curl_setopt( $curl, CURLOPT_URL, trim( $url ) );
        curl_setopt( $curl, CURLOPT_AUTOREFERER, true );
        curl_setopt( $curl, CURLOPT_FOLLOWLOCATION, true );
        curl_setopt( $curl, CURLOPT_FAILONERROR, true );
        curl_setopt( $curl, CURLOPT_HEADER, false );
        curl_setopt( $curl, CURLINFO_HEADER_OUT, false );
        curl_setopt( $curl, CURLOPT_RETURNTRANSFER, true );
        curl_setopt( $curl, CURLOPT_BINARYTRANSFER, true );
        curl_setopt( $curl, CURLOPT_CONNECTTIMEOUT, 20 );
        curl_setopt( $curl, CURLOPT_TIMEOUT, 60 );
        curl_setopt( $curl, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; Win64; x64)' );
        curl_setopt( $curl, CURLOPT_MAXREDIRS, 10 );
        curl_setopt( $curl, CURLOPT_ENCODING, '' );
        curl_setopt( $curl, CURLOPT_VERBOSE, true );
        curl_setopt( $curl, CURLOPT_NOPROGRESS, true );
        curl_setopt( $curl, CURLOPT_STDERR, $vbh );


        /* Assign runtime parameters as options to override defaults if needed. */
        if( isset( $options ) && is_array( $options ) ){
            foreach( $options as $param => $value ) {
                curl_setopt( $curl, $param, $value );
            }
        }
        /* send any headers with the request that are needed */
        if( $headers && is_array( $headers ) ){
            curl_setopt( $curl, CURLOPT_HTTPHEADER, $headers );
        }
        /* Execute the request and store responses */
        $res=(object)array(
            'response'  =>  curl_exec( $curl ),
            'status'    =>  curl_getinfo( $curl, CURLINFO_RESPONSE_CODE ),
            'info'      =>  (object)curl_getinfo( $curl ),
            'errors'    =>  curl_error( $curl )
        );
        rewind( $vbh );
        $res->verbose=stream_get_contents( $vbh );
        fclose( $vbh );
        curl_close( $curl );
            sa
        return $res;
    }


    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();
        $json=array();

        $baseurl='http://api.geonames.org';
        $args=array(
            'formatted' =>  true,
            'username'  =>  'XXXXXXXX',
            'style'     =>  'full'
        );

        switch( $_POST['task'] ){
            case 'weatherObservations': $endpoint='weatherJSON'; break;
            case 'earthquakes': $endpoint='earthquakesJSON'; break;
        }

        unset( $_POST['task'] );
        $args=array_merge( $args, $_POST );


        $url=sprintf('%s/%s?%s', $baseurl, $endpoint, strtolower( http_build_query( $args ) ) );

        $res=curl( $url );
        if( $res->status==200 ){

            header('Content-Type: application/json');
            exit( $res->response );
        }

        exit( $json );
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Task | GeoNames</title>

    </head>
    <body>

        <div id="preloader"></div>

        <h1>Weather coordinates</h1>
        <form method="POST">
            <label>North<input name="North" type="number" step="0.01" value=2 /></label>
            <label>South<input name="South" type="number" step="0.01" value=3 /></label>
            <label>East<input name="East" type="number" step="0.01" value=4 /></label>
            <label>West<input name="West" type="number" step="0.01" value=5 /></label>
            <input type="button" data-task='weatherObservations' />
        </form>

        <h1>Earthquake coordinates</h1>
        <form method="POST">
            <label>North<input name="North" type="number" step="0.01" value=2 /></label>
            <label>South<input name="South" type="number" step="0.01" value=3 /></label>
            <label>East<input name="East" type="number" step="0.01" value=4 /></label>
            <label>West<input name="West" type="number" step="0.01" value=5 /></label>
            <input type="button" data-task="earthquakes" />
        </form>


        <table>
            <tr>
                <td>API Name</td>
                <td>API Description</td>
                <td>Go</td>
            </tr>
            <tr>
                <td>Weather By coordinates</td>
                <td>Weather</td>
                <td><button>Submit</button></td>
            </tr>
            <tr>
                <td>Get countries</td>
                <td>All countries</td>
                <td><button id="countries">Submit</button></td>
            </tr>
            <tr>
                <td>Earthquakes</td>
                <td>Earthquakes by longitude and latitude</td>
                <td><button>Submit</button></td>
            </tr>
        </table>

        <div>
            <span id="clouds"></span>
            <span id="temperature"></span>
            <span id="station"></span>
        </div>

        <div>
            <span id="languages"></span>
            <span id="distance"></span>
            <span id="countryCode"></span>
        </div>

        <div>
            <span id="depth"></span>
            <span id="lng"></span>
            <span id="magnitude"></span>
            <span id="lat"></span>
        </div>


        <script>

            const el=(id)=>document.getElementById(id);

            const settext=(id,v)=>{
                if( el(id) ) el(id).textContent=v;
            };

            const callback=( task, json )=>{
                let obj=json[ task ][0];

                switch( task ){
                    case 'weatherObservations':
                        settext('clouds',obj.clouds);
                        settext('temperature',obj.temperature);
                        settext('station',obj.station);
                    break;
                    case 'earthquakes':
                        settext('depth',obj.depth);
                        settext('lng',obj.lng);
                        settext('lat',obj.lat);
                        settext('magnitude',obj.magnitude);
                    break;
                }
            };

            document.addEventListener('click',e=>{
                if( e.target.dataset.task!=null && e.target instanceof HTMLInputElement && e.target.type=='button' ){

                    let task=e.target.dataset.task;

                    let fd=new FormData( e.target.closest('form') );
                        fd.set('task',task);

                    fetch( location.href,{ method:'post', body:fd } )
                        .then(r=>r.json())
                        .then(json=>{
                            callback.call( this, task, json );
                        })
                }
            })
        </script>
    </body>
</html>