educoder/app/views/courses/settings.html.erb

<%= javascript_include_tag 'jquery.datetimepicker.js' %>

<div class="stud-class-set">
  <div class="set-top mb20 clearfix user_bg_shadow bor-grey-e">
    <span class="fl pl20 font-16">设置</span>
    <%= link_to '返回', course_path(@course), :class => 'fr mr20 color-orange05' %>
  </div>
  <div class="news">
    <div class="container">
      <!----------------基本信息模块----------------------->
      <div class="basic user_bg_shadow_notop for-content-1 for-content bor-grey-e" style="min-height: 570px;">
        <%= labelled_form_for @course, :html => {:remote => true} do |f| %>
            <div class="bottom">
              <ul>
                <input type="hidden">
                <li class="clearfix pt20">
                  <label class="panel-form-label label fl"><span class="color-orange mr5">*</span>课程名称&nbsp;&nbsp;&nbsp;&nbsp;
                  </label>
                  <div class="pr fl with75">
                    <input type="text" name="course[course_list]" autocomplete="off" style="width: 100%;" id="edit_course_list" value="<%= @course.course_list_name %>" class="task task-height-40 panel-box-sizing fl color-dark-grey" maxlength="100" placeholder="例如：数据结构">
                    <ul class="course_list_ul">
                    </ul>
                  </div>
                  <div class="cl"></div>
                  <span class="color-orange fl none" id="edit_course_syllabus_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>请先输入课程</span>
                </li>
                <li class="pt20 clearfix mb40">
                  <label class="panel-form-label label fl"><span class="color-orange mr5">*</span>课堂名称&nbsp;&nbsp;&nbsp;&nbsp;
                  </label>
                  <input type="text" name="course[name]" id="edit_course_name" value="<%= @course.name %>" class="task task-height-40 panel-box-sizing fl color-dark-grey" maxlength="100" placeholder="例如：数据结构2016秋季班级" onkeyup="regex_course_name('edit');">
                  <div class="cl"></div>
                  <span class="color-orange fl none" id="edit_course_name_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>课堂名称不能为空且至少有两个字符</span>
                  <div class="cl"></div>
                <!--<li class="ml125 mb5 fontGrey3" style="margin-left:25%;"><i class="fa fa-check-circle color-light-green mr5"></i>正确示例：软件工程计算机系2016秋季A班</li>
                <li class="ml125 fontGrey3" style="margin-left:25%;"><i class="fa fa-times-circle color-orange mr5"></i>错误示例：计算机系2016秋季A班</li>-->

                  <div class="tusi" style="left:108% ">
                    <div class="entry">
                      <em></em>
                      <span class="after"></span>
                      <p class="color-grey mt10" style="height: 26px;line-height: 26px;">注意：1、课堂名称 = 课程名称 + 学期信息 + 其它</p>
                      <p class="color-grey ml50" style="height: 26px;line-height: 26px;margin-left: 55px;"><i class="fa fa-check-circle color-light-green mr5"></i>正确示例：数据结构2016秋季班级</p>
                      <p class="color-grey" style="height: 26px;line-height: 26px;margin-left: 55px;"><i class="fa fa-times-circle color-orange mr5"></i>错误示例：数据结构班级</p>
                      <p class="color-grey" style="height: 26px;line-height: 26px;margin-left: 42px;">2、如果本学期包含多个班级，只需创建一个课堂</p>
                      <p class="color-grey mb10" style="height: 26px;line-height: 26px;margin-left: 65px;">然后在课堂内部建立不同的分班</p>
                    </div>
                  </div>
                </li>
                <li class="pt20 clearfix">
                  <label class="panel-form-label label fl">总学时&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" name="period" id="edit_class_period" value="<%= @course.class_period %>" class="task task-height-40 panel-box-sizing fl color-dark-grey" onkeyup="regex_course_class_period('edit');" placeholder="例如&nbsp;&nbsp;30" maxlength="6">
                  <div class="cl"></div>
                  <span class="color-orange fl none" id="edit_course_class_period_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>请输入正整数</span>
                </li>
                <li class="pt20 clearfix">
                  <label class="panel-form-label label fl">学分&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" id="edit_course_credit" value="<%= @course.credit %>" name="credit" maxlength="4" class="task task-height-40 panel-box-sizing fl color-dark-grey" onkeyup="regex_course_credit('edit');" placeholder="例如&nbsp;&nbsp;4">
                  <div class="cl"></div>
                  <span class="color-orange fl none" id="edit_course_credit_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>请输入正整数或保留一位小数的浮点数</span>
                </li>
                <li class="pt20 clearfix">
                  <label class="panel-form-label label fl">结束时间&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" id="edit_course_end_date" value="<%= @course.end_date %>" class="task task-height-40 panel-box-sizing fl color-dark-grey" name="end_date" placeholder="请选择结束日期">
                  <div class="cl"></div>
                  <div class="tusi" style="left:108% ">
                    <div class="entry">
                      <em></em>
                      <span class="after"></span>
                      <p class="color-grey">结束日期过后，课堂进入归档状态，只能在历史课堂中查看</p>
                    </div>
                  </div>
                  <div class="cl"></div>
                  <span class="color-orange fl none" id="edit_course_end_date_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>结束日期必须晚于当前日期</span>
                </li>
                <li class="pt20 clearfix ">
                  <label class="panel-form-label label fl">公开课堂&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <input id="edit_course_public" type="checkbox" name="course[is_public]" class="fl mt8 mr5 magic-checkbox" value="1" <%= @course.is_public == 1 ? 'checked' : '' %>/>
                  <label for="edit_course_public" class="color-grey fl">选中后本课堂对所有用户可见，否则仅本课堂成员可见</label>
                </li>
                <li class="mt20 clearfix pb20">
                  <label class="panel-form-label label fl">&nbsp;&nbsp;</label>
                  <a href="javascript:void(0);" class="task-btn task-btn-blue fl mr20" onclick="submit_edit_course(<%= @course.id%>);">保存</a>
                  <%= link_to '取消', course_path(@course), :class => 'task-btn fl ' %>
                </li>
              </ul>
            </div>
        <% end %>
      </div>

      <!--------------------模块设置-------------------->
     <!--<div class="module" id="setting_moduels_list" style="display:none;">-->
        <!--<%#= render :partial => 'courses/settings/moduels' %>-->
      <!--</div>-->
    </div>
  </div>
