77 lines
3.2 KiB
Plaintext
77 lines
3.2 KiB
Plaintext
%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
|
|
|
|
.mx-20.flex.h-16.items-center.gap-16
|
|
.text-xl.font-bold.text-gray-900
|
|
= text_for_index
|
|
|
|
= link_to(merged.new_image_path(new_link_params) ) do
|
|
.button.action New Image
|
|
|
|
.images
|
|
.flex.justify-center.gap-4
|
|
|
|
%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-6.gap-4.m-8
|
|
.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-slate-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
|
|
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
|
|
end
|