profile.html.erb

<div class="col-md-7 order-last order-md-first">

  <% if !@map_lat.nil? && !@map_lon.nil? %>
    <%= render :partial => "map/leaflet" , locals: { lat: @map_lat, lon: @map_lon, zoom: @map_zoom, blurred: @map_blurred, topmap: true, user: @profile_user } %>
  <% elsif !current_user.nil? && current_user.id == @profile_user.id %>
    <div id="map_template" style="position: relative; width: 100%; display: inline-block;">
      <img src="https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/0/0/0.png" style="height:300px; width: 100%; margin: 0; position: relative; margin-right: -10px;">  
      <button type='button' class='blurred-location-input btn btn-default btn-lg' style="position:absolute;position:absolute;top:41%;left:15%;"> <strong> Share your Location </strong> </button>
      <p><i><small>Learn about <a href='https://publiclab.org/wiki/location-privacy'>privacy</a> </small></i></p>
    </div>
  <% end %>

  <br />

  <div style="text-align: center;">
  <h5><a href='/notes/author/<%= @profile_user.name %>'><%= @profile_user.note_count %><%= @profile_user.note_count == 1 ? ' research note' : ' research notes' %></a>
  <a class="ml-2" href = "/tag/question:*/author/<%= params[:id] %>"><%= Node.questions.where(status: 1, uid: @profile_user.id).length %> questions </a></h5>
  </div>

  <p style="width: 100%; text-align: center; border-bottom: 1px solid #ccc; line-height:2px; margin: 21px 0 20px;">
    <span style="background-color: #fff; padding: 0 10px; color: #808080;">
      <h7>Most Common Tags</h7>
    </span>
  </p>

  <div style="text-align: center;">
    <span id="commontags">
      <% tags = Tag.sort_according_to_followers(@profile_user.tags,"desc") %>
      <% tags.each do |tag| %>
          <span id="tag_<%= tag.id %>" style=""><a class="badge badge-primary mb-1" style="color: white;" href="/tag/<%= tag.name %>"><%= tag.name %></a></span>
      <% end %>
    </span>
  </div>

  <br />

  <%= render :partial => "tag/profileCard" %>

  <div class="text-center"> <%= will_paginate @tags, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer if @paginated %></div>

  <hr />

</div>

