aiforge/public/home/home.js

var token;
if(isEmpty(token)){
	var meta = $("meta[name=_uid]");
	if(!isEmpty(meta)){
		token = meta.attr("content");
	}
}

var swiperNewMessage = new Swiper(".newslist", {
    direction: "vertical",
    slidesPerView: 9,
    loop: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
});
var swiperEvent = new Swiper(".event-list", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
});
var swiperRepo = new Swiper(".homepro-list", {
    slidesPerView: 1,
    slidesPerColumn: 2,
    slidesPerColumnFill:'row',
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
    },
});

var swiperOrg = new Swiper(".homeorg-list", {
    slidesPerView: 1,
    slidesPerColumn: 4,
    slidesPerColumnFill:'row',
    spaceBetween: 15,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    autoplay: {
        delay: 4500,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
    },
});

var maxSize = 20;
var html =document.documentElement;
var lang = html.attributes["lang"]
var isZh = true;
if(lang != null && lang.nodeValue =="en-US" ){
    isZh=false;
}
var readystat = false;
document.onreadystatechange = function () {
    if(document.readyState=="complete"){

    }
    // if(readystat){
    //     return;
    // } 
    // readystat = true;
    console.log("Start to open WebSocket." + document.readyState);
    queryRecommendData();

    var output = document.getElementById("newmessage");
    var url = "ws://" + document.location.host + "/action/notification";
    if(document.location.host == "git.openi.org.cn" || document.URL.startsWith("https")){
       url = "wss://" + document.location.host + "/action/notification"
    }
    var socket = new WebSocket(url);
    
    socket.onopen = function () {
            messageQueue = [];
            console.log("message has connected.");
    };

    socket.onmessage = function (e) {
		var data =JSON.parse(e.data)
        var html = "";
        if (data != null){
            if(messageQueue.length > maxSize){
                messageQueue.splice(0,1);
            }
            messageQueue.push(data);
            var currentTime = new Date().getTime();
            for(var i = 0; i < messageQueue.length; i++){
                var record = messageQueue[i];
                var actionName = getAction(record.OpType,isZh);
                if(record.ActUser == null){
                    console.log("receive action type=" + record.OpType + " name=" + actionName + " but user is null.");
                    continue;
                }
                if(record.OpType == "24"){
                    if(record.Content.indexOf("true") != -1){
                        continue;
                    }
                }
                var recordPrefix = getMsg(record);
                if(record.OpType == "6" || record.OpType == "10" || record.OpType == "12" || record.OpType == "13"){
                    html += recordPrefix + actionName;
                    html += " <a href=\"" + getIssueLink(record) + "\" rel=\"nofollow\">" + getIssueText(record) + "</a>"
                }
                else if(record.OpType == "7" || record.OpType == "11" || record.OpType == "14" || record.OpType == "15" || record.OpType == "22"
                || record.OpType == "23"){
                    html += recordPrefix +  actionName;
                    html += " <a href=\"" + getPRLink(record) + "\" rel=\"nofollow\">" + getPRText(record) + "</a>"
                }
                else if(record.OpType == "1"){
                    html += recordPrefix +  actionName;
                    html += " <a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" +getRepotext(record) + "</a>"
                }
                else if(record.OpType == "5"){
                    branch = "<a href=\"" + getRepoLink(record) + "/src/branch/" + encodeURI(record.RefName) +  "\" rel=\"nofollow\">" + record.RefName + "</a>"
                    actionName = actionName.replace("{branch}",branch);
                    html += recordPrefix +  actionName;
                    html += " <a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepotext(record) + "</a>"
                }else if(record.OpType == "9"){
                    branch = "<a href=\"" + getRepoLink(record) + "/src/tag/" + encodeURI(record.RefName) +  "\" rel=\"nofollow\">" + record.RefName + "</a>"
                    actionName = actionName.replace("{branch}",branch);
                    html += recordPrefix +  actionName;
                    html += " <a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepotext(record) + "</a>"
                }
                else if(record.OpType == "17"){
                    actionName = actionName.replace("{deleteBranchName}",record.RefName);
                    var repoLink = "<a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepotext(record) + "</a>"
                    actionName = actionName.replace("{repoName}",repoLink);
                    html += recordPrefix +  actionName;
                }
                else if(record.OpType == "2"){
                    actionName = actionName.replace("{oldRepoName}",record.Content);
                    html += recordPrefix + actionName;
                    html += " <a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepotext(record) + "</a>"
                } 
                else if(record.OpType == "24"  ||  record.OpType == "26" || record.OpType == "27" || record.OpType == "28"  || record.OpType == "30" || record.OpType == "31" || record.OpType == "32" || record.OpType == "33"){
                    html += recordPrefix + actionName;
                    html += " <a href=\"" + getTaskLink(record) + "\" rel=\"nofollow\">" + record.RefName + "</a>"
                }
                else if(record.OpType == "25" || record.OpType == "29"){
                    html += recordPrefix + actionName;
                    html += " <a href=\"" + getTaskLink(record) + "\" rel=\"nofollow\">" + record.RefName + "</a>"
                }
                else if(record.OpType == "35"){
                    var datasetLink = "<a href=\"" + getRepoLink(record) + "/datasets" +  "\" rel=\"nofollow\">" + record.Content.split('|')[1] + "</a>";
                    actionName = actionName.replace('{dataset}', datasetLink);
                    html += recordPrefix + actionName;
                }
                else{
                    continue;
                }
                if(record.Repo != null){
                   var time = getTime(record.CreatedUnix,currentTime);
                   html += " " + time;
                }
                html += "</div>";
                html += "</div>";
            }
        }
		output.innerHTML = html;
        swiperNewMessage.updateSlides();
        swiperNewMessage.updateProgress();
    };
}



