aiforge/public/home/home.js

var token;
if(isEmpty(token)){
	var meta = $("meta[name=_uid]");
	if(!isEmpty(meta)){
		token = meta.attr("content");
		console.log("token is uid:" + token);
	}
}

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


var output = document.getElementById("newmessage");
var socket = new WebSocket("ws://" + document.location.host + "/action/notification");

socket.onopen = function () {
		console.log("message has connected.");
};

var messageQueue = [];
var maxSize = 20;
var html =document.documentElement;
var lang = html.attributes["lang"]
var isZh = true;
if(lang != null && lang =="en-US" ){
    isZh=false;
}
console.log("the language is " + lang);

socket.onmessage = function (e) {
		var data =JSON.parse(e.data)
        console.log("recevie data=" + e.data)
        var html = "";
        if (data != null){
            console.log("queue length=" + messageQueue.length);
            if(messageQueue.length > maxSize){
                delete messageQueue[0];
            }else{
                messageQueue.push(data);
            }
            var currentTime = new Date().getTime();
            for(var i = messageQueue.length -1; i >=0; i--){
                var record = messageQueue[i];
                
                html += "<div class=\"swiper-slide item\">";
                
                html += "  <img class=\"ui avatar image\" src=\"/user/avatar/" + record.ActUser.Name + "/-1\" alt=\"\">"
                html += " <div class=\"middle aligned content\">"
                html += " <a href=\"/" + record.ActUser.Name + "\" title=\"\">" + record.ActUser.Name + "</a>" 
                var actionName = getAction(record.OpType,isZh);
                
                if(record.OpType == "6" || record.OpType == "10" || record.OpType == "12" || record.OpType == "13"){
                    html += 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 += actionName;
                    html += " <a href=\"" + getPRLink(record) + "\" rel=\"nofollow\">" + getPRText(record) + "</a>" 
                }
                else if(record.OpType == "1"){
                    html += actionName;
                    html += " <a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepoLink(record) + "</a>"
                }
                else if(record.OpType == "9"){
                    actionName = actionName.replace("{branch}",record.RefName);
                    html += actionName;
                    html += " <a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepoLink(record) + "</a>"
                }else if(record.OpType == "17"){
                    actionName = actionName.replace("{deleteBranchName}",record.RefName);
                    var repoLink = "<a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepoLink(record) + "</a>"
                    actionName = actionName.replace("{repoName}",repoLink);
                    html += actionName;
                }
                else if(record.OpType == "2"){
                    actionName = actionName.replace("{oldRepoName}",record.Content);
                    html += actionName;
                    html += " <a href=\"" + getRepoLink(record) + "\" rel=\"nofollow\">" + getRepoLink(record) + "</a>"
                }
                else{
                    continue;
                }

                if(record.Repo != null){
                   var time = getTime(record.CreatedUnix,currentTime);
                   html += " " + time;
                }
                html += "</div>";
                html += "</div>";
            }
            /*
            <div class="swiper-slide item">
                                    <img class="ui avatar image" src="/user/avatar/zhoupzh/-1" alt="">
                                    <div class="middle aligned content">
                                        <a href="/zhoupzh" title="">zhoupzh</a> 合并了合并请求 <a href="/OpenI/aiforge/pulls/1168" rel="nofollow">OpenI/aiforge#1168</a><span class="time-since">22 分钟前</span>
                                    </div>
                                </div>
                                */

        }
        console.log("html=" + html)
		output.innerHTML = html;
        swiperNewMessage.updateSlides();
        swiperNewMessage.updateProgress();
};

function getRepoLink(record){
    return "/" + record.Repo.OwnerName + "/" + record.Repo.Name;
}
function getRepoLink(record){
    return   record.Repo.OwnerName + "/" + record.Repo.Name;
}

function getTime(UpdatedUnix,currentTime){
    UpdatedUnix = UpdatedUnix;
    currentTime = currentTime / 1000;
    var timeEscSecond = currentTime - UpdatedUnix;
    if( timeEscSecond < 0){
        timeEscSecond = 1;
    }
    console.log("currentTime=" + currentTime + " updateUnix=" + UpdatedUnix);
   
    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 + "秒前"
    }else{
        if(hours > 0){
            return hours + "小时前";
        }else{
            return minutes + "分钟前";
        }
    }
}

function getPRLink(record){
    return "/" + record.Repo.OwnerName + "/" + record.Repo.Name + "/pulls/" + record.ID
}
function getPRText(record){
    return   record.Repo.OwnerName + "/" + record.Repo.Name + "#" + record.ID
}

