medvedych/fotostore
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Render image list on client

Browse source
This commit is contained in:
Denis Fedoseev 2017-08-01 15:06:08 +03:00
parent 3bb9ef5b55
commit ec32870b98
4 changed files with 36 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
fotostore.pl
View file

@ -144,6 +144,37 @@ get '/' => sub {
} => 'index';
get '/get_images' => ( authenticated => 1 ) => sub {
my $self = shift;
my $current_user = $self->current_user;
my $files_list = $db->get_files($current_user->{'user_id'}, 20);
my $thumbs_dir = File::Spec->catfile( $IMAGE_DIR, $current_user->{'user_id'}, $thumbs_size );
my @images = map { $_->{'file_name'} } @$files_list;
my $images = [];
for my $img_item (@$files_list) {
my $file = $img_item->{'file_name'};
my $img_hash = {};
$img_hash->{'original_url'} = File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $ORIG_DIR, $file );
$img_hash->{'thumbnail_url'} = File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $thumbs_size, $file );
for my $scale (@scale_width) {
$img_hash->{$scale} = File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $scale, $file );
}
push(@$images, $img_hash);
}
# Render
return $self->render( json => $images );
};
# Upload image file
# There is no restriction for file size in app because restriction is present in nginx configuration
post '/upload' => ( authenticated => 1 ) => sub {

54
templates/images_list.html.ep
View file

@ -1,54 +0,0 @@
<div class="container">
<div class="logout"><a href="/logout">Logout</a></div>
<div class"upload-form">
<input id="fileupload" type="file" name="image" data-url="/upload" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/file_uploader/js/vendor/jquery.ui.widget.js"></script>
<script src="/file_uploader/js/jquery.iframe-transport.js"></script>
<script src="/file_uploader/js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#lastUploadLog');
});
},
sequentialUploads: true,
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
});
</script>
</div>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<div id="lastUploadLog"></div>
</div>
<!-- display images from server -->
<div class="container">
<div class="row">
<% foreach my $image (@$images) { %>
<div class="foto-block col-md-3">
<div class="image">
<img src="<%= "/$image_base/$user_id/$thumbs_size/$image" %>">
</div>
<div class="foto-notes">
<a href='<%= "/$image_base/$user_id/$orig/$image" %>'>Image original</a>
<% for my $scale (@$scales) { %>
<a href='<%= "/$image_base/$user_id/$scale/$image" %>'><%= $scale %></a>
<% } %>
</div>
</div>
<% } %>
</div>
</div>

2
templates/index.html.ep
View file

@ -2,7 +2,7 @@
<h1>Rough, Slow, Stupid, Contrary Photohosting</h1>
<% if (is_user_authenticated()) { %>
%= include 'images_list'
%= include 'includes/images_list'
<% } else { %>
<div class="login-form">

4
templates/layouts/base.html.ep
View file

@ -13,6 +13,9 @@
<link rel="stylesheet" href="/file_uploader/css/jquery.fileupload.css">
<link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui.css">
<link rel="stylesheet" href="/css/main.css">
<script src="https://vuejs.org/js/vue.min.js"></script>
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui-noscript.css"></noscript>
@ -26,4 +29,5 @@
<body>
<%= content %>
</body>
</html>