SignApe.js 9.9 KB
//*
// 点名卡模块
// */

import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import ClassDataProxy from "proxy/ClassDataProxy";
import $ from "jquery";
let loger = Loger.getLoger('PC-SignApe');

const newList = `<li class="turnListItem">
                        <p class="turnListItemName">{_userName}</p>
                        <p class="turnListItemTime">{time}</p>
                   </li>`;

class SignApe extends Ape {
    constructor () {
        super();
        this._showPage = false;//判断当前是否关闭页面
        this._questionObject = {};//问题 对象
        this.timerList = [0,5,10,15,30]; //选择答题倒计时
        this.isCancel = false;//控制学生端是否显示
        this.isHide = false;//控制老师端是否显示结果数据,如果手动关闭后就不再显示
        this.addEvent();
        this.init();
    }

    init() {
        $('.sign').on('click',this._signShow.bind(this)); //点击点名
        $('.signHeadline .iconfont').on('click',this._closeSignHandler.bind(this));//关闭点名弹出框
        $('.signStudentHeadlineA').on('click',this._closeSignStudentHandler.bind(this));//学生端关闭点名弹出框
        $('#signShowBox').on("click", this._signShowHandler.bind(this));//老是断选择倒计时点名
        $('.signUl').on("click",'li',this._signLiHandler.bind(this));//选择时间列表
        $('.sponsorSign').on('click',this._sponsorSubmit.bind(this));//发起点名
        $('.turnResultBtn').on('click',this._turnResultBtnClone.bind(this));//终止点名
        $('.turnStudentBtn').on('click',this._turnStudentBtnRefer.bind(this));//学生端点击签到
        $('body').on('click',function(evt){ //点击屏幕关闭时间选项
            if(!$(evt.target).is('.signShow')){
                $('.signUl').hide();
            }
        });

    }
    addEvent() {

        //学生监听老师点名操作
        xdysdk.on("start_answer_question", this.startAnswerQuestion.bind(this));
        //老师监听学生签到情况
        xdysdk.on("update_answer_question", this.upDateAnswerQuestion.bind(this));
        //监听老师终止点名
        xdysdk.on("stop_answer_question", this.stopAnswerQuestion.bind(this));
        //点名的计时器
        xdysdk.on("update_question_time",this.updateQuestionTime.bind(this));

    }

