changed play button and added hash tags

app/controllers/admin/universal_tables_controller.rb

@@ -195,6 +195,7 @@ class Admin::UniversalTablesController < OrbitAdminController
 
 	def add_entry
 		entry = TableEntry.new(table_entry_params)
+		create_get_table_tags(@entry)
 		entry.save
 		entry.fix_have_data
 		table = UTable.find(params[:table_entry][:u_table_id])
@@ -220,6 +221,7 @@ class Admin::UniversalTablesController < OrbitAdminController
 
 	def update_entry
 		entry = TableEntry.find(params[:id])
+		create_get_table_tags(entry)
 		entry.update_attributes(table_entry_params)
 		entry.fix_have_data # when new column insert
 		table = entry.u_table
@@ -311,4 +313,25 @@ class Admin::UniversalTablesController < OrbitAdminController
 	def table_entry_params
 		params.require(:table_entry).permit!
 	end
+
+	def create_get_table_tags(entry)
+    new_tags = params["table_tags"].split(",")
+    tags = []
+    entry.table_tags = []
+    new_tags.each do |tag|
+      if is_uuid?(tag) === false
+        tt = TableTag.new
+        tt.title = tag.downcase
+        tt.save
+        entry.table_tags << tt
+      else
+        tt = TableTag.find(tag)
+        entry.table_tags << tt
+      end
+    end
+    return tags
+  end
+	def is_uuid?(str)
+    !!(str =~ /\A[\da-f]{24}\z/i || str =~ /\A[\da-f]{8}-([\da-f]{4}-){3}[\da-f]{12}\z/i)
+  end
 end

app/models/column_entry.rb

@@ -89,7 +89,11 @@ class ColumnEntry
 			self.column_entry_files.desc(:sort_number).each do |entry_file|
                 next unless entry_file.choose_lang_display(locale)
                 file_title = entry_file.get_file_title
-                text += "<li class=\"column_entry_file\"><a class=\"column_entry_file_link\" href=\"#{entry_file.get_link}\" title=\"#{file_title}\" target=\"_blank\">#{file_title}</a><span class=\"file_size\">(#{number_to_human_size(entry_file.file.size)})</span><span class=\"view_count\"><i class=\"fa fa-eye\" title=\"#{I18n.t("universal_table.downloaded_times")}\"></i><span class=\"view-count\">#{entry_file.download_count}</span></span></li>"
+								if entry_file.file.content_type.start_with?('audio/')
+									text += "<div class=\"voice-player\"><span class=\"voice-title\">#{file_title}</span><a class=\"voice-player\" data-content=\"#{entry_file.file.url}\" href="" title=\"#{file_title}\"><i class=\"fa fa-play\" aria-hidden=\"true\"></i></a></div>"
+								else
+                	text += "<li class=\"column_entry_file\"><a class=\"column_entry_file_link\" href=\"#{entry_file.get_link}\" title=\"#{file_title}\" target=\"_blank\">#{file_title}</a><span class=\"file_size\">(#{number_to_human_size(entry_file.file.size)})</span><span class=\"view_count\"><i class=\"fa fa-eye\" title=\"#{I18n.t("universal_table.downloaded_times")}\"></i><span class=\"view-count\">#{entry_file.download_count}</span></span></li>"
+								end
             end
             text += "</ul>"
 		end

app/models/table_entry.rb

@@ -10,6 +10,7 @@ class TableEntry
 
 	has_many :column_entries, :dependent => :destroy
 	belongs_to :u_table, index: true
+	has_and_belongs_to_many :table_tags, inverse_of: :table_entries
 
 	accepts_nested_attributes_for :column_entries, :allow_destroy => true
 

app/models/table_tag.rb

@@ -0,0 +1,7 @@
+class TableTag
+  include Mongoid::Document
+  include Mongoid::Timestamps
+
+  field :title, type: String
+  has_and_belongs_to_many :table_entries, inverse_of: :table_tags
+end

app/models/u_table.rb

@@ -20,6 +20,7 @@ class UTable
 
 	FIELD_TYPES = ["text", "integer", "editor", "image", "date", "period", "file"]
 	DATE_FORMATS = ["yyyy/MM/dd hh:mm", "yyyy/MM/dd","yyyy/MM", "yyyy"]
+	AUDIO_EXTENSIONS = %w[.mp3 .wav .ogg .m4a .aac .flac]
 	def default_ordered
 		if self.ordered_with_created_at
 			sort_column = 'created_at'

app/views/admin/universal_tables/_entry_form.html.erb

@@ -3,13 +3,27 @@
   <%= stylesheet_link_tag "lib/main-forms" %>
   <%= stylesheet_link_tag "lib/fileupload" %>
   <%= stylesheet_link_tag "lib/main-list" %>
+  <%= stylesheet_link_tag "select2/select2" %>
+  <%= javascript_include_tag "select2/select2.min" %>
 <% end %>
  <% content_for :page_specific_javascript do %>
   <%= javascript_include_tag "lib/bootstrap-fileupload" %>
   <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
   <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
 <% end %>
+<style type="text/css">
+  #s2id_autogen1{
+    width: 500px !important;
+  }
+</style>
+
 <div class="input-area">
+  <div class="control-group">
+    <label class="control-label"><%= t("universal_table.hashtags") %></label>
+    <div class="controls">
+      <input id="universal_table_tags" name="table_tags" />
+    </div>
+  </div>
  <% @columns.each_with_index do |column, index| %>
   <% if @entry.new_record? %>
     <% object = f.object.send(:column_entries).build rescue nil %>
