ApacheCMDA_Frontend_1.0/app/views/recommendationSummary.scala.html

@(climateServices: List[ClimateService], dataSets: List[Dataset], users: List[User])

@import helper._

@scripts = {
	<script type="text/javascript">
	$(document).ready(function(){
		$('#myTabs a').click(function (e) {
			  e.preventDefault()
			  $(this).tab('show')
		})
	});
	</script>
}

@main("Climate Services", scripts) {
	 
    <h1>Recommendation</h1>
    
    <div>
	  <!-- Nav tabs -->
	  <ul class="nav nav-tabs" role="tablist">
	    <li role="presentation" class="active"><a href="#mostPopService" aria-controls="home" role="tab" data-toggle="tab">Most Popular Service</a></li>
	    <li role="presentation"><a href="#mostPopDataset" aria-controls="profile" role="tab" data-toggle="tab">Most Popular Dataset</a></li>
	    <li role="presentation"><a href="#mostActUsers" aria-controls="messages" role="tab" data-toggle="tab">Most Active User</a></li>
	    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
	  </ul>	
	  <!-- Tab panes -->
	  <div class="tab-content">
	    <div role="tabpanel" class="tab-pane active" id="mostPopService">
				<table class="table table-striped table-bordered table-condensed ex2">
					<tr>
						<td class="col-md-2">Climate Service Name</td>
						<td class="col-md-2">Purpose</td>
						<td class="col-md-4">Url</td>
						<td class="col-md-2">Scenario</td>
						<td class="col-md-2">Version</td>
						<td class="col-md-2">Root_Service</td>						  
					</tr>
					
					@for(climateService <- climateServices){
					<tr>
						<td><a href = "@climateService.getUrl()">@climateService.getName()</a></td>
				
						<td><span class="@climateService.getName() editable" data-name='purpose'>
								@climateService.getPurpose() </span></td>
						
						<td><span class="@climateService.getName() editable" id = "url" data-name='url'>
								<a href = "@climateService.getUrl()">
								@climateService.getUrl()</a> </span></td>
								
						<td><span class="@climateService.getName() editable" data-name='scenario'>
								@climateService.getScenario() </span></td>
								
						<td><span class="@climateService.getName() editable" data-name='versionNo'>
								@climateService.getVersionNo() </span></td>
								
						<td><span class="@climateService.getName() editable" data-name='rootServiceId'>
								@climateService.getRootServiceId() </span></td>						
					</tr>
					}
			    </table>
    	</div>
    	
	    <div role="tabpanel" class="tab-pane" id="mostPopDataset">
				<table class="table table-striped table-bordered table-condensed ex2 tablesorter" >
					<thead>
					<tr>
						<!--  
						<th style = "vertical-align: top;" class="col-md-1 header">Id</th>
						-->
						<th style = "vertical-align: top;" class="col-md-2">Dataset Name</th>
						<th style = "vertical-align: top;" class="col-md-1">Agency</th>
						<th style = "vertical-align: top;" class="col-md-1">Instrument/Model Experiment</th>
						<th style = "vertical-align: top;" class="col-md-2">Physical variable</th>
						<th style = "vertical-align: top;" class="col-md-1">Variable short name</th>
						<th style = "vertical-align: top;" class="col-md-1">Units</th>
						<th style = "vertical-align: top;" class="col-md-1">Grid Dimension</th>
						<!--  
						<th style = "vertical-align: top;" class="col-md-3">Source</th> 
						<th style = "vertical-align: top;" class="col-md-3">Status</th>
						<th style = "vertical-align: top;" class="col-md-4">Responsible Person</th>
						<th style = "vertical-align: top;" class="col-md-4">Data Source Name in Web Interface</th> 
						-->
						<th style = "vertical-align: top;" class="col-md-2">Variable Name in Web Interface</th>
						<th style = "vertical-align: top;" class="col-md-1">Data Source Input Parameter</th>
						<!-- <th style = "vertical-align: top;" class="col-md-3">Variable Name Input Parameter</th> -->
						<th style = "vertical-align: top;" class="col-md-1">Dataset Start Time</th>
						<th style = "vertical-align: top;"class="col-md-1">Dataset End Time</th>
						<th style = "vertical-align: top;"class="col-md-1">Duration</th>
					</tr>
					</thead>
					<tbody>
					@for(dataSet <- dataSets){
					<tr>
						<!--  
						<td><font size="2">@dataSet.getId()</font></td> 
						-->
						<td><font size="2">@dataSet.getName()</font></td>
						<td><font size="2">@dataSet.getAgencyId()</font></td>
						<td><font size="2">@dataSet.getInstrument()</font></td>
						<td><font size="2">@dataSet.getPhysicalVariable()</font></td>
						<td><font size="2">@dataSet.getCMIP5VarName()</font></td>
						<td><font size="2">@dataSet.getUnits()</font></td>
						<td><font size="2">@dataSet.getGridDimension()</font></td>
						<!--
						<td><font size="2">@dataSet.getSource()</font></td>
						<td><font size="2">@dataSet.getStatus()</font></td>
						<td><font size="2">@dataSet.getResponsiblePerson()</font></td>
						<td><font size="2">@dataSet.getDataSourceNameinWebInterface()</font></td>
						-->
						<td><font size="2">@dataSet.getVariableNameInWebInterface()</font></td>
						<td><font size="2">@dataSet.getDataSourceInputParameterToCallScienceApplicationCode()</font></td>
						<!--<td><font size="2">@dataSet.getVariableNameInputParameterToCallScienceApplicationCode()</font></td> -->
						<td><font size="2">@dataSet.getStartTime()</font></td>
						<td><font size="2">@dataSet.getEndTime()</font></td>
						<td><font size="2">@dataSet.getDuration()</font></td>						
					</tr>					
					}
					</tbody>
				    </table>
		
		</div>
	    <div role="tabpanel" class="tab-pane" id="mostActUsers">

			<table class="table table-striped table-bordered table-condensed ex2">
				<tr>
					<td class="col-md-1">Id</td>
					<td class="col-md-2">User Name</td>
					<td class="col-md-2">First Name</td>
					<td class="col-md-2">Middle Name</td>
					<td class="col-md-2">Last Name</td>
					<td class="col-md-2">Afflication</td>
					<td class="col-md-4">Email</td>
					<td class="col-md-2">Research Area</td>
					
				</tr>
				@for(user <- users){
				<tr>
					<td>@user.getId()</td>
					
					<td><span class="@user.getId() editable" data-name='username'>@user.getUserName()</span></td>
							
					<td><span class="@user.getId() editable" data-name='firstName'>@user.getFirstName()</span></td>
							
					<td><span class="@user.getId() editable" data-name='middleInitial'>@user.getMiddleInitial()</span></td>
							
					<td><span class="@user.getId() editable" data-name='lastName'>@user.getLastName()</span></td>
					
					<td><span class="@user.getId() editable" data-name='affiliation'>@user.getAffiliation()</span></td>
							
					<td><span class="@user.getId() editable" data-name='email'>@user.getEmail()</span></td>
							
					<td><span class="@user.getId() editable" data-name='researchFields'>@user.getResearchFields()</span></td>
						
				</tr>
				}
		    </table>
		
		
		
		</div>
	    <div role="tabpanel" class="tab-pane" id="settings">...</div>
	  </div>
	</div>
    
	
 
    
     
}