|
|
<div class="educontent mt30 mb80">
|
|
|
<%= labelled_form_for @course do |f| %>
|
|
|
<div class="mb10 edu-back-white">
|
|
|
<p class="padding10-20 bor-bottom-greyE font-18 color-grey-3">新建课堂</p>
|
|
|
<div class="padding30-20">
|
|
|
<p class="color-grey-6 font-16 mb15">课程名称</p>
|
|
|
<div class="clearfix">
|
|
|
<span class="fl mr30 color-orange pt10">* </span>
|
|
|
<div class="pr fl with30">
|
|
|
<input type="text" name="course[course_list]" autocomplete="off" style="width: 100%;" id="new_course_list" class="input-100-45 greyInput" maxlength="100" placeholder="例如：数据结构">
|
|
|
<ul class="course_list_ul">
|
|
|
</ul>
|
|
|
</div>
|
|
|
<p class="fl font-12 color-grey-9 mt10 ml10">（错误示例：数据结构2017本部；数据结构2017秋季；数据结构2017电子商务1班）</p>
|
|
|
<span class="color-orange mt10 ml10 fl font-12 none" id="new_course_syllabus_notice"><i class="fa fa-exclamation-circle mr3 font-14"></i>必填项</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="pl20 pr20 pb30">
|
|
|
<p class="color-grey-6 font-16 mb15">课堂名称</p>
|
|
|
<div class="clearfix">
|
|
|
<span class="fl mr30 color-orange pt10">* </span>
|
|
|
<div class="fl with30">
|
|
|
<input type="text" name="course[name]" autocomplete="off" id="new_course_name" class="input-100-45 fl greyInput" maxlength="100" placeholder="例如：数据结构2016秋季班级" onkeyup="regex_course_name('new');">
|
|
|
</div>
|
|
|
<p class="fl font-12 color-grey-9 mt10 ml10">（如果本学期包含多个班级，只需创建一个课堂然后在课堂内部建立不同的分班）</p>
|
|
|
<span class="color-orange mt10 ml10 fl font-12 none" id="new_course_name_notice"><i class="fa fa-exclamation-circle mr3 font-14"></i>必填项</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mb10 edu-back-white">
|
|
|
<div class="padding30-20">
|
|
|
<div class="clearfix mb30">
|
|
|
<p class="color-grey-6 font-16 mb15">总学时</p>
|
|
|
<input type="text" name="period" id="new_class_period" class="winput-90-40 greyInput fl ml40" onkeyup="regex_course_class_period('new');" placeholder="例如：30" maxlength="6">
|
|
|
<span class="color-orange ml10 fl font-12 mt10 none" id="new_course_class_period_notice"><i class="fa fa-exclamation-circle mr5 font-14" ></i>请输入正整数</span>
|
|
|
</div>
|
|
|
<div class="clearfix mb30">
|
|
|
<p class="color-grey-6 font-16 mb15">学分</p>
|
|
|
<input type="text" id="new_course_credit" name="credit" maxlength="4" onkeyup="regex_course_credit('new');" class="winput-90-40 greyInput fl ml40" onkeyup="regex_course_credit('new');" placeholder="例如：4">
|
|
|
<span class="color-orange ml10 fl font-12 mt10 none" id="new_course_credit_notice"><i class="fa fa-exclamation-circle mr5 font-14" ></i>请输入正整数或保留一位小数的浮点数</span>
|
|
|
</div>
|
|
|
<div class="clearfix">
|
|
|
<p class="color-grey-6 font-16 mb15">结束时间</p>
|
|
|
<input type="text" id="new_course_end_date" class="winput-240-40 greyInput fl ml40" name="end_date" placeholder="请选择结束日期">
|
|
|
<span class="color-orange ml10 fl font-12 mt10 none" id="new_course_end_date_notice"><i class="fa fa-exclamation-circle mr5 font-14" ></i>结束日期必须晚于当前日期</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mb10 edu-back-white">
|
|
|
<div class="padding30-20 clearfix">
|
|
|
<p class="color-grey-6 font-16 mb15">公开设置</p>
|
|
|
<input id="course_is_public" name="course[is_public]" class="magic-checkbox" type="checkbox" value="1">
|
|
|
<label for="course_is_public" class="ml40">公开课堂<span class="color-grey-8">（选中后本课堂对所有用户可见，否则仅本课堂成员可见）</span></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="clearfix mt30">
|
|
|
<a href="javascript:void(0)" class="defalutSubmitbtn fl mr20" onclick="submit_new_course();">提交</a>
|
|
|
<%= link_to '取消', courses_path, :class => 'defalutCancelbtn fl' %>
|
|
|
</div>
|
|
|
<% end %>
|
|
|
</div>
|
|
|
<script>
|
|
|
$(function(){
|
|
|
var course_list_name = "";
|
|
|
$('#new_course_end_date').datetimepicker({
|
|
|
allowBlank:true,
|
|
|
lang:'ch',
|
|
|
format:'Y-m-d',
|
|
|
formatDate:'Y-m-d',
|
|
|
timepicker:false,
|
|
|
validateOnBlur:false
|
|
|
});
|
|
|
|
|
|
$("body").click(function(event){
|
|
|
$(".course_list_ul").hide();
|
|
|
});
|
|
|
|
|
|
$("#new_course_list").on('input', function(e){
|
|
|
throttle(search_course_list, window, e);
|
|
|
});
|
|
|
$("#new_course_list").on('blur', function(e){
|
|
|
if($("#new_course_name").val() == ""){
|
|
|
$("#new_course_name").val($("#new_course_list").val());
|
|
|
} else{
|
|
|
if($("#new_course_name").val().indexOf(course_list_name) == 0){
|
|
|
$("#new_course_name").val($("#new_course_name").val().replace(course_list_name, $("#new_course_list").val()));
|
|
|
} else{
|
|
|
$("#new_course_name").val($("#new_course_list").val() + $("#new_course_name").val());
|
|
|
}
|
|
|
}
|
|
|
regex_course_name('new');
|
|
|
course_list_name = $("#new_course_list").val();
|
|
|
});
|
|
|
$("#new_course_list").on('click', function (e) {
|
|
|
search_course_ajax($("#new_course_list").val().trim());
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
$(".course_list_ul").on('click', 'p', function(event) {
|
|
|
$("#new_course_list").val($(this).html());
|
|
|
if($("#new_course_name").val() == ""){
|
|
|
$("#new_course_name").val($("#new_course_list").val());
|
|
|
} else{
|
|
|
if($("#new_course_name").val().indexOf(course_list_name) == 0){
|
|
|
$("#new_course_name").val($("#new_course_name").val().replace(course_list_name, $("#new_course_list").val()));
|
|
|
} else{
|
|
|
$("#new_course_name").val($("#new_course_list").val() + $("#new_course_name").val());
|
|
|
}
|
|
|
}
|
|
|
regex_course_name('new');
|
|
|
$(".course_list_ul").hide();
|
|
|
course_list_name = $(this).html();
|
|
|
event.stopPropagation();
|
|
|
});
|
|
|
});
|
|
|
</script> |
