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 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 = 10;
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=" + data.ID)
        var html = "";
        if (data != null){
            console.log("queue length=" + messageQueue.length);
            if(messageQueue.length > maxSize){
                delete messageQueue[0];
            }else{
                messageQueue.push(data);
            }
            for(var i = 0; i < messageQueue.length;i++){
                var record = messageQueue[i];
                
                html += "<div class=\"swiper-slide item\">";
                html += "  <img class=\"ui avatar image\" src=\"/user/avatar/" + record.ActUser.lowerName + "/-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);
                html += actionName;
                if(record.OpType == "6" || record.OpType == "10" || record.OpType == "12" || record.OpType == "13"){
                    html += " <a href=\"" + getIssueLink(record) + "\" rel=\"nofollow\">" + getIssueText(record) + "</a>" 
                }
                if(record.OpType == "7" || record.OpType == "11" || record.OpType == "14" || record.OpType == "15"){
                    html += " <a href=\"" + getPRLink(record) + "\" rel=\"nofollow\">" + getPRText(record) + "</a>" 
                }

                if(record.Repo != null){
                   var time = getTime(record.Repo.UpdatedUnix);
                   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;
};

function getTime(UpdatedUnix){
    return "10分钟前";
}

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/" + record.ID
}
function getIssueText(record){
    return   record.Repo.OwnerName + "/" + record.Repo.Name + "#" + record.ID
}

/*
    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":"拒绝了合并请求"
};

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"
};

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;
}

/**
 * 
 *        <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;
}