Add locales and views for lines

20 files changed, 884 insertions, 214 deletions

diff --git a/Gemfile b/Gemfile
index 2c554477e..fc84f3882 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,7 +5,8 @@ gem 'rails', '3.1.3'
 # Bundle edge Rails instead:
 # gem 'rails',     :git => 'git://github.com/rails/rails.git'
 
-gem 'user_interface', :git => 'git://sim.dryade.priv/user_interface'
+gem 'user_interface', :path => '~/projects/user_interface'
+#gem 'user_interface', :git => 'git://sim.dryade.priv/user_interface'
 
 platforms :jruby do
   gem 'activerecord-jdbcsqlite3-adapter'
@@ -42,6 +43,7 @@ gem 'jquery-rails'
 # To use debugger
 # gem 'ruby-debug'
 
+gem 'formtastic'
 gem 'inherited_resources'
 gem 'activerecord-jdbcpostgresql-adapter'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 57ba992a6..70f7761d6 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -8,9 +8,8 @@ GIT
       composite_primary_keys
       geokit
 
-GIT
-  remote: git://sim.dryade.priv/user_interface
-  revision: 41f8e79515999e095ebec78ec1daf1fe4cb28aad
+PATH
+  remote: ~/projects/user_interface
   specs:
     user_interface (0.0.1)
       rails (~> 3.1.0)
@@ -69,6 +68,8 @@ GEM
     erubis (2.7.0)
     execjs (1.2.13)
       multi_json (~> 1.0)
+    formtastic (2.0.2)
+      rails (~> 3.0)
     geokit (1.6.0)
     has_scope (0.5.1)
     hike (1.2.1)
@@ -159,6 +160,7 @@ DEPENDENCIES
   chouette-ninoxe!
   coffee-rails (~> 3.1.1)
   coffee-script-source
+  formtastic
   inherited_resources
   jquery-rails
   jruby-openssl
