/*******************************************************************************
 * Copyright (c) 2014 Bosch Software Innovations GmbH and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * and Eclipse Distribution License v1.0 which accompany this distribution.
 *
 * The Eclipse Public License is available at
 * http://www.eclipse.org/legal/epl-v10.html
 * The Eclipse Distribution License is available at
 * http://www.eclipse.org/org/documents/edl-v10.php.
 *
 * Contributors:
 * Bosch Software Innovations GmbH - Please refer to git log
 *
 *******************************************************************************/
 package org.eclipse.vorto.codegen.examples.webdevice.tasks.templates

import org.eclipse.vorto.functionblock.FunctionblockModel
import org.eclipse.vorto.codegen.examples.webdevice.tasks.ModuleUtil
import org.eclipse.vorto.codegen.api.tasks.ITemplate

class IndexHtmlFileTemplate implements ITemplate {
	override getContent(FunctionblockModel model) {
		'''
		<html>
			<head>
				<style>
					#idPropertiesContainerTable {
					background-color: rgba(255,255,255,0.65);
					border-radius: 20px;
					padding:20px;
					-webkit-box-shadow: 0px 3px 2px 0px rgba(30, 103, 157, 0.5);
					-moz-box-shadow:    0px 3px 2px 0px rgba(30, 103, 157, 0.5);
					box-shadow:         0px 3px 2px 0px rgba(30, 103, 157, 0.5);
				}
				
				body {
					font-family: Arial;
					background-color: #dfebfa !important;
					background-image: -webkit-linear-gradient(top, #f2f7fe 0%, #b7c9d9 50%, #dfebfa 100%) !important;
					background: -moz-linear-gradient(top, #f2f7fe 0%, #b7c9d9 50%, #dfebfa 100%) !important;
					}
					
				button {
					border-radius: 2px;
					border: 0px none;
					padding: 6px 12px;
					color: #FFF;
					background: linear-gradient(to bottom, #0081C7 0%, #004986 100%) repeat scroll 0% 0% transparent;
					}
					
				th {
					color: #0D3155;
					}
					
				label {
					display: block;
					margin: 5px;
					color: #333;
					}
					
				fieldset {
					border: 1px solid #0066AD;
					margin-bottom: 8px;
					}
					
				legend {
					color: #0066AD;
					font-size: 14px;
					}
					
				.column{
					float:left;
					}
					
				input[type=text]{
					margin: 3px;
				}
				
				label.display{
					font-weight: bold;
				}
			</style>
			
			<script language="javascript">					
				function displayProperty(propertyName, propertyObject){
					var keys = Object.keys(propertyObject);
					for(var i=0; i<keys.length; i++){
						var key = keys[i];
						var labelId = propertyName + "_id_" + key;
						if(document.getElementById(labelId)){
							document.getElementById(labelId).innerHTML = propertyObject[key]; 		
						}					
					}							
				}
				
				function displayProperties(){
					var instanceJsonValue = httpGet("/«ModuleUtil.getArtifactId(model)»/service/«model.name»/instance");
					var instanceObject = JSON.parse(instanceJsonValue);
					var configurationObject = instanceObject.configuration;
					var statusObject = instanceObject.status;
					var faultObject = instanceObject.fault;
					displayProperty("configuration", configurationObject);	
					displayProperty("status", statusObject);	
					displayProperty("fault", faultObject);	
					
				}
				
				function invokeOperation(operation){
					httpPut("/«ModuleUtil.getArtifactId(model)»/service/«model.name»/" + operation);
					displayProperties();
				}
				
				function httpGet(restUrl)
				{
					var xmlHttp = new XMLHttpRequest();
					xmlHttp.open( "GET", restUrl, false );
					xmlHttp.send( null );
					return xmlHttp.responseText;
				}
				
				function httpPut(restUrl)
				{
					var xmlHttp = new XMLHttpRequest();
					xmlHttp.open("PUT", restUrl, false);
					xmlHttp.setRequestHeader("Content-Type", "text/plain");
					xmlHttp.send(null);
				}
			</script>
		</head>
		<body onload="displayProperties();" >
			<table border="0" align="center" width="75%">
				<tr>
					<th>«model.name»</th>
				</tr>
				<tr>
					<td>
						<fieldset id="configurationFs">
							<legend>Configuration:</legend>
							«IF model.functionblock.configuration!=null && model.functionblock.configuration.properties.size>0»
							<table border="0" align="center" width="100%">
								«var i=0»
								«FOR configuration : model.functionblock.configuration.properties»
								«IF i%2==0»
									<tr>
								«ENDIF»
									<td  width="20%"><label>«WordSeperator.splitIntoWords(configuration.propName)»:</label></td>
									<td width="30%"><label id="configuration_id_«configuration.propName»" class="display"></label></td>
								«IF  (i==model.functionblock.configuration.properties.size-1) && (model.functionblock.configuration.properties.size%2==1)»
										<td  width="20%"><label></td>
										<td  width="30%"><label></td>
									</tr>
								«ENDIF»
								«IF i++%2==1»
									</tr>
								«ENDIF»
								«ENDFOR»
							</table>
							«ELSE»
							<div class="column">
								<label>No configuration information is available</label>
							</div>
							«ENDIF»
						</fieldset>
					</td>
				</tr>
				<tr>
					<td>
						<fieldset id="statusFs">
							<legend>Status:</legend>
							«IF  model.functionblock.status!=null && model.functionblock.status.properties.size>0»
							<table border="0" align="center" width="100%">
							«var i=0»
							«FOR status : model.functionblock.status.properties»
							«IF i%2==0»
								<tr>
							«ENDIF»
								<td  width="20%"><label>«WordSeperator.splitIntoWords(status.propName)»:</label></td>
								<td width="30%"><label id="status_id_«status.propName»" class="display"></label></td>
							«IF (i==model.functionblock.status.properties.size-1) && (model.functionblock.status.properties.size%2==1)»
								<td  width="20%"><label></td>
								<td  width="30%"><label></td>
								</tr>
							«ENDIF»
							«IF i++%2==1»
								</tr>
							«ENDIF»
							«ENDFOR»
							</table>
							«ENDIF»
						</fieldset>
					</td>
				</tr>
				<tr>
					<td>
						<fieldset id="faultFs">
							<legend>Fault:</legend>
							«IF  model.functionblock.fault!=null && model.functionblock.fault.properties.size>0»
							<table border="0" align="center" width="100%">
							«var i=0»
							«FOR fault : model.functionblock.fault.properties»
							«IF i%2==0»
								<tr>
							«ENDIF»
								<td  width="20%"><label>«WordSeperator.splitIntoWords(fault.propName)»:</label></td>
								<td width="30%"><label id="fault_id_«fault.propName»" class="display"></label></td>
							«IF (i==model.functionblock.fault.properties.size-1) && (model.functionblock.fault.properties.size%2==1)»
									<td  width="20%"><label></td>
									<td  width="30%"><label></td>
								</tr>
							«ENDIF»
							«IF i++%2==1»
								</tr>
							«ENDIF»
							«ENDFOR»
							</table>
							«ENDIF»
						</fieldset>
					</td>
				</tr>
				<tr>
					<td align="center">
					«FOR operation : model.functionblock.features»
						&nbsp;<button type="button" value="«operation.methodName»" title="«operation.description»" onClick="javascript:invokeOperation('«operation.methodName»')">«WordSeperator.splitIntoWords(operation.methodName)»</button>&nbsp;
					«ENDFOR»
					</td>
				</tr>
			</table>
		</body>
		</html>
		'''
	}	
}