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

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

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

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

    init() {
        $('#collectYes').hide();
        //默认显示当前时间戳
        this._showPresentTime();
        //创建课堂
        $('#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));//打开更多参数

        $('#courseContent').on('click','.classHandlePort',this._classHandlePortHandler.bind(this));//加入课堂

        //日历插件
        this._dateUI();

    }

    addEvent() {

    }
    isLocalStorage(){
        //设置当前时间 给输入框默认值
        this._setNewTime();
        //设置弹框位置
       this._setMarginTop();
    }
    _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");
    }
    _createClassBtnHandler(){
        $('#createClassBox').show();
        $('#scheduleForm1').show();
        $('#scheduleForm2').hide();
        $('#teacherDetailBox').hide();
        $('#lanclassBox').hide();

        //获取第一步中老师列表
        this.allotSpeaker();
    }
    //获取第一步中老师列表
    allotSpeaker(){
        let _url = ClassDataProxy.locationProtocol + ClassDataProxy.locationProt + '/users/getUser';
        let that = this;
        let dataInfo = {
            siteId : ClassDataProxy.siteId,
            userType : 1
        }
        $.ajax({
            type: "POST",
            url: _url,
            timeout:5000,
            data:dataInfo,
            headers: {siteId:ClassDataProxy.siteId,
                pageno:7,
                'token':'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IlhXQnJlRU00T0swYTVqUUIyUTFicGtObHlxOUFWbXZkIiwibmFtZSI6ImFkbWluIiwiY29kZSI6MSwiaWF0IjoxNTAzNDUxODU0LCJleHAiOjIyODEwNTE4NTR9.3kTVzKd_jbP7l69nxOpNaFeSjVnnjZkagYMzRB8fjNo'},
            success:function(_data){
                //获取课堂数据
                if(_data && _data.code == 200){
                    that.teacherInfo(_data.returnData.data.users);
                }
            },
            error:function(error){
                //alert('直播数据获取失败')
                loger.log(error,'直播数据获取失败')
            }
        })
    }
    teacherInfo(_data){
        let classTeacherInfo = $('#classTeacherInfo');
        classTeacherInfo.empty();
        let option = ``;
        for(let i = 0;i<_data.length;i++){
            option += `<option value="${_data[i].loginName}">${_data[i].loginName}</option>`;
        }
        classTeacherInfo.append(option);
    }
    _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();//课堂描述

        let classTeacherInfo = $('#classTeacherInfo').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,
            "loginName":classTeacherInfo
        }
        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 = 'networkschool';
        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){
                    loger.log('创建课堂成功',_data)
                    that._enterClass(_data.returnData.data);
                }
            },
            error:function(error){
                console.log(error,'失败')
            }
        })
    }
    _enterClass(_data){
        window.open(_data.meetingUrl);
        this._emit(MessageTypes.ADD_CLASS);
    }
    //清空创建课堂数据
    _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');
    }
    _classHandlePortHandler(evt){
        let id = $(evt.target).attr('data');
        //  window.open('/3m/attend.do?meetingNumber=' + id);
    }
    //设置当前时间 给输入框默认值
    _setNewTime(){
        let newDate = new Date();
        let ysar = newDate.getFullYear();
        let month = newDate.getMonth()+1;//月
        let date = newDate.getDate();//日
        month<10?'0'+month:month;
        date<10?'0'+date:date;
        let time = ysar+'-'+month+'-'+date;
        $('#liveInfoCenterLiveStart').html(time);
        $('#liveInfoCenterLiveEnd').html(time);
        $('#createUserAbortTime').html(time);
    }
    //设置弹框位置
    _setMarginTop(){
        this._setMarginTopHandler($('#createUserAccount'));//创建用户选择身份
        this._setMarginTopHandler($('#userLogin'));//登录
        this._setMarginTopHandler($('#usersign'));//注册
        this._setMarginTopHandler($('#warnHintBox'));//错误提示
        this._setMarginTopHandler($('#removeHandler'));//删除
        this._setMarginTopHandler($('#updateInputBox'));//修改信息输入框
        this._setMarginTopHandler($('#teacherDetailReminders'));//预约成功弹框
        this._setMarginTopHandler($('#createUser'));//注册老师账号
        this._setMarginTopHandler($('#createClass'));//创建课堂
    }
    //设置弹框位置  方法
    _setMarginTopHandler(_data){
        let clienth = document.documentElement.clientHeight || document.body.clientHeight
        _data.css('margin-top',(clienth - parseInt(_data.height()))/2)
    }
    _dateUI(){
        //执行一个laydate实例
        dateUI.render({
            elem: '#liveInfoCenterLiveStart' //指定元素
        });
        //执行一个laydate实例
        dateUI.render({
            elem: '#liveInfoCenterLiveEnd' //指定元素
        });
        //执行一个laydate实例
        dateUI.render({
            elem: '#createClassStartTime' //指定元素
        });
        //执行一个laydate实例
        dateUI.render({
            elem: '#createClassEndTime' //指定元素
        });
        //执行一个laydate实例
        dateUI.render({
            elem: '#createUserAbortTime' //指定元素
        });
    }
}
export default CreateClassApe;