diff --git a/app/assets/stylesheets/formtastic.css b/app/assets/stylesheets/formtastic.css
new file mode 100644
index 000000000..91540c74b
--- /dev/null
+++ b/app/assets/stylesheets/formtastic.css
@@ -0,0 +1,145 @@
+/* -------------------------------------------------------------------------------------------------
+
+It's *strongly* suggested that you don't modify this file.  Instead, load a new stylesheet after
+this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
+This will allow you to update formtastic.css with new releases without clobbering your own changes.
+
+This stylesheet forms part of the Formtastic Rails Plugin
+(c) 2008 Justin French
+
+--------------------------------------------------------------------------------------------------*/
+
+
+/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic
+--------------------------------------------------------------------------------------------------*/
+form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; }
+form.formtastic fieldset { border:0; }
+form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; }
+form.formtastic ol, form.formtastic ul { list-style:none; }
+form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; }
+form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; }
+form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; }
+form.formtastic legend { white-space:normal; color:#000; }
+
+
+/* SEMANTIC ERRORS
+--------------------------------------------------------------------------------------------------*/
+form.formtastic ul.errors { color:#cc0000; margin:0.5em 0 1.5em 25%; list-style:square; }
+form.formtastic ul.errors li { padding:0; border:none; display:list-item; }
+
+
+/* FIELDSETS & LISTS
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset { overflow:auto; } /* clearing contained floats */
+form.formtastic fieldset.inputs { }
+form.formtastic fieldset.buttons { padding-left:25%; }
+form.formtastic fieldset ol { }
+form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; }
+
+/* INPUT LIs
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li { padding:0.5em 0; margin-top:-0.5em; margin-bottom:1em; } /* padding and negative margin juggling is for Firefox */
+form.formtastic fieldset > ol > li { overflow:auto; } /* clearing contained floats */
+
+form.formtastic fieldset > ol > li.required { }
+form.formtastic fieldset > ol > li.optional { }
+form.formtastic fieldset > ol > li.error { }
+  
+
+/* LABELS
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li label { display:block; width:25%; float:left; padding-top:.2em; }
+form.formtastic fieldset > ol > li > li label { line-height:100%; padding-top:0; }
+form.formtastic fieldset > ol > li > li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}
+
+
+/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li fieldset { position:relative; }
+form.formtastic fieldset > ol > li fieldset legend { position:absolute; width:95%; padding-top:0.1em; left: 0px; }
+form.formtastic fieldset > ol > li fieldset legend span { position:absolute; }
+form.formtastic fieldset > ol > li fieldset legend.label label { position:absolute; }
+form.formtastic fieldset > ol > li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
+form.formtastic fieldset > ol > li fieldset ol li { padding:0; border:0; }
+
+
+/* INLINE HINTS
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }
+
+
+/* INLINE ERRORS
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
+form.formtastic fieldset > ol > li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
+form.formtastic fieldset > ol > li ul.errors li { padding:0; border:none; display:list-item; }
+
+
+/* STRING, NUMERIC, PASSWORD, EMAIL, URL, PHONE & SEARCH OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li.string input, 
+form.formtastic fieldset > ol > li.password input, 
+form.formtastic fieldset > ol > li.numeric input,
+form.formtastic fieldset > ol > li.email input,
+form.formtastic fieldset > ol > li.url input,
+form.formtastic fieldset > ol > li.phone input,
+form.formtastic fieldset > ol > li.search input { width:72%; }
+
+form.formtastic fieldset > ol > li.string input[size], 
+form.formtastic fieldset > ol > li.password input[size], 
+form.formtastic fieldset > ol > li.numeric input[size],
+form.formtastic fieldset > ol > li.email input[size],
+form.formtastic fieldset > ol > li.url input[size],
+form.formtastic fieldset > ol > li.phone input[size],
+form.formtastic fieldset > ol > li.search input[size] { width:auto; max-width:72%; }
+
+
+/* TEXTAREA OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li.text textarea { width:72%; }
+form.formtastic fieldset > ol > li.text textarea[cols] { width:auto; max-width:72%; }
+
+
+/* HIDDEN OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset ol li.hidden { display:none; }
+
+/* BOOLEAN OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li.boolean label { padding-left:25%; width:auto; }
+form.formtastic fieldset > ol > li.boolean label input { margin:0 0.5em 0 0.2em; }
+
+
+/* RADIO OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li.radio { }
+form.formtastic fieldset > ol > li.radio fieldset { overflow:visible; }
+form.formtastic fieldset > ol > li.radio fieldset ol { margin-bottom:-0.5em; }
+form.formtastic fieldset > ol > li.radio fieldset ol li { margin:0.1em 0 0.5em 0; overflow:visible; }
+form.formtastic fieldset > ol > li.radio fieldset ol li label { float:none; width:100%; }
+form.formtastic fieldset > ol > li.radio fieldset ol li label input { margin-right:0.2em; }
+
+
+/* CHECK BOXES (COLLECTION) OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li.check_boxes { }
+form.formtastic fieldset > ol > li.check_boxes fieldset { overflow:visible; }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol { margin-bottom:-0.5em; }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; overflow:visible; }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol li label { float:none; width:100%; }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { margin-right:0.2em; }
+
+
+/* DATE & TIME OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li.date fieldset ol li,
+form.formtastic fieldset > ol > li.time fieldset ol li,
+form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }
+
+form.formtastic fieldset > ol > li.date fieldset ol li label,
+form.formtastic fieldset > ol > li.time fieldset ol li label,
+form.formtastic fieldset > ol > li.datetime fieldset ol li label { display:none; }
+
+form.formtastic fieldset > ol > li.date fieldset ol li label input, 
+form.formtastic fieldset > ol > li.time fieldset ol li label input, 
+form.formtastic fieldset > ol > li.datetime fieldset ol li label input { display:inline; margin:0; padding:0;  }
diff --git a/app/assets/stylesheets/formtastic_changes.css b/app/assets/stylesheets/formtastic_changes.css
new file mode 100644
index 000000000..8a044fab6
--- /dev/null
+++ b/app/assets/stylesheets/formtastic_changes.css
@@ -0,0 +1,14 @@
+/* -------------------------------------------------------------------------------------------------
+
+Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
+This will allow you to update formtastic.css with new releases without clobbering your own changes.
+
+For example, to make the inline hint paragraphs a little darker in color than the standard #666:
+
+form.formtastic fieldset > ol > li p.inline-hints { color:#333; }
+
+HINT:
+The following style may be *conditionally* included for improved support on older versions of IE(<8)
+form.formtastic fieldset ol li fieldset legend { margin-left: -6px;}
+
+--------------------------------------------------------------------------------------------------*/
diff --git a/app/assets/stylesheets/legacy.css.scss b/app/assets/stylesheets/legacy.css.scss
index 2db0a3fa4..565195023 100644
--- a/app/assets/stylesheets/legacy.css.scss
+++ b/app/assets/stylesheets/legacy.css.scss
@@ -1,203 +1,207 @@
-@mixin div_for_object {
-    margin-bottom: 20px;
+/* @mixin div_for_object { */
+/*     margin-bottom: 20px; */
 
-    a.preview {
-        text-decoration: none;                   
-    }
+/*     a.preview { */
+/*         text-decoration: none;                    */
+/*     } */
         
-    img {
-        float: left;
-        margin-right: 10px;
-    }
-    a { 
-        display:block;
-        text-decoration: underline;
-        margin-bottom: 3px;
-    }
-    .info {
-        font-size: 12px;
-        color: #777;
-        font-weight: normal;
-        line-height: 18px;
+/*     img { */
+/*         float: left; */
+/*         margin-right: 10px; */
+/*     } */
+/*     a {  */
+/*         display:block; */
+/*         text-decoration: underline; */
+/*         margin-bottom: 3px; */
+/*     } */
+/*     .info { */
+/*         font-size: 12px; */
+/*         color: #777; */
+/*         font-weight: normal; */
+/*         line-height: 18px; */
         
-        a {
-            display:inline;
-            color: #095495;
-        }
-    }
-}
-
-@mixin after_div_for_object {
-    content: " ";  
-    display: block; 
-    height: 0; 
-    clear: left;
-    visibility: hidden;
-}
-
-.line, .line_group, .stop_area, .service_link, .network, .service_link_stop_point, .indicator {
-    @include div_for_object;
-}
-
-.line:after, .line_group:after, .stop_area:after, .service_link:after, .network:after, .service_link_stop_point:after, .journey_pattern:after, .indicator:after { 
-    @include after_div_for_object;
-}
-
-.line_show .summary{
-    height: 250px;
-    min-height: 250px;
-}
-
-.line {
-    .color {
-        width: 64px;
-        height: 64px;
-        float: left;
-        margin-right: 10px;
-        a {
-            text-decoration: none;                   
-        }
-    }
-
-    .code {     
-        font-size: 16px;
-        text-align: center;
-        color: white;
-        font-weight: bold;
-        padding-top: 21px;
-    } 
-
-    .number {     
-        font-size: 16px;
-        text-align: center;
-        color: white;
-        font-weight: bold;
-        padding-top: 21px;
-    }   
-}
-
-.journey_pattern{
-    float: left;
-    padding: 10px;
+/*         a { */
+/*             display:inline; */
+/*             color: #095495; */
+/*         } */
+/*     } */
+/* } */
+
+/* @mixin after_div_for_object { */
+/*     content: " ";   */
+/*     display: block;  */
+/*     height: 0;  */
+/*     clear: left; */
+/*     visibility: hidden; */
+/* } */
+
+/* .line, .line_group, .stop_area, .service_link, .network, .service_link_stop_point, .indicator { */
+/*     @include div_for_object; */
+/* } */
+
+/* .line:after, .line_group:after, .stop_area:after, .service_link:after, .network:after, .service_link_stop_point:after, .journey_pattern:after, .indicator:after {  */
+/*     @include after_div_for_object; */
+/* } */
+
+/* .line_show .summary{ */
+/*     height: 250px; */
+/*     min-height: 250px; */
+/* } */
+
+/* fieldset.buttons{ */
+/*     margin: 10px; */
+/* } */
+
+/* .line { */
+/*     .color { */
+/*         width: 64px; */
+/*         height: 64px; */
+/*         float: left; */
+/*         margin-right: 10px; */
+/*         a { */
+/*             text-decoration: none;                    */
+/*         } */
+/*     } */
+
+/*     .code {      */
+/*         font-size: 16px; */
+/*         text-align: center; */
+/*         color: white; */
+/*         font-weight: bold; */
+/*         padding-top: 21px; */
+/*     }  */
+
+/*     .number {      */
+/*         font-size: 16px; */
+/*         text-align: center; */
+/*         color: white; */
+/*         font-weight: bold; */
+/*         padding-top: 21px; */
+/*     }    */
+/* } */
+
+/* .journey_pattern{ */
+/*     float: left; */
+/*     padding: 10px; */
     
-    .headers{
-        background-color: #b78db7;
-        text-align: center;
-        padding: 5px;
+/*     .headers{ */
+/*         background-color: #b78db7; */
+/*         text-align: center; */
+/*         padding: 5px; */
         
-        img{
-            vertical-align: text-bottom;
-            margin-left: 5px;
-        }
-    }
-
-    .even{
-        background-color: #eed7f1;
-        padding: 5px;
+/*         img{ */
+/*             vertical-align: text-bottom; */
+/*             margin-left: 5px; */
+/*         } */
+/*     } */
+
+/*     .even{ */
+/*         background-color: #eed7f1; */
+/*         padding: 5px; */
         
-        img{
-            vertical-align: text-bottom;
-            margin-right: 5px;
-        }
-    }
+/*         img{ */
+/*             vertical-align: text-bottom; */
+/*             margin-right: 5px; */
+/*         } */
+/*     } */
     
-    .odd{
-        padding: 5px;
-
-        img{
-            vertical-align: text-bottom;
-            margin-right: 5px;
-        }
-    }
-}         
-
-.network
-{
-    .map{
-        width: 50px;
-        height: 50px;
-        float: left;
-        margin-right: 10px;
-        background: url("../images/icons/viewer.png") no-repeat;
-     }   
+/*     .odd{ */
+/*         padding: 5px; */
+
+/*         img{ */
+/*             vertical-align: text-bottom; */
+/*             margin-right: 5px; */
+/*         } */
+/*     } */
+/* }          */
+
+/* .network */
+/* { */
+/*     .map{ */
+/*         width: 50px; */
+/*         height: 50px; */
+/*         float: left; */
+/*         margin-right: 10px; */
+/*         background: image-url("user_interface/ui/viewer.png") no-repeat; */
+/*      }    */
     
-    a.viewer {
-        background: url("../images/icons/viewer.png") no-repeat;
-    }
-}
-
-.stop_area {
-    .info {
-        .warning {
-            background: url("../images/icons/warning.png") 0 100% no-repeat;
-            padding-left: 20px;
-        }
-    }
-}
-
-#map.stop_area, #map.service_link, #map.line {
-    float: right;
-    width: 400px;
-    height: 250px;
-}
-
-.service_link {
-
-    #service_link_stop_points {
-        li {
-            margin-bottom: 1.5em;
-        }
-        li.stop_area {
-            padding-left: 26px;
-        }
-        fieldset > ol > li {
-            margin-bottom: 0;
-        }
-    }
-
-    a {
-        display: inline;
-    }
-
-    a.remove {
-        float: left;
-        img {
-            margin: 4px 10px 0 0;
-        }
-    }
-
-    .buttons{
-        margin-top: 20px;
-    }
-
-
-}
-
-.indicator{
-
-}
-
-div.auto_complete {
-    width: 350px;
-    background: #fff;
-
-    ul {
-        border:1px solid #888;
-        margin:0;
-        padding:0;
-        width:100%;
-        list-style-type:none;
-    }
-    ul li {
-        margin:0;
-        padding:3px;
-    }
-    ul li.selected {
-        background-color: #ffb;
-    }
-    ul strong.highlight {
-        color: #800;
-        margin:0;
-        padding:0;
-    }
-}
+/*     a.viewer { */
+/*         background: image-url("user_interface/ui/viewer.png") no-repeat; */
+/*     } */
+/* } */
+
+/* .stop_area { */
+/*     .info { */
+/*         .warning { */
+/*             background: image-url("user_interface/ui/warning.png") 0 100% no-repeat; */
+/*             padding-left: 20px; */
+/*         } */
+/*     } */
+/* } */
+
+/* #map.stop_area, #map.service_link, #map.line { */
+/*     float: right; */
+/*     width: 400px; */
+/*     height: 250px; */
+/* } */
+
+/* .service_link { */
+
+/*     #service_link_stop_points { */
+/*         li { */
+/*             margin-bottom: 1.5em; */
+/*         } */
+/*         li.stop_area { */
+/*             padding-left: 26px; */
+/*         } */
+/*         fieldset > ol > li { */
+/*             margin-bottom: 0; */
+/*         } */
+/*     } */
+
+/*     a { */
+/*         display: inline; */
+/*     } */
+
+/*     a.remove { */
+/*         float: left; */
+/*         img { */
+/*             margin: 4px 10px 0 0; */
+/*         } */
+/*     } */
+
+/*     .buttons{ */
+/*         margin-top: 20px; */
+/*     } */
+
+
+/* } */
+
+/* .indicator{ */
+
+/* } */
+
+/* div.auto_complete { */
+/*     width: 350px; */
+/*     background: #fff; */
+
+/*     ul { */
+/*         border:1px solid #888; */
+/*         margin:0; */
+/*         padding:0; */
+/*         width:100%; */
+/*         list-style-type:none; */
+/*     } */
+/*     ul li { */
+/*         margin:0; */
+/*         padding:3px; */
+/*     } */
+/*     ul li.selected { */
+/*         background-color: #ffb; */
+/*     } */
+/*     ul strong.highlight { */
+/*         color: #800; */
+/*         margin:0; */
+/*         padding:0; */
+/*     } */
+/* } */
diff --git a/app/assets/stylesheets/lines.css.scss b/app/assets/stylesheets/lines.css.scss
index 59ec845d3..165689f3b 100644
--- a/app/assets/stylesheets/lines.css.scss
+++ b/app/assets/stylesheets/lines.css.scss
@@ -1,3 +1,116 @@
 // Place all the styles related to the lines controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+@mixin div_for_object {