function getTaskLink(record){
    var re = getRepoLink(record);
    if(record.OpType == 24){
        re = re + "/datasets";
    }else if(record.OpType == 25){
        re = re + "/cloudbrain/" + record.Content;
    }else if(record.OpType == 26){
        re = re + "/modelarts/notebook/" + record.Content;
    }else if(record.OpType == 27){
        re = re + "/modelarts/train-job/" + record.Content;
    }else if(record.OpType == 28){
        re = re + "/modelarts/inference-job/" + record.Content;
    }else if(record.OpType == 29){
        re = re + "/cloudbrain/benchmark/" + record.Content;
    }else if(record.OpType == 30){
        re = re + "/modelmanage/show_model_info?name=" + record.RefName;
    }else if(record.OpType == 31){
        re = re + "/cloudbrain/train-job/" + record.Content;
    }else if(record.OpType == 32 || record.OpType == 33){
        re = re + "/grampus/train-job/" + record.Content;
    }
    re = encodeURI(re);
    return re;
}

function getMsg(record){
    var html ="";
    html += "<div class=\"swiper-slide item\">";
    var name = "";
    if(record.ActUser != null){
        name = record.ActUser.Name;
    }else{
        console.log("act user is null.");
    }
    html += "  <img class=\"ui avatar image\" src=\"/user/avatar/" + name + "/-1\" alt=\"\">"
    html += " <div class=\"middle aligned content nowrap\">"
    html += " <a href=\"/" + encodeURI(name) + "\" title=\"\">" + name + "</a>"
    return html;
}

function getRepotext(record){
    if(record.Repo.Alias){
        return   record.Repo.OwnerName + "/" + record.Repo.Alias;
    }else{
        return   record.Repo.OwnerName + "/" + record.Repo.Name;
    }
}
function getRepoLink(record){
    return   encodeURI(record.Repo.OwnerName + "/" + record.Repo.Name);

}

function getTime(UpdatedUnix,currentTime){
    UpdatedUnix = UpdatedUnix;
    currentTime = currentTime / 1000;
    var timeEscSecond = currentTime - UpdatedUnix;
    if( timeEscSecond < 0){
        timeEscSecond = 1;
    }

    var hours= Math.floor(timeEscSecond / 3600);
    //计算相差分钟数
    var leave2 = Math.floor(timeEscSecond % (3600)); //计算小时数后剩余的秒数
    var minutes= Math.floor(leave2 / 60);//计算相差分钟数

    var leave3=Math.floor(leave2 % 60); //计算分钟数后剩余的秒数
    var seconds= leave3;

    if(hours == 0 && minutes == 0){
        return seconds + getRepoOrOrg(6,isZh,seconds);
    }else{
        if(hours > 0){
            return hours + getRepoOrOrg(4,isZh,hours);
        }else{
            return minutes + getRepoOrOrg(5,isZh,minutes);
        }
    }
}

function getPRLink(record){
    return encodeURI("/" + record.Repo.OwnerName + "/" + record.Repo.Name + "/pulls/" + getIssueId(record));
}
function getPRText(record){
    if(record.Repo.Alias){
        return   record.Repo.OwnerName + "/" + record.Repo.Alias + "#" + getIssueId(record);
    }else{
        return   record.Repo.OwnerName + "/" + record.Repo.Name + "#" + getIssueId(record);
    }

}

