CreateClassApe.js 9.9 KB
//*
// 创建课堂模块
// */

import Loger from "../Loger";
import Ape from "./Ape";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
import dateUI from 'libs/laydate';

let loger = Loger.getLoger('PC-CreateClassApe');

class CreateClassApe extends Ape {
    constructor() {
        super();
        this.classDateList = {};//创建课堂信息
        this.addEvent();
        this.init();
    }

    init() {
        //判断列表在右侧时取消边距
        this._judgeListPlace();
        $('#collectYes').hide();
        //默认显示当前时间戳
        this._showPresentTime();

        $('#createClassBtn').on('click',this._createClassBtnHandler.bind(this));
        $('.recordLi').on('click',this._recordLiHandler.bind(this));//课堂分类
        $('.liveInfoLeftLi').on('click',this._liveInfoLeftLiHandler.bind(this));//直播信息

        $('#createClassA').on('click',this._closeClassHandler.bind(this));//关闭创建课堂
        $('.main_closeBtn').on('click',this._closeClassHandler.bind(this));//关闭创建课堂

        $('#createClassSubmit1').on('click',this._createClassSubmit1Handler.bind(this));//创建课堂第一步
        $('#createClassUpOne').on('click',this._createClassUpHandler.bind(this));//创建课堂第一步
        $('#createClassSubmit2').on('click',this._createClassSubmit2Handler.bind(this));//创建课堂第二步
        $('#createClassUpTwo').on('click',this._createClassUpTwoHandler.bind(this));//创建课堂第二步

        $('#createClassSubmit3').on('click',this._createClassSubmit3Handler.bind(this));//创建课堂第三步

        $('#openParamBtn').on('click',this._openParamBtnHandler.bind(this));//打开更多参数
        //日历插件
        this._dateUI();
    }