function getIssueLink(record){
 
    return "/" + 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){
    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} 为",
    "6":"创建了任务",
    "7":"创建了合并请求",
    "9":"推送了 {branch} 分支的代码到",
    "10":"评论了任务",
    "11":"合并了合并请求",
    "12":"关闭了任务",
    "13":"重新开启了任务",
    "14":"关闭了合并请求",
    "15":"重新开启了合并请求",
    "17":"从 {repoName} 删除分支 {deleteBranchName}",
    "22":"拒绝了合并请求",
    "23":"评论了合并请求"
};

var actionNameEN={
    "1":"created repository",
    "2":"renamed repository from {oldRepoName} to ",
    "6":"opened issue",
    "7":"created pull request",
    "9":"pushed to {branch} at",
    "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":"rejected pull request",
    "23":"commented on pull request"
};

var repoAndOrgZH={
    "1":"项目",
    "2":"成员",
    "3":"团队"
};

var repoAndOrgEN={
    "1":"repository",
    "2":"Members ",
    "3":"Teams"
};


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

queryRecommendData();

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

    $.ajax({
        type:"GET",
        url:"/recommend/repo",
        headers: {
           authorization:token,
         },
        dataType:"json",
        async:false,
        success:function(json){
           console.log(json);
           displayRepo(json);
        },
        error:function(response) {
            console.log(response);
        }
    });

}

/*
<div class="swiper-slide">
<div class="ui fluid card">
    <div class="content">
        <span class="right floated meta">
            <i class="star icon"></i>276 <i class="star icon"></i>32
        </span>
        <img class="left floated mini ui image" src="/repo-avatars/278-a9f45e21b92b86dbf969c9f70dff1efc">
        <a class="header nowrap" href="/OpenI/aiforge">aiforge </a>
        
        <div class="description nowrap-2">
            本项目是群体化方法与技术的开源实现案例，在基于Gitea的基础上，进一步支持社交化的协同开发、协同学习、协同研究等群体创新实践服务，特别是针对新一代人工智能技术特点，重点支持项目管理、git代码管理、大数据集存储管理与智能计算平台接入。
        </div>
        <div class="ui tags nowrap am-mt-10">						
            <a class="ui small label topic" href="/explore/repos?q=ai%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7&amp;topic=">ai开发工具</a>								
            <a class="ui small label topic" href="/explore/repos?q=openi&amp;topic=">openi</a>								
            <a class="ui small label topic" href="/explore/repos?q=golang&amp;topic=">golang</a>								
            <a class="ui small label topic" href="/explore/repos?q=git&amp;topic=">git</a>								
            <a class="ui small label topic" href="/explore/repos?q=pcl&amp;topic=">pcl</a>								
        </div>
    </div>
</div>
</div>
*/
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=\"star icon\"></i>" + record["NumStars"];
            html += "           </span>";
            html += "           <img class=\"left floated mini ui image\" src=\"" + record["Avatar"] + "\">";
            html += "           <a class=\"header nowrap\" href=\"/" + record["OwnerName"] + "/" + record["Name"] + "\">" + record["Name"]  +"</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="
                    url = escape(url);
                    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();
}

/**
 * 
 *        <div class="column">
                        <div class="ui fluid card">
                            <div class="content">
                                <div class="ui small header">
                                    <img class="ui image" src="/user/avatar/OpenI/-1">
                                    <div class="content nowrap">
                                        <a href="/OpenI">OpenI</a> 启智社区
                                        <div class="sub header">39 项目 ･ 60 成员 ･ 23 团队</div>
                                    </div>
                                </div>
                            </div>
                        </div>
            </div>
                    
 */

//var repoAndOrgZH = new Map([['1', "项目"], ['2', "成员"], ['3', "团队"]]);
//var repoAndOrgEN = new Map([['1', "Repository"], ['2', "Members"], ['3', "Teams"]]);


function getRepoOrOrg(key,isZhLang){
    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=\"column\">";
            html += "   <div 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 += "                       <a href=\"/" + record["Name"] + "\">" + record["Name"]  +  "</a> " + record["FullName"];
            html += "                       <div class=\"sub header\">" + record["NumRepos"] +" " + getRepoOrOrg(1,isZh) + " ･ " + record["NumMembers"] +" " + getRepoOrOrg(2,isZh) + " ･ " + record["NumTeams"] + " " + getRepoOrOrg(3,isZh) + "</div>";
            html += "               </div>";
            html += "           </div>";
            html += "       </div>";
            html += "    </div>";
            html += "</div>";
        }
    }
    orgDiv.innerHTML = html;
}