+    margin-bottom: 20px;
+
+    .color {
+        width: 64px;
+        height: 64px;
+        float: left;
+        margin-right: 10px;
+    }
+
+    img {
+        float: left;
+        margin-right: 10px;
+    }
+
+    img.preview {
+        width: 90px;
+        height: 70px;
+    }
+
+    a { 
+        display:block;
+        text-decoration: underline;
+        margin: 5px 0px 0px 0px;
+    }
+
+    .info {
+        font-size: 10px;
+        color: #777;
+        font-weight: normal;
+        line-height: 14px;
+        margin-top: 5px;
+        
+        a {
+            display:inline;
+            color: #095495;
+        }
+
+        p {
+            margin:0;
+        }
+    }
+}
+
+@mixin content_to_clear {
+    content: " ";  
+    display: block; 
+    height: 0; 
+    clear: both;
+    visibility: hidden;
+}
+
+@mixin after_div_for_object {
+    @include content_to_clear;
+}
+
+#workspace.lines.index
+{
+    .line:after { 
+        @include after_div_for_object;  
+    }
+    
+    .line {
+        @include div_for_object;
+    
+        .color {
+            width: 64px;
+            height: 64px;
+            float: left;
+            margin-right: 10px;
+            a {
+                text-decoration: none;                   
+            }
+        }
+
+        .number {     
+            font-size: 16px;
+            text-align: center;
+            color: white;
+            font-weight: bold;
+            padding-top: 21px;
+        }   
+    }
+    
+}
+
+#workspace.lines.edit, #workspace.lines.new
+{
+    #line_color{ width: 100px;
+                 color: white;
+                 font-weight: bold;}
+}
+
+#workspace.lines.show
+{
+    .line_color{ color: white;
+                 font-weight: bold;
+                 padding: 0 5px 0 5px;}
+}        
+
+
+#workspace .order {
+    float: right;
+    padding: 15px 0;
+    font-size: 0.8em;
+    
+    a { text-decoration: underline; }
+    
+    a.current {
+      font-weight: bold;
+      text-decoration: none;
+    }
+}
diff --git a/app/controllers/lines_controller.rb b/app/controllers/lines_controller.rb
index 3a986b27c..83ab01674 100644
--- a/app/controllers/lines_controller.rb
+++ b/app/controllers/lines_controller.rb
@@ -1,4 +1,24 @@
 class LinesController < InheritedResources::Base
   defaults :resource_class => Chouette::Line
