bundles/org.eclipse.vorto.fbeditor.tests/src/org/eclipse/vorto/codegen/examples/webdevice/tests/templates/IndexHtmlFileTemplateTest.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.tests.templates

 import org.eclipse.vorto.codegen.examples.webdevice.tasks.templates.IndexHtmlFileTemplate
 import org.eclipse.vorto.codegen.examples.webdevice.tests.tasks.TestFunctionblockModelFactory
 import org.junit.Test

 import static org.junit.Assert.assertEquals

 class IndexHtmlFileTemplateTest {

 	@Test
 	def testGeneration() {
 		var model = TestFunctionblockModelFactory.populateFBmodelWithProperties();

 		var result = new IndexHtmlFileTemplate().getContent(model);
 		assertEquals(fetchExpected, result);
 	}

 	private def String fetchExpected() {
 		'''<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("/fridge-webapp/service/Fridge/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("/fridge-webapp/service/Fridge/" + 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>Fridge</th>
 		</tr>
 		<tr>
 			<td>
 				<fieldset id="configurationFs">
 					<legend>Configuration:</legend>
 					<table border="0" align="center" width="100%">
 						<tr>
 							<td  width="20%"><label>Test String:</label></td>
 							<td width="30%"><label id="configuration_id_testString" class="display"></label></td>
 							<td  width="20%"><label>Test Short:</label></td>
 							<td width="30%"><label id="configuration_id_testShort" class="display"></label></td>
 						</tr>
 						<tr>
 							<td  width="20%"><label>Test Int:</label></td>
 							<td width="30%"><label id="configuration_id_testInt" class="display"></label></td>
 							<td  width="20%"><label></td>
 							<td  width="30%"><label></td>
 						</tr>
 					</table>
 				</fieldset>
 			</td>
 		</tr>
 		<tr>
 			<td>
 				<fieldset id="statusFs">
 					<legend>Status:</legend>
 					<table border="0" align="center" width="100%">
 					<tr>
 						<td  width="20%"><label>Test String:</label></td>
 						<td width="30%"><label id="status_id_testString" class="display"></label></td>
 						<td  width="20%"><label>Test Short:</label></td>
 						<td width="30%"><label id="status_id_testShort" class="display"></label></td>
 					</tr>
 					<tr>
 						<td  width="20%"><label>Test Int:</label></td>
 						<td width="30%"><label id="status_id_testInt" class="display"></label></td>
 						<td  width="20%"><label>Test Long:</label></td>
 						<td width="30%"><label id="status_id_testLong" class="display"></label></td>
 					</tr>
 					<tr>
 						<td  width="20%"><label>Test Float:</label></td>
 						<td width="30%"><label id="status_id_testFloat" class="display"></label></td>
 						<td  width="20%"><label>Test Double:</label></td>
 						<td width="30%"><label id="status_id_testDouble" class="display"></label></td>
 					</tr>
 					<tr>
 						<td  width="20%"><label>Test Datetime:</label></td>
 						<td width="30%"><label id="status_id_testDatetime" class="display"></label></td>
 						<td  width="20%"><label>Test Byte:</label></td>
 						<td width="30%"><label id="status_id_testByte" class="display"></label></td>
 					</tr>
 					<tr>
 						<td  width="20%"><label>Test Base64:</label></td>
 						<td width="30%"><label id="status_id_testBase64" class="display"></label></td>
 						<td  width="20%"><label>Test Boolean:</label></td>
 						<td width="30%"><label id="status_id_testBoolean" class="display"></label></td>
 					</tr>
 					</table>
 				</fieldset>
 			</td>
 		</tr>
 		<tr>
 			<td>
 				<fieldset id="faultFs">
 					<legend>Fault:</legend>
 					<table border="0" align="center" width="100%">
 					<tr>
 						<td  width="20%"><label>Is Fault:</label></td>
 						<td width="30%"><label id="fault_id_isFault" class="display"></label></td>
 						<td  width="20%"><label></td>
 						<td  width="30%"><label></td>
 					</tr>
 					</table>
 				</fieldset>
 			</td>
 		</tr>
 		<tr>
 			<td align="center">
 			&nbsp;<button type="button" value="on" title="Turn device on" onClick="javascript:invokeOperation('on')">On</button>&nbsp;
 			&nbsp;<button type="button" value="Off" title="Turn device off" onClick="javascript:invokeOperation('Off')">Off</button>&nbsp;
 			&nbsp;<button type="button" value="Toggle" title="Toggle device" onClick="javascript:invokeOperation('Toggle')">Toggle</button>&nbsp;
 			</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.tests.templates

	import org.eclipse.vorto.codegen.examples.webdevice.tasks.templates.IndexHtmlFileTemplate
	import org.eclipse.vorto.codegen.examples.webdevice.tests.tasks.TestFunctionblockModelFactory
	import org.junit.Test

	import static org.junit.Assert.assertEquals

	class IndexHtmlFileTemplateTest {

	@Test
	def testGeneration() {
	var model = TestFunctionblockModelFactory.populateFBmodelWithProperties();

	var result = new IndexHtmlFileTemplate().getContent(model);
	assertEquals(fetchExpected, result);
	}

	private def String fetchExpected() {
	'''<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("/fridge-webapp/service/Fridge/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("/fridge-webapp/service/Fridge/" + 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>Fridge</th>
	</tr>
	<tr>
	<td>
	<fieldset id="configurationFs">
	<legend>Configuration:</legend>
	<table border="0" align="center" width="100%">
	<tr>
	<td width="20%"><label>Test String:</label></td>
	<td width="30%"><label id="configuration_id_testString" class="display"></label></td>
	<td width="20%"><label>Test Short:</label></td>
	<td width="30%"><label id="configuration_id_testShort" class="display"></label></td>
	</tr>
	<tr>
	<td width="20%"><label>Test Int:</label></td>
	<td width="30%"><label id="configuration_id_testInt" class="display"></label></td>
	<td width="20%"><label></td>
	<td width="30%"><label></td>
	</tr>
	</table>
	</fieldset>
	</td>
	</tr>
	<tr>
	<td>
	<fieldset id="statusFs">
	<legend>Status:</legend>
	<table border="0" align="center" width="100%">
	<tr>
	<td width="20%"><label>Test String:</label></td>
	<td width="30%"><label id="status_id_testString" class="display"></label></td>
	<td width="20%"><label>Test Short:</label></td>
	<td width="30%"><label id="status_id_testShort" class="display"></label></td>
	</tr>
	<tr>
	<td width="20%"><label>Test Int:</label></td>
	<td width="30%"><label id="status_id_testInt" class="display"></label></td>
	<td width="20%"><label>Test Long:</label></td>
	<td width="30%"><label id="status_id_testLong" class="display"></label></td>
	</tr>
	<tr>
	<td width="20%"><label>Test Float:</label></td>
	<td width="30%"><label id="status_id_testFloat" class="display"></label></td>
	<td width="20%"><label>Test Double:</label></td>
	<td width="30%"><label id="status_id_testDouble" class="display"></label></td>
	</tr>
	<tr>
	<td width="20%"><label>Test Datetime:</label></td>
	<td width="30%"><label id="status_id_testDatetime" class="display"></label></td>
	<td width="20%"><label>Test Byte:</label></td>
	<td width="30%"><label id="status_id_testByte" class="display"></label></td>
	</tr>
	<tr>
	<td width="20%"><label>Test Base64:</label></td>
	<td width="30%"><label id="status_id_testBase64" class="display"></label></td>
	<td width="20%"><label>Test Boolean:</label></td>
	<td width="30%"><label id="status_id_testBoolean" class="display"></label></td>
	</tr>
	</table>
	</fieldset>
	</td>
	</tr>
	<tr>
	<td>
	<fieldset id="faultFs">
	<legend>Fault:</legend>
	<table border="0" align="center" width="100%">
	<tr>
	<td width="20%"><label>Is Fault:</label></td>
	<td width="30%"><label id="fault_id_isFault" class="display"></label></td>
	<td width="20%"><label></td>
	<td width="30%"><label></td>
	</tr>
	</table>
	</fieldset>
	</td>
	</tr>
	<tr>
	<td align="center">
	<button type="button" value="on" title="Turn device on" onClick="javascript:invokeOperation('on')">On</button>
	<button type="button" value="Off" title="Turn device off" onClick="javascript:invokeOperation('Off')">Off</button>
	<button type="button" value="Toggle" title="Toggle device" onClick="javascript:invokeOperation('Toggle')">Toggle</button>
	</td>
	</tr>
	</table>
	</body>
	</html>
	'''
	}
	}