From 3bb9ef5b5595fc833a65129d9d81977662e561d9 Mon Sep 17 00:00:00 2001
From: Denis Fedoseev <imdefined@yandex.ru>
Date: Mon, 31 Jul 2017 20:21:03 +0300
Subject: [PATCH 1/3] comment

---
 fotostore.pl | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/fotostore.pl b/fotostore.pl
index a3a559d..46ce772 100755
--- a/fotostore.pl
+++ b/fotostore.pl
@@ -145,6 +145,7 @@ get '/' => sub {
 } => 'index';
 
 # Upload image file
+# There is no restriction for file size in app because restriction is present in nginx configuration
 post '/upload' => ( authenticated => 1 ) => sub {
     my $self = shift;
 
@@ -163,17 +164,6 @@ post '/upload' => ( authenticated => 1 ) => sub {
         );
     }
 
-    # Upload max size
-    #my $upload_max_size = 3 * 1024 * 1024;
-
-    # Over max size
-    #if ($image->size > $upload_max_size) {
-    #    return $self->render(
-    #        template => 'error',
-    #        message  => "Upload fail. Image size is too large."
-    #    );
-    #}
-
     # Check file type
     my $image_type = $image->headers->content_type;
     my %valid_types = map { $_ => 1 } qw(image/gif image/jpeg image/png);

From ec32870b98090bc5d7578064ce91a8d547678f17 Mon Sep 17 00:00:00 2001
From: Denis Fedoseev <imdefined@yandex.ru>
Date: Tue, 1 Aug 2017 15:06:08 +0300
Subject: [PATCH 2/3] Render image list on client

---
 fotostore.pl                   | 31 +++++++++++++++++++
 templates/images_list.html.ep  | 54 ----------------------------------
 templates/index.html.ep        |  2 +-
 templates/layouts/base.html.ep |  4 +++
 4 files changed, 36 insertions(+), 55 deletions(-)
 delete mode 100644 templates/images_list.html.ep

diff --git a/fotostore.pl b/fotostore.pl
index 46ce772..ca9829a 100755
--- a/fotostore.pl
+++ b/fotostore.pl
@@ -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 {
diff --git a/templates/images_list.html.ep b/templates/images_list.html.ep
deleted file mode 100644
index 865ef6e..0000000
--- a/templates/images_list.html.ep
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/templates/index.html.ep b/templates/index.html.ep
index bcf2fac..d15117b 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -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">
diff --git a/templates/layouts/base.html.ep b/templates/layouts/base.html.ep
index a2dc11e..7415699 100644
--- a/templates/layouts/base.html.ep
+++ b/templates/layouts/base.html.ep
@@ -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>
\ No newline at end of file

From e58b7bb839c771a27cb5a021682bc4ea3e3a57bc Mon Sep 17 00:00:00 2001
From: Denis Fedoseev <imdefined@yandex.ru>
Date: Tue, 1 Aug 2017 15:33:29 +0300
Subject: [PATCH 3/3] Render image list on client

---
 fotostore.pl                   | 23 +++++------------------
 lib/FotoStore/DB.pm            |  1 -
 templates/layouts/base.html.ep |  3 ---
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/fotostore.pl b/fotostore.pl
index ca9829a..d8dc0d5 100755
--- a/fotostore.pl
+++ b/fotostore.pl
@@ -54,7 +54,7 @@ plugin 'authentication', {
         my $digest = $sha->add($password);
 
         my $user_id = $db->check_user( $username, $digest->hexdigest() );
-        $self->app->log->debug("user id: [$user_id]");
+        # $self->app->log->debug("user id: [$user_id]");
 
         return $user_id;
     },
@@ -126,22 +126,6 @@ get '/' => sub {
 
     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;
-
-    # Render
-    return $self->render(
-        images      => \@images,
-        image_base  => $IMAGE_BASE,
-        orig        => $ORIG_DIR,
-        thumbs_size => $thumbs_size,
-        scales      => \@scale_width,
-        user_id     => $current_user->{'user_id'},
-    );
-
 } => 'index';
 
 get '/get_images' => ( authenticated => 1 ) => sub {
@@ -163,10 +147,13 @@ get '/get_images' => ( authenticated => 1 ) => sub {
         $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 );
 
+        my @scaled = ();
         for my $scale (@scale_width) {
-            $img_hash->{$scale} = File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $scale, $file );
+            push(@scaled, {'size' => $scale, 'url' => File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $scale, $file )}) ;
         }
 
+        $img_hash->{'scales'} = \@scaled;
+
         push(@$images, $img_hash);
     }    
 
diff --git a/lib/FotoStore/DB.pm b/lib/FotoStore/DB.pm
index 1ea57ed..8947fc3 100644
--- a/lib/FotoStore/DB.pm
+++ b/lib/FotoStore/DB.pm
@@ -19,7 +19,6 @@ sub new {
 }
 
 sub check_user ($self, $nickname, $password) {
-    print STDERR "[$nickname][$password]";
     my ($user_id) = $self->{'dbh'}->selectrow_array(q~select user_id from users where nickname=? and password=?~, undef, ($nickname, $password));
     return $user_id;
 }
diff --git a/templates/layouts/base.html.ep b/templates/layouts/base.html.ep
index 7415699..aca3d9d 100644
--- a/templates/layouts/base.html.ep
+++ b/templates/layouts/base.html.ep
@@ -16,9 +16,6 @@
 
     <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>
     <style>
         .bar {
             height: 18px;