+  helper_method :sort_column, :sort_direction
+  respond_to :html
+  respond_to :xml
+  respond_to :json
+
+  protected
+
+  def collection
+    @lines ||= Chouette::Line.all.order_by [[sort_column.to_sym, sort_direction.to_sym]]
+  end
+
+  private
+
+  def sort_column  
+    %w(name number).include?(params[:sort]) ? params[:sort] : "name"
+  end  
+    
+  def sort_direction  
+    %w(asc desc).include?(params[:direction]) ? params[:direction] : "asc"
+  end  
 
 end
diff --git a/app/helpers/lines_helper.rb b/app/helpers/lines_helper.rb
index a03868a0a..45bd8c6c3 100644
--- a/app/helpers/lines_helper.rb
+++ b/app/helpers/lines_helper.rb
@@ -1,2 +1,8 @@
 module LinesHelper
+  def order(column)
+    title ||= Chouette::Line.human_attribute_name(column).titleize  
+    css_class = (column == sort_column) ? "current #{sort_direction}" : nil  
+    direction = (column == sort_column && sort_direction == "asc") ? "desc" : "asc"  
+    link_to title, { :sort => column, :direction => direction}, {:class => css_class}
+  end
 end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 048347894..7e0460ebb 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -16,7 +16,7 @@
 
       <div class="tabs">
         <ul class="main">
