Add route_sections for traces

5 files changed, 147 insertions, 8 deletions

diff --git a/app/assets/images/icons/edit-disabled.png b/app/assets/images/icons/edit-disabled.png
new file mode 100644
index 000000000..aaefed65c
--- /dev/null
+++ b/app/assets/images/icons/edit-disabled.png
diff --git a/app/assets/javascripts/route_section.js.coffee b/app/assets/javascripts/route_section.js.coffee
new file mode 100644
index 000000000..f2e494c0c
--- /dev/null
+++ b/app/assets/javascripts/route_section.js.coffee
@@ -0,0 +1,58 @@
+class @RouteSectionMap
+  @onSelectedFeature: (feature) ->
+    route_section_id = feature.data.id
+
+    routeSectionOption = $("option[value=#{route_section_id}]")
+    routeSectionOption.parent().val route_section_id
+
+    $('#map-selection').show()
+    $('#empty-map-selection').hide()
+
+    selectionUrl = location.pathname.replace /edit$/, "selection"
+    $.ajax(url: selectionUrl, method: 'POST', data: { route_section_id: route_section_id }, dataType: 'html').done (data) ->
+      $('#map-selection div').replaceWith(data)
+
+  @onUnselectedFeature: (feature) ->
+    $('#map-selection').hide()
+    $('#empty-map-selection').show()
+
+jQuery ->
+  if $("#map.route_section").length > 0 and user_geometry?
+    projWGS84 = new OpenLayers.Projection("EPSG:4326")
+    proj900913 = new OpenLayers.Projection("EPSG:900913")
+    wtk_format = new OpenLayers.Format.WKT()
+
+    user_geometry.events.on({
+      afterfeaturemodified: (event) ->
+        wgs84_geometry = event.feature.geometry.transform(proj900913, projWGS84)
+        wgs84_feature = new OpenLayers.Feature.Vector(wgs84_geometry)
+        ewtk = "SRID=4326;#{wtk_format.write(wgs84_feature)}"
+
+        $('#route_section_editable_geometry').val(ewtk)
+        return
+    })
+
+  $('#new_route_sections_selector select').on 'change', ->
+    new_route_section_id = $(this).val()
+
+    edit_link = $(this).closest("tr").find("a.edit-route-section")
+
+    # Save edit link to play with it
+    unless edit_link.data("href-pattern")?
+      edit_link.data "href-pattern", edit_link.attr('href').replace(new RegExp("/route_sections/([0-9]+)/edit"), "/route_sections/:id/edit")
+
+    if !!new_route_section_id
+      edit_link.removeClass "disabled"
+      edit_link.attr 'href', edit_link.data("href-pattern").replace(/:id/, new_route_section_id)
+    else
+      edit_link.addClass "disabled"
+      edit_link.attr 'href', '#'
+
+  $('form.route_section').find('button[type="submit"]').on 'click', (e) ->
+    e.preventDefault();
+    if typeof modify_feature != 'undefined'
+      modify_feature.deactivate()
+    $('form.route_section').submit()
+    return
+
+  return
diff --git a/app/assets/stylesheets/main/route_sections.css.scss b/app/assets/stylesheets/main/route_sections.css.scss
new file mode 100644
index 000000000..cc1c85abc
--- /dev/null
+++ b/app/assets/stylesheets/main/route_sections.css.scss
@@ -0,0 +1,68 @@
+#workspace.route_sections_selectors.edit {
+    td.route_section {
+        .input {
+            padding: 0;
+            margin: 0;
+
+            select {
+                width: 100%;
+            }
+        }
+    }
+
+    a.edit-route-section {
+        background: url(image-path('icons/edit.png')) no-repeat 0% 50%;
+        text-indent: -9999px;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+
+        margin-right: 8px;
+
+        &.disabled {
+            background-image: url(image-path('icons/edit-disabled.png'));
+        }
+    }
+
+    #map-selection {
+        position: relative;
+        span {
+            display: inline-block;
+        }
+        .departure, .arrival {
+            width: 25%;
+        }
+        .actions {
+            width: 25%;
+            overflow: visible;
+            padding-left: 0;
+            position: absolute;
+            right: 0;
+        }
+    }
+}
+
+#workspace.route_sections.index {
+    th.distance, th.points {
+        text-align: center;
+    }
+
+    td.distance, td.points, td.actions {
+        text-align: center;
+    }
+}
+
+#workspace.route_sections.edit {
+    .formtastic {
+        .input .label {
+            width: 40%;
+        }
+        .actions {
+            padding-left: 19%;
+        }
+    }
+    #map {
+        width: 600px;
+        heigth: 600px;
+    }
+}
diff --git a/app/assets/stylesheets/main/routes.scss b/app/assets/stylesheets/main/routes.scss
index 7714c13a3..44703c7e5 100644
--- a/app/assets/stylesheets/main/routes.scss
+++ b/app/assets/stylesheets/main/routes.scss
@@ -3,7 +3,7 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 #workspace.lines.show
-{   
+{
 }
 
 #workspace.routes.edit, #workspace.routes.new, #workspace.routes.create, #workspace.routes.update
@@ -11,13 +11,13 @@
     #route_color{ width: 100px;
                  color: white;
                  font-weight: bold;}
-    
+
      #stop_points .nested-fields {
         ol {
             margin-left: 25%;
-            .handle { margin-left: 5px;}   
+            .handle { margin-left: 5px;}
 
-            .search_stop_area {            
+            .search_stop_area {
                 margin-bottom: 0px !important;
             }
 
@@ -31,7 +31,7 @@
 
      #stop_points .links {
          margin: 10px 0 15px 25%;
-     }       
+     }
 }
 
 #workspace.routes.edit_boarding_alighting{
@@ -39,10 +39,18 @@
     .stop_area{
         padding-top: 7px;
     }
-    
+
 }
 
 #workspace.routes.show
-{  
-}     
+{
+}
+.large-map {
+  width: 100%;
+  height: 600px;
+  #map {
+    width: 100%;
+    height: 100%;
+  }
+}
 
diff --git a/app/assets/stylesheets/modules/icons.scss b/app/assets/stylesheets/modules/icons.scss
index 001e511d1..3c42c3bd6 100644
--- a/app/assets/stylesheets/modules/icons.scss
+++ b/app/assets/stylesheets/modules/icons.scss
@@ -5,6 +5,11 @@ a:before {
     vertical-align: middle;
 }
 
+a.view:before { // fa-eye
+  content: "\f06e";
+  color: $brand-success;
+}
+
 a.add:before { // fa-plus-circle
                content: "\f055";
                color: $brand-success;