| /******************************************************************************* |
| * 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> |
| ''' |
| } |
| } |