-          <li><%= tab_link_to "Lines", lines_path %></li>
+          <li><%= tab_link_to t('activerecord.models.line'), lines_path %></li>
         </ul>
       </div>
     </div>
diff --git a/app/views/lines/_form.erb b/app/views/lines/_form.erb
index 4d1a049b2..76c2ec53d 100644
--- a/app/views/lines/_form.erb
+++ b/app/views/lines/_form.erb
@@ -1,11 +1,18 @@
-<% semantic_form_for @line do |form| %>
-  <% form.inputs do %> 
+<%= semantic_form_for @line do |form| %>
+  <%= form.inputs do %> 
+    <%= form.input :network, :as => :select, :collection => Chouette::Network.all, :include_blank => false %> 
+    <%= form.input :company, :as => :select, :collection => Chouette::Company.all, :include_blank => false%>
+    <%= form.input :registrationnumber %>  
     <%= form.input :name %>
-    <%= form.input :number %>          
+    <%= form.input :publishedname %>
+    <%= form.input :number %>
+    <%= form.input :transportmodename, :as => :select, :collection => Chouette::TransportMode.definitions, :include_blank => false, :member_label => Proc.new { |a| t("#{a[0]}") }  %>
+    <%= form.input :comment,  :as => :text %>              
   <% end %>
 
-  <% form.buttons do %>
-    <%= form.commit_button %>
-    ou <%= link_to "revenir", @line %>
+  <%= form.buttons do %>
+    <%= form.commit_button true %>
+    <li><%= t('or') %></li>
+    <li><%= link_to t('back'), :back %></li>
   <% end %>
 <% end %>
diff --git a/app/views/lines/index.html.erb b/app/views/lines/index.html.erb
index d76172269..7ac2aab8c 100644
--- a/app/views/lines/index.html.erb
+++ b/app/views/lines/index.html.erb
@@ -1,10 +1,16 @@
-<%= title_tag "Lignes" %>
+<div class="order">  
+  Trier par  
+  <%= order "name" %> | 
+  <%= order "number" %>
+</div>
+
+<%= title_tag Chouette::Line.model_name.human.pluralize %> 
 
 <%= render :partial => "line", :collection => @lines %>
 
 <% content_for :sidebar do %>
 <ul class="actions">
