ProZ.com vendor info integration

Example profile: https://www.proz.com/profile/1089232 Data was obtained from "GET /freelancer-matches" © https://www.proz.com/api-docs-new/#resource_Directory

by Alexander Terehov

HTML

<!doctype html>
<html>
  <head>
    <title>Vendor template | ProZ.com</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
  </head>
  <body>
  
    <div class="container" ng-app="prozVendorTemplateApp">
      <div class="well" ng-controller="prozVendorTemplateController">
        <h4>This freelancer appears in ProZ.com</h4>
        <p>
          The vendor you were looking for does not appear in your database, but this ProZ.com profile matches the information you have entered.
        </p>
        <div class="media">
          <div class="media-left">
            <a ng-href="{{ profile_url }}">
              <img class="media-object" ng-src="{{ image_url }}" alt="Profile picture" style="max-width: 150px;">
            </a>
          </div>
          <div class="media-body">
            <a ng-href="{{ profile_url }}" class="h3 media-heading">
              {{ site_name }}
              <span ng-show="proz_membership.status == 'current'" class="label label-info" style="font-size: 50%; vertical-align: middle; text-transform: capitalize;">{{ proz_membership.membership_type }} member</span>
              <span ng-show="proz_membership.certified_pro_network_status == 'current'" class="label label-info" style="font-size: 50%; vertical-align: middle;">CPN</span>
            </a>
            <div class="row">
              <div class="col-md-2 col-sm-3">
                <h4>Language pairs</h4>
                <ul style="padding-left: 1.2em;">
                  <li ng-repeat="language_pair in skills.language_pairs">{{ language_pair.pair_name }}</li>
                </ul>
              </div>
              <div class="col-md-4 col-sm-3">
                <h4>Specializations</h4>
                <ul style="padding-left: 1.2em;">
                  <li ng-repeat="specialty in...

JavaScript

var prozVendorTemplateApp = angular.module('prozVendorTemplateApp', []);

prozVendorTemplateApp.controller('prozVendorTemplateController', ['$scope', function prozVendorTemplateController($scope) {
  // This object is obtained from "response.data[3].freelancer"
  // from "GET /freelancer-matches" © https://www.proz.com/api-docs-new/#resource_Directory
  Object.assign($scope, {
    "uuid": "79f1128d-1076-4276-a650-a8197e78b475",
    "account_type": "2",
    "site_name": "Andrei Mazurin",
    "profile_url": "https://www.proz.com/profile/1089232",
    "image_url": "https://static-ssl.proz.com/profile_resources/1089232_r4ad339d5b30b4.jpg",
    "tagline": "Your legal & financial translator",
    "taglines": [{
      "lang": "eng",
      "value": "Your legal & financial translator"
    }],
    "about_me_localizations": [{
      "lang": "",
      "value": "Trained at Moscow Linguistic University …"
    }],
    "contact_info": {
      "email_verified": false,
      "first_name": "Andrei",
      "middle_name": null,
      "last_name": "Mazurin",
      "mobile": "+7 (985) 924 7024",
      "country_code": "ru",
      "timezone": "Europe/Moscow",
      "location": {
        "lat": 55.75,
        "lng": 37.583
      },
      "address": {
        "street_line_1": "6 Bolshie Kamenshchiki St., apt. 142",
        "street_line_2": null,
        "street_line_3": null,
        "city": "Moscow",
        "region": null,
        "postal": "115172",
        "country_code": "ru"
      }
    },
    "proz_membership": {
      "status": "current",
      "expiration_date": "2019-10-03",
      "expired_date": null,
      "certified_pro_network_status": "current",
      "plus_package": false,
      "membership_type": "professional",
      "membership_package": "standard"
    },
    "skills": {
      "language_pairs": [{
        "pair_code": "eng_rus",
        "pair_name": "English to Russian",
        "services": [{
          "service_id": 1,
          "service_name": "Translation"
        }]
...