aiforge/templates/org/home_courses.tmpl

<style>
	.organization-info_1000{
		background: #F5F5F6 !important;

	}
	.organization-info >.container {
		overflow: auto;
		background: #f5f5f6 !important;
		padding-top: 30px;
		padding-bottom: 20px;
		background-size: cover;
		border-radius: 5px;
		border: none !important
	}

	.organization.profile #org-avatar {
		border:none !important
	}
	.desc {
		font-size: 14px;
		margin-bottom: 10px !important;
    }
	.item {
		display: inline-block;
		margin-right: 10px;
    }
	.item .icon {
      	margin-right: 5px;
    }
	.organization-info >.container {
		padding-bottom:0px !important;
	}
	.tag_bg{
		background-color: #0366D6 !important;
		color:#FFFFFF !important;
	}
	.course{
		padding: 10px 15px !important;
	}
	.course_color{
		color: #FA8C16;
	}
	.tag_lable{
		border: 1px solid rgba(232, 232, 232, 100) ;
		border-radius: 4px;
		color: rgba(65, 80, 88, 100);
		font-family: Microsoft Yahei;
		font-size: 14px;
		padding: 0.3em 0.5em;
		height: 30px;
		text-align: center;
		margin: 0.2em;
	}
	.tag_lable_first{
		border: 1px solid rgba(232, 232, 232, 100) ;
		border-radius: 4px;
		color: rgba(65, 80, 88, 100);
		font-family: Microsoft Yahei;
		font-size: 14px;
		padding: 0.3em 0.5em;
		height: 30px;
		text-align: center;
		margin: 0.2em;
		margin-left: none;
	}