-  <li><%= link_to "Créer une Ligne", new_line_path, :class => "add" %></li>
+  <li><%= link_to t('lines.actions.new'), new_line_path, :class => "add" %></li>
   <br>
 </ul>
 <% end %>
diff --git a/app/views/lines/show.html.erb b/app/views/lines/show.html.erb
index cf60567f1..b716705ad 100644
--- a/app/views/lines/show.html.erb
+++ b/app/views/lines/show.html.erb
@@ -4,16 +4,36 @@
 
   <div class="summary">
     <p>
-      <label>Nom :</label>
+      <label><%= Chouette::Line.human_attribute_name(:network) %>: </label>
+      <%= @line.network.name if @line.network.present? %>
+    </p>
+    <p>
+      <label><%= Chouette::Line.human_attribute_name("company") %>: </label>
+      <%= @line.company.name if @line.company.present? %>
+    </p>
+    <p>
+      <label><%= Chouette::Line.human_attribute_name("registrationnumber") %>: </label>
+      <%= @line.registrationnumber %>
+    </p>
+    <p>
+      <label><%= Chouette::Line.human_attribute_name("name") %>: </label>
       <%= @line.name %>
     </p>
     <p>
-      <label>Code :</label>
+      <label><%= Chouette::Line.human_attribute_name("publishedname") %>: </label>
+      <%= @line.publishedname %>
+    </p>
+    <p>
+      <label><%= Chouette::Line.human_attribute_name("number") %>: </label>
       <%= @line.number %>
     </p>
     <p>
-      <label>Identifiant Chouette :</label>
-      <%= @line.registrationnumber %>
+      <label><%= Chouette::Line.human_attribute_name("transportmodename") %>: </label>
+      <%= @line.transportmodename %>
+    </p>
+    <p>
+      <label><%= Chouette::Line.human_attribute_name("comment") %>: </label>
+      <%= @line.comment %>
     </p>
   </div>
 </div>
@@ -21,7 +41,7 @@
 <% content_for :sidebar do %>
 <ul class="actions">
   <li><%= link_to t('lines.actions.edit'), edit_line_path(@line), :class => "edit" %></li>
-  <li><%= link_to  t('lines.actions.destroy'), line_path(@line), :method => :delete, :confirm => "Etes vous sûr de supprimer la ligne #{@line.name} ?", :class => "remove" %></li>
+  <li><%= link_to  t('lines.actions.destroy'), line_path(@line), :method => :delete, :confirm =>  t('lines.actions.destroy_confirm'), :class => "remove" %></li>
   <br>
 </ul>
 <% end %>
diff --git a/config/application.rb b/config/application.rb
index 230e9e8a2..07b94ace7 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -31,7 +31,7 @@ module ChouetteIhm
 
     # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
     # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
-    # config.i18n.default_locale = :de
+    config.i18n.default_locale = :fr
 
     # Configure the default encoding used in templates for Ruby 1.9.
     config.encoding = "utf-8"
diff --git a/config/initializers/array_ext.rb b/config/initializers/array_ext.rb
new file mode 100644
index 000000000..92cc22d12
--- /dev/null
+++ b/config/initializers/array_ext.rb
@@ -0,0 +1,3 @@
+Rails.configuration.after_initialize do
+  require 'array_ext'
+end
diff --git a/config/initializers/ninoxe.rb b/config/initializers/ninoxe.rb
index 32b40ebda..10ac5e02d 100644
--- a/config/initializers/ninoxe.rb
+++ b/config/initializers/ninoxe.rb
@@ -6,4 +6,5 @@ class Chouette::Line
     end
     ActiveModel::Name.new name
   end
