Proyectos de Subversion LeadersLinked - Antes de SPA

<?php

use LeadersLinked\Model\Theme;

$this->inlineScript()->appendFile('https://maps.googleapis.com/maps/api/js?key=' . $google_map_key . '&libraries=places');

$currentNetworkHelper = $this->currentNetworkHelper();
$currentNetwork = $currentNetworkHelper->getNetwork();

// months
$months = [
  'LABEL_MONTH_JANUARY',
  'LABEL_MONTH_FEBRUARY',
  'LABEL_MONTH_MARCH',
  'LABEL_MONTH_APRIL',
  'LABEL_MONTH_MAY',
  'LABEL_MONTH_JUNE',
  'LABEL_MONTH_JULY',
  'LABEL_MONTH_AUGUST',
  'LABEL_MONTH_SEPTEMBER',
  'LABEL_MONTH_OCTOBER',
  'LABEL_MONTH_NOVEMBER',
  'LABEL_MONTH_DECEMBER',
];

// vars to json
$userExperiences = json_encode($user_experiences);
$userEducations = json_encode($user_educations);
$monthsJson = json_encode($months);
$userLanguages = json_encode($user_languages);
$userSkills = json_encode($user_skills);
$companySizesOptions = json_encode($company_sizes);
$degreesOptions = json_encode($degrees);
$industriesOptions = json_encode($industries);
$languagesOptions = json_encode($languages);
$skillsOptions = json_encode($skills);
$userAptitudes = json_encode($user_aptitudes);
$userHobbiesAndInterests = json_encode($user_hobbies_and_interests);
$aptitudesOptions = json_encode($aptitudes);
$hobbiesAndInterestsOptions = json_encode($hobbies_and_interests);

$googleMapPlacesUrl = 'https://maps.googleapis.com/maps/api/js?key=' . $google_map_key . '&libraries=places';
$error_msg = "Por favor seleccione una ubicación real";

$js = <<<JS
// autoComplete place
let autoComplete;

function handleScriptLoad(updateQuery, autoCompleteRef, setAddresObject, setError) {
  autoComplete = new window.google.maps.places.Autocomplete(
    autoCompleteRef.current
  );
  autoComplete.setFields(["address_components", "formatted_address", "geometry"]);
  autoComplete.addListener("place_changed", () =>
    handlePlaceSelect(updateQuery, setAddresObject, setError)
  );
}

async function handlePlaceSelect(updateQuery, setAddresObject, setError) {
  const addressObject = autoComplete.getPlace();
  // console.log(addressObject.geometry.location.lat());
  // console.log(addressObject.geometry.location.lng());
  const query = addressObject.formatted_address;
  if(query){
    setError("");
    updateQuery(query);
    setAddresObject({
      ...addressObject, 
      address_components:[
        ...addressObject.address_components, 
        {
          latitude: addressObject.geometry.location.lat(),
          longitude: addressObject.geometry.location.lng(), 
          types:["geometry"]
        }
      ]
    });
  }else{
    setError("$error_msg");
  }
}

const skillsArray = Object.entries($userSkills).map(([key, value]) => ({ value: key, name: value }))
const skillsOptions = Object.entries($skillsOptions).map(([key, value]) => ({ value: key, name: value }))
const languagesArray = Object.entries($userLanguages).map(([key, value]) => ({ value: key, name: value }))
const languagesOptions = Object.entries($languagesOptions).map(([key, value]) => ({ value: key, name: value }))
const aptitudesArray = Object.entries($userAptitudes).map(([key, value]) => ({ value: key, name: value }))
const aptitudesOptions = Object.entries($aptitudesOptions).map(([key, value]) => ({ value: key, name: value }))
const userHobbiesAndInterests = Object.entries($userHobbiesAndInterests).map(([key, value]) => ({ value: key, name: value }))
const hobbiesAndInterestsOptions = Object.entries($hobbiesAndInterestsOptions).map(([key, value]) => ({ value: key, name: value }))

