Enable access to Most Used and Recently Used metacodes in lists and carousel (#708)

* used and recent

* enable most used and recent in all metacode select situations

* selected changed to active at some point

* switch recent and most used positions

* remove index doc page

app/helpers/application_helper.rb

@@ -3,13 +3,22 @@ module ApplicationHelper
   def metacodeset
     metacodes = current_user.settings.metacodes
     return false unless metacodes[0].include?('metacodeset')
+    if metacodes[0].sub('metacodeset-', '') == 'Most'
+      return 'Most'
+    elsif metacodes[0].sub('metacodeset-', '') == 'Recent'
+      return 'Recent'
+    end
     MetacodeSet.find(metacodes[0].sub('metacodeset-', '').to_i)
   end
 
   def user_metacodes
     @m = current_user.settings.metacodes
     set = metacodeset
-    @metacodes = if set
+    @metacodes = if set && set == 'Most'
+                   Metacode.where(id: current_user.mostUsedMetacodes).to_a
+                 elsif set && set == 'Recent'
+                   Metacode.where(id: current_user.recentMetacodes).to_a
+                 elsif set
                    set.metacodes.to_a
                  else
                    Metacode.where(id: @m).to_a
@@ -17,6 +26,14 @@ module ApplicationHelper
     @metacodes.sort! { |m1, m2| m2.name.downcase <=> m1.name.downcase }.rotate!(-1)
   end
 
+  def user_most_used_metacodes
+    @metacodes = current_user.mostUsedMetacodes.map { |id| Metacode.find(id) }
+  end
+
+  def user_recent_metacodes
+    @metacodes = current_user.recentMetacodes.map { |id| Metacode.find(id) }
+  end
+
   def invite_link
     "#{request.base_url}/join" + (current_user ? "?code=#{current_user.code}" : '')
   end

app/models/user.rb

@@ -64,6 +64,28 @@ class User < ApplicationRecord
     json['rtype'] = 'mapper'
     json
   end
+  
+  def recentMetacodes
+    array = []
+    self.topics.sort{|a,b| b.created_at <=> a.created_at }.each do |t|
+      if array.length < 5 and array.index(t.metacode_id) == nil
+        array.push(t.metacode_id)
+      end
+    end
+    array
+  end
+
+  def mostUsedMetacodes
+    self.topics.to_a.reduce({}) { |memo, topic| 
+      if memo[topic.metacode_id] == nil
+        memo[topic.metacode_id] = 1 
+      else 
+        memo[topic.metacode_id] = memo[topic.metacode_id] + 1
+      end
+      
+      memo
+    }.to_a.sort{ |a, b| b[1] <=> a[1] }.map{|i| i[0]}.slice(0, 5)
+  end
 
   # generate a random 8 letter/digit code that they can use to invite people
   def generate_code

app/views/shared/_metacodeoptions.html.erb

@@ -5,6 +5,32 @@
   
 <div id="metacodeOptions">
 <ul>
+  <li>
+    <span>Recently Used</span>
+    <div class="expandMetacodeSet"></div>
+    <ul>
+    	<% user_recent_metacodes().each do |m| %>
+		  <li data-id="<%= m.id.to_s %>">
+		    <img width="24" height="24" src="<%= asset_path m.icon %>" alt="<%= m.name %>" />
+		    <div class="mSelectName"><%= m.name %></div>
+		    <div class="clearfloat"></div>
+		  </li>
+		<% end %>
+    </ul>
+  </li>
+  <li>
+    <span>Most Used</span>
+    <div class="expandMetacodeSet"></div>
+    <ul>
+    	<% user_most_used_metacodes().each do |m| %>
+		  <li data-id="<%= m.id.to_s %>">
+		    <img width="24" height="24" src="<%= asset_path m.icon %>" alt="<%= m.name %>" />
+		    <div class="mSelectName"><%= m.name %></div>
+		    <div class="clearfloat"></div>
+		  </li>
+		<% end %>
+    </ul>
+  </li>
   <% MetacodeSet.order("name").all.each do |set| %>
   <li>
     <span><%= set.name %></span>

app/views/shared/_switchmetacodes.html.erb

@@ -7,10 +7,14 @@
 <% selectedSet = metacodes[0].include?("metacodeset") ? metacodes[0].sub("metacodeset-","")  : "custom" %>
 <% allMetacodeSets = MetacodeSet.order("name").all.to_a %>
 <% if selectedSet == "custom" 
-     index = allMetacodeSets.length
+     index = allMetacodeSets.length + 2
+   elsif selectedSet == 'Recent'
+     index = 0
+   elsif selectedSet == 'Most'
+     index = 1
    else
      set = MetacodeSet.find(selectedSet.to_i)
-     index = allMetacodeSets.index(set)   
+     index = allMetacodeSets.index(set) + 2 
    end %>
 <h3>Switch Metacode Set</h3>
 
@@ -18,11 +22,53 @@
         
 <div id="metacodeSwitchTabs">
   <ul>
+    <li><a href="#metacodeSwitchTabsRecent" data-set-id="recent" id="metacodeSetRecent">RECENTLY USED</a></li>
+    <li><a href="#metacodeSwitchTabsMost" data-set-id="most" id="metacodeSetMost">MOST USED</a></li>
     <% allMetacodeSets.each do |m| %>
     <li><a href="#metacodeSwitchTabs<%= m.id %>" data-set-id="<%= m.id %>"><%= m.name %></a></li>
     <% end %>
     <li><a href="#metacodeSwitchTabsCustom" data-set-id="custom" id="metacodeSetCustom">CUSTOM SELECTION</a></li>
   </ul>
+  <% recent = user_recent_metacodes() %>
+  <div id="metacodeSwitchTabsRecent" 
+       data-metacodes="<%= recent.map(&:id).join(',') %>">
+    <% @list = '' %>
+    <% recent.each_with_index do |m, index| %>
+      <% @list += '<li><img src="' + asset_path(m.icon) + '" alt="' + m.name + '" /><p>' + m.name.downcase + '</p><div class="clearfloat"></div></li>' %> 
+    <% end %>
+    <div class="metacodeSwitchTab">
+      <p class="setDesc">The 5 Metacodes you've used most recently.</p>
+      <div class="metacodeSetList">
+        <ul>
+          <%= @list.html_safe %>
+        </ul>
+        <div class="clearfloat"></div>
+      </div>
+    </div>
+    <button class="button" onclick="Metamaps.Create.updateMetacodeSet('Recent', 0, false);">
+        Switch Set
+    </button>
+  </div>
+  <% most_used = user_most_used_metacodes() %>
+  <div id="metacodeSwitchTabsMost" 
+       data-metacodes="<%= most_used.map(&:id).join(',') %>">
+    <% @list = '' %>
+    <% most_used.each_with_index do |m, index| %>
+      <% @list += '<li><img src="' + asset_path(m.icon) + '" alt="' + m.name + '" /><p>' + m.name.downcase + '</p><div class="clearfloat"></div></li>' %> 
+    <% end %>
+    <div class="metacodeSwitchTab">
+      <p class="setDesc">The 5 Metacodes you've used the most.</p>
+      <div class="metacodeSetList">
+        <ul>
+          <%= @list.html_safe %>
+        </ul>
+        <div class="clearfloat"></div>
+      </div>
+    </div>
+    <button class="button" onclick="Metamaps.Create.updateMetacodeSet('Most', 1, false);">
+        Switch Set
+    </button>
+  </div>
   <% allMetacodeSets.each_with_index do |m, localindex| %>
   <div id="metacodeSwitchTabs<%= m.id %>" 
        data-metacodes="<%= m.metacodes.map(&:id).join(',') %>">
@@ -39,7 +85,7 @@
         <div class="clearfloat"></div>
       </div>
     </div>
-    <button class="button" onclick="Metamaps.Create.updateMetacodeSet(<%= m.id %>, <%= localindex %>, false);">
+    <button class="button" onclick="Metamaps.Create.updateMetacodeSet(<%= m.id %>, <%= localindex + 2 %>, false);">
         Switch Set
     </button>
   </div>
@@ -62,7 +108,7 @@
           </ul>
           <div class="clearfloat"></div>
         </div>
-        <button class="button" onclick="Metamaps.Create.updateMetacodeSet('custom', <%= allMetacodeSets.length %>, true);">
+        <button class="button" onclick="Metamaps.Create.updateMetacodeSet('custom', <%= allMetacodeSets.length + 2 %>, true);">
             Switch to Custom Set
         </button>
     </div>

frontend/src/Metamaps/Create.js

@@ -32,7 +32,7 @@ const Create = {
     // // SWITCHING METACODE SETS
 
     $('#metacodeSwitchTabs').tabs({
-      selected: self.selectedMetacodeSetIndex
+      active: self.selectedMetacodeSetIndex
     }).addClass('ui-tabs-vertical ui-helper-clearfix')
     $('#metacodeSwitchTabs .ui-tabs-nav li').removeClass('ui-corner-top').addClass('ui-corner-left')
     $('.customMetacodeList li').click(self.toggleMetacodeSelected) // within the custom metacode set tab