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

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

<div class="stud-class-set">
  <div class="set-top mb15 clearfix user_bg_shadow">
    <span class="fl pl20 font-16">设置</span>
    <%= link_to '返回', course_path(@course), :class => 'fr mr15 link-color-grey' %>
  </div>
  <div class="news">
    <div class="nav clearfix user_bg_shadow">
      <p class="fl font-16 sheet" data-option="basic">
        基本信息<i class="fa fa-caret-down color-blue font-12" aria-hidden="true"></i>
      </p>

      <p class="fl font-16" data-option="member">
        成员管理
        <i class="fa fa-caret-down color-blue font-12" style="display:none;" aria-hidden="true"></i>
      </p>

     <!--<p class="fl font-16" data-option="module">-->
        <!--模块设置-->
        <!--<i class="fa fa-caret-down color-blue font-12" style="display:none;z-index:100;" aria-hidden="true"></i>-->
      <!--</p>-->
    </div>

    <div class="container">
      <!----------------基本信息模块----------------------->
      <div class="basic user_bg_shadow_notop" 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-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-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-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-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-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="member" style="display:none;">
        <div class="top mb20 user_bg_shadow_notop">
          <p class="clearfix">
            <a href="javascript:void(0);" id="constration" onclick="add_new_group(<%= @course.id %>);" class="task-btn constration task-btn-green">＋ 添加分班</a>
          </p>
          <% if @course.course_groups.count > 0 %>
              <input type="checkbox" id="choose_group_allow" class="check mt20 magic-checkbox" onclick="update_choose_group_allow(<%= @course.id %>);" <%= @course.choose_group_allow ? 'checked' : ''%> value="1"/>&nbsp;&nbsp;<label for="choose_group_allow" class="color-grey">允许选班（选中后学生可以自己选择分班，否则只有教师和助教可以为学生选择分班）</label>
          <% end %>
        </div>

        <div id="setting_teacher_list">
          <%= render :partial => 'courses/settings/members' %>
        </div>
        <div id="setting_student_list">
        </div>
      </div>
      <!--------------------模块设置-------------------->
     <!--<div class="module" id="setting_moduels_list" style="display:none;">-->
        <!--<%#= render :partial => 'courses/settings/moduels' %>-->
      <!--</div>-->
    </div>
  </div>
</div>

<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 %>
    });

    $('#edit_course_end_date').datetimepicker({
        allowBlank:true,
        lang:'ch',
        format:'Y-m-d',
        formatDate:'Y-m-d',
        timepicker:false,
        validateOnBlur:false
    });
</script>