bus/app/views/admin/ruling_buses/_bus_form.html.erb

<%# javascript_include_tag "select2/select2.min" %>
<%# stylesheet_link_tag "select2/select2" %>
<style type="text/css">
  .tab-panel .tab-content{
    display: none;
  }
  .tab-panel .tab-content.active{
    display: block;
  }
  .tab-panel .tab-content,.tab-panel .btn-group{
    float: left;
  }
</style>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- Category -->
<div class="control-group">
  <label class="control-label muted"><%= t(:category) %></label>
  <div class="controls">
    <%= select_category(f, @module_app) %>
  </div>
</div>
<div class="control-group">
  <label class="control-label muted"><%= t("ruling_bus.city") %></label>
  <div class="controls">
    <%= f.select :city,RulingBusesHelper.get_available_cities %>
  </div>
</div>
<% stops = f.object.city.blank? ? [] : RulingBusesHelper.get_stops_for_city(f.object.city,f.object.location_code,f.object.locale) %>
<%= f.hidden_field :locale %>
<%= f.hidden_field :location_code %>
<%= f.hidden_field :cache_data %>
<%= f.hidden_field :route_names, value: f.object.route_names.join(',') %>
<div class="control-group">
  <label class="control-label muted"><%= t("ruling_bus.monitor_point") %></label>
  <div class="controls">
    <%= f.select :monitor_point,stops %>
  </div>
</div>
<div class="control-group">
  <label class="control-label muted"><%= t("ruling_bus.destination") %></label>
  <div class="controls">
    <%= f.select :destination,stops %>
  </div>
</div>
<div class="control-group">
  <label class="control-label muted"><%= t("ruling_bus.direction") %></label>
  <div class="controls">
    <%= f.select :direction,RulingBusesHelper::Directions[I18n.locale].map{|k,v| [v,k]} %>
  </div>
</div>
<div class="control-group">
  <label class="control-label muted"><%= t("ruling_bus.hint") %></label>
  <div class="controls">
    <%= RulingBusesHelper.multiple_lang_tag(nil,'text_field','hint_translations',f.object.hint_translations,{placeholder: t('ruling_bus.hint')}) %>
  </div>
</div>
<div class="control-group">
  <label class="control-label muted"><%= t("ruling_bus.route_name") %></label>
  <div class="controls" id="route_name">
    <%= f.object.route_names.join('<br>').html_safe %>
  </div>
</div>
<!-- Form Actions -->
<div class="form-actions">
  <%#= f.hidden_field :time_offset, :id=>"weather_timeoffset" %>
  <% referer = request.referer rescue nil %>
  <% referer = get_referer_url if referer.blank? || request.host != URI.parse(URI.encode(referer)).host %>
  <%= f.submit t('ruling_bus.save'), class: 'btn btn-primary' %>
  <input type="hidden" name="referer_url" value="<%= referer %>">
  <%= link_to t('cancel'), referer, :class=>"btn" %> 
</div>
<script>
  $('#ruling_bus_info_city').select2();
  $('#ruling_bus_info_monitor_point').select2();
  $('#ruling_bus_info_destination').select2();
  var default_locale = $('#ruling_bus_info_locale').val()
  $('#ruling_bus_info_city').change(function(){
    var self = this;
    $("#ruling_bus_info_monitor_point,#ruling_bus_info_destination").attr('disabled','disabled')
    $.post( "/admin/ruling_buses/get_stops_and_code_for_city?locale=<%= I18n.locale %>", {city: $(self).val(), default_locale: default_locale}, function( data ) {
      var options = [];
      $.each(data['stops'], function (key,value) {
        if (typeof(value).toLowerCase()!='string'){
          var id = value[0];
          var v = value[1];
        }else{
          var id = value;
          var v = value;
        }
        var id =  
        options.push({
            text: v,
            id: id
        });
      })
      $("#ruling_bus_info_monitor_point,#ruling_bus_info_destination").empty().select2({
          data: options
      });
      $("#ruling_bus_info_monitor_point,#ruling_bus_info_destination").removeAttr('disabled');
      $('#ruling_bus_info_location_code').val(data['code']);
    });
  })
  $('#ruling_bus_info_monitor_point,#ruling_bus_info_destination,#ruling_bus_info_direction').change(function () {
    var monitor_point = $('#ruling_bus_info_monitor_point').val();
    var destination = $('#ruling_bus_info_destination').val();
    var direction = $('#ruling_bus_info_direction').val();
    var location_code = $('#ruling_bus_info_location_code').val();
    $.post( "/admin/ruling_buses/route_name_for_targets?locale=<%= I18n.locale %>",
      {
        city: $("#ruling_bus_info_city").val(),
        monitor_point: monitor_point,
        destination: destination,
        direction: direction,
        location_code: location_code,
        default_locale: default_locale
      }, function( data ) {
      $("#route_name").html(data['show'].join('<br>'));
      $("#ruling_bus_info_route_names").val(data['show'].join(','));
      $("#ruling_bus_info_cache_data").val(data['org'])
    });
  })
</script>