some UI fixes

beNjiox · Jan 7, 2014 · 1dbe9f8 · 1dbe9f8
1 parent a94bbf0
commit 1dbe9f8
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 45 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ composer.phar
 composer.lock
 .DS_Store
 Thumbs.db
-.vagrant/
+.vagrant/
+dump.rdb
diff --git a/README.md b/README.md
@@ -6,8 +6,9 @@ Installing this app will provide you a tiny demo using
 * Redis
 * Memcache
 * MySQL
+* And more
 
-for the lazy people who want to see before read, check this [demo](http://larabooster.io)
+for the lazy people who want to see before read, a demo will be soon available.
 
 In the future I plan to add some new fun things like
 
@@ -22,8 +23,8 @@ Requirements
 
 To make good use of vagrant you need to download
 
-1. Vagrant ;)
-2. VirtualBox
+1. [Vagrant](http://www.vagrantup.com/downloads.html)
+2. [VirtualBox](https://www.virtualbox.org/wiki/Downloads)
 3. Precise32 Box (You can do without, but it's better to have it in local)
 
 Guidelines
@@ -43,3 +44,31 @@ Screenshots
 [... Coming soon ... ]
 
 That's it !
+
+Roadmap
+-------
+
+# V0.1 - First release
+    [x] initial storages
+        [x] MySQL
+        [x] Redis
+        [x] memcache
+    [x] Basic UI (jQuery based)
+    [x] Boilerplate provisioning file
+# V0.2 - UI revamp :
+    [] UI Using angularJS
+    [] Better error handling (client side)
+    [] UI limitations of X items
+    [] Masked Input for hexadecimal
+# V0.3 - Backend improvment:
+    [] Http Middleware limit
+    [] Exception on Errors
+    [] Pagination handling
+# V0.4 - Open source relase + hosting:
+    [] Complete Readme
+        [] Getting started
+        [] Code snippets
+        [] Screenshots
+    [] Demo Hosting on DigitalOcean
+
+
diff --git a/app/routes.php b/app/routes.php
@@ -35,7 +35,7 @@ function is_hexadecimal($color)
         return $controller->store();
     });
 
-    Route::delete('mysql', function() {        
+    Route::delete('mysql', function() {          
         $controller = new ColorsController(new DbColorRepository);
         return $controller->delete();
     });
@@ -46,7 +46,7 @@ function is_hexadecimal($color)
     });
 
     Route::delete('memcache', function() {        
-        $controller = new ColorsController(new MemcacheColorRepository);
+            $controller = new ColorsController(new MemcacheColorRepository);
         return $controller->delete();
     });
 

diff --git a/app/views/home.blade.php b/app/views/home.blade.php
@@ -1,5 +1,10 @@
 @extends('master')
 
+@section('javascript')
+    <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+    <script src="js/home.js"></script>
+@stop
+
 @section('content')
 
 <section class='content' style='margin-top:25px;'>    
@@ -18,6 +23,22 @@
 
     </div>
 
+    <div class="container">
+        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+            <h2> Changelog </h2>
+
+            <ul class='list-unstyled'>
+                <li><h3> v0.1 </h3></li>
+                <ul>
+                    <li> First release </li>
+                    <li> 3 Storages in place : MySQL , Redis , Memcache </li>
+                    <li> Add , Deletions capabilities </li>
+                    <li> Vagrant install stable </li>
+                </ul>
+            </ul>
+        </div>
+    </div>
+
     <div class="container">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
             <h2> About </h2>
@@ -35,9 +56,7 @@
                                                             "AngularJS & Restangular" ] ]) }}
     </div>
 
-</section>
 
-<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
-<script src="js/home.js"></script>
+</section>
 
 @stop
diff --git a/app/views/master.blade.php b/app/views/master.blade.php
@@ -6,23 +6,24 @@
         <!-- Bootstrap CSS -->
         <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
         <link href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/flatly/bootstrap.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
+        <link rel="stylesheet" href="css/app.css">
+
         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.3/underscore.string.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.js"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
-        <link rel="stylesheet" href="css/app.css">
+        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+        @yield("javascript")        
     </head>
     <body>
+
+
         <h1 class="text-center">larabooster.io</h1>
 
         <div class="container">
             @yield('content')
         </div>
 
-        <!-- jQuery -->
-        <script src="//code.jquery.com/jquery.js"></script>
-        <!-- Bootstrap JavaScript -->
-        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
     </body>
 </html>
diff --git a/app/views/partials/storage_panel.blade.php b/app/views/partials/storage_panel.blade.php
@@ -11,20 +11,18 @@
   </div>
 <!-- template color_item -->
 
-<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
+<div class="col-lg-4">
     <div class="panel panel-default">
           <div class="panel-heading">
                 <h3 class="panel-title">{{ $storage_name_lg }}</h3>
           </div>
           <div class="panel-body">
                 <div class="list-group">
                     <h4 class="list-group-item-heading"></h4>
-                    @if (empty($colors))
-                        <div class="alert alert-info alert_{{strtolower($storage_name_sm)}}">
-                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-                            <strong>Oops</strong> Nothing in the {{$storage_name_lg}}
-                        </div>
-                    @endif
+                    <div class="alert alert-info alert_{{strtolower($storage_name_sm)}} @if (!empty($colors)) no_display @endif">
+                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+                        <strong>Oops</strong> Nothing in the {{$storage_name_lg}}
+                    </div>
                     <div class='list_{{strtolower($storage_name_sm)}}'>
                       @foreach ($colors as $c)
                       <div>