@@ -26,9 +40,27 @@
   <%= f.fields_for :column_entries, object, :child_index => index do |f| %>
     <%= render :partial => "#{column.type}_field", :object => object, :locals => {:f => f, :column => column, :i => index} %>
   <% end %>
-<% end %>
+  <% end %>
   </div>
 <div class="form-actions">
     <a href="<%= admin_universal_table_path(@table) %>" class="btn">View Entries</a>
     <input type="submit" value="Submit" class="btn btn-primary" />
 </div>
+
+<script>
+$("#universal_table_tags").select2({
+    tags: true,
+    multiple: true,
+    data : <%= raw(TableTag.all.map { |tag| { text: tag.title.html_safe, id: tag.id.to_s } }.to_json) %>,
+    createSearchChoice: function(term, data) {
+      if (!data.length)
+        return { id: term, text: "#" + term.trim().toLowerCase() };
+    }
+    // ajax: {
+    //   url: '/api/v1.1/locations',
+    //   dataType: 'json'
+    // }
+  
+  });
+ $("#universal_table_tags").val(<%= raw(@entry.table_tags.collect { |tag| tag.id.to_s }) %>).trigger("change");
+</script>

app/views/admin/universal_tables/show.html.erb

@@ -58,7 +58,12 @@
               <ol>
                 <% ce.column_entry_files.desc(:sort_number).each do |entry_file| %>
                   <% next unless entry_file.choose_lang_display(locale) %>
-                  <li><%= link_to entry_file.get_file_title, entry_file.file.url, target: "_blank" %></li>
+                  <% if entry_file.file.content_type.start_with?('audio/') %>
+                    <%= entry_file.get_file_title %>
+                    <a class="voice-player" data-content="<%= entry_file.file.url %>" href="" title="播放讀音"><i class="fa fa-play" aria-hidden="true"></i></a>
+                  <% else %>
+                    <li><%= link_to entry_file.get_file_title, entry_file.file.url, target: "_blank" %></li>
+                  <% end %>
                 <% end %>
               </ol>
             <% end %>
@@ -89,10 +94,33 @@
   </div>
 </div>
 
+<script>
+let audio;
+$(".voice-player").on("click", function(){
+  let status = $(this).attr('status');
+  if (audio) {
+    audio.pause();
+    audio.currentTime = 0;
+  }
 
-
+  if (status == 'playing') {
-
+    $(this).attr('status', '');
-
+    $(this).find('i').removeClass('fa-pause');
-
+    $(this).find('i').addClass('fa-play');
-
+  } else {
-
+    let mp3_url = $(this).attr('data-content');
+    let _this = $(this);
+    audio = new Audio(mp3_url);
+    audio.play();
+    audio.onended = function() {
+      _this.attr('status', '');
+      _this.find('i').removeClass('fa-pause');
+      _this.find('i').addClass('fa-play');
+    };
+    $(this).find('i').removeClass('fa-play');
+    $(this).find('i').addClass('fa-pause');
+    $(this).attr('status', 'playing');
+  }
+  return false;
+})
+</script>

app/views/universal_tables/index.html.erb

@@ -1 +1,31 @@
 <%= render_view %>
+<script>
+let audio;
+$(".voice-player").on("click", function(){
+  let status = $(this).attr('status');
+  if (audio) {
+    audio.pause();
+    audio.currentTime = 0;
+  }
+
+  if (status == 'playing') {
+    $(this).attr('status', '');
+    $(this).find('i').removeClass('fa-pause');
+    $(this).find('i').addClass('fa-play');
+  } else {
+    let mp3_url = $(this).attr('data-content');
+    let _this = $(this);
+    audio = new Audio(mp3_url);
+    audio.play();
+    audio.onended = function() {
+      _this.attr('status', '');
+      _this.find('i').removeClass('fa-pause');
+      _this.find('i').addClass('fa-play');
+    };
+    $(this).find('i').removeClass('fa-play');
+    $(this).find('i').addClass('fa-pause');
+    $(this).attr('status', 'playing');
+  }
+  return false;
+})
+</script>

app/views/universal_tables/show.html.erb

@@ -1 +1,31 @@
 <%= render_view %>
+<script>
+let audio;
+$(".voice-player").on("click", function(){
+  let status = $(this).attr('status');
+  if (audio) {
+    audio.pause();
+    audio.currentTime = 0;
+  }
+
+  if (status == 'playing') {
+    $(this).attr('status', '');
+    $(this).find('i').removeClass('fa-pause');
+    $(this).find('i').addClass('fa-play');
+  } else {
+    let mp3_url = $(this).attr('data-content');
+    let _this = $(this);
+    audio = new Audio(mp3_url);
+    audio.play();
+    audio.onended = function() {
+      _this.attr('status', '');
+      _this.find('i').removeClass('fa-pause');
+      _this.find('i').addClass('fa-play');
+    };
+    $(this).find('i').removeClass('fa-play');
+    $(this).find('i').addClass('fa-pause');
+    $(this).attr('status', 'playing');
+  }
+  return false;
+})
+</script>

config/locales/en.yml

@@ -30,3 +30,4 @@ en:
     disable_editing: Disable editing
     enable_editing: Enable editing
     save_mind_map: Save mind map
+    hashtags: Hashtags

config/locales/zh_tw.yml

@@ -30,3 +30,4 @@ zh_tw:
     disable_editing: Disable editing
     enable_editing: Enable editing
     save_mind_map: Save mind map
+    hashtags: Hashtags