+
 end
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
new file mode 100644
index 000000000..385ce3172
--- /dev/null
+++ b/config/locales/fr.yml
@@ -0,0 +1,189 @@
+fr:
+# https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/fr.yml
+  date:
+    formats:
+      default: "%d/%m/%Y"
+      short: "%e %b"
+      long: "%e %B %Y"
+      summary: "%A %d %B %Y" # added
+    day_names: [dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi]
+    abbr_day_names: [dim, lun, mar, mer, jeu, ven, sam]
+    month_names: [~, janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre]
+    abbr_month_names: [~, jan., fév., mar., avr., mai, juin, juil., août, sept., oct., nov., déc.]
+    order: [ :day, :month, :year ]
+
+  time:
+    formats:
+      default: "%d %B %Y %H:%M:%S"
+      short: "%d %b %H:%M"
+      long: "%A %d %B %Y à %Hh%M"
+      hour: "%Hh%M"
+      minute: "%M min"
+    am: 'am'
+    pm: 'pm'
+
+  datetime:
+    distance_in_words:
+      half_a_minute: "une demi-minute"
+      less_than_x_seconds:
+        zero:  "moins d'une seconde"
+        one:   "moins d'une seconde"
+        other: "moins de %{count} secondes"
+      x_seconds:
+        one:   "1 seconde"
+        other: "%{count} secondes"
+      less_than_x_minutes:
+        zero:  "moins d'une minute"
+        one:   "moins d'une minute"
+        other: "moins de %{count} minutes"
+      x_minutes:
+        one:   "1 minute"
+        other: "%{count} minutes"
+      about_x_hours:
+        one:   "environ une heure"
+        other: "environ %{count} heures"
+      x_days:
+        one:   "1 jour"
+        other: "%{count} jours"
+      about_x_months:
+        one:   "environ un mois"
+        other: "environ %{count} mois"
+      x_months:
+        one:   "1 mois"
+        other: "%{count} mois"
+      about_x_years:
+        one:   "environ un an"
+        other: "environ %{count} ans"
+      over_x_years:
+        one:   "plus d'un an"
+        other: "plus de %{count} ans"
+      almost_x_years:
+        one:   "presqu'un an"
+        other: "presque %{count} ans"
+    prompts:
+      year:   "Année"
+      month:  "Mois"
+      day:    "Jour"
+      hour:   "Heure"
+      minute: "Minute"
+      second: "Seconde"
+
+  number:
+    format:
+      separator: ","
+      delimiter: " "
+      precision: 3
+      significant: false
+      strip_insignificant_zeros: false
+    currency:
+      format:
+        format: "%n %u"
+        unit: "€"
+        separator: ","
+        delimiter: " "
+        precision: 2
+        significant: false
+        strip_insignificant_zeros: false
+    percentage:
+      format:
+        delimiter: ""
+    precision:
+      format:
+        delimiter: ""
+    human:
+      format:
+        delimiter: ""
+        precision: 2
+        significant: true
+        strip_insignificant_zeros: true
+      storage_units:
+        format: "%n %u"
+        units:
+          byte:
+            one:   "octet"
+            other: "octets"
+          kb: "ko"
+          mb: "Mo"
+          gb: "Go"
+          tb: "To"
+      decimal_units:
+        format: "%n %u"
+        units:
+          unit: ""
+          thousand: "millier"
+          million: "million"
+          billion: "milliard"
+          trillion: "billion"
+          quadrillion: "million de milliards"
+
+  support:
+    array:
+      words_connector: ", "
+      two_words_connector: " et "
+      last_word_connector: " et "
+    select:
+      prompt: "Veuillez sélectionner"
+
+  helpers:
+    select:
+      prompt: "Veuillez sélectionner"
+    submit:
+      create: "Créer un %{model}"
+      update: "Modifier ce %{model}"
+      submit: "Enregistrer ce %{model}"
+
+
+  errors:
+    format: "Le %{attribute} %{message}"
+    messages: &errors_messages
+      inclusion: "n'est pas inclus(e) dans la liste"
+      exclusion: "n'est pas disponible"
+      invalid: "n'est pas valide"
+      confirmation: "ne concorde pas avec la confirmation"
+      accepted: "doit être accepté(e)"
+      empty: "doit être rempli(e)"
+      blank: "doit être rempli(e)"
+      too_long: "est trop long (pas plus de %{count} caractères)"
+      too_short: "est trop court (au moins %{count} caractères)"
+      wrong_length: "ne fait pas la bonne longueur (doit comporter %{count} caractères)"
+      not_a_number: "n'est pas un nombre"
+      not_an_integer: "doit être un nombre entier"
+      greater_than: "doit être supérieur à %{count}"
+      greater_than_or_equal_to: "doit être supérieur ou égal à %{count}"
+      equal_to: "doit être égal à %{count}"
+      less_than: "doit être inférieur à %{count}"
+      less_than_or_equal_to: "doit être inférieur ou égal à %{count}"
+      odd: "doit être impair"
+      even: "doit être pair"
+    template: &errors_template
+      header:
+        one:   "Impossible d'enregistrer ce %{model} : 1 erreur"
+        other: "Impossible d'enregistrer ce %{model} : %{count} erreurs"
+      body: "Veuillez vérifier les champs suivants : "
+
+  activemodel:
+    errors:
+      messages:
+        taken: "n'est pas disponible"
+        record_invalid: "La validation a échoué : %{errors}"
+        <<: *errors_messages
+      template:
+        <<: *errors_template
+      full_messages:
+        format: "%{attribute} %{message}"
+# FIN: https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/fr.yml
+  or: ou
+  back: Revenir
+  today: "Aujourd'hui"
+  yesterday: "Hier"
+  edit_periods: "Editer Périodes"   
+  delete_periods: "Supprimer Périodes" 
+  formtastic:
+    actions:
+      create: "Créer %{model}"
+      update: "Modifier %{model}"
+  attributes:
+    author: "Modifié par"
+    created_at: "Créé le"
+    updated_at: "Modifié le"
+
diff --git a/config/locales/layouts.yml b/config/locales/layouts.yml
new file mode 100644
index 000000000..d4b78e014
--- /dev/null
+++ b/config/locales/layouts.yml
@@ -0,0 +1,20 @@
+en:
+  layouts:
+    back_to_dashboard: "Back to Dashboard"
+    help: Help
+    home: "Home"          
+    user:
+      profile: "My Profile"
+      sign_out: "Sign out"
+    tabs:
+      dashboard: "Dashboard"
+fr:
+  layouts:
+    back_to_dashboard: "Retour au Tableau de Bord"
+    help: Besoin d'aide?
+    home: "Accueil"
+    user:
+      profile: "Mon Profil"      
+      sign_out: "Déconnexion"
+    tabs:
+      dashboard: "Tableau de bord"
diff --git a/config/locales/lines.yml b/config/locales/lines.yml
new file mode 100644
index 000000000..a958858de
--- /dev/null
+++ b/config/locales/lines.yml
@@ -0,0 +1,40 @@
+en:
+  lines:
+    actions:
+      new: Add a new line
+      edit: Edit this line
+      destroy: Remove this line
+      destroy_confirm: "Are you sure you want destroy this line?"
+    new:
+      title: "Add a new line"
+    edit:
+      title: "Update line"
+    show:
+      title: "Line"
+
+fr:
+  lines:
+    actions:
+      new: Ajouter une ligne
+      edit: Modifier cette ligne
+      destroy: Supprimer cette ligne
+      destroy_confirm: "Etes vous sûr de détruire cette ligne ?"
+    new:
+      title: "Ajouter une ligne"
+    edit:
+      title: "Modifier la ligne"
+    show:
+      title: "Ligne"
+  activerecord:
+    models:
+      line: Lignes
+    attributes:
+      line:
+        network: "Réseau"
+        company: "Transporteur"
+        registrationnumber: "Identifiant"
+        name: "Nom"
+        publishedname: "Nom publié"        
+        number: "Indice"
+        transportmodename: "Mode de transport"
+        comment: "Commentaire"
diff --git a/config/locales/transport_modes.yml b/config/locales/transport_modes.yml
new file mode 100644
index 000000000..45e273903
--- /dev/null
+++ b/config/locales/transport_modes.yml
@@ -0,0 +1,24 @@
+en:
+
+fr:
+  interchange: Correspondance
+  unknown: Inconnu
+  coach: Voiture
+  air: Air
+  waterborne: Eau
+  bus: Bus
+  ferry: Ferry
+  walk: Piéton
+  metro: Métro
+  shuttle: Navette
+  rapid_transit: Lignes rapides
+  taxi: Taxi
+  local_train: Train Local
+  train: Train
+  long_distance_train: Train longue distance
+  tramway: Tramway
+  trolley_bus: Bus Trolley
+  private_vehicle: Véhicule Privé
+  bicycle: Vélo
+  other: Autre
+  
\ No newline at end of file
diff --git a/lib/array_ext.rb b/lib/array_ext.rb
new file mode 100644
index 000000000..438d92ee2
--- /dev/null
+++ b/lib/array_ext.rb
@@ -0,0 +1,54 @@
+class Array
+
+  def order_by(order)
+    attribute, direction = order.first
+
+    self.sort{ |a,b|
+      sa, sb = a.send(attribute.to_sym).to_s, b.send(attribute.to_sym).to_s
+      if ((sa.downcase <=> sb.downcase) == 0)
+      then sa <=> sb
+      else
+        na, nb = self.class.check_regexp(sa, sb)
+        na <=> nb
+      end
+    }.tap do |items|
+      items.reverse! if direction.to_sym == :desc
+    end
+  end
+
+  private
+  # TODO : Puts in a gem this development 
+  def self.check_regexp(sa, sb)
+    regexp = /(^|\D+)(\d+|(\D$))/
+    ma, mb = multireg(regexp,sa), self.multireg(regexp,sb)
+    it = 0
+    equal = 0
+    ret = ["",""]
+    numeric = /(\d+)/
+    while (it < [ma.size,mb.size].min) and (equal==0) 
+      if (ma[it] and mb[it]) and (ma[it][1] and mb[it][1]) \
+        and (numeric.match ma[it][0] and numeric.match mb[it][0])
+        l = [ma[it][2].size,mb[it][2].size].max
+        ret = [self.format(ma[it], l), self.format(mb[it], l)]
+      else 
+        ret = [ma[it][0].downcase, mb[it][0].downcase]
+      end
+      equal = ret[0] <=> ret[1]
+      it+=1
+    end
+    return ret[0], ret[1]
+  end
+
+  def self.multireg rgpx, str
+    result = []
+    while rgpx.match str
+      result.push rgpx.match(str)
+      str = rgpx.match(str).post_match
+    end
+    result
+  end
+
+  def self.format(match_data, length)
+    match_data[1].gsub("_", "").downcase + ("%0#{length}d" % match_data[2].to_i)
+  end
+end