const backendVars = {
  uuid:"$user_uuid",
  profileId:"$user_profile_uuid",
  cover:"$cover",
  following:"$following",
  follower:"$follower",
  image:"$image",
  facebook: "$facebook",
  twitter: "$twitter",
  instagram: "$instagram",
  fullName: `$full_name`,
  overview: `$overview`,
  formatted_address: "$formatted_address",
  experiences: $userExperiences,
  educations: $userEducations,
  months: $monthsJson,
  languages: languagesArray,
  skills: skillsArray,
  aptitudes: aptitudesArray,
  hobbiesAndInterests: userHobbiesAndInterests,
  sizes: {
    cover: "$image_size_cover",
    image: "$image_size_profile",
  },
  options: {
    companySizes: $companySizesOptions,
    degrees: $degreesOptions,
    industries: $industriesOptions,
    languages: languagesOptions,
    skills: skillsOptions,
    aptitudes: aptitudesOptions,
    hobbiesAndInterests: hobbiesAndInterestsOptions
  }
}

const LABELS = {
  HOBBIES_AND_INTERESTS: 'LABEL_HOBBIES_AND_INTERESTS', 
  DATATABLE_EMPTY: 'LABEL_DATATABLE_EMPTY',
  FOLLOW: 'LABEL_FOLLOW',
  UNFOLLOW: 'LABEL_UNFOLLOW',
  SKILLS: 'LABEL_SKILLS',
  LANGUAGES:'LABEL_LANGUAGES',
  LOCATION:'LABEL_LOCATION',
  EDUCATION:'LABEL_EDUCATION',
  CURRENT:'LABEL_CURRENT',
  EXPERIENCE:'LABEL_EXPERIENCE',
  OVERVIEW:'LABEL_OVERVIEW',
  CONNECTIONS:'LABEL_CONNECTIONS',
  FOLLOWING:'LABEL_FOLLOWING',
  FOLLOWERS:'LABEL_FOLLOWERS',
  PROFILE_NOT_VIEWED: 'LABEL_PROFILE_NOT_VIEWED',
  VIEW_MORE: 'LABEL_VIEW_MORE',
  VIEW_LESS: 'LABEL_VIEW_LESS',
  TITLE_CONFIRM_CONECTION: 'LABEL_TITLE_CONFIRM_CONECTION',
  ACCEPT: 'LABEL_ACCEPT',
  CANCEL:'LABEL_CANCEL',
  CONNECT:'LABEL_CONNECT',
  MESSAGE:'LABEL_MESSAGE',
  PERSONAL_INFO:'LABEL_PERSONAL_INFO',
  APTITUDES:'LABEL_APTITUDES',
  HOBBIES_AND_INTERESTS:'LABEL_HOBBIES_AND_INTERESTS',
  WHO_HAS_SEEN_THIS_PROFILE:'LABEL_WHO_HAS_SEEN_THIS_PROFILE',
  EMPTY:'LABEL_DATATABLE_EMPTY',
  ABOUT_GROUP: 'LABEL_ABOUT_GROUP',
  FIRST_NAME: 'LABEL_FIRST_NAME',
  DESCRIPTION: 'LABEL_DESCRIPTION',
  SOCIAL_NETWORKS: 'LABEL_SOCIAL_NETWORKS',
}

JS;

$this->inlineScript()->appendScript($js);

if ($currentNetwork->theme_id == Theme::THEME_LEADERSLINKED_LINKEDIN) {
  $this->headLink()->appendStylesheet('/react-bundles/profile/edit/main.css');
  $this->inlineScript()->appendFile('/react-bundles/profile/edit/linkedinProfileEditBundle.js');
  $this->headLink()->appendStylesheet('/react-bundles/profile/view/main.css');
} else {
  $this->headLink()->appendStylesheet('/look-and-field/profile.css');
  $this->inlineScript()->appendFile('/react-bundles/profile/edit/profileEditBundle.js');
}

?>

<div id="react-my-profile-edit">
  <div class="process-comm" id="paginator-process-comm">
    <div class="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
  </div>
</div>
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>