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] 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