Raw Source Toggle Dropdown

• Minified Source

s2004070gmail.com / Zoopla Detail Enhanced

// ==UserScript==
// @name         Zoopla Detail Enhanced
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Extra property information
// @author       Tina Ip
// @match        https://www.zoopla.co.uk/for-sale/details/*
// @match        https://www.zoopla.co.uk/to-rent/details/*
// @icon         https://www.google.com/s2/favicons?domain=zoopla.co.uk
// @license      MIT
// @require      http://code.jquery.com/jquery-latest.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.core.js
// @connect      localhost
// @connect      bestmove.loophole.site
// @grant        GM_xmlhttpRequest
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @resource     MATERIAL_ICONS https://fonts.googleapis.com/icon?family=Material+Icons

// ==/UserScript==

/* globals jQuery, $, waitForKeyElements, _ */

const loadScores = function(lat, lng) {
    const coordinatePair = `${lat},${lng}`
    const scoreParams = {
      coordinate_pairs: [coordinatePair],
      expand: ['groceries'],
    };

    GM_xmlhttpRequest({
      method: 'GET',
      url: `http://bestmove.loophole.site/scores?${$.param(scoreParams)}`,
      responseType: 'json',
      onload: function(res) {
         const propertyScore = res.response[`${lat},${lng}`];

         const groceryListView = _.compact(propertyScore.scores?.groceries).map((grocery) => {
           return `
             <div class="grocery-item">
               <span class="material-icons">shopping_cart</span>
               <a href="https://www.google.com/maps/dir/${coordinatePair}/${grocery.latitude},${grocery.longitude}/data=!4m2!4m1!3e2" target="_blank">
                 <span class="score-text">${grocery.store_name} (${grocery.postcode}, ${grocery.size_band})</span>
               </a>
             </div>`;
         }).join('');

         $(`
                <div class="score-section">
                  <div class="imd-list">
                    <span class="material-icons">paid</span><span class="score-text">${propertyScore.scores?.income_score?.toFixed(1)}</span>
                    <span class="material-icons">work</span><span class="score-text">${propertyScore.scores?.employment_score?.toFixed(1)}</span>
                    <span class="material-icons">school</span><span class="score-text">${propertyScore.scores?.skill_score?.toFixed(1)}</span>
                    <span class="material-icons">security</span><span class="score-text">${propertyScore.scores?.crime_score?.toFixed(1)}</span>
                    <span class="material-icons">apartment</span><span class="score-text">${propertyScore.scores?.housing_barrier_score?.toFixed(1)}</span>
                    <span class="material-icons">park</span><span class="score-text">${propertyScore.scores?.environment_score?.toFixed(1)}</span>
                    IMD<span class="score-text">${propertyScore.scores?.imd_score?.toFixed(1)}</span>
                  </div>
                  <div class="grocery-list">${groceryListView}</div>
                  <a href="https://www.google.com/maps/dir/${coordinatePair}/birmingham+new+street+station/data=!4m2!4m1!3e3" target="_blank">
                    <span class="material-icons">directions_bus_filled</span><span class="score-text">${propertyScore.scores?.distance_to_town_center?.toFixed(1)}</span>
                  </a>
                  <a href="https://www.google.com/maps/search/${coordinatePair}" target="_blank"><span class="material-icons">map</span><span class="score-text">${propertyScore.postcode}</span></a>
                  <a href="https://epc.opendatacommunities.org/domestic/search?postcode=${propertyScore.postcode}" target="_blank"><span class="material-icons">bolt</span><span class="score-text">Cert</span></a>
                </div>
         `).insertAfter(
           $('div[data-testid$="listing-summary-details"]')
         );
      }
    });
};

(function() {
    'use strict';

    GM_addStyle(GM_getResourceText("MATERIAL_ICONS"));
    GM_addStyle(
      `
        .score-section .material-icons {
          font-size: 18px;
        }

        .score-section .score-text {
          vertical-align: top;
          margin-right: 5px;
        }

        .score-section a {
          color: inherit;
        }
      `
    );

    $(document).ready(function() {
        //var mapHref = $('a[href$="#/map"]').first().find('img').attr('src');
        //var mapParams = new URLSearchParams(mapHref);
        console.log("started!");
        var lat = JSON.parse(document.querySelector('script[type="application/ld+json"]').text)["@graph"][3].geo.latitude;
        var lng = JSON.parse(document.querySelector('script[type="application/ld+json"]').text)["@graph"][3].geo.longitude
        console.log(lat+" "+lng);
        loadScores(lat, lng);
    });
})();