function getIssueLink(record){

    return encodeURI("/" + record.Repo.OwnerName + "/" + record.Repo.Name + "/issues/" + getIssueId(record));
}

function getIssueId(record){
    var Id = "1";
    if(!isEmpty(record.Comment) && !isEmpty(record.Comment.Issue)){
        Id = record.Comment.Issue.Index;
    }else{
        if(!isEmpty(record.Content)){
            var content  = record.Content;
            var index = content.indexOf("|");
            if(index != -1){
                Id = content.substring(0,index);
            }
        }
    }
    return Id;
}

function getIssueText(record){
    if(record.Repo.Alias){
        return   record.Repo.OwnerName + "/" + record.Repo.Alias + "#" + getIssueId(record);
    }else{
        return   record.Repo.OwnerName + "/" + record.Repo.Name + "#" + getIssueId(record);
    }

}

/*
    ActionCreateRepo         ActionType = iota + 1 // 1
	ActionRenameRepo                               // 2
	ActionStarRepo                                 // 3
	ActionWatchRepo                                // 4
	ActionCommitRepo                               // 5
	ActionCreateIssue                              // 6
	ActionCreatePullRequest                        // 7
	ActionTransferRepo                             // 8
	ActionPushTag                                  // 9
	ActionCommentIssue                             // 10
	ActionMergePullRequest                         // 11
	ActionCloseIssue                               // 12
	ActionReopenIssue                              // 13
	ActionClosePullRequest                         // 14
	ActionReopenPullRequest                        // 15
	ActionDeleteTag                                // 16
	ActionDeleteBranch                             // 17
	ActionMirrorSyncPush                           // 18
	ActionMirrorSyncCreate                         // 19
	ActionMirrorSyncDelete                         // 20
	ActionApprovePullRequest                       // 21
	ActionRejectPullRequest                        // 22
	ActionCommentPull                              // 23
*/

var actionNameZH={
    "1":"创建了项目",
    "2":"重命名项目 {oldRepoName} 为",
    "5":"推送了 {branch} 分支的代码到",
    "6":"创建了任务",
    "7":"创建了合并请求",
    "9":"推送了标签 {branch} 到",
    "10":"评论了任务",
    "11":"合并了合并请求",
    "12":"关闭了任务",
    "13":"重新开启了任务",
    "14":"关闭了合并请求",
    "15":"重新开启了合并请求",
    "17":"从 {repoName} 删除分支 {deleteBranchName}",
    "22":"建议变更",
    "23":"评论了合并请求",
    "24":"上传了数据集文件",
    "25":"创建了CPU/GPU类型调试任务",
    "26":"创建了NPU类型调试任务",
    "27":"创建了NPU类型训练任务",
    "28":"创建了推理任务",
    "29":"创建了评测任务",
    "30":"导入了新模型",
    "31":"创建了CPU/GPU类型训练任务",
    "32":"创建了NPU类型训练任务",
    "33":"创建了CPU/GPU类型训练任务",
    "35":"创建的数据集 {dataset} 被设置为推荐数据集",
    "36":"提交了镜像 {image}",
    "37":"提交的镜像 {image} 被设置为推荐镜像",
};

var actionNameEN={
    "1":" created repository",
    "2":" renamed repository from {oldRepoName} to ",
    "5":" pushed to {branch} at",
    "6":" opened issue",
    "7":" created pull request",
    "9":" pushed tag {branch} to ",
    "10":" commented on issue",
    "11":" merged pull request",
    "12":" closed issue",
    "13":" reopened issue",
    "14":" closed pull request",
    "15":" reopened pull request",
    "17":" deleted branch {deleteBranchName} from {repoName}",
    "22":" proposed changes",
    "23":" commented on pull request",
    "24":" upload dataset ",
    "25":" created CPU/GPU type debugging task ",
    "26":" created NPU type debugging task ",
    "27":" created NPU type training task",
    "28":" created reasoning task",
    "29":" created profiling task",
    "30":" created new model",
    "31":" created CPU/GPU type training task",
    "32":" created NPU type training task",
    "33":" created CPU/GPU type training task",
    "35":" created dataset {dataset} was set as recommended dataset",
    "36":"committed image {image}",
    "37":"committed image {image} was set as recommended image",
};

var repoAndOrgZH={
    "1":"项目",
    "2":"成员",
    "3":"团队",
    "11":"项目",
    "21":"成员",
    "31":"团队",
    "4":"小时前",
    "5":"分钟前",
    "6":"秒前",
    "41":"小时前",
    "51":"分钟前",
    "61":"秒前"
};