    addEvent() {

    }
    _showPresentTime(){
        let newDate = new Date();
        let month = (newDate.getMonth()+1)<10?'0'+(newDate.getMonth()+1):(newDate.getMonth()+1);
        let date = newDate.getDate()<10?'0'+newDate.getDate():newDate.getDate();
        let timer = newDate.getFullYear() + '-'+ month +'-'+ date;
        let hours = newDate.getHours();
        $('.createClassTime1').text(timer);
        $("#meeting_starthour").find("option[value = '"+hours+"']").attr("selected","selected");
        $('#meeting_endhour').find("option[value = '"+ (hours + 2) +"']").attr("selected","selected");
    }
    _judgeListPlace(){
        let i=(i%4);
        $('#classifyListContent').find('.classifyList').eq(i==3).addClass('classifyListR');
    }
    _recordLiHandler(evt){
        $(evt.currentTarget).addClass('recordLiCheck').siblings().removeClass('recordLiCheck');
    }
    _liveInfoLeftLiHandler(evt){
        $(evt.currentTarget).addClass('liveInfoLeftLiCheck').siblings().removeClass('liveInfoLeftLiCheck');
    }
    _createClassBtnHandler(evt){
        $('#createClassBox').show();
        $('#scheduleForm1').show();
        $('#scheduleForm2').hide();
        $('#teacherDetailBox').hide();
        $('#lanclassBox').hide();
    }
    _closeClassHandler(){
        $('#createClassBox').hide();
        this._closeCreateClass();
    }
    _createClassSubmit1Handler(){
        let meetingName = $('#classThemeUserName');//课堂主题
        let presenterPassword = $('#classThemePassWord');//主持人密码
        let createClassSubmit1 = $('#createClassSubmit1');//
        let isPublic = $("input[name='allowPublic']:checked").val();//是否公开课堂
        let meetingType = $("input[name='meetingType']:checked").val();//课堂类型
        let h5Module = $("input[name='h5Module']:checked").val();//是否支持H5
        let partcKey = $('#partcKey').val();  //课堂密码
        let meetingContent = $("meeting_content").val();//课堂描述
        if( meetingName.val().length < 1 || meetingName.val().length>32 ){
            meetingName.focus();
            return false;
        }
        if(presenterPassword.val().length < 6 || presenterPassword.val().length > 12){
            presenterPassword.focus();
            return false;
        }
        console.log('第一步信息完成')
        let dateList ={
            "meetingName":meetingName.val(),
            "presenterPassword":presenterPassword.val(),
            "isPublic":isPublic,
            "meetingType":meetingType,
            "h5Module":h5Module,
            "partcKey":'',
            "meetingContent":meetingContent
        }
        this.classDateList = dateList;
        $('#scheduleForm1').hide();
        $('#scheduleForm2').show();


    }
    _createClassUpHandler(){
        $('#scheduleForm1').show();
        $('#scheduleForm2').hide();
    }
    _createClassSubmit2Handler(){
        let createClassStartTime = $('#createClassStartTime').text();//开始年
        let meeting_starthour = $('#meeting_starthour').val();//开始月
        let meeting_startminute = $('#meeting_startminute').val();//开始日

        let createClassEndTime = $('#createClassEndTime').text();//结束年
        let meeting_endhour = $('#meeting_endhour').val();//结束月
        let meeting_endminute = $('#meeting_endminute').val();//结束日

        let maxAudio = $('#maxAudio');
        let maxVideo = $('#maxVideo');
        maxAudio.empty();
        maxVideo.empty();
        let meetingType = this.classDateList.meetingType;
        let option = ``;
        switch (parseInt(meetingType)){
            case 1:
                //1v1
                option = `<option value="2">2</option>`;
                break;
            case 2:
                //直播
                option = `<option value="1">1</option>`;
                break;
            case 3:
                //小班课
                for(let i = 1;i<7;i++){
                    option += `<option value="${i}">${i}</option>`;
                }
                break;
            default:
                return;
        }
        maxAudio.append(option);
        maxVideo.append(option);
        loger.log('meetingType',meetingType)
        let dateList = {
            "beginTime":createClassStartTime+' '+meeting_starthour+':'+meeting_startminute,
            "endTime":createClassEndTime+' '+meeting_endhour+':'+meeting_endminute
        }

        $.extend(this.classDateList,dateList);


        $('#scheduleForm2').hide();
        $('#scheduleForm3').show();
    }
    _createClassUpTwoHandler(){
        $('#scheduleForm2').show();
        $('#scheduleForm3').hide();
        $('#classConfig_details').hide();
    }
    _createClassSubmit3Handler(){
        let chatInterval = $('#chatInterval').val();
        let aheadTime = $('#aheadTime').val();
        let maxVideoChannels = $('#maxAudio').val();
        let max_audioChannels = $('#maxVideo').val();
        let video_quality = $("input[name='videoQuality']:checked").val();//视频画质

        let dateList = {
            "chatInterval":chatInterval,
            "aheadTime":aheadTime,
            "maxVideoChannels":maxVideoChannels,
            "max_audioChannels":max_audioChannels,
            "video_quality":video_quality,
        }
        $.extend(this.classDateList,dateList);

        //发送创建新课堂
        this.detailClass();

        $('#createClassBox').hide();
        $('#scheduleForm3').hide();

        //清空创建信息界面
        this._closeCreateClass();
    }
    //打开更多参数
    _openParamBtnHandler(){
        let classConfig_details = $('#classConfig_details');
        let createClassLegendImg = $('#createClassLegendImg');
       if(classConfig_details.is(':hidden')){
           classConfig_details.show();
           createClassLegendImg.attr('src','images/icon-t.png');
       }else{
           classConfig_details.hide();
           createClassLegendImg.attr('src','images/icon-.png');
       }
    }
    detailClass(){
        let dateList = this.classDateList;
        let _url = ClassDataProxy.locationProtocol + ClassDataProxy.locationProt + '/meeting/createMeeting';
        let userName = window.localStorage.getItem('loginName');
        let userType = window.localStorage.getItem('userType');
        dateList.siteId = 'markettest';
        dateList.userId = '123';
        dateList.userName = userName;
        dateList.userType = userType;

        let that = this;
        $.ajax({
            type : "POST",
            url : _url,
            data : dateList,
            timeout:5000,
            headers: {'token':'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IlhXQnJlRU00T0swYTVqUUIyUTFicGtObHlxOUFWbXZkIiwibmFtZSI6ImFkbWluIiwiY29kZSI6MSwiaWF0IjoxNTAzNDUxODU0LCJleHAiOjIyODEwNTE4NTR9.3kTVzKd_jbP7l69nxOpNaFeSjVnnjZkagYMzRB8fjNo'},
            success:function(_data){
                //获取课堂数据
                if(_data || _data.code == 0){
                    that._enterClass(_data.returnData.data);
                }
            },
            error:function(error){
                console.log(error,'失败')
            }
        })
    }
    _enterClass(_data){
        window.open(_data.meetingUrl);
    }
    //清空创建课堂数据
    _closeCreateClass(){
        $('#classThemeUserName').val('');
        $('#classThemePassWord').val('');
        $("input[name='allowPublic']").get(0).checked = true;
        $("input[name='meetingType']").get(0).checked = true;
        $("input[name='h5Module']").get(0).checked = true;
        $('#partcKey').text('');
        $('#meeting_content').val('');
        this._showPresentTime();

        $('#chatInterval').val('0');
        $('#aheadTime').val('0');
    }
    _dateUI(){
        //执行一个laydate实例
        dateUI.render({
            elem: '#liveInfoCenterLiveStart' //指定元素
        });
        //执行一个laydate实例
        dateUI.render({
            elem: '#liveInfoCenterLiveEnd' //指定元素
        });
        //执行一个laydate实例
        dateUI.render({
            elem: '#createClassStartTime' //指定元素
        });
        //执行一个laydate实例
        dateUI.render({
            elem: '#createClassEndTime' //指定元素
        });
    }
}
export default CreateClassApe;