generators/org.eclipse.vorto.codegen.examples/src/org/eclipse/vorto/codegen/examples/webdevice/tasks/templates/IndexHtmlFileTemplate.xtend - vorto/org.eclipse.vorto - Git at Google

 /*******************************************************************************
  * 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>
 		'''
 	}
 }
	/*******************************************************************************
	* 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»
	<button type="button" value="«operation.methodName»" title="«operation.description»" onClick="javascript:invokeOperation('«operation.methodName»')">«WordSeperator.splitIntoWords(operation.methodName)»</button>
	«ENDFOR»
	</td>
	</tr>
	</table>
	</body>
	</html>
	'''
	}
	}