var repoAndOrgEN={
    "1":"Repository",
    "2":"Member ",
    "3":"Team",
    "11":"Repositories",
    "21":"Members ",
    "31":"Teams",
    "4":" hour ago",
    "5":" minute ago",
    "6":" second ago",
    "41":" hours ago",
    "51":" minutes ago",
    "61":" seconds ago"
};


function getAction(opType,isZh){
    if(isZh){
        return actionNameZH[opType]
    }else{
        return actionNameEN[opType]
    }
}





function queryRecommendData(){
    $.ajax({
        type:"GET",
        url:"/recommend/home",
        headers: {
           authorization:token,
         },
        dataType:"json",
        async:false,
        success:function(json){
           displayOrg(json.org);
           displayRepo(json.repo);
           displayActivity(json.image);
        },
        error:function(response) {
        }
    });
}


function displayActivity(json){
    var activityDiv = document.getElementById("recommendactivity");
    var html = "";
    if (json != null && json.length > 0){
        for(var i = 0; i < json.length;i++){
            var record = json[i]
            html += "<div class=\"swiper-slide\">";
            html += "<a href=\"" + record["image_link"] + "\" class=\"ui fluid card\">";
            html += "   <div class=\"image\"><img src=\"" + record["url"] + "\"></div>"
            html += "</a>";
            html += "</div>";
        }
    }
    activityDiv.innerHTML = html;
    swiperEvent.updateSlides();
    swiperEvent.updateProgress();
}

function displayRepo(json){
    var orgRepo = document.getElementById("recommendrepo");
    var html = "";
    if (json != null && json.length > 0){
        for(var i = 0; i < json.length;i++){
            var record = json[i]
            html += "<div class=\"swiper-slide\">";
            html += "   <div class=\"ui fluid card\">";
            html += "       <div class=\"content\">";
            html += "           <span class=\"right floated meta\">";
            html += "               <i class=\"ri-star-line\"></i>" + record["NumStars"] + "<i class=\"ri-git-branch-line am-ml-10\"></i>" +  record["NumForks"];
            html += "           </span>";
            html += "           <img class=\"left floated mini ui image\" src=\"" + record["Avatar"] + "\">";
            html += "           <a class=\"header nowrap\" href=\"/" + record["OwnerName"] + "/" + record["Name"] + "\">" + record["Alias"]  +"</a>";
            html += "           <div class=\"description nowrap-2\">" + record["Description"] + " </div>";
            html += "           <div class=\"ui tags nowrap am-mt-10\">"
            if(record["Topics"] != null){
                for(var j = 0; j < record["Topics"].length; j++){
                    topic = record["Topics"][j];
                    url = "/explore/repos?q=" +  (topic) + "&amp;topic="
                    html += "<a class=\"ui small label topic\" href=\"" + url + "\">" + topic +  "</a>";
                }
            }
            html += "           </div>";
            html += "       </div>";
            html += "   </div>";
            html += "</div>";
        }
    }
    orgRepo.innerHTML = html;
    swiperRepo.updateSlides();
    swiperRepo.updateProgress();
}


function getRepoOrOrg(key,isZhLang,numbers=1){
    if(numbers > 1){
        key+="1";
    }
    if(isZhLang){
        return repoAndOrgZH[key];
    }else{
        return repoAndOrgEN[key];
    }
}
function displayOrg(json){
    var orgDiv = document.getElementById("recommendorg");
    var html = "";
    if (json != null && json.length > 0){
        for(var i = 0; i < json.length;i++){
            var record = json[i]
            html += "<div class=\"swiper-slide\">";
            html += "   <a href=\"/" + record["Name"] + "\" class=\"ui fluid card\">";
            html += "       <div class=\"content\">";
            html += "           <div class=\"ui small header\">";
            html += "               <img class=\"ui image\" src=\"" + record["Avatar"] +  "\">";
            html += "               <div class=\"content nowrap\">";
            html += "                   <span class=\"ui blue\">" + record["Name"]  +  "</span> " + record["FullName"];
            html += "                   <div class=\"sub header\">" + record["NumRepos"] +" " + getRepoOrOrg(1,isZh,record["NumRepos"]) + " ･ " + record["NumMembers"] +" " + getRepoOrOrg(2,isZh,record["NumMembers"]) + " ･ " + record["NumTeams"] + " " + getRepoOrOrg(3,isZh,record["NumTeams"]) + "</div>";
            html += "               </div>";
            html += "           </div>";
            html += "       </div>";
            html += "    </a>";
            html += "</div>";
        }
    }
    orgDiv.innerHTML = html;
    swiperOrg.updateSlides();
}