102 lines
4.2 KiB
Plaintext
102 lines
4.2 KiB
Plaintext
- content_for( :merged_menu ) do
|
|
.text-xl.font-bold.text-gray-900
|
|
= text_for_index
|
|
|
|
= render "layouts/merged_header"
|
|
- if Rails.env.development?
|
|
= javascript_include_tag "merged/vue.js"
|
|
-else
|
|
= javascript_include_tag "merged/vue.min.js"
|
|
|
|
.images
|
|
.flex.justify-center.gap-4
|
|
.rounded.border.mr-20{"@click" => "toggle_new" , ":class" => "{'bg-orange-200': show_new }"}
|
|
.mx-4.text-lg.font-bold Add new
|
|
|
|
%label.block
|
|
.mt-1.text-lg.font-bold Search:
|
|
%input.border.rounded{:category => "query", placeholder:"by name", "v-model" => "search_name" }
|
|
%input.border.rounded{:category => "query", placeholder:"by tag", "v-model" => "search_tag" }
|
|
|
|
- ["name" , "created" , "size" , "ratio"].each do |ruby_sort_key|
|
|
.rounded{":class" => "{'border': sort_by == '#{ruby_sort_key}'}"}
|
|
.mx-4.text-lg.font-bold= ruby_sort_key.capitalize
|
|
%a{ "@click" => "sort_by = '#{ruby_sort_key}';sort_dir = 1" , href: "#" ,
|
|
":class" => "{'bg-cyan-100': sort_dir == 1 && sort_by == '#{ruby_sort_key}'}"}
|
|
%svg.w-6.h-6.mt-1{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
|
|
%path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
|
|
%a{ "@click" => "sort_by = '#{ruby_sort_key}';sort_dir = -1" , href: "#" ,
|
|
":class" => "{'bg-cyan-100': sort_dir == -1 && sort_by == '#{ruby_sort_key}'}"}
|
|
%svg.w-6.h-6.mt-1{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
|
|
%path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
|
|
|
|
.grid.grid-cols-3.gap-4.m-8{":class" => "{'hidden': !show_new }"}
|
|
%div
|
|
= form_tag(merged.images_path, multipart: true) do
|
|
.flex.flex-col.border.border-gray-100.rounded.p-4
|
|
%h3.my-4.text-xl.font-bold= text_for_new
|
|
= text_field_tag 'filename' ,nil, placeholder: "Optional name", class: "rounded mt-4"
|
|
%p.my-4 Name will be taken from uploaded file if not given
|
|
= text_field_tag 'tags' ,nil, placeholder: "Optional tags", class: "rounded mt-4"
|
|
%p.my-4 Tags describe the size or format
|
|
= hidden_for_select
|
|
= file_field_tag 'image_file' , class: "mb-8 w-full px-2 text-xl bg-clip-padding border border-solid border-gray-300 rounded"
|
|
= submit_button 'Submit'
|
|
%div
|
|
|
|
.grid.grid-cols-6.gap-4.m-8{":class" => "{'hidden': show_new }"}
|
|
.flex.flex-col.border.border-gray-100.rounded.image_box{"v-for": "image in filter_and_sort"}
|
|
.flex.align-center.justify-between.mb-4
|
|
.text-lg.font-bold.mt-2.mx-2
|
|
{{image.name}}
|
|
%strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
|
|
{{image.aspect_ratio}}
|
|
%a.w-full.object-contain.h-72{":href" => "image.link" }
|
|
%img{ ":src": "image.url" , ":alt": "image.name" }
|
|
.flex.justify-between.mb-8
|
|
%strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
|
|
{{image.size}}k
|
|
%strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
|
|
{{image.updated_at}}
|
|
%strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium
|
|
{{image.tags}}
|
|
|
|
:ruby2js
|
|
class Images < Vue
|
|
options el: '.images'
|
|
def initialize
|
|
@image_data = #{@image_data.to_json.html_safe}
|
|
@search_name = ""
|
|
@search_tag = ""
|
|
@sort_by = "created"
|
|
@sort_dir = -1 # 1 up
|
|
@show_new = false
|
|
end
|
|
def filter_and_sort
|
|
dat = @image_data
|
|
if(@search_name.length > 0)
|
|
dat = dat.filter do |item|
|
|
return item["name"].toLowerCase().indexOf(@search_name) > -1
|
|
end
|
|
end
|
|
if(@search_tag.length > 0)
|
|
dat = dat.filter do |item|
|
|
return (item.tags.toLowerCase().indexOf(@search_tag) > -1)
|
|
end
|
|
end
|
|
dat = dat.slice().sort do |a, b| #a, b image data hashes
|
|
aa = a[@sort_by]
|
|
bb = b[@sort_by]
|
|
return (aa === bb ? 0 : (aa > bb ? 1 : -1) ) * @sort_dir
|
|
end
|
|
dat
|
|
end
|
|
def toggle_new()
|
|
if @show_new == true
|
|
@show_new = false
|
|
else
|
|
@show_new = true
|
|
end
|
|
end
|
|
end
|