Merge pull request #2 from alpha6/pretty_web

Pretty web

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,25 +126,44 @@ get '/' => sub {
 
     my $current_user = $self->current_user;
 
+} => '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;
 
-    # Render
+    my $images = [];
-    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';
+    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 );
+
+        my @scaled = ();
+        for my $scale (@scale_width) {
+            push(@scaled, {'size' => $scale, 'url' => File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $scale, $file )}) ;
+        }
+
+        $img_hash->{'scales'} = \@scaled;
+
+        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 {
     my $self = shift;
 
@@ -163,17 +182,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);

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;
 }

templates/images_list.html.ep

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

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

templates/layouts/base.html.ep

@@ -13,9 +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">
-    <!-- CSS adjustments for browsers with JavaScript disabled -->
+
-    <noscript><link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-noscript.css"></noscript>
+    <script src="https://vuejs.org/js/vue.min.js"></script>
-    <noscript><link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui-noscript.css"></noscript>
+    
     <style>
         .bar {
             height: 18px;
@@ -26,4 +26,5 @@
     <body>
     <%= content %>
     </body>
+
 </html>