</div>
<style>body{background: #ffffff}</style><!--后续要删除-->
<script>
    var course_list_name = "";
    $(function () {
        $("body").click(function(event){
            $(".course_list_ul").hide();
            //event.stopPropagation();
        });

        $(".course_list_ul").on('click', 'p',function(event) {
            $("#edit_course_list").val($(this).html());
            if($("#edit_course_name").val() == ""){
                $("#edit_course_name").val($("#edit_course_list").val());
            } else{
                if($("#edit_course_name").val().indexOf(course_list_name) == 0){
                    $("#edit_course_name").val($("#edit_course_name").val().replace(course_list_name, $("#edit_course_list").val()));
                } else{
                    $("#edit_course_name").val($("#edit_course_list").val() + $("#edit_course_name").val());
                }
            }
            regex_course_name('edit');
            $(".course_list_ul").hide();
            course_list_name = $(this).html();
            event.stopPropagation();
        });

        <% if @select_tab == 'member'%>
            $(".stud-class-set .news .nav p[data-option='member']").click();
            <% if @role && @role == 'as' %>
                $.get(
                                '/courses/<%= @course.id %>/all_student_list'
                );
            <% elsif @role %>
                $.get(
                                '/courses/<%= @course.id %>/has_group_student_list?group_id=<%= @role %>'
                );
            <% end %>
        <%# elsif @select_tab == 'module'%>
//            $(".stud-class-set .news .nav p[data-option='module']").click();
        <% end %>

        /*tab切换*/
        /*$("#edu-tab-nav li").on("click",function(){
            $("#edu-tab-nav li").removeClass("background-orange");
            $(this).addClass("background-orange");
            $(".for-content").hide();
            $(".for-content-"+$(this).index()).show();
        })*/
    });

    $('#edit_course_end_date').datetimepicker({
        allowBlank:true,
        lang:'ch',
        format:'Y-m-d',
        formatDate:'Y-m-d',
        timepicker:false,
        validateOnBlur:false
    });
    function addtip(){
        console.log("<%= @course.course_groups%>");
        <% unless @course.course_groups.empty? %>
        <% @course.course_groups.each do |group| %>
        if($(".setting_group_<%= group.id %> span").width() == 115){
            $(".setting_group_<%= group.id %>").attr("data-tip-left","<%= group.name %>");
        }
        <% end %>
        <% end %>

    }

</script>