    //收到 点名 操作
    startAnswerQuestion(_data){
        console.log("startAnswerQuestion",_data,ClassDataProxy.userRole);
        if(_data.type == 100){
            if(ClassDataProxy.userRole==ClassDataProxy.USER_NOTMAL){
                this._questionObject = _data;
                if(_data.timeLimit == 100000){
                    $('.signCountdown').css('opacity',0);
                }else{
                    $('.signCountdown').css('opacity',1);
                }
                if(!this.isCancel){
                    $('#signCountdown').html(ClassDataProxy.localConfig.namingTheCountdown)
                    this._showSignStudent();
                }
            }
        }
    }
    //老师监听学生签到情况
    upDateAnswerQuestion(_data){
            //console.log("_data.totalUser",_data.totalUser);
        if(_data.type == 100 && ClassDataProxy.userRole==ClassDataProxy.USER_HOST){
            this._questionObject = _data;
            //显示点名结果
            if(!this.isHide) {
                this._showSignResult();
            }
            this._messageAdd(_data);
        }
    }
    //监听老师终止点名
    stopAnswerQuestion(_data){
        console.log("stopAnswerQuestion",_data);
        if(_data.type == 100){
           // this._questionObject = null;
            this._closeSignStudentHandler();
            this.isCancel = false;
            this.isHide = false;
            //老师端不做处理
           // this._hideSignResult();
           // this._showPage = false;

        }
    }
    //点名的计时器
    updateQuestionTime(_data){
        if(_data.type==100){
            //loger.log('点名的计时器',_data)
            $('#signCountdown').html(this._newTime(_data.timestamp));
        }
    }
    _newTime(timestamp){
        let minute = 0,
            second = 0;
        minute = Math.floor(timestamp / 60)<10 ? '0'+Math.floor(timestamp / 60):Math.floor(timestamp / 60);
        second = Math.floor(timestamp - minute * 60)<10?'0'+Math.floor(timestamp - minute * 60):Math.floor(timestamp - minute * 60)

        let timeValue = ClassDataProxy.localConfig.namingTheCountdown
        timeValue +=( minute > 0 ) ? minute + ' : ' : '00 : '
        timeValue += (second > 0 ) ? second : '00'
        return timeValue;
    }
    //学生端点击签到 把当前学生信息存起来
    _messageAdd(_data){
        let turnList = $('.turnList');
        turnList.empty();
        loger.log('学生端信息查询',_data)
        for(let i=0,len = _data.list.length;i < len ;i++){
            let _newList = this._format(newList,{
                _userName : _data.list[i].userName,  //学生签到列表
                time : ClassDataProxy.timestampToDateTimeSign(parseInt(_data.list[i].time))  //学生签到时间
            })
            turnList.append(_newList);
            $('.turnLen').html(_data.totalUser);
        };
    }
    //渲染时间列表
    _showTimerList(){
        let signUl = $('.signUl'),newLi;
        signUl.html('');
        $.each(this.timerList,function(key,val){
            if(val == 0){
                newLi = '<li data-val="100000" data-ind="'+key+'" class="active">'+ClassDataProxy.localConfig.nothing+'</li>';
            }else if(val/60 < 1){
                newLi = '<li data-val="'+val+'" data-ind="'+key+'">'+val+ClassDataProxy.localConfig.second+'</li>';
            }else{
                newLi = '<li data-val="'+val+'" data-ind="'+key+'">'+val/60+ClassDataProxy.localConfig.minute+'</li>';
            }
            signUl.append(newLi);
        })
    }
    //点击点名事件
    _signShow(){
        //渲染时间列表
        this._showTimerList();
        $('.signShow').html($('.signUl').find('li').eq(0).html())  //默认答题计时显示第一个
            .attr('data-val',$('.signUl li').eq(0).attr('data-val'));
        $('.signAllBox').show();
        $('.signBox').fadeIn(800);
        if(!this._showPage){
            $('.signContentA').show();
        }else{
            $('.signContentB').show();
        }
    }
    //关闭点名弹出框
    _closeSignHandler(){
        this.isHide = true;
        $('.signAllBox').hide();
        $('.signBox').hide();
    }
    //学生端关闭点名弹出框
    _closeSignStudentHandler(){
        this.isCancel = true;
        $('.signAllBox').hide();
        $('.signStudentBox').hide();
    }
    //老师选择倒计时点名
    _signShowHandler(){
        $('.signUl').is(':hidden') ? $('.signUl').show() : $('.signUl').hide();
    }
    //选择时间列表
    _signLiHandler(evt){
        let ele = $(evt.target);
        let index = ele.index();

        this._judgeDddClass($('.signUl li'),index);
        $('.signShow').html(ele.html())
                       .attr('data-val',ele.data('val'));
        $('.signUl').hide();
    }
    _judgeDddClass(ele,ind){
        ele.eq(ind).addClass('active').siblings().removeClass('active');
    }
    //发起点名
    _sponsorSubmit(){
        this.isHide = false;
        let _timeLimit = parseInt( $('.signShow').attr('data-val') );
        let signInfo=
            {
                "type": parseInt(100),//1单选,2多选,3判断,4点名
                "content": "点名",//没有就传""
                "timeLimit": _timeLimit,//有效时间(秒)
                "correct": [],//正确答案,没有就传[]
                "options": ["A"],//选项数组,没有就传[]
            };
        xdysdk.api("creatQuestion", signInfo);
    }
    //终止点名
    _turnResultBtnClone(){
        //清除所有数据 还原默认数据
        this._clearSign();
        //调用SDK停止 点名
        this._stopSign();

        this._hideSignResult();
    }
    //调用SDK停止 点名
    _stopSign(){
        xdysdk.api("stopQuestion",{
            "itemIdx": parseInt(this._questionObject.itemIdx) ,
            "questionId":  parseInt(this._questionObject.questionId)
        });
        this._questionObject = null;
    }
    //清除所有数据 还原默认数据
    _clearSign(){
        this._showPage = false;
        this.isCancel = false;
        this.isHide = false;
        $('.turnLen').html(0);
        this._revocation();
        //默认 无  默认选中
        this._judgeDddClass($('.signUl li'),0);
    }
    //学生端点击签到
    _turnStudentBtnRefer(){
        if(ClassDataProxy.userRole=="normal"){
            let paramInfo = {};
            paramInfo.itemIdx = this._questionObject.itemIdx;
            paramInfo.questionId = this._questionObject.questionId;
            paramInfo.answer = [0];//点名只有一个值
            xdysdk.api("sendAnswer",paramInfo);
            this._hideSignStudent();
        }
    }

    //清空上一次点名信息
    _revocation(){
        $('.signShow').html(ClassDataProxy.localConfig.nothing);
        $('.turnListItem').remove();
    }
    //工具类
    _format(str, obj) {
        return str.replace(/\{(\w+)\}/g, function (match, group, index) {
            return obj[group];
        });
    };
    //学生端显示 弹框
    _showSignStudent(){
        $('.signAllBox').show();
        $('.signStudentBox').show();//学生端弹框
    }
    //学生端隐藏 弹框
    _hideSignStudent(){
        $('.signAllBox').hide();
        $('.signStudentBox').hide();//学生端弹框
    }
    //老师端点名结果更新
    _showSignResult(){
        this._showPage = true;
        $('.signAllBox').show();
        $('.signBox').show();
        $('.signContentA').hide();
        $('.signContentB').show();
    }
    //终止点名时 老师端隐藏
    _hideSignResult(){
        $('.signAllBox').hide();
        $('.signBox').hide();
        $('.signContentB').hide();
    }
}

export default SignApe;