</style>
{{template "base/head" .}}
<div class="organization profile">
	{{/* overflow: auto is the clearfix - this avoids the image going beyond
	the container where it is supposed to stay inside. */}}
	<!-- <div class="organization-info">
		<div class="ui center aligned container " style="overflow: auto">
			<img class="ui circular image" id="org-avatar" src="{{.Org.SizedRelAvatarLink 140}}"/>
			<div id="org-info">
				<div class="ui header">
					{{.Org.DisplayName}}
					{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16}}</a>{{end}}
				</div>
				{{if .Org.Description}}<p class="text grey desc">{{.Org.Description}}</p>{{end}}
				<div class="meta">
					{{if .Org.Location}}<div class="item">{{svg "octicon-location" 16}} <span>{{.Org.Location}}</span></div>{{end}}
					{{if .Org.Website}}<div class="item">{{svg "octicon-link" 16}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
				</div>
			</div>
		</div>
	</div> -->

	<div class="organization-info organization-info_1000">
		<div class="ui center aligned container " style="overflow: auto">
			<img class="ui left  image" id="org-avatar" src="{{.Org.SizedRelAvatarLink 140}}"/>
			<div class="content"  style="text-align: left;margin-left:100px" >
				<div class="ui header" >
					{{.Org.DisplayName}}
					<!-- {{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16}}</a>{{end}} -->
				</div>
				<div class="description" >
					{{if .Org.Description}}<p class="text grey desc">{{.Org.Description}}</p>{{end}}
				</div>
				
				<div class="meta" style="display: inline-flex;">
					{{if .Org.Location}}<div class="item">{{svg "octicon-location" 16}} <span>{{.Org.Location}}</span></div>{{end}}
					{{if .Org.Website}}<div class="item">{{svg "octicon-link" 16}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
				</div>
			</div>
		</div>
		<div class="ui tabs container">
			<div class="ui tabular stackable menu navbar">
				{{with .Org}}
					<a class="{{if $.PageIsOrgHome}}active{{end}} item " href="{{.HomeLink}}">
						{{svg "octicon-home" 16}}&nbsp;{{$.i18n.Tr "org.home"}}
					</a>
				{{end}}
				<a class="{{if $.PageIsOrgMembers}}active{{end}} item" href="{{$.OrgLink}}/members">
					{{svg "octicon-organization" 16}}&nbsp;{{$.i18n.Tr "org.people"}}
				</a>
				{{if or ($.IsOrganizationMember) ($.IsOrganizationOwner)}}
					<a class="{{if $.PageIsOrgTeams}}active{{end}} item" href="{{$.OrgLink}}/teams">
						{{svg "octicon-jersey" 16}}&nbsp;{{$.i18n.Tr "org.teams"}}
					</a>
				{{end}}
				{{if .IsOrganizationOwner}}<a class="right text grey item" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16}} &nbsp;组织设置</a>{{end}}
			</div>

		</div>

	</div>
		<!-- <div class="ui  container " style="overflow: auto">
			<img class="ui left  image" id="org-avatar" src="{{.Org.SizedRelAvatarLink 140}}"/>
			<p id="org-info">
				<div class="ui header">
					{{.Org.DisplayName}}
					{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16}}</a>{{end}}
				</div>
				{{if .Org.Description}}<p class="text grey desc">{{.Org.Description}}</p>{{end}}
				<div class="meta">
					{{if .Org.Location}}<div class="item">{{svg "octicon-location" 16}} <span>{{.Org.Location}}</span></div>{{end}}
					{{if .Org.Website}}<div class="item">{{svg "octicon-link" 16}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
				</div>
			</p>
		</div> -->

	<div class="ui container">

		<!-- 新增 -->
		<div class="ui stackable grid">	
		
			<div class="ui sixteen wide computer column">
				<div class="ui mobile reversed stackable grid">
					<div class="ui ten wide tablet eleven wide computer column" id='tag'>
						<a class="ui small lable tag_lable topic tag_bg" style="margin-left: 0px;" >全部关键字</a>
                        {{range .CoursesKeywords}}
                            <a class="ui small lable tag_lable topic" >{{.}}</a>
                        {{end}}
					</div>
				
					<div class="ui sixteen wide mobile six wide tablet five wide computer column">
						<!-- {{if .CanCreateOrgRepo}} -->
							<div class="text center" style="margin-left: 10px;">
								<a class="ui green button" href="{{AppSubUrl}}/repo/create?org={{.Org.ID}}"><i class="ri-folder-add-line" style="vertical-align: middle;"></i> &nbsp;发布课程{{.i18n.Tr "new_repo"}} </a>
							</div>
						<!-- {{end}} -->
					</div>
				</div>
			</div>
		</div>

		<!-- 全部 -->

		<div class="ui stackable grid">	
		
			<div class="ui sixteen wide computer column">
				<div class="ui mobile reversed stackable grid">
					<div class="ui ten wide tablet eleven wide computer column">
						<!-- {{if .CanCreateOrgRepo}}
							<div class="text right">
								<a class="ui green button" href="{{AppSubUrl}}/repo/create?org={{.Org.ID}}">{{.i18n.Tr "new_repo"}}</a>
							</div>
						{{end}} -->
						{{template "org/course_list" .}}
						{{template "base/paginate" .}}
					</div>

					<div class="ui sixteen wide mobile six wide tablet five wide computer column">

						<h4 class="ui top attached header">
							<strong>{{.i18n.Tr "org.selected_couse"}}</strong>
							<div class="ui right">
								<a class="text grey"  id="model" onclick="showcreate()">{{svg "octicon-gear" 16}}</a>
							</div>
							<!-- {{if .IsOrganizationMember}} -->
								
							<!-- {{end}} -->
						</h4>
               
						<div class="ui attached table segment course items">
							{{range $i, $v := .RecommendCourses}}
			
								{{if gt $i 0}}
									<div class="ui divider" style="margin-bottom:10px;"></div>
								{{end}}
								<div class="item">
									<i class="ri-bookmark-3-line course_color" ></i>
									<div class="content"  style="margin-left: 10px;">
										<a href="{{$.OrgLink}}/teams/{{.LowerName}}"><strong class="team-name">{{.Alias}}</strong></a>
										<p class="text grey">
											贡献者：{{.Creator.Name}}
										</p>
									</div>
								</div>
								<!-- <div class="ui divider"></div> -->
							{{end}}
							
						
						</div>

						
						<h4 class="ui top attached header">
							<strong>{{.i18n.Tr "org.people"}}</strong>
							<div class="ui right">
								<a class="text grey" href="{{.OrgLink}}/members">{{.MembersTotal}} {{svg "octicon-chevron-right" 16}}</a>
							</div>
							<!-- {{if .IsOrganizationMember}} -->
								
							<!-- {{end}} -->
						</h4>
						<div class="ui attached segment members">
							{{$isMember := .IsOrganizationMember}}
							{{range .Members}}
								{{if or $isMember (.IsPublicMember $.Org.ID)}}
									<a href="{{.HomeLink}}" title="{{.Name}}{{if .FullName}} ({{.FullName}}){{end}}"><img class="ui avatar" src="{{.RelAvatarLink}}"></a>
								{{end}}
							{{end}}

                            <div style="text-align: center;margin-top: 5px;"> 
                                <a class="ui blue basic button" href="{{.OrgLink}}/teams/new"> <i class="ri-user-add-line"></i> {{.i18n.Tr "org.teams.join_teams"}}</a>
                            </div>
						</div>

						{{if .IsOrganizationMember}}
							<div class="ui top attached header">
								<strong>{{.i18n.Tr "org.teams"}}</strong>
								<div class="ui right">
									<a class="text grey" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right" 16}}</a>
								</div>
							</div>
							<div class="ui attached table segment teams">
								{{range .Teams}}
									<div class="item">
										<a href="{{$.OrgLink}}/teams/{{.LowerName}}"><strong class="team-name">{{.Name}}</strong></a>
										<p class="text grey">
											<a href="{{$.OrgLink}}/teams/{{.LowerName}}"><strong>{{.NumMembers}}</strong> {{$.i18n.Tr "org.lower_members"}}</a> ·
											<a href="{{$.OrgLink}}/teams/{{.LowerName}}/repositories"><strong>{{.NumRepos}}</strong> {{$.i18n.Tr "org.lower_repositories"}}</a>
										</p>
									</div>
								{{end}}
							</div>
							{{if .IsOrganizationOwner}}
								<div class="ui bottom attached segment">
									<a class="ui blue small button" href="{{.OrgLink}}/teams/new">{{.i18n.Tr "org.create_new_team"}}</a>
								</div>
							{{end}}
						{{end}}
					</div>
				</div>
			</div>
			
		</div>
	</div>
</div>

<div class="ui modal">
    <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
        <h4 id="model_header">自定义精选课程</h4>
    </div>
    <div class="content content-padding" style="color: black;">
        <p>最多可选9个公开项目</p>
        <div class="ui search" >
            <div class="ui input" style="width: 100%;">
                <input  type="text" id = 'search_selectPro' placeholder="Search ..." value = '' oninput="search()">
            </div>
        </div>
        <div style="margin: 10px ;">
            <div id ='org_list' style="margin-bottom: 20px;"class="content_list" >

            </div>     
        </div>
        <p id='recommend'></p>
       
        <div class="inline field" style="margin-left: 37%;">
            <div class="actions">
                <button id="submitId" type="button" class="ui create_train_job green deny button"  onclick="saveSeletedPro(1)">
                    {{.i18n.Tr "explore.save"}}
                </button>
                <button class="ui button cancel" >{{.i18n.Tr "explore.cancel"}}</button>
            </div>
        </div> 
         
    </div>

</div>

{{template "base/footer" .}}
<script>
	// var div = document.getElementsByClassName("ui ten wide tablet eleven wide computer column").getElementsByTagName("a");
	// function changeBgcolor(){

	// 	document.getElementsByClassName("ui small lable tag_lable topic tag_bg").className= "ui small lable tag_lable topic";
	// 	// this.classList.add("tag_bg")
	// }

	window.onload = function ()
	{
		var atag =document.getElementById("tag").getElementsByTagName("a");

		var i = 0;
		for (i = 0; i < atag.length; i++)
			{
				atag[i].onclick = function ()
				{
					for (i = 0; i < atag.length; i++)
						atag[i].className = "ui small lable tag_lable topic";
						this.className = "ui small lable tag_lable topic tag_bg";
				};
		}
	};

    var data;
    var filterData=[];
    var num=0;

    function showcreate(obj){
        document.getElementById("search_selectPro").value=''
        $('.ui.modal')
        .modal({
            centered: false,
            onShow:function(){
                $("#org_list").empty()                
                getPro(1)
                
            },
            onHide:function(){
  
            }
        })
        .modal('show')
    }
    function getPro(typeTag){

        $.ajax({
            type:"GET",
            url:"/org/{{.Org.Name}}/org_tag/repo_list?tagId="+typeTag,
            dataType:"json",
            async:false,
            success:function(json){
                data = json.data;
                var n_length = data.length
                pro_html = getHTML(data)
                $("#org_list").append(pro_html)
                // console.log('原始',data)
                checkedNum(0)
            }
        });
    }
    function getHTML(data){
        let pro_html=''
        for (let i=0;i<data.length;i++){
            if (data[i].Selected==true){
                console.log("data[i]:",data[i])
                pro_html += `<div class="ui checkbox" style="width: 33%;margin-bottom:10px" > <input type="checkbox" id = " ${i}" checked="" onclick="checkedNum(${i})" class="Relist" name ='select_pro_name' data-repoid="${data[i].RepoID}" data-reponame="${data[i].RepoName}"  data-selected=${data[i].Selected} > <label class='omit image poping up' data-content=${data[i].RepoName}  data-position="top left " data-variation="mini"> ${data[i].RepoName}</label></div>`
                pro_html += '</div>'
            }
            else{
                pro_html += `<div class="ui checkbox" style="width: 33%;margin-bottom:10px" > <input type="checkbox" id = "${i}"  onclick="checkedNum(${i})" class="Relist" name ='select_pro_name' data-repoid="${data[i].RepoID}" data-reponame="${data[i].RepoName}" data-selected= ${data[i].Selected}> <label class='omit image poping up' data-content=${data[i].RepoName}  data-position="top left " data-variation="mini"> ${data[i].RepoName} </label></div>`
                pro_html += '</div>'
            }
        }
        return pro_html
    }
    function saveSeletedPro(typeTag){
        var saveData=[];
        $('input[name="select_pro_name"]:checked').each(function(){
            console.log('值',this.dataset.repoid)

            saveData.push(parseInt(this.dataset.repoid));
        })
        if(saveData.length>9){
            alert("最多可选9个，保存失败")
            return
        }
        // saveData = getSelecteDataID();
        // console.log("数据：",saveData)
        $.ajax({
         type:"POST",
         url:"/org/{{.Org.Name}}/org_tag/repo_submit?tagId="+typeTag,
         contentType:'application/json',
         dataType:"json",
         async:false,
         data:JSON.stringify({'repoList':saveData
               }),        
           success:function(res){
             console.log('保存成功');
             location.reload()  

          }
         });
    }

    function getSelecteData(){
        var selectedData=[];
        $('input[name="select_pro_name"]:checked').each(function(){
            // console.log(this)
            // console.log('值',this.dataset.selected)

            selectedData.push({"RepoID":parseInt(this.dataset.repoid),"RepoName":this.dataset.reponame,"Selected":JSON.parse(this.dataset.selected)});
        })
        return selectedData
    }
    function search(){
        var selectedData = getSelecteData();
        var searchValue = document.getElementById("search_selectPro").value;
        filterData=[];
        console.log("searchValue:",searchValue)
        for (let i=0;i<data.length;i++){
            var isInclude=false; 
            if(data[i].RepoName.toLowerCase().includes(searchValue.toLowerCase())){
                filterData.push(data[i])
            }
        }
        console.log("选中的值:",selectedData)
        console.log("筛选包括选中的值:",filterData)
        var showData=[];
        for(i=0;i<selectedData.length;i++){
            filterData =filterData.filter((item)=>{
                return item.RepoID!=selectedData[i].RepoID
            });
        }
        console.log("筛选后不包括选中的值:",filterData)
        $("#org_list").empty()
        if(searchValue!=""){
            if (filterData.length!=0){
                
                var pro_html = getHTML(selectedData);
                console.log("selectedData_pro_html:",pro_html)
                $("#org_list").append(pro_html)
                pro_html= getHTML(filterData);
                $("#org_list").append(pro_html)
            }else{
                var pro_html = getHTML(selectedData);
                $("#org_list").append(pro_html)
            }
        }else{
            var pro_html = getHTML(data);
            $("#org_list").append(pro_html)
        }
    }

    function checkedNum(id){

        num=0;
        var inputs = document.getElementsByName("select_pro_name")
        for (var i=0;i<inputs.length;i++){
            if(inputs[i].checked){
                num++
                if(num>9){
                    document.getElementById(id).checked=false
                    alert("选择超过9个，请重新选择！")
                    return
                }
            }
                
        }

        var show_num = 9-num;
        document.getElementById("recommend").innerHTML="还能推荐"+show_num+"个"

    }

</script>