plexpy/data/interfaces/default/ip_address_modal.html

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
            <h4 class="modal-title" id="myModalLabel">
                <strong><span id="modal_header_ip_address">
                    % if data:
                    <i class="fa fa-map-marker"></i> IP Address: ${data}
                    % else:
                    <i class="fa fa-exclamation-circle"></i> Invalid IP Address
                    % endif
                </span></strong>
            </h4>
        </div>
        <div class="modal-body" id="modal-text">
            % if kwargs:
            <div class="col-sm-12">
                <h4>
                    <strong>Connection Details</strong>
                </h4>
            </div>
            <div class="col-sm-12">
                <ul class="list-unstyled">
                    <% icon = {'0': 'times', '1': 'check'} %>
                    <li>Location: <strong>${(kwargs['location'] or 'unknown').upper()}</strong></li>
                    <li>Secure Connection: <i class="fa fa-${icon.get(kwargs['secure'], 'question')}"></i></li>
                    <li>Plex Relay: <i class="fa fa-${icon.get(kwargs['relayed'], 'question')}"></i></li>
                </ul>
            </div>
            % endif
            % if public:
            <div class="col-sm-12">
                <h4>
                    <strong>Geolocation Lookup</strong>
                    % if data:
                    <span id="ip_loading" style="padding-left: 5px;"><i class="fa fa-refresh fa-spin"></i></span>
                    % endif
                </h4>
            </div>
            <div id="ip_error" class="col-sm-12 text-muted"></div>
            <div class="col-sm-6">
                <ul class="list-unstyled">
                    <li>Continent: <strong><span id="continent"></span></strong></li>
                    <li>Country: <strong><span id="country"></span></strong></li>
                    <li>Region: <strong><span id="region"></span></strong></li>
                    <li>City: <strong><span id="city"></span></strong></li>
                    <li>Postal Code: <strong><span id="postal_code"></span></strong></li>
                </ul>
            </div>
            <div class="col-sm-6">
                <ul class="list-unstyled">
                    <li>Timezone: <strong><span id="timezone"></span></strong></li>
                    <li>Latitude: <strong><span id="latitude"></span></strong></li>
                    <li>Longitude: <strong><span id="longitude"></span></strong></li>
                </ul>
            </div>
            <div class="col-sm-12">
                <h4>
                    <strong>Whois Lookup</strong>
                    % if data:
                    <span id="isp_loading" style="padding-left: 5px;"><i class="fa fa-refresh fa-spin"></i></span>
                    % endif
                </h4>
            </div>
            <div id="isp_error" class="col-sm-12 text-muted"></div>
            <div class="col-sm-12">
                <ul class="list-unstyled">
                    <li>Host: <strong><span id="isp_host"></span></strong></li>
                </ul>
            </div>
            <div class="col-sm-6" id="isp_instance">
                <ul class="list-unstyled">
                    <li>ISP: <strong><span id="isp_name"></span></strong></li>
                    <li>Address: <strong><span id="isp_address"></span></strong></li>
                </ul>
            </div>
            % endif
        </div>
        <div class="modal-footer">
            % if data == '127.0.0.1' and kwargs.get('location') == 'wan':
            <div style="float: right;"><span class="text-muted" id="rquote">We've traced the call. It's coming from inside the house!</span></div>
            % endif
        </div>
    </div>
</div>

% if data and public:
<script>
    function getUserLocation(ip_address) {
        $.ajax({
            url: 'get_geoip_lookup',
            type: 'GET',
            data: { ip_address: ip_address },
            cache: true,
            async: true,
            complete: function () {
                $('#ip_loading').remove();
            },
            error: function () {
                $('#ip_error').html('<i class="fa fa-exclamation-circle"></i> Internal request failed.').show();
            },
            success: function (result) {
                if (result.result === 'error') {
                    $('#ip_error').html('<i class="fa fa-exclamation-circle"></i> ' + result.message).show();
                } else {
                    var data = result.data;
                    $('#continent').html(data.continent);
                    $('#country').html(data.country);
                    $('#region').html(data.region);
                    $('#city').html(data.city);
                    $('#postal_code').html(data.postal_code);
                    $('#timezone').html(data.timezone);
                    $('#latitude').html(data.latitude);
                    $('#longitude').html(data.longitude);
                }
            }
        });
    }

    function getUserConnection(ip_address) {
        $.ajax({
            url: 'get_whois_lookup',
            type: 'GET',
            data: { ip_address: ip_address },
            cache: true,
            async: true,
            complete: function () {
                $('#isp_loading').remove();
            },
            error: function () {
                $('#isp_error').html('<i class="fa fa-exclamation-circle"></i> Internal request failed.').show();
            },
            success: function (data) {
                $('#isp_host').html(data.host);
                if ('error' in data) {
                    $('#isp_error').html('<i class="fa fa-exclamation-circle"></i> ' + data.error).show();
                } else if (data.nets.length) {
                    $('#isp_instance').remove();
                    $.each(data.nets, function (index, net) {
                        var s = '';
                        if (net.city || net.state || net.postal_code) {
                            s = (net.city && net.state) ? net.city + ', ' + net.state : net.city || net.state || '';
                            s = (s && net.postal_code) ? s + '&nbsp;&nbsp;' + net.postal_code : s || net.postal_code || '';
                        }
                        s = (s) ? '<strong>' + s + '</strong><br />' : s;
                        $('#modal-text').append('<div class="col-sm-6"> \
                            <ul class="list-unstyled"> \
                                <li>ISP: <strong>' + net.description + '</strong></li> \
                                <li><span style="float: left;">Address:&nbsp;</span> \
                                    <span style="float: left;"><strong>' + net.address + '</strong><br />' + s +
                                        '<strong>' + net.country + '</strong></span> \
                                </li> \
                            </ul> \
                        </div>')
                    });
                } else {
                    $('#isp_name, #isp_address').html("Not available");
                }
            }
        });
    }

    getUserLocation('${data}');
    getUserConnection('${data}');
</script>
% endif