diff --git a/dump.rdb b/dump.rdb
diff --git a/larabooster.todo b/larabooster.todo
@@ -7,26 +7,32 @@ Storage:
   ☐ MongoDB
 
 Larabooster:
-  ✔ interactions on UI for add @done (14-01-04)
-  ✔ glitch when JS appending on UI @done (14-01-05)
-  ✔ interactions on UI for delete @done (14-01-05)
-  ✔ Error when deleting a just added element @done (14-01-05)
-  ☐ Edge case of last item released should display the alert
+  V0.1:
+    ✔ interactions on UI for add @done (14-01-04)
+    ✔ glitch when JS appending on UI @done (14-01-05)
+    ✔ interactions on UI for delete @done (14-01-05)
+    ✔ Error when deleting a just added element @done (14-01-05)
+  V0.2 - UI revamp :
+  ☐ UI Using angularJS
+    ☐ Add
+    ☐ Delete
+    ☐ Toggling alerts
+  ☐ About page
   ☐ Validations
-    ✔ Server side @done (14-01-05)
-    ☐ Client side (basic, just empty input)
-    ☐ Client advanced (maskInput)
-  ☐ exceptions for errors
+  ☐ UI limitations of X items
+  ☐ MaskInput for hexadecimal
+ V0.3 - Backend improvment:
+  ☐ Http Middleware limit
+  ☐ Exception on Errors
+  ☐ Pagination handling
+ V0.4 - Open source relase + hosting:
+  ☐ Hosting on DigitalOcean
+  ☐ Google Analytics
+  ☐ Explanation / about page
+  ☐ Code snippets
+  Bulk:
   ☐ unit tests
-  ☐ Hosting on digitalOcean
-  ☐ GoogleAnalytics
-  ☐ HTTP middleware for too many actions
-  ☐ Display only last 10 items added
-    ☐ pagination ?
-  ☐ AngularJS
-  ☐ About page
-  ☐ Code snippet and help for each storage
-  ☐ Versionning of project
+  ☐ paginatio
 
 
 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

diff --git a/public/css/app.css b/public/css/app.css
@@ -14,4 +14,17 @@
 .remove_color {
     color:red;
     padding-left:10px;
+}
+
+.modal-dialog{
+    position: absolute;
+    left: 50%;
+    margin-left: -312px;
+    height: 500px;
+    top: 50%;
+    margin-top: -250px;
+} 
+
+.no_display {
+    display: none;
 }
diff --git a/public/js/home.js b/public/js/home.js
@@ -7,6 +7,12 @@ $(document).ready(function($) {
         var context = $(this).attr('data-context');
         var color   = $('.add_color_input_'+context).val();        
 
+        if (color.length == 0)
+        {
+            alert("Please fill the input!")
+            return ;
+        }
+
         $.ajax({
             url: '/api/' + context,
             type: 'POST',
@@ -16,11 +22,15 @@ $(document).ready(function($) {
         })
         .done(function() {
             $new_color_el = $($("#color_item_tmpl").html().replace(/_CODE_/g, color));
-            if ($(".alert_" + context).length != 0 )
-                $(".alert_" + context).fadeOut();
-            $(".list_"+context).prepend($new_color_el)
-            $new_color_el.fadeOut().fadeIn();
+            console.log ("["+context+"][POST ADD - Before insert] : How many items? " + $(".list_"+context+" div.color_code").length);
+            if ($(".list_"+context+" div.color_code").length == 0)
+            {
+                $(".alert_" + context).hide();
+
+            }
+            $(".list_"+context).prepend($new_color_el).show();            
             $('.add_color_input_'+context).val("");
+            console.log ("["+context+"][POST ADD - After insert] : How many items? " + $(".list_"+context+" div.color_code").length);
         })
         .fail(function(resp) {
             alert("An error happened: [_ERROR_]".replace('_ERROR_', resp.responseJSON.msg));
@@ -38,6 +48,8 @@ $(document).ready(function($) {
 
         if (confirm("You are attempting to delete the color _COLOR_. Confirm?".replace('_COLOR_', color)))
         {
+            console.log(".list_"+context+" div.color_code");
+            console.log ("["+context+"][POST DELETE - Before remove] : How many items? " + $(".list_"+context+" div.color_code").length);
             $.ajax({
                 url: '/api/' + context,
                 type: 'DELETE',
@@ -46,7 +58,16 @@ $(document).ready(function($) {
                 }
             })
             .done(function(){
-                $el_to_hidden.fadeOut();
+                $el_to_hidden.hide().remove();
+                console.log(".list_"+context+" div.color_code");
+                console.log($(".list_"+context+" div.color_code").length);
+
+                if ($(".list_"+context+" div.color_code").length == 0)
+                {
+                    console.log ("Display alert_"+context);
+                    $(".alert_" + context).fadeToggle();
+                }
+                console.log ("["+context+"][POST DELETE - After remove] : How many items? " + $(".list_"+context+" div.color_code").length);
             });
         }