<div class="offset-md-1 order-first order-md-last col-md-4 text-center">
  <div class="text-center">
    <%if @content_approved or (!current_user.nil? && current_user.id == @profile_user.id)%>
      <%= image_tag(@profile_user.profile_image, class:'d-none d-lg-inline rounded-circle', id:'profile-photo', style:"width:50%;margin-bottom:10px;") %>
    <%end%>
    <h4 class="mt-3"><strong>@<%= @profile_user.name %> <%= @profile_user.new_contributor %></strong></h4>
  </div>
  <div style="text-align:center;" class="d-lg-none">
    <%if @content_approved or (!current_user.nil? && current_user.id == @profile_user.id)%>
      <%= image_tag(@profile_user.profile_image(:medium), class:'rounded-circle', id:'profile-photo', style:"width:50%;margin-bottom:20px;") %>
    <%end%>
  <h4 class="mt-3"><strong>@<%= @profile_user.name %> <%= @profile_user.new_contributor %></strong></h4>
  </div>

  <h4>
    <small>
      <% if logged_in_as(['admin']) %><%= @profile_user.email %><% end %>
      <span style = "font-size:24px;"><small> <%= raw translation('users.profile.joined_time_ago', :time_ago => distance_of_time_in_words(@profile_user.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' })) %></small></span>
      <% if @profile_user.role == "moderator" %> | <i class="fa fa-certificate"></i> <%= translation('users.profile.moderator') %><% end %>
      <% if @profile_user.role == "admin" %> | <i class="fa fa-certificate"></i> <%= translation('users.profile.admin') %><% end %>
      <% if @profile_user.status == 0 %> | <i class="fa fa-ban" style="color:#a00;"></i> <%= translation('users.profile.banned') %><% end %>
    </small>
  </h4>
  <%if @content_approved or (!current_user.nil? && current_user.id == @profile_user.id)%>
    <p><%= raw auto_link(RDiscount.new(@profile_user.bio || '').to_html, :sanitize => false) %></p>
  <%end%>
  <div class="mt-3">

    <a class="btn btn-outline-secondary" id="tags-section">Tags</a>

    <% if current_user && current_user.uid == @profile_user.uid %>
      <a href="/profile/<%= @profile_user.name %>/edit" class="btn btn-outline-secondary"><%= translation('users.profile.edit_profile') %></a>
    <% end %>

    <a class="btn btn-outline-secondary" id="info-ellipsis"><i class="fa fa-ellipsis-h" style="margin:0"></i></a>

  </div>

  <hr>

  <div id="tags-hide">
    <%= render :partial => "tag/tagging", locals: { url: "/profile/tags/create/#{ @profile_user.id }", parent: :profile, user: @profile_user } %>
  </div>

  <div id="social-links">

    <div class="profile_icons" style="text-align: center;">
      <% if @twitter.nil? == false %>
        <a href="<%= @twitter %>" >
          <i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
        </a>
      <% end %>
      <% if @facebook.nil? == false %>
        <a href="<%= @facebook %>" >
          <i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
        </a>
      <% end %>
      <% if @github.nil? == false %>
        <a href="<%= @github %>" >
          <i class="fa fa-github fa-3x" aria-hidden="true"></i>
        </a>
      <% end %>
      <% if @instagram.nil? == false %>
        <a href="<%= @instagram %>" >
          <i class="fa fa-instagram fa-3x" aria-hidden="true"></i>
        </a>
      <% end %>
    </div>
    <br>
    <% if current_user && @profile_user %>
      <% unless current_user == @profile_user %>
        <hr />
        <div id="follow_form" class="col-md-offset-4">
          <% if current_user.following?(@profile_user) %>
            <a id="profile-unfollow-button" class="btn btn-primary" data-method="delete" data-remote="true" href="../relationships/<%= @profile_user.id %>">Unfollow</a>
          <% else %>
            <a id="profile-follow-button" class="btn btn-primary" data-method="post" data-remote="true" href="/relationships" data-params="followed_id=<%= @profile_user.id %>">Follow</a>
          <% end %>
        </div>
        <br />
      <% end %>
    <% end %>

    <% if @profile_user && logged_in_as(['admin']) && @profile_user.role != "admin" %>
      <a href="/admin/promote/admin/<%= @profile_user.id %>" class="btn btn-outline-secondary btn-block"><i class="fa fa-certificate"></i> <%= translation('users.profile.make_admin') %></a>
    <% end %>

    <% if @profile_user && logged_in_as(['admin']) && @profile_user.role == "moderator" %>
      <a href="/admin/demote/basic/<%= @profile_user.id %>" class="btn btn-default btn-block"><i class="fa fa-ban"></i> <%= translation('users.profile.revert_to_basic_user') %></a>
    <% end %>

    <% if @profile_user && logged_in_as(['admin', 'moderator']) && @profile_user.role == "basic" %>
      <a href="/admin/promote/moderator/<%= @profile_user.id %>" class="btn btn-outline-secondary btn-block"><i class="fa fa-certificate"></i> <%= translation('users.profile.make_moderator') %></a>
    <% end %>

    <% if logged_in_as(['admin', 'moderator']) && @profile_user.status == 0 %>
      <a href="/unban/<%= @profile_user.id %>" class="btn btn-outline-secondary btn-block"><i class="fa fa-thumbs-up"></i> <%= translation('users.profile.unban_user') %></a>
    <% elsif logged_in_as(['admin', 'moderator']) && @profile_user.status == 1 && @profile_user != current_user %>
      <a data-confirm="<%= translation('users.profile.confirm_ban_user') %>" href="/ban/<%= @profile_user.id %>" class="btn btn-outline-secondary btn-block"><i class="fa fa-ban"></i> <%= translation('users.profile.ban_user') %></a>
    <% end %>

    <% if logged_in_as(['admin', 'moderator']) && @profile_user.status == 5 %>
      <a href="/admin/unmoderate/<%= @profile_user.id %>" class="btn btn-outline-secondary btn-block"><i class="fa fa-thumbs-up"></i> <%= translation('users.profile.unmoderate_user') %></a>
    <% elsif logged_in_as(['admin', 'moderator']) && @profile_user.status == 1 %>
      <a rel="tooltip" title="Prevent author from logging in, without hiding their work or profile." data-confirm="<%= translation('users.profile.confirm_moderate_user') %>" href="/admin/moderate/<%= @profile_user.id %>" class="btn btn-outline-secondary btn-block"><i class="fa fa-ban"></i> <%= translation('users.profile.moderate_user') %></a>
    <% end %>

    <% if @profile_user && !@profile_user.reset_key.nil? && logged_in_as(['admin']) %>
      <a id="user-reset-key" href="/reset/key/<%= @profile_user.reset_key %>" class="btn btn-outline-secondary btn-block"><i class="fa fa-info-sign"></i> <%= translation('users.profile.reset_user') %>: <%= @profile_user.reset_key %></a>
    <% end %>

    <% if @profile_user && @profile_user.reset_key.nil? && logged_in_as(['admin', 'moderator']) && (@profile_user.role == "basic" || @profile_user.role == "moderator") %>
      <a href="/admin/force/reset/<%= @profile_user.id %>" class="btn btn-outline-secondary btn-block">Reset User Password</a>
    <% end %>

    <hr />

    <p>
      <a class="btn btn-outline-secondary btn-block" href="/feed/<%= @profile_user.name %>.rss"><i class="fa fa-rss" style="color:orange;"></i> <%= translation('users.profile.rss_feed_for') %> <%= @profile_user.name %></a>
    </p>

    <% if @profile_user && current_user && @profile_user == current_user %>
      <button id="accessTokenButton" data-toggle="modal" data-target="#btn-token" class="btn btn-default btn-block">My Access Token</button>
      <button data-toggle="modal" data-target="#socialModal" class="btn btn-outline-secondary btn-block">Link Social Media</button>

      <div class="modal" id="btn-token" tabindex="-1" role="dialog" aria-labelledby="accessModal" aria-hidden="true">
        <div class="modal-dialog" role="document" id="token-popup">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="accessModal">My Access Token</h5>
              <button type="button" class="close" id="close-btn" data-dismiss="modal">x</button>
            </div>
            <div class="modal-body">
              <p id="accessTokenForm" type="text" class="token form-control text-center"><%= @profile_user.token %></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" id="copy-btn">Copy</button>
            </div>
          </div>
        </div>
        <div id="copyContainer"></div>
      </div>

      <div class="modal" id="socialModal" tabindex="-1" role="dialog" aria-labelledby="socialModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="socialModal">Link Social Media</h5>
            </div>
            <div class="modal-body">
              <label for="social-name">Enter Your Social Media User name like twitter:publiclab or instagram:publiclab</label>
            <input type="text" class="form-control" id="social-name" placeholder="instagram:publiclab">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button id="link_social_media" type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

      <% if current_user.can_moderate? %>
        <br />
        <%= form_tag "/users/test_digest_email", method: :post do %>
          <%= submit_tag "Test Digest Email", class: "btn btn-info", style: "width: 100%;" %>
        <% end %>
        <%= form_tag "/admin/test_digest_email_spam", method: :post do %>
          <%= submit_tag "Test Spam Digest Email", class: "btn btn-sm btn-primary mt-2", style: "width: 100%;" %>
        <% end %>
      <% end %>

    <% end %>

    <hr />

    <% if params[:preview] %>
      <hr />

      <div class="row">
        <div class="col-lg-3 col-lg-offset-1">
          <h4>Followers</h4>
        </div>
        <div class="col-lg-3 col-lg-offset-2">
          <h4>Following</h4>
        </div>

        <br />
        <div class="col-lg-3 col-lg-offset-2">
          <h5><b><%= link_to @profile_user.followers.count, followers_path(id: @profile_user.username) %></b></h5>
        </div>
        <div class="col-lg-3 col-lg-offset-2">
          <h5><b><%= link_to @profile_user.following_users.count, following_path(id: @profile_user.username) %></b></h5>
        </div>
      </div>
      <hr />

    <% end %>

    <div class="d-none d-md-inline">
      <% if @wikis && @wikis.length > 0 %>
        <h4><%= translation('users.profile.wiki_contributed_to') %></h4>
        <ul class="nav">
          <% @wikis.each do |wiki| %>
            <% unless (!@node.nil? && wiki.nid == @node.nid) %>
              <li><a href="<%= wiki.path %>"><i style="margin-left: -12px;" class="fa fa-<%= wiki.icon %>"></i> <%= wiki.latest.title %></a> <small style="color:#888;"><%= translation('users.profile.updated') %> <%= distance_of_time_in_words(wiki.updated_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %> <%= translation('users.profile.by') %> <a href="/profile/<%= wiki.latest.author.name %>"><%= wiki.latest.author.name %></a></small></li>
            <% end %>
          <% end %>
          <% if params[:controller] == "search" %>
            <li><a href="/tag/<%= params[:id] %>"><%= translation('users.profile.more') %>...</a></li>
          <% end %>
        </ul>
      <% end %>
    </div>
  </div>

  <div class="info float:left">
    <ul>
    <li class="mt-3"><h5>@<%= @profile_user.name %> has</h5></li>
      <li><h5><a href='/notes/author/<%= @profile_user.name %>'><%= pluralize(@profile_user.note_count, 'research note', plural: 'research notes' )%></a></h5></li>
      <li><h5><a href="/wikis/author/<%= @profile_user.name %>"><%= pluralize(@profile_user.revisions.count, 'wiki edit', plural: 'wiki edits') %></a></h5></li>
      <li><h5><a href = "/tag/question:*/author/<%= params[:id] %>"><%= pluralize(Node.questions.where(status: 1, uid: @profile_user.id).length, 'question', plural:'questions') %></a></h5></li>
      <li><h5><a href = "/profile/comments/<%= params[:id] %>"><%= pluralize(Comment.where(uid: @profile_user.id).count, 'comment', plural: 'comments') %></a></h5></li>
      <li><h5><a href = "/tag/activity:*/author/<%= params[:id] %>"><%= pluralize(@count_activities_posted, 'activity posted', plural:'activities posted') %> </a></h5></li>
      <li><h5><a href = "/tag/replication:*/author/<%= params[:id] %>"><%= pluralize(@count_activities_attempted, 'activity attempted', plural:'activities attempted')%></a> </h5></li>
      <li><h5><a href = "/tag/with:<%= @profile_user.username %>"><%= pluralize(Tag.find_nodes_by_type("with:#{@profile_user.username}").count, 'note co-authored', plural: 'notes co-authored')%></a> </h5></li>
    </ul>
  </div>

</div>

<script src = "https://cdn.jsdelivr.net/npm/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script>

<script type = "text/javascript">
  $(function(){
    $("img").lazyload();
  });
  //Upon clicking copy button, copyToken function is activated.
  $('#copy-btn').on('click', copyToken);

  //Function to copy access token to clipboard
  function copyToken() {
    let tokenContainer = document.getElementById("copyContainer");
    let inputElement = document.createElement("input");
    inputElement.type = "text";
    console.log(tokenContainer);
    tokenContainer.appendChild(inputElement);
    inputElement.value = '<%= @profile_user.token %>';
    inputElement.select();
    document.execCommand("Copy");
    tokenContainer.removeChild(tokenContainer.lastChild);
    $('#copy-btn').text('Copied').attr('disabled', 'true');
  }

  $('#link_social_media').click(function(){
      sign = document.getElementById('social-name').value;
      $.post('/profile/tags/create/<%=@profile_user.uid %> ',{"name": sign,"id":<%=@profile_user.uid %>}, function(data) {
          window.location='/profile/<%=@profile_user.name %> ';
      });
  });

  (function () {
      var profile = Object.create(Profile);
      profile.value.user_id = "<%= @profile_user.uid %>"
      <% if @profile_user %>
      var notes = <%= @profile_user.daily_note_tally.to_a.sort %>
      var comments = <%= @profile_user.weekly_comment_tally.to_a.sort.to_json %>
      var notesObject = {};
      notes.forEach(function(element){
          notesObject[element[0]] = element[1];
      });
      <% end %>
      profile.value.notes = notesObject;
      profile.value.comments = comments;
      profile.plot_graph();
      profile.value.name = "<%= @profile_user.name %>"
      profile.fetch_maps();
  })();

  $("#tags-section").click(function(){
      $("#tags-hide").toggle();
  });

  $("#info-ellipsis").click(function(){
      $("#social-links").toggle();
  });

</script>

<style type="text/css">
  ul.nav-tabs>li a{
    padding: 10px;
  }
  .profile_icons a{
    text-decoration: none;
  }

  i{
    margin-left: 8px;
  }

  i:hover{
    transition-duration: .2s;
    transform: scale(1.2);
  }

  .info h5{
    color: grey;
  }
  .info ul{
    padding-inline-start: 0px;
  }

  #tags-hide, #social-links {
    display:none;
  }

  .info a { color: inherit; }

  li {
    list-style-type: none;
  }

  .token {
    font-weight: bold;
  }

  h5 a {
    text-decoration: underline;
  }

  .links {
    font-size: 18px;
    padding: 8px 5px 8px 4px;
  }

</style>

<%= stylesheet_link_tag "dashboard" %>
<%= javascript